chore: latest 18 types

package.json

@@ -53,9 +53,9 @@
     "@types/invariant": "2.2.29",
     "@types/konami-code-js": "^0.8.0",
     "@types/lodash": "4.17.23",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react": "18.3.27",
+    "@types/react-dom": "18.3.1",
+    "@types/react-test-renderer": "18.3.0",
     "@types/stylis": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
@@ -114,8 +114,8 @@
   "repository": "git@github.com:Codecademy/gamut.git",
   "resolutions": {
     "@typescript-eslint/utils": "^5.15.0",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.27",
+    "@types/react-dom": "18.3.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "error-ex": "1.3.4"

packages/gamut-icons/package.json

@@ -17,7 +17,7 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.23",
-    "react": "^17.0.2 || ^18.2.0"
+    "react": "^17.0.2 || ^18.3.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-illustrations/package.json

@@ -18,8 +18,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2 || ^18.2.0",
-    "react-dom": "^17.0.2 || ^18.2.0"
+    "react": "^17.0.2 || ^18.3.0",
+    "react-dom": "^17.0.2 || ^18.3.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-patterns/package.json

@@ -19,8 +19,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2 || ^18.2.0",
-    "react-dom": "^17.0.2 || ^18.2.0"
+    "react": "^17.0.2 || ^18.3.0",
+    "react-dom": "^17.0.2 || ^18.3.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-styles/package.json

@@ -24,7 +24,7 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.23",
-    "react": "^17.0.2 || ^18.2.0",
+    "react": "^17.0.2 || ^18.3.0",
     "stylis": "^4.0.7"
   },
   "publishConfig": {

packages/gamut-tests/package.json

@@ -22,7 +22,7 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "peerDependencies": {
-    "react": "^17.0.2 || ^18.2.0"
+    "react": "^17.0.2 || ^18.3.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut/package.json

@@ -37,8 +37,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2 || ^18.2.0",
-    "react-dom": "^17.0.2 || ^18.2.0"
+    "react": "^17.0.2 || ^18.3.0",
+    "react-dom": "^17.0.2 || ^18.3.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx

@@ -119,7 +119,13 @@ export function ConnectedFormGroup<T extends ConnectedField>({
                 processNode: (
                   node: unknown,
                   props: { onClick?: () => void }
-                ) => <ErrorAnchor {...props} />,
+                ) => {
+                  const { key: elementKey, ...rest } =
+                    props as React.ComponentProps<typeof ErrorAnchor> & {
+                      key?: React.Key;
+                    };
+                  return <ErrorAnchor key={elementKey} {...rest} />;
+                },
               },
             }}
             skipDefaultOverrides={{ a: true }}

packages/gamut/src/GridForm/GridFormInputGroup/index.tsx

@@ -186,7 +186,13 @@ export const GridFormInputGroup: React.FC<GridFormInputGroupProps> = ({
                   processNode: (
                     node: unknown,
                     props: { onClick?: () => void }
-                  ) => <ErrorAnchor {...props} />,
+                  ) => {
+                    const { key: elementKey, ...rest } =
+                      props as React.ComponentProps<typeof ErrorAnchor> & {
+                        key?: React.Key;
+                      };
+                    return <ErrorAnchor key={elementKey} {...rest} />;
+                  },
                 },
               }}
               skipDefaultOverrides={{ a: true }}

packages/gamut/src/Markdown/index.tsx

@@ -106,10 +106,13 @@ export class Markdown extends PureComponent<MarkdownProps> {
             // in an anonymous functional component as with the Table below causes react rendering
             // to crash with some chrome translation features.
             // See https://codecademy.atlassian.net/browse/WEB-1214
+            const { key: elementKey, ...rest } =
+              props as MarkdownAnchorProps & { key?: React.Key };
             return (
               <MarkdownAnchor
+                key={elementKey}
                 onClick={onAnchorClick}
-                {...(props as MarkdownAnchorProps)}
+                {...rest}
               />
             );
           },

packages/gamut/src/Markdown/libs/overrides/index.tsx

@@ -39,6 +39,10 @@ const attributeMap: { [key: string]: string } = {
 type OverrideSettingsBase = {
   component?: React.ComponentType<any>;
   allowedAttributes?: string[];
+  /**
+   * Receives props from html-to-react including `key`. When spreading props into JSX,
+   * extract key first (e.g. `const { key, ...rest } = props; return <Component key={key} {...rest} />`)
+   */
   processNode?: (node: HTMLToReactNode, props: object) => React.ReactNode;
   shouldProcessNode?: (node: HTMLToReactNode) => boolean;
 };
@@ -82,6 +86,19 @@ export const processAttributes = (attributes: AttributesMap = {}) =>
     };
   }, {});
 
+/**
+ * Extracts `key` from props before spreading into JSX.
+ * html-to-react includes key in the props object; React requires keys to be passed
+ * directly, not via spread. Use this when rendering components from override factories.
+ */
+const propsWithKey = <P extends object>(
+  props: P & { key?: React.Key },
+  render: (rest: Omit<P, 'key'>, key: React.Key | undefined) => React.ReactNode
+) => {
+  const { key: elementKey, ...rest } = props;
+  return render(rest as Omit<P, 'key'>, elementKey);
+};
+
 // generic html tag override
 export const createTagOverride = (
   tagName: string,
@@ -112,9 +129,12 @@ export const createTagOverride = (
       return Override.processNode(node, props);
     }
 
-    if (!Override.component) return null;
+    const Component = Override.component;
+    if (!Component) return null;
 
-    return <Override.component {...props} />;
+    return propsWithKey(props, (rest, key) => (
+      <Component key={key} {...rest} />
+    ));
   },
 });
 
@@ -180,9 +200,12 @@ export const createVideoOverride = (
       return Override.processNode(node, props);
     }
 
-    if (!Override.component) return null;
+    const Component = Override.component;
+    if (!Component) return null;
 
-    return <Override.component {...props} />;
+    return propsWithKey(props, (rest, key) => (
+      <Component key={key} {...rest} />
+    ));
   },
 });
 
@@ -203,13 +226,14 @@ export const createCodeBlockOverride = (
       const [, language = undefined] =
         props.className?.match(/language-([^\s]+)/) || [];
 
-      if (!Override.component) return null;
+      const Component = Override.component;
+      if (!Component) return null;
 
-      return (
-        <Override.component {...props} language={language}>
-          {props.children?.[0]}
-        </Override.component>
-      );
+      return propsWithKey(props, (rest, key) => (
+        <Component key={key} {...rest} language={language}>
+          {rest.children?.[0]}
+        </Component>
+      ));
     },
     ...Override,
   });
@@ -230,15 +254,18 @@ export const createInputOverride = (
     processNode(node: HTMLToReactNode, props: any) {
       const label = getLabel(node);
 
-      if (!Override.component) return null;
+      const Component = Override.component;
+      if (!Component) return null;
 
-      if (isCheckboxParent(node, type)) {
-        return <CheckboxParentLi {...props} />;
-      }
+      return propsWithKey(props, (rest, key) => {
+        if (isCheckboxParent(node, type)) {
+          return <CheckboxParentLi key={key} {...rest} />;
+        }
 
-      if (isLabelText(node, type)) return null;
+        if (isLabelText(node, type)) return null;
 
-      return <Override.component label={label} {...props} />;
+        return <Component key={key} label={label} {...rest} />;
+      });
     },
     ...Override,
   });

packages/styleguide/src/lib/Molecules/Popover/Popover.stories.tsx

@@ -80,6 +80,7 @@ export const Above: Story = {
 export const Below: Story = {
   render: (args) => <PopoverExample {...args} beak="center" position="below" />,
 };
+
 export const CenterLeft: Story = {
   render: (args) => (
     <PopoverExample
@@ -113,6 +114,7 @@ export const PopoverCheckerDense: Story = {
     />
   ),
 };
+
 export const PopoverCheckerLoose: Story = {
   render: (args) => (
     <PopoverExample
@@ -122,6 +124,7 @@ export const PopoverCheckerLoose: Story = {
     />
   ),
 };
+
 export const PopoverCheckerRegular: Story = {
   render: (args) => (
     <PopoverExample
@@ -131,6 +134,7 @@ export const PopoverCheckerRegular: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalADense: Story = {
   render: (args) => (
     <PopoverExample
@@ -140,6 +144,7 @@ export const PopoverDiagonalADense: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalALoose: Story = {
   render: (args) => (
     <PopoverExample
@@ -149,6 +154,7 @@ export const PopoverDiagonalALoose: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalARegular: Story = {
   render: (args) => (
     <PopoverExample