React 18.3.0 upgrade (grommet#7257)

* Remove grommet wrapper (grommet#7249) * re-trigger token circle ci * add tests for components outside grommet wrapper * add tests for components outside grommet wrapper * add tests for components outside grommet wrapper * Update src/js/components/Calendar/__tests__/Calendar-test.tsx Co-authored-by: Jessica Filben <[email protected]> * Update src/js/components/FormField/__tests__/FormField-test.js Co-authored-by: Jessica Filben <[email protected]> * Update src/js/components/ThumbsRating/__tests__/ThumbsRating.tsx Co-authored-by: Jessica Filben <[email protected]> * remove data friends tests * remove data friends tests * update tests * update tests --------- Co-authored-by: Brittany Archibeque <[email protected]> Co-authored-by: Jessica Filben <[email protected]> * Remove defaultProps usages for functional components (grommet#7224) * Move default parameters from defaultProps to function definitions * Fix Bar component * Update snapshots * Remove defaultProps from styled components - first iteration * Fix styledWithTheme HOC to return correct function * Fix prototypes for styledWithTheme * Fix theme * Add TODOs * Fix Menu test * Add TODO * Remove TODO * Define hook for theme context with fallback to default one * Pass default props to styled component * Use attrs from styled-components * Update snapshots * Pass theme along with default props * Fix props * Fix syntax * Fix theme in props * Merge props * Rename function * Fix lint errors * Switch from deepMerge to object copy * Fix snapshots * Try upgrading styled-components * Roll back to previous styled-components version * Roll back lockfile * Only pass theme using attrs * Fix snapshots * Rename method * Add comment. DCO Remediation Commit for Max Shepel <[email protected]> I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: cd9a5b7 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 14838be I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 1766eed I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: b5e5d26 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: f005071 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 9f56eca I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 019d28b I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 45f81b2 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: b1ca758 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: be3a510 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: a8ed76e I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: e329a7a I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: ccd1a6c I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 87adfd3 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 164ac90 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 3926bc9 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 1abbf1b I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: bc92022 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 50478dd I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 9e94bce I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 2911f33 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 780ede8 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 74b3e2b I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 58770f0 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 7d584c8 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: b36c664 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: bd1a606 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 86687bf I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 302564b I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 3772235 Signed-off-by: Max Shepel <[email protected]> * Update snapshots * Remove 'only' from test * Remove attrs() usages where it's not required * DCO Remediation Commit for Max Shepel <[email protected]> I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 6cc1019 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 429627c I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 5c80f67 Signed-off-by: Max Shepel <[email protected]> * Fix typo Signed-off-by: Max Shepel <[email protected]> * Add missing attrs() call. Add enhancePropsWithTheme declaration Signed-off-by: Max Shepel <[email protected]> * Fix Menu test Signed-off-by: Max Shepel <[email protected]> * Don't mark values prop of Distribution as required as it has default parameter value Signed-off-by: Max Shepel <[email protected]> * empty commit to tty and trigger chromatic * fix: Storybook - RangeInput/Bounds example (grommet#7244) * fix: Storybook - RangeInput/Bounds example * feedback: use usEeffect for disable buttons * feedback: use usEeffect for disable buttons * fix: lint fix * add tests for components outside grommet wrapper * add tests for components outside grommet wrapper * add tests for components outside grommet wrapper * Add fallback to default theme where it also might be necessary Signed-off-by: Max Shepel <[email protected]> * Revert "add tests for components outside grommet wrapper" This reverts commit 3fd3a11. * Revert "add tests for components outside grommet wrapper" This reverts commit f492adb. * Revert "add tests for components outside grommet wrapper" This reverts commit a954793. * Third-Party DCO Remediation Commit for Basith <[email protected]> On behalf of Basith <[email protected]>, I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 2a4e9ac Signed-off-by: Max Shepel <[email protected]> * Third-Party DCO Remediation Commit for Brittany Archibeque <[email protected]> On behalf of Brittany Archibeque <[email protected]>, I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: a954793 On behalf of Brittany Archibeque <[email protected]>, I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: f492adb On behalf of Brittany Archibeque <[email protected]>, I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 3fd3a11 Signed-off-by: Max Shepel <[email protected]> * Third-Party DCO Remediation Commit for Jessica Filben <[email protected]> On behalf of Jessica Filben <[email protected]>, I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: 60d5ece Signed-off-by: Max Shepel <[email protected]> * DCO Remediation Commit for Max Shepel <[email protected]> I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: a1a5a03 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: a092b71 I, Max Shepel <[email protected]>, hereby add my Signed-off-by to this commit: fa50a41 Signed-off-by: Max Shepel <[email protected]> * Add missing snapshots Signed-off-by: Max Shepel <[email protected]> --------- Signed-off-by: Max Shepel <[email protected]> Co-authored-by: Jessica Filben <[email protected]> Co-authored-by: Basith <[email protected]> Co-authored-by: Brittany Archibeque <[email protected]> * Remove isRequired from propTypes (grommet#7252) * remove isRequired from propTypes * revert unnecessary removals of isRequired * add isrequired to fromTarget and toTarget and link diagram proptypes to the diagram component * refactor routed components for react 19 compatibility (grommet#7253) * Upgrade react version * rename function to withTheme * incorporate review comments --------- Signed-off-by: Max Shepel <[email protected]> Co-authored-by: Brittany <[email protected]> Co-authored-by: Brittany Archibeque <[email protected]> Co-authored-by: Max Shepel <[email protected]> Co-authored-by: Basith <[email protected]>
vaishnavyogesh · Jul 1, 2024 · b8fca58 · b8fca58
1 parent d69cfe3
commit b8fca58
Show file tree

Hide file tree

Showing 277 changed files with 8,998 additions and 5,153 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -61,6 +61,12 @@
     "react/jsx-props-no-spreading": 0,
     "react/jsx-wrap-multilines": 0,
     "react/prop-types": 0,
+    "react/require-default-props": [
+      "error",
+      {
+        "functions": "ignore"
+      }
+    ],
     "react/sort-comp": 0,
     "react/state-in-constructor": 0,
     "react/static-property-placement": 0,

diff --git a/package.json b/package.json
@@ -128,10 +128,10 @@
     "pre-commit": "^1.2.2",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
-    "react": "18.2.0",
+    "react": "^18.3.1",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "18.2.0",
-    "react-is": "18.2.0",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "react-shadow": "^20.4.0",
     "regenerator-runtime": "^0.14.1",
     "require-reload": "^0.2.2",

diff --git a/src/js/__tests__/default-props-test.js b/src/js/__tests__/default-props-test.js
@@ -5,14 +5,13 @@ import 'jest-styled-components';
 
 import { styledComponentsConfig } from '../utils/styles';
 
-import { grommet, defaultProps, extendDefaultTheme, Box, Grommet } from '..';
+import { grommet, extendDefaultTheme, withTheme, Box, Grommet } from '..';
 
-const CustomBox = styled.div.withConfig(styledComponentsConfig)`
+const CustomBox = styled.div
+  .withConfig(styledComponentsConfig)
+  .attrs(withTheme)`
   background: ${(props) => props.theme.global.colors.brand};
 `;
-CustomBox.defaultProps = {};
-Object.setPrototypeOf(CustomBox.defaultProps, defaultProps);
-
 test('default theme is used', () => {
   const { container } = render(<Box background="brand" />);
 

diff --git a/src/js/components/Accordion/__tests__/Accordion-test.tsx b/src/js/components/Accordion/__tests__/Accordion-test.tsx
@@ -42,6 +42,11 @@ describe('Accordion', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('render accordion no grommet wrapper', () => {
+    const { asFragment } = render(<Accordion />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('AccordionPanel', () => {
     const { asFragment } = render(
       <Grommet>

diff --git a/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap b/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap
@@ -6252,6 +6252,23 @@ exports[`Accordion no AccordionPanel 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Accordion render accordion no grommet wrapper 1`] = `
+<DocumentFragment>
+  .c0 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+}
+
+<div
+    class="c0"
+  />
+</DocumentFragment>
+`;
+
 exports[`Accordion should apply level prop to headings 1`] = `
 <DocumentFragment>
   .c8 {

diff --git a/src/js/components/AccordionPanel/AccordionPanel.js b/src/js/components/AccordionPanel/AccordionPanel.js
@@ -1,6 +1,4 @@
 import React, { forwardRef, useContext, useMemo, useState } from 'react';
-import { ThemeContext } from 'styled-components';
-import { defaultProps } from '../../default-props';
 
 import { normalizeColor, parseMetricToNum } from '../../utils';
 import { Box } from '../Box';
@@ -10,6 +8,7 @@ import { Heading } from '../Heading';
 
 import { AccordionContext } from '../Accordion/AccordionContext';
 import { AccordionPanelPropTypes } from './propTypes';
+import { useThemeValue } from '../../utils/useThemeValue';
 
 const AccordionPanel = forwardRef(
   (
@@ -26,7 +25,7 @@ const AccordionPanel = forwardRef(
     },
     ref,
   ) => {
-    const theme = useContext(ThemeContext) || defaultProps.theme;
+    const theme = useThemeValue();
     const { active, animate, level, onPanelChange } =
       useContext(AccordionContext);
     const [hover, setHover] = useState(undefined);
@@ -51,7 +50,7 @@ const AccordionPanel = forwardRef(
     // accordion.hover.color will be deprecated in v3.
     if (JSON.stringify(theme.accordion.hover.color) !== defaultHoverColor)
       console.warn(
-        `The theme style for accordion.hover.color is deprecated, 
+        `The theme style for accordion.hover.color is deprecated,
         use accordion.hover.heading.color instead.`,
       );
 

diff --git a/src/js/components/Anchor/Anchor.js b/src/js/components/Anchor/Anchor.js
@@ -7,9 +7,6 @@ import React, {
   useState,
 } from 'react';
 
-import { ThemeContext } from 'styled-components';
-import { defaultProps } from '../../default-props';
-
 import { findButtonParent, normalizeColor, useSizedIcon } from '../../utils';
 
 import { Box } from '../Box';
@@ -18,6 +15,7 @@ import { StyledAnchor } from './StyledAnchor';
 import { AnchorPropTypes } from './propTypes';
 import { useAnalytics } from '../../contexts/AnalyticsContext';
 import { TextContext } from '../Text/TextContext';
+import { useThemeValue } from '../../utils/useThemeValue';
 
 const Anchor = forwardRef(
   (
@@ -40,7 +38,7 @@ const Anchor = forwardRef(
     },
     ref,
   ) => {
-    const theme = useContext(ThemeContext) || defaultProps.theme;
+    const theme = useThemeValue();
     const [focus, setFocus] = useState();
     const { size } = useContext(TextContext);
     const sendAnalytics = useAnalytics();

diff --git a/src/js/components/Anchor/StyledAnchor.js b/src/js/components/Anchor/StyledAnchor.js
@@ -6,7 +6,7 @@ import {
   normalizeColor,
   styledComponentsConfig,
 } from '../../utils';
-import { defaultProps } from '../../default-props';
+import { withTheme } from '../../default-props';
 
 const disabledStyle = `
   opacity: 0.3;
@@ -29,7 +29,9 @@ const sizeStyle = (props) => {
   `;
 };
 
-const StyledAnchor = styled.a.withConfig(styledComponentsConfig)`
+const StyledAnchor = styled.a
+  .withConfig(styledComponentsConfig)
+  .attrs(withTheme)`
   box-sizing: border-box;
   display: inline-flex;
   ${(props) => sizeStyle(props)}
@@ -80,7 +82,4 @@ const StyledAnchor = styled.a.withConfig(styledComponentsConfig)`
   ${(props) => props.theme.anchor.extend}
 `;
 
-StyledAnchor.defaultProps = {};
-Object.setPrototypeOf(StyledAnchor.defaultProps, defaultProps);
-
 export { StyledAnchor };
diff --git a/src/js/components/Anchor/__tests__/Anchor-test.tsx b/src/js/components/Anchor/__tests__/Anchor-test.tsx
@@ -35,6 +35,11 @@ describe('Anchor', () => {
     expect(container).toMatchSnapshot();
   });
 
+  test('renders anchor without grommet wrapper', () => {
+    const { container } = render(<Anchor />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('renders with children', () => {
     const { container } = render(
       <Grommet>

diff --git a/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap b/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap
@@ -862,6 +862,27 @@ exports[`Anchor renders a11yTitle and aria-label 1`] = `
 </div>
 `;
 
+exports[`Anchor renders anchor without grommet wrapper 1`] = `
+.c0 {
+  box-sizing: border-box;
+  display: inline-flex;
+  font-size: inherit;
+  line-height: inherit;
+  color: #7D4CDB;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c0:hover {
+  text-decoration: underline;
+}
+
+<a
+  class="c0"
+/>
+`;
+
 exports[`Anchor renders size specific theming 1`] = `
 <DocumentFragment>
   .c18 {

diff --git a/src/js/components/Avatar/Avatar.js b/src/js/components/Avatar/Avatar.js
@@ -1,10 +1,9 @@
-import React, { useCallback, useContext, useMemo } from 'react';
-import { ThemeContext } from 'styled-components';
+import React, { useCallback, useMemo } from 'react';
 
 import { Image } from '../Image';
-import { defaultProps } from '../../default-props';
 import { StyledAvatar, StyledAvatarText } from './StyledAvatar';
 import { AvatarPropTypes } from './propTypes';
+import { useThemeValue } from '../../utils/useThemeValue';
 
 const Avatar = ({
   a11yTitle,
@@ -19,7 +18,7 @@ const Avatar = ({
   width, // for warning check and discarding the value
   ...rest
 }) => {
-  const theme = useContext(ThemeContext) || defaultProps.theme;
+  const theme = useThemeValue();
   const avatarSize = theme.avatar.size[size] || size;
   const avatarTextSize = theme.avatar.text.size[size] || 'large';
 

diff --git a/src/js/components/Avatar/StyledAvatar.js b/src/js/components/Avatar/StyledAvatar.js
@@ -1,11 +1,9 @@
 import styled from 'styled-components';
-
-import { defaultProps } from '../../default-props';
-
 import { Box } from '../Box';
 import { Text } from '../Text';
+import { withTheme } from '../../default-props';
 
-const StyledAvatarText = styled(Text)`
+const StyledAvatarText = styled(Text).attrs(withTheme)`
   ${(props) =>
     props.theme.avatar &&
     props.theme.avatar.text &&
@@ -14,14 +12,8 @@ const StyledAvatarText = styled(Text)`
   ${(props) => props.theme.avatar.text && props.theme.avatar.text.extend}
 `;
 
-StyledAvatarText.defaultProps = {};
-Object.setPrototypeOf(StyledAvatarText.defaultProps, defaultProps);
-
-const StyledAvatar = styled(Box)`
+const StyledAvatar = styled(Box).attrs(withTheme)`
   ${(props) => props.theme.avatar && props.theme.avatar.extend}
 `;
 
-StyledAvatar.defaultProps = {};
-Object.setPrototypeOf(StyledAvatar.defaultProps, defaultProps);
-
 export { StyledAvatar, StyledAvatarText };
diff --git a/src/js/components/Avatar/__tests__/Avatar-test.tsx b/src/js/components/Avatar/__tests__/Avatar-test.tsx
@@ -23,6 +23,11 @@ describe('Avatar', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('renders outside grommet wrapper', () => {
+    const { container } = render(<Avatar />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('size', () => {
     const { container } = render(
       <Grommet>

diff --git a/src/js/components/Avatar/__tests__/__snapshots__/Avatar-test.tsx.snap b/src/js/components/Avatar/__tests__/__snapshots__/Avatar-test.tsx.snap
@@ -170,6 +170,27 @@ exports[`Avatar renders 1`] = `
 </div>
 `;
 
+exports[`Avatar renders outside grommet wrapper 1`] = `
+.c0 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  height: 48px;
+  width: 48px;
+  justify-content: center;
+  border-radius: 100%;
+  overflow: hidden;
+}
+
+<div
+  class="c0 StyledAvatar-sc-1suyamb-1"
+/>
+`;
+
 exports[`Avatar round renders 1`] = `
 .c1 {
   display: flex;

diff --git a/src/js/components/Box/Box.js b/src/js/components/Box/Box.js
@@ -8,7 +8,6 @@ import React, {
 } from 'react';
 
 import { ThemeContext } from 'styled-components';
-import { defaultProps } from '../../default-props';
 import { backgroundIsDark } from '../../utils';
 import { Keyboard } from '../Keyboard';
 
@@ -17,6 +16,7 @@ import { BoxPropTypes } from './propTypes';
 import { SkeletonContext, useSkeleton } from '../Skeleton';
 import { AnnounceContext } from '../../contexts/AnnounceContext';
 import { OptionsContext } from '../../contexts/OptionsContext';
+import { useThemeValue } from '../../utils/useThemeValue';
 
 const Box = forwardRef(
   (
@@ -47,7 +47,7 @@ const Box = forwardRef(
     },
     ref,
   ) => {
-    const theme = useContext(ThemeContext) || defaultProps.theme;
+    const theme = useThemeValue();
     // boxOptions was created to preserve backwards compatibility but
     // should not be supported in v3
     const { box: boxOptions } = useContext(OptionsContext);

diff --git a/src/js/components/Box/StyledBox.js b/src/js/components/Box/StyledBox.js
@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 
-import { defaultProps } from '../../default-props';
 import {
   alignContentStyle,
   alignStyle,
@@ -23,6 +22,7 @@ import {
 import { roundStyle, styledComponentsConfig } from '../../utils/styles';
 
 import { animationBounds, animationObjectStyle } from '../../utils/animation';
+import { withTheme } from '../../default-props';
 
 const BASIS_MAP = {
   auto: 'auto',
@@ -263,7 +263,9 @@ const gapStyle = (directionProp, gap, responsive, wrap, theme) => {
 };
 
 // NOTE: basis must be after flex! Otherwise, flex overrides basis
-const StyledBox = styled.div.withConfig(styledComponentsConfig)`
+const StyledBox = styled.div
+  .withConfig(styledComponentsConfig)
+  .attrs(withTheme)`
   display: flex;
   box-sizing: border-box;
   ${(props) => !props.basis && 'max-width: 100%;'};
@@ -316,9 +318,6 @@ const StyledBox = styled.div.withConfig(styledComponentsConfig)`
   ${(props) => props.kindProp && props.kindProp.extend}
 `;
 
-StyledBox.defaultProps = {};
-Object.setPrototypeOf(StyledBox.defaultProps, defaultProps);
-
 const gapGapStyle = (directionProp, gap, responsive, border, theme) => {
   const metric = theme.global.edgeSize[gap] || gap;
   const breakpoint = getBreakpointStyle(theme, theme.box.responsiveBreakpoint);
@@ -445,8 +444,9 @@ const gapGapStyle = (directionProp, gap, responsive, border, theme) => {
 
   return styles;
 };
-
-const StyledBoxGap = styled.div.withConfig(styledComponentsConfig)`
+const StyledBoxGap = styled.div
+  .withConfig(styledComponentsConfig)
+  .attrs(withTheme)`
   flex: 0 0 auto;
   align-self: stretch;
   ${(props) =>
@@ -460,7 +460,4 @@ const StyledBoxGap = styled.div.withConfig(styledComponentsConfig)`
     )};
 `;
 
-StyledBoxGap.defaultProps = {};
-Object.setPrototypeOf(StyledBoxGap.defaultProps, defaultProps);
-
 export { StyledBox, StyledBoxGap };
diff --git a/src/js/components/Box/__tests__/Box-test.tsx b/src/js/components/Box/__tests__/Box-test.tsx
@@ -16,6 +16,11 @@ describe('Box', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('render outside grommet', () => {
+    const { container } = render(<Box />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('as string', () => {
     const { container } = render(
       <Grommet>