More manual updates

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Lint
         # Continue on error so, we can see lint issues but not fail the build, we should fix them incrementally
         continue-on-error: true
-        run: yarn run lint
+        run: yarn biome ci --reporter=github
       - name: Prettier
         run: yarn run prettier:ci
       - name: Stylelint

biome.json

@@ -7,7 +7,7 @@
     "defaultBranch": "main"
   },
   "files": {
-    "ignore": [".next", "mockServiceWorker.js", "*-props.json"]
+    "ignore": [".next", "mockServiceWorker.js", "*-props.json", ".tmp"]
   },
   "organizeImports": {
     "enabled": true
@@ -45,8 +45,8 @@
           "level": "error",
           "fix": "safe"
         },
-        "noNonNullAssertion": "warn",
-        "noParameterAssign": "warn"
+        "noParameterAssign": "warn",
+        "noNonNullAssertion": "warn"
       },
       "nursery": {
         "noUselessStringConcat": { "level": "error", "fix": "safe" }
@@ -60,10 +60,26 @@
         "noAutofocus": "off",
         "noNoninteractiveElementToInteractiveRole": "off",
         "noNoninteractiveTabindex": "off",
-        "noSvgWithoutTitle": "off"
+        "noSvgWithoutTitle": "off",
+        "useAriaPropsForRole": "warn"
       },
       "correctness": {
-        "useExhaustiveDependencies": "warn",
+        "useExhaustiveDependencies": {
+          "level": "warn",
+          "options": {
+            "hooks": [
+              {
+                "name": "useIsomorphicLayoutEffect",
+                "closureIndex": 0,
+                "dependenciesIndex": 1
+              },
+              {
+                "name": "useControlled",
+                "stableResult": [1]
+              }
+            ]
+          }
+        },
         "noSwitchDeclarations": {
           "level": "error",
           "fix": "safe"
@@ -74,7 +90,8 @@
         "noGlobalIsNan": {
           "level": "error",
           "fix": "safe"
-        }
+        },
+        "noExplicitAny": "warn"
       }
     }
   },
@@ -100,6 +117,9 @@
           },
           "complexity": {
             "noForEach": "off"
+          },
+          "suspicious": {
+            "noImplicitAnyLet": "off"
           }
         }
       }
@@ -130,6 +150,29 @@
           }
         }
       }
+    },
+    {
+      "include": [
+        "packages/*/stories/*-layout/**",
+        "site/src/examples/*-layout/**"
+      ],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noArrayIndexKey": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["site/src/examples/**", "packages/*/stories/**"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noShadowRestrictedNames": "off"
+          }
+        }
+      }
     }
   ]
 }

docs/components/QAContainer.tsx

@@ -66,8 +66,8 @@ const DensityBlock = ({
 
   return (
     <BackgroundBlock background={mode === "light" ? "white" : undefined}>
-      {DensityValues.map((d, i) => (
-        <ChosenSaltProvider mode={mode} density={d} key={i}>
+      {DensityValues.map((d) => (
+        <ChosenSaltProvider mode={mode} density={d} key={d}>
           <div className="background-item-wrapper">{children}</div>
         </ChosenSaltProvider>
       ))}
@@ -125,8 +125,8 @@ export const QAContainer = ({
           ))}
         </>
       ) : (
-        DensityValues.map((d, i) => (
-          <Fragment key={i}>
+        DensityValues.map((d) => (
+          <Fragment key={d}>
             <ChosenSaltProvider
               mode="light"
               density={d}

docs/public/mockServiceWorker.js

@@ -1,6 +1,3 @@
-/* eslint-disable */
-/* tslint:disable */
-
 /**
  * Mock Service Worker (1.2.1).
  * @see https://github.com/mswjs/msw

package.json

@@ -29,10 +29,10 @@
     "test": "vitest",
     "test:components": "cypress run --component --browser chrome --headless",
     "test:components:local": "cypress open --component --browser electron",
-    "lint": "biome check .",
-    "lint:fix": "biome check . --fix",
     "prettier": "prettier --write .",
     "prettier:ci": "prettier --check .",
+    "lint": "biome check",
+    "lint:fix": "biome check --fix",
     "lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab && yarn lint:style:ag-theme",
     "lint:style:core": "yarn stylelint -f verbose \"packages/core/src/**/*.css\"",
     "lint:style:icon": "yarn stylelint -f verbose \"packages/icons/src/**/*.css\"",

packages/ag-grid-theme/src/examples/InfiniteScroll.tsx

@@ -26,9 +26,9 @@ const InfiniteScroll = (props: AgGridReactProps) => {
 
   useEffect(() => {
     if (isGridReady) {
-      api!.sizeColumnsToFit();
+      api?.sizeColumnsToFit();
 
-      api!.setGridOption("datasource", {
+      api?.setGridOption("datasource", {
         getRows: ({ startRow, endRow, successCallback }) => {
           setTimeout(() => {
             successCallback(
@@ -39,7 +39,7 @@ const InfiniteScroll = (props: AgGridReactProps) => {
         },
       });
     }
-  }, [isGridReady]);
+  }, [isGridReady, api]);
 
   return (
     <div {...containerProps}>

packages/ag-grid-theme/src/examples/MasterDetail.tsx

@@ -35,7 +35,9 @@ const MasterDetail = (props: AgGridReactProps) => {
         detailCellRenderer={detailCellRenderer}
         detailCellRendererParams={{
           detailGridOptions: { columnDefs },
-          getDetailRowData: (params: any) => params.successCallback(rowData),
+          getDetailRowData: (params: {
+            successCallback: (data: typeof rowData) => void;
+          }) => params.successCallback(rowData),
         }}
         masterDetail={true}
         detailRowHeight={300}

packages/ag-grid-theme/src/examples/Pagination.tsx

@@ -11,7 +11,7 @@ const generateData = (states: typeof dataGridExampleData) =>
       for (let i = 0; i < 20; i++) {
         data.push({ ...row, name: `${row.name} ${i}` });
       }
-      return [...result, ...data];
+      return result.concat(data);
     },
     [] as typeof dataGridExampleData,
   );

packages/ag-grid-theme/src/examples/RangeSelection.tsx

@@ -16,7 +16,7 @@ export const RangeSelection = (props: AgGridReactProps) => {
         columnEnd: "population",
       });
     }
-  }, [isGridReady]);
+  }, [isGridReady, api]);
 
   return (
     <div {...containerProps}>

packages/ag-grid-theme/src/examples/SortAndFilter.tsx

@@ -48,7 +48,7 @@ const SortAndFilter = (props: AgGridReactProps) => {
     }
 
     void setFilter();
-  }, [isGridReady]);
+  }, [isGridReady, api]);
 
   return (
     <div {...containerProps}>

packages/core/src/__tests__/__e2e__/aria-announcer/useAriaAnnounce.cy.tsx

@@ -19,7 +19,7 @@ interface SimpleTestContentProps {
   announcement?: string;
   delay?: number;
   debounce?: number;
-  getAnnouncement?: Function;
+  getAnnouncement?: () => string;
 }
 
 const SimpleTestContent = ({
@@ -36,14 +36,16 @@ const SimpleTestContent = ({
     <>
       <button
         onClick={() => {
-          announce(getMessageToAnnounce());
+          const message = getMessageToAnnounce();
+          if (message != null) announce(message);
         }}
       >
         {BUTTON_TEXT}
       </button>
       <button
         onClick={() => {
-          announce(getMessageToAnnounce(), delay);
+          const message = getMessageToAnnounce();
+          if (message != null) announce(message, delay);
         }}
       >
         {BUTTON_TEXT_WAIT}

packages/core/src/__tests__/__e2e__/declarations.d.ts

@@ -1,4 +1,5 @@
 declare module "*.png" {
+  // biome-ignore lint/suspicious/noExplicitAny: any is simpler here
   const content: any;
   export default content;
 }

packages/core/src/__tests__/unit/utils/getRefFromChildren.spec.tsx

@@ -1,5 +1,4 @@
 import { getRefFromChildren } from "@salt-ds/core";
-import { ReactNode } from "react";
 import { describe, expect, it } from "vitest";
 
 describe("getRefFromChildren", () => {
@@ -8,6 +7,7 @@ describe("getRefFromChildren", () => {
     expect(getRefFromChildren(undefined)).toBeNull();
     expect(getRefFromChildren("string")).toBeNull();
     expect(getRefFromChildren(123)).toBeNull();
+    // biome-ignore lint/complexity/noUselessFragments: test file
     expect(getRefFromChildren(<></>)).toBeNull();
     expect(getRefFromChildren([])).toBeNull();
   });

packages/core/src/avatar/Avatar.tsx

@@ -66,7 +66,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     window: targetWindow,
   });
 
-  let children;
+  let children: ReactNode;
 
   const style = {
     ...styleProp,

packages/core/src/combo-box/ComboBox.tsx

@@ -26,7 +26,10 @@ import {
 } from "react";
 import { Button } from "../button";
 import { useFormFieldProps } from "../form-field-context";
-import { ListControlContext } from "../list-control/ListControlContext";
+import {
+  ListControlContext,
+  type OptionValue,
+} from "../list-control/ListControlContext";
 import { defaultValueToString } from "../list-control/ListControlState";
 import { OptionList } from "../option/OptionList";
 import { PillInput, type PillInputProps } from "../pill-input";
@@ -207,6 +210,8 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    onKeyDown?.(event);
+
     if (readOnly) {
       return;
     }
@@ -220,7 +225,8 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
 
     const activeOption = activeState ?? getFirstOption()?.data;
 
-    let newActive;
+    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =
+      null;
     switch (event.key) {
       case "ArrowDown":
         newActive = getOptionAfter(activeOption) ?? getLastOption();
@@ -278,8 +284,6 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
       event.preventDefault();
       setActive(newActive.data);
     }
-
-    onKeyDown?.(event);
   };
 
   const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
@@ -338,6 +342,7 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
     inputRef.current?.focus();
   };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.
   useEffect(() => {
     // We check the active index because the active item may have been removed
     const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
@@ -378,7 +383,6 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
     }
 
     setActive(newActive?.data);
-    /* eslint-disable-next-line react-hooks/exhaustive-deps -- We only want this to run when the list's openState or the displayed options change */
   }, [openState, children]);
 
   const buttonId = useId();

packages/core/src/combo-box/useComboBox.tsx → packages/core/src/combo-box/useComboBox.ts

@@ -84,7 +84,7 @@ export function useComboBox<Item>(props: UseComboBoxProps<Item>) {
       return;
     }
 
-    let newSelected;
+    let newSelected: Item[];
 
     if (selectedState.includes(itemToRemove)) {
       newSelected = selectedState.filter((item) => item !== itemToRemove);

packages/core/src/drawer/Drawer.tsx

@@ -105,7 +105,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
         }, 300); // var(--salt-duration-perceptible)
         return () => clearTimeout(animate);
       }
-    }, [open, showComponent, setShowComponent]);
+    }, [open, showComponent]);
 
     return (
       <ConditionalScrimWrapper condition={showComponent && !disableScrim}>

packages/core/src/dropdown/Dropdown.tsx

@@ -23,7 +23,10 @@ import {
   useRef,
 } from "react";
 import { useFormFieldProps } from "../form-field-context";
-import { ListControlContext } from "../list-control/ListControlContext";
+import {
+  ListControlContext,
+  type OptionValue,
+} from "../list-control/ListControlContext";
 import {
   type ListControlProps,
   defaultValueToString,
@@ -265,6 +268,8 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    onKeyDown?.(event);
+
     if (readOnly) {
       return;
     }
@@ -289,7 +294,8 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
 
     const activeOption = activeState ?? getFirstOption().data;
 
-    let newActive;
+    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =
+      null;
     switch (event.key) {
       case "ArrowDown":
         newActive = getOptionAfter(activeOption) ?? getLastOption();
@@ -339,8 +345,6 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
       setActive(newActive.data);
       setFocusVisibleState(true);
     }
-
-    onKeyDown?.(event);
   };
 
   const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {
@@ -361,6 +365,7 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
     buttonRef.current?.focus();
   };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.
   useEffect(() => {
     // We check the active index because the active item may have been removed
     const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
@@ -399,7 +404,6 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
     }
 
     setActive(newActive?.data);
-    /* eslint-disable-next-line react-hooks/exhaustive-deps -- We only want this to run when the list's openState or the displayed options change */
   }, [openState, children]);
 
   const listId = useId();