chore(deps): fix npm audit vulnerabilities

package.json

@@ -11,8 +11,20 @@
   },
   "overrides": {
     "nx": {
-      "@parcel/watcher": "2.4.1"
-    }
+      "@parcel/watcher": "2.4.1",
+      "axios": "^1.15.2",
+      "brace-expansion": "^5.0.5",
+      "follow-redirects": "^1.16.0",
+      "yaml": "^2.8.3"
+    },
+    "@jest/environment-jsdom-abstract": {
+      "jsdom": "$jsdom"
+    },
+    "rehype-mathjax": {
+      "jsdom": "^26.1.0"
+    },
+    "jsdom": "^26.1.0",
+    "uuid": "^14.0.0"
   },
   "scripts": {
     "clean:build": "rimraf packages/*/dist packages/*/build",
@@ -113,25 +125,25 @@
     "jasmine": "4.0.2",
     "jest": "^29.3.1",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom": "^30.0.0",
     "jest-runner-eslint": "^1.1.0",
     "jest-runner-stylelint": "^2.3.7",
     "jest-watch-select-projects": "^2.0.0",
     "jest-watch-typeahead": "^2.2.1",
     "lerna": "^9.0.1",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.1.9",
     "npm-run-all": "^4.1.5",
     "prettier": "3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^7.2.7",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "sass": "1.49.9",
+    "sass": "^1.70.0",
     "source-map-explorer": "^2.5.2",
     "stylelint": "^14.5.1",
     "typescript": "~5.6.2",
-    "vite": "^5.4.2"
+    "vite": "^7.0.0"
   },
   "prettier": "@deephaven/prettier-config",
   "stylelint": {

packages/code-studio/package.json

@@ -49,9 +49,9 @@
     "memoize-one": "^5.1.1",
     "memoizee": "^0.4.15",
     "monaco-editor": "^0.43.0",
-    "nanoid": "^5.0.7",
-    "pouchdb-browser": "^7.2.2",
-    "pouchdb-find": "^7.2.2",
+    "nanoid": "^5.1.9",
+    "pouchdb-browser": "^9.0.0",
+    "pouchdb-find": "^9.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^7.2.7",

packages/code-studio/src/styleguide/ListViews.tsx

@@ -79,10 +79,14 @@ export function ListViews(): JSX.Element {
 
   // Calculate the height of the single child example
   const singleChildExampleHeight =
-    LABELED_FLEX_CONTAINER_HEIGHTS.label[scale] +
+    LABELED_FLEX_CONTAINER_HEIGHTS.label[
+      scale as keyof typeof LABELED_FLEX_CONTAINER_HEIGHTS.label
+    ] +
     LABELED_FLEX_CONTAINER_HEIGHTS.gap +
     2 + // listview border
-    LIST_VIEW_ROW_HEIGHTS[density ?? 'compact'][scale];
+    LIST_VIEW_ROW_HEIGHTS[density ?? 'compact'][
+      scale as keyof (typeof LIST_VIEW_ROW_HEIGHTS)['compact']
+    ];
 
   const onDensityChange = useCallback((value: string) => {
     setDensity(value as ListViewProps['density']);

packages/code-studio/src/styleguide/SamplesMenu.tsx

@@ -21,6 +21,8 @@ interface Link {
   id: string;
   label: string;
 }
+
+// eslint-disable-next-line react/no-unused-prop-types
 type LinkCategory = { category: string; items: Link[] };
 
 /**
@@ -147,9 +149,9 @@ export function SamplesMenu(): JSX.Element {
         </Icon>
       </ActionButton>
       <Menu items={links} onAction={onAction}>
-        {({ category, items }) => (
+        {({ category, items }: LinkCategory) => (
           <Section key={category} items={items} title={category}>
-            {({ id, label }) => <Item key={id}>{label}</Item>}
+            {(item: Link) => <Item key={item.id}>{item.label}</Item>}
           </Section>
         )}
       </Menu>

packages/code-studio/src/styleguide/SpectrumComponents.tsx

@@ -69,7 +69,7 @@ export function SpectrumComponents(): JSX.Element {
             <ContextualHelpSample />
             <DialogTrigger>
               <ActionButton>Dialog Trigger</ActionButton>
-              {close => (
+              {(close: () => void) => (
                 <Dialog>
                   <Heading>Some Heading</Heading>
                   <Header>Some Header</Header>

packages/components/package.json

@@ -49,7 +49,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.flatten": "^4.4.0",
     "memoizee": "^0.4.15",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.1.9",
     "popper.js": "^1.16.1",
     "react-reverse-portal": "^2.3.0",
     "react-transition-group": "^4.4.2",

packages/components/src/TimeInput.test.tsx

@@ -534,12 +534,12 @@ it('ignores value prop changes matching displayed value', async () => {
     initialSelectionEnd: 8,
   });
 
-  expect(textbox.value).toEqual('00:00:0');
+  expect(textbox.value).toEqual('00:00');
   expect(onChange).toBeCalledWith(0);
 
   // Ignore prop update matching internal state
   rerender(<TimeInput value={0} onChange={onChange} />);
-  expect(textbox.value).toEqual('00:00:0');
+  expect(textbox.value).toEqual('00:00');
   expect(onChange).toBeCalledTimes(1);
 
   // Update internal value

packages/components/src/spectrum/Heading.test.tsx

@@ -20,6 +20,6 @@ describe('Heading', () => {
     );
     const HeadingElement = getByTestId('Heading');
     expect(HeadingElement).toBeInTheDocument();
-    expect(HeadingElement).toHaveStyle(`color: ${color}`);
+    expect(HeadingElement).toHaveStyle(`color: rgb(255, 0, 0)`);
   });
 });

packages/components/src/spectrum/TabPanels.test.tsx

@@ -169,7 +169,7 @@ describe('TabPanels', () => {
     );
 
     expect(screen.getByLabelText('panels')).toHaveStyle(
-      'background-color: red'
+      'background-color: rgb(255, 0, 0)'
     );
   });
 

packages/components/src/spectrum/TabPanels.tsx

@@ -13,6 +13,12 @@ import {
 import { type CollectionChildren } from '@react-types/shared';
 
 export interface DHCTabPanelsProps<T> extends SpectrumTabPanelsProps<T> {
+  /**
+   * Children of the TabPanels component. Typically `Item` elements with keys
+   * matching their corresponding TabList items.
+   */
+  children: CollectionChildren<T>;
+
   /**
    * If static panels with keys should stay mounted when not visible.
    * This will not apply to dynamic panels created with a render function.

packages/components/src/spectrum/Text.test.tsx

@@ -22,6 +22,6 @@ describe('Text', () => {
     );
     const TextElement = getByTestId('Text');
     expect(TextElement).toBeInTheDocument();
-    expect(TextElement).toHaveStyle(`color: ${color}`);
+    expect(TextElement).toHaveStyle(`color: rgb(255, 0, 0)`);
   });
 });

packages/components/src/spectrum/View.test.tsx

@@ -20,6 +20,6 @@ describe('View', () => {
     );
     const viewElement = getByTestId('view');
     expect(viewElement).toBeInTheDocument();
-    expect(viewElement).toHaveStyle(`background-color: ${backgroundColor}`);
+    expect(viewElement).toHaveStyle(`background-color: rgb(255, 0, 0)`);
   });
 });

packages/components/src/spectrum/comboBox/ComboBox.tsx

@@ -13,8 +13,13 @@ export type ComboBoxProps = PickerPropsT<SpectrumComboBoxProps<NormalizedItem>>;
 export type { MenuTriggerAction } from '@react-types/combobox';
 export { SpectrumComboBox };
 
-export const ComboBox = React.forwardRef(function ComboBox(
-  { UNSAFE_className, ...props }: ComboBoxProps,
+// `forwardRef`'s inferred prop type incorrectly drops required `children`
+// because of upstream Spectrum type issues, so use `any` for the inner
+// render function and re-cast the result to expose the correct
+// `ComboBoxProps` to consumers.
+const ComboBoxInternal = React.forwardRef(function ComboBox(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  { UNSAFE_className, ...props }: any,
   ref: DOMRef<HTMLDivElement>
 ): JSX.Element {
   const {
@@ -46,4 +51,9 @@ export const ComboBox = React.forwardRef(function ComboBox(
     />
   );
 });
-ComboBox.displayName = 'ComboBox';
+ComboBoxInternal.displayName = 'ComboBox';
+
+export const ComboBox =
+  ComboBoxInternal as unknown as React.ForwardRefExoticComponent<
+    ComboBoxProps & React.RefAttributes<unknown>
+  >;

packages/components/src/spectrum/picker/Picker.tsx

@@ -17,8 +17,13 @@ import { usePickerProps } from './usePickerProps';
  * for the Spectrum Picker component.
  * See https://react-spectrum.adobe.com/react-spectrum/Picker.html
  */
-export const Picker = React.forwardRef(function Picker(
-  { UNSAFE_className, ...props }: PickerProps,
+// `forwardRef`'s inferred prop type incorrectly drops required `children`
+// because of upstream Spectrum type issues, so use `any` for the inner
+// render function and re-cast the result to expose the correct `PickerProps`
+// to consumers.
+const PickerInternal = React.forwardRef(function Picker(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  { UNSAFE_className, ...props }: any,
   ref: DOMRef<HTMLDivElement>
 ): JSX.Element {
   const {
@@ -50,6 +55,11 @@ export const Picker = React.forwardRef(function Picker(
     />
   );
 });
-Picker.displayName = 'Picker';
+PickerInternal.displayName = 'Picker';
+
+export const Picker =
+  PickerInternal as unknown as React.ForwardRefExoticComponent<
+    PickerProps & React.RefAttributes<unknown>
+  >;
 
 export default Picker;

packages/components/src/spectrum/picker/PickerProps.ts

@@ -24,6 +24,9 @@ export type PickerPropsT<TProps> = Omit<
   | 'selectedKey'
   | 'defaultSelectedKey'
   | 'disabledKeys'
+  // `ref` is provided by `React.forwardRef` and should not be part of the
+  // component's props type.
+  | 'ref'
   // Excluding `defaultItems` and `items` since we are not currently supporting
   // a render function as `children`. This simplifies the API for determining
   // initial scroll position and wrapping items with tooltips.

packages/components/src/spectrum/picker/usePickerItemScale.ts

@@ -7,7 +7,8 @@ import { PICKER_ITEM_HEIGHTS } from '../../UIConstants';
  */
 export function usePickerItemScale(): { itemHeight: number } {
   const { scale } = useSpectrumThemeProvider();
-  const itemHeight = PICKER_ITEM_HEIGHTS[scale];
+  const itemHeight =
+    PICKER_ITEM_HEIGHTS[scale as keyof typeof PICKER_ITEM_HEIGHTS];
 
   return { itemHeight };
 }

packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx

@@ -10,6 +10,7 @@ import {
   getItemKey,
   ITEM_EMPTY_STRING_TEXT_VALUE,
   type ItemIconSlot,
+  type ItemKey,
   type NormalizedItem,
   type TooltipOptions,
 } from './itemUtils';
@@ -65,24 +66,30 @@ export function useRenderNormalizedItem({
       let action = null;
 
       if (isElementOfType(actions, ListActionGroup)) {
+        const groupProps = actions.props as ListActionGroupProps<unknown>;
         action = (
           <ActionGroup
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...actions.props}
-            onAction={key => actions.props.onAction(key, itemKey)}
-            onChange={keys => actions.props.onChange?.(keys, itemKey)}
-          />
+            {...groupProps}
+            onAction={(key: ItemKey) => groupProps.onAction(key, itemKey)}
+            onChange={keys => groupProps.onChange?.(keys, itemKey)}
+          >
+            {groupProps.children}
+          </ActionGroup>
         );
       } else if (isElementOfType(actions, ListActionMenu)) {
+        const menuProps = actions.props as ListActionMenuProps<unknown>;
         action = (
           <ActionMenu
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...actions.props}
-            onAction={key => actions.props.onAction(key, itemKey)}
-            onOpenChange={isOpen =>
-              actions.props.onOpenChange?.(isOpen, itemKey)
+            {...menuProps}
+            onAction={(key: ItemKey) => menuProps.onAction(key, itemKey)}
+            onOpenChange={(isOpen: boolean) =>
+              menuProps.onOpenChange?.(isOpen, itemKey)
             }
-          />
+          >
+            {menuProps.children}
+          </ActionMenu>
         );
       }
 

packages/components/src/theme/ThemePicker.tsx

@@ -22,7 +22,9 @@ export function ThemePicker(): JSX.Element | null {
       selectedKey={selectedThemeKey}
       onSelectionChange={onSelectionChange}
     >
-      {item => <Item key={item.themeKey}>{item.name}</Item>}
+      {(item: { themeKey: string; name: string }) => (
+        <Item key={item.themeKey}>{item.name}</Item>
+      )}
     </Picker>
   );
 }

packages/components/src/theme/ThemeUtils.test.ts

@@ -170,8 +170,13 @@ describe('isExternalThemeEnabled', () => {
   ])(
     'should return true if external theme is enabled: %s',
     (themeKey, expected) => {
-      window.location.search =
-        themeKey == null ? '' : `${THEME_KEY_OVERRIDE_QUERY_PARAM}=${themeKey}`;
+      window.history.pushState(
+        {},
+        '',
+        themeKey == null
+          ? '/'
+          : `/?${THEME_KEY_OVERRIDE_QUERY_PARAM}=${themeKey}`
+      );
       expect(isExternalThemeEnabled()).toBe(expected);
     }
   );
@@ -183,8 +188,13 @@ describe('isPreloadTransparentTheme: %s', () => {
     ['false', false],
     [null, false],
   ])('should', (value, expected) => {
-    window.location.search =
-      value == null ? '' : `${PRELOAD_TRANSPARENT_THEME_QUERY_PARAM}=${value}`;
+    window.history.pushState(
+      {},
+      '',
+      value == null
+        ? '/'
+        : `/?${PRELOAD_TRANSPARENT_THEME_QUERY_PARAM}=${value}`
+    );
     expect(isPreloadTransparentTheme()).toBe(expected);
   });
 });
@@ -438,7 +448,13 @@ describe('getDefaultSelectedThemeKey', () => {
     'should coalesce overide key -> preload key -> default key: %s, %s, %s',
     (overrideKey, preloadKey, expected) => {
       if (overrideKey != null) {
-        window.location.search = `?${THEME_KEY_OVERRIDE_QUERY_PARAM}=${overrideKey}`;
+        window.history.pushState(
+          {},
+          '',
+          `/?${THEME_KEY_OVERRIDE_QUERY_PARAM}=${overrideKey}`
+        );
+      } else {
+        window.history.pushState({}, '', '/');
       }
 
       localStorage.setItem(
@@ -691,7 +707,13 @@ describe('preloadTheme', () => {
       }
 
       if (preloadTransparent) {
-        window.location.search = `${PRELOAD_TRANSPARENT_THEME_QUERY_PARAM}=true`;
+        window.history.pushState(
+          {},
+          '',
+          `/?${PRELOAD_TRANSPARENT_THEME_QUERY_PARAM}=true`
+        );
+      } else {
+        window.history.pushState({}, '', '/');
       }
 
       preloadTheme();

packages/console/package.json

@@ -42,7 +42,7 @@
     "memoize-one": "^5.1.1",
     "memoizee": "^0.4.15",
     "monaco-editor": "^0.43.0",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.1.9",
     "papaparse": "5.3.2",
     "popper.js": "^1.16.1",
     "shell-quote": "^1.7.2"

packages/dashboard-core-plugins/package.json

@@ -50,7 +50,7 @@
     "lodash.throttle": "^4.1.1",
     "memoize-one": "^5.1.1",
     "memoizee": "^0.4.15",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.1.9",
     "prop-types": "^15.7.2",
     "react-markdown": "^8.0.7",
     "redux": "^4.2.0",