fix: Update react-spectrum packages (#2303)

- Fixes a bug with Meter not displaying it's variant correctly - Needed to resolve issue with `ListData` now allowing `undefined` to be returned from `getItem` - Just throw an error in this case, which should be the same behaviour as before
deephaven · Nov 27, 2024 · 2216274 · 2216274
1 parent ab4c02f
commit 2216274
Show file tree

Hide file tree

Showing 14 changed files with 3,904 additions and 5,874 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app-utils/package.json b/packages/app-utils/package.json
@@ -29,7 +29,7 @@
     "redux": "^4.x"
   },
   "dependencies": {
-    "@adobe/react-spectrum": "3.35.1",
+    "@adobe/react-spectrum": "3.38.0",
     "@deephaven/auth-plugins": "file:../auth-plugins",
     "@deephaven/chart": "file:../chart",
     "@deephaven/components": "file:../components",

diff --git a/packages/code-studio/package.json b/packages/code-studio/package.json
@@ -11,7 +11,7 @@
     "directory": "packages/code-studio"
   },
   "dependencies": {
-    "@adobe/react-spectrum": "3.35.1",
+    "@adobe/react-spectrum": "3.38.0",
     "@deephaven/app-utils": "file:../app-utils",
     "@deephaven/auth-plugins": "file:../auth-plugins",
     "@deephaven/chart": "file:../chart",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -24,7 +24,7 @@
     "build:theme": "sass --embed-sources --style=compressed --load-path=../../node_modules ./src/theme:./dist/theme"
   },
   "dependencies": {
-    "@adobe/react-spectrum": "3.35.1",
+    "@adobe/react-spectrum": "3.38.0",
     "@deephaven/icons": "file:../icons",
     "@deephaven/log": "file:../log",
     "@deephaven/react-hooks": "file:../react-hooks",

diff --git a/packages/components/src/spectrum/utils/__snapshots__/themeUtils.test.ts.snap b/packages/components/src/spectrum/utils/__snapshots__/themeUtils.test.ts.snap
@@ -3,29 +3,29 @@
 exports[`themeDHDefault should merge Spectrum default with DH custom styles 1`] = `
 {
   "dark": {
-    "spectrum--darkest": "gP7gvq_spectrum--darkest",
+    "spectrum--darkest": "R-l9gW_spectrum--darkest",
     "theme-spectrum-alias": "theme-spectrum-alias",
     "theme-spectrum-palette": "theme-spectrum-palette",
   },
   "global": {
-    "spectrum": "zA6MfG_spectrum",
-    "spectrum--dark": "zA6MfG_spectrum--dark",
-    "spectrum--darkest": "zA6MfG_spectrum--darkest",
-    "spectrum--large": "zA6MfG_spectrum--large",
-    "spectrum--light": "zA6MfG_spectrum--light",
-    "spectrum--lightest": "zA6MfG_spectrum--lightest",
-    "spectrum--medium": "zA6MfG_spectrum--medium",
+    "spectrum": "XhWg9q_spectrum",
+    "spectrum--dark": "XhWg9q_spectrum--dark",
+    "spectrum--darkest": "XhWg9q_spectrum--darkest",
+    "spectrum--large": "XhWg9q_spectrum--large",
+    "spectrum--light": "XhWg9q_spectrum--light",
+    "spectrum--lightest": "XhWg9q_spectrum--lightest",
+    "spectrum--medium": "XhWg9q_spectrum--medium",
   },
   "large": {
-    "spectrum--large": "HAZavG_spectrum--large",
+    "spectrum--large": "_1DrGeG_spectrum--large",
   },
   "light": {
-    "spectrum--light": "PFjRbG_spectrum--light",
+    "spectrum--light": "YqfL3a_spectrum--light",
     "theme-spectrum-alias": "theme-spectrum-alias",
     "theme-spectrum-palette": "theme-spectrum-palette",
   },
   "medium": {
-    "spectrum--medium": "xSyFOq_spectrum--medium",
+    "spectrum--medium": "rfm_fq_spectrum--medium",
   },
 }
 `;
diff --git a/packages/components/src/spectrum/utils/itemUtils.ts b/packages/components/src/spectrum/utils/itemUtils.ts
@@ -257,7 +257,10 @@ export function isNormalizedItemsWithKeysList<
   }
 
   return (
-    !isItemOrSection(node[0]) && typeof node[0] === 'object' && 'key' in node[0]
+    !isItemOrSection(node[0]) &&
+    node[0] != null &&
+    typeof node[0] === 'object' &&
+    'key' in node[0]
   );
 }
 

diff --git a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`ThemeProvider setSelectedThemeKey: [
 ./theme-light-components.css?raw
     </style>
     <div
-      class="spectrum-theme-provider JuTe6q_spectrum _5QszkG_spectrum _5QszkG_i18nFontFamily PFjRbG_spectrum--light theme-spectrum-palette theme-spectrum-alias HAZavG_spectrum--large zA6MfG_spectrum zA6MfG_spectrum--dark zA6MfG_spectrum--darkest zA6MfG_spectrum--large zA6MfG_spectrum--light zA6MfG_spectrum--lightest zA6MfG_spectrum--medium"
+      class="spectrum-theme-provider _t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light theme-spectrum-palette theme-spectrum-alias _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -52,7 +52,7 @@ exports[`ThemeProvider setSelectedThemeKey: [
       data-theme-key="themeA"
     />
     <div
-      class="spectrum-theme-provider JuTe6q_spectrum _5QszkG_spectrum _5QszkG_i18nFontFamily PFjRbG_spectrum--light theme-spectrum-palette theme-spectrum-alias HAZavG_spectrum--large zA6MfG_spectrum zA6MfG_spectrum--dark zA6MfG_spectrum--darkest zA6MfG_spectrum--large zA6MfG_spectrum--light zA6MfG_spectrum--lightest zA6MfG_spectrum--medium"
+      class="spectrum-theme-provider _t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light theme-spectrum-palette theme-spectrum-alias _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -69,7 +69,7 @@ exports[`ThemeProvider setSelectedThemeKey: null should change selected theme: d
 <body>
   <div>
     <div
-      class="spectrum-theme-provider JuTe6q_spectrum _5QszkG_spectrum _5QszkG_i18nFontFamily PFjRbG_spectrum--light theme-spectrum-palette theme-spectrum-alias HAZavG_spectrum--large zA6MfG_spectrum zA6MfG_spectrum--dark zA6MfG_spectrum--darkest zA6MfG_spectrum--large zA6MfG_spectrum--light zA6MfG_spectrum--lightest zA6MfG_spectrum--medium"
+      class="spectrum-theme-provider _t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light theme-spectrum-palette theme-spectrum-alias _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -86,7 +86,7 @@ exports[`ThemeProvider setSelectedThemeKey: null should change selected theme: t
 <body>
   <div>
     <div
-      class="spectrum-theme-provider JuTe6q_spectrum _5QszkG_spectrum _5QszkG_i18nFontFamily PFjRbG_spectrum--light theme-spectrum-palette theme-spectrum-alias HAZavG_spectrum--large zA6MfG_spectrum zA6MfG_spectrum--dark zA6MfG_spectrum--darkest zA6MfG_spectrum--large zA6MfG_spectrum--light zA6MfG_spectrum--lightest zA6MfG_spectrum--medium"
+      class="spectrum-theme-provider _t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light theme-spectrum-palette theme-spectrum-alias _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -120,7 +120,7 @@ exports[`ThemeProvider should load themes based on default selected theme key. c
       data-theme-key="mockDefaultSelectedThemeKey"
     />
     <div
-      class="spectrum-theme-provider JuTe6q_spectrum _5QszkG_spectrum _5QszkG_i18nFontFamily PFjRbG_spectrum--light theme-spectrum-palette theme-spectrum-alias HAZavG_spectrum--large zA6MfG_spectrum zA6MfG_spectrum--dark zA6MfG_spectrum--darkest zA6MfG_spectrum--large zA6MfG_spectrum--light zA6MfG_spectrum--lightest zA6MfG_spectrum--medium"
+      class="spectrum-theme-provider _t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light theme-spectrum-palette theme-spectrum-alias _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -137,7 +137,7 @@ exports[`ThemeProvider should load themes based on default selected theme key. c
 <body>
   <div>
     <div
-      class="spectrum-theme-provider JuTe6q_spectrum _5QszkG_spectrum _5QszkG_i18nFontFamily PFjRbG_spectrum--light theme-spectrum-palette theme-spectrum-alias HAZavG_spectrum--large zA6MfG_spectrum zA6MfG_spectrum--dark zA6MfG_spectrum--darkest zA6MfG_spectrum--large zA6MfG_spectrum--light zA6MfG_spectrum--lightest zA6MfG_spectrum--medium"
+      class="spectrum-theme-provider _t8qIa_spectrum kDKRXa_spectrum kDKRXa_i18nFontFamily YqfL3a_spectrum--light theme-spectrum-palette theme-spectrum-alias _1DrGeG_spectrum--large XhWg9q_spectrum XhWg9q_spectrum--dark XhWg9q_spectrum--darkest XhWg9q_spectrum--large XhWg9q_spectrum--light XhWg9q_spectrum--lightest XhWg9q_spectrum--medium"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"

diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -21,7 +21,7 @@
     "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward"
   },
   "dependencies": {
-    "@adobe/react-spectrum": "3.35.1",
+    "@adobe/react-spectrum": "3.38.0",
     "@deephaven/log": "file:../log",
     "@deephaven/utils": "file:../utils",
     "lodash.debounce": "^4.0.8",

diff --git a/packages/react-hooks/src/SelectionUtils.ts b/packages/react-hooks/src/SelectionUtils.ts
@@ -74,7 +74,7 @@ export function isSelectionMaybeInvertedEqual<T>(
  */
 export function mapSelection<TItem, TMap>(
   selectedItemKeys: Selection,
-  getItem: (key: React.Key) => KeyedItem<TItem>,
+  getItem: (key: React.Key) => KeyedItem<TItem> | undefined,
   mapItem: (item: KeyedItem<TItem>) => TMap
 ): SelectionT<TMap> {
   if (selectedItemKeys === 'all') {
@@ -83,7 +83,15 @@ export function mapSelection<TItem, TMap>(
 
   const keys = [...selectedItemKeys.keys()];
 
-  return new Set(keys.map(key => mapItem(getItem(key))));
+  return new Set(
+    keys.map(key => {
+      const item = getItem(key);
+      if (item === undefined) {
+        throw new Error(`Could not find item with key ${key}`);
+      }
+      return mapItem(item);
+    })
+  );
 }
 
 /**

diff --git a/packages/react-hooks/src/SpectrumUtils.ts b/packages/react-hooks/src/SpectrumUtils.ts
@@ -41,7 +41,7 @@ export function extractSpectrumHTMLElement<
 export function extractSpectrumLastChildHTMLElement<
   THtml extends HTMLElement = HTMLElement,
 >(ref: DOMRefValue<THtml> | null): HTMLElement | null {
-  const maybeHTMLElement = ref?.UNSAFE_getDOMNode().lastElementChild;
+  const maybeHTMLElement = ref?.UNSAFE_getDOMNode()?.lastElementChild;
   return identityExtractHTMLElement(maybeHTMLElement);
 }
 

diff --git a/packages/react-hooks/src/useFormWithDetachedSubmitButton.ts b/packages/react-hooks/src/useFormWithDetachedSubmitButton.ts
@@ -40,7 +40,7 @@ export default function useFormWithDetachedSubmitButton(
 
   const submitButtonRef = useCallback(
     (buttonEl: FocusableRefValue<HTMLButtonElement> | null) => {
-      buttonEl?.UNSAFE_getDOMNode().setAttribute('form', formId);
+      buttonEl?.UNSAFE_getDOMNode()?.setAttribute('form', formId);
     },
     [formId]
   );

diff --git a/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png