chore(deps): dependency refresh

.changeset/cold-camels-juggle.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/dull-beers-wave.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/neat-squids-compete.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Update `use-debounce` to `v10`

.changeset/thin-papayas-turn.md

@@ -0,0 +1,3 @@
+---
+---
+

package.json

@@ -52,8 +52,8 @@
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "svgo": "~3.0.3",
-    "tocbot": "^4.21.6"
+    "svgo": "~3.0.4",
+    "tocbot": "^4.23.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",
@@ -74,28 +74,28 @@
     "@storybook/jest": "^0.2.3",
     "@storybook/node-logger": "^7.5.3",
     "@storybook/react-webpack5": "^7.5.3",
-    "@storybook/test-runner": "^0.14.0",
+    "@storybook/test-runner": "^0.15.2",
     "@storybook/testing-library": "^0.2.2",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.8.7",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/classnames": "^2.3.1",
     "@types/color-string": "^1.5.5",
-    "@types/jest": "^29.5.8",
+    "@types/jest": "^29.5.10",
     "@types/jest-axe": "^3.5.8",
     "@types/node": "^20.8.8",
     "@types/postcss-flexbugs-fixes": "^5.0.3",
     "@types/postcss-import": "^14.0.3",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
     "axe-playwright": "^1.2.3",
     "babel-loader": "^9.1.3",
-    "chromatic": "^7.6.0",
+    "chromatic": "^9.1.0",
     "color-string": "^1.9.1",
     "css-loader": "^6.8.1",
     "eslint": "^8.53.0",

packages/components/package.json

@@ -88,27 +88,27 @@
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.6.2",
-    "use-debounce": "^9.0.4",
+    "use-debounce": "^10.0.0",
     "uuid": "^9.0.1"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^8.2.0",
+    "@cultureamp/frontend-apis": "^9.0.2",
     "@cultureamp/i18n-react-intl": "^2.1.1",
     "@kaizen/design-tokens": "^10.3.16",
     "@kaizen/tailwind": "^1.2.0",
-    "@rollup/plugin-alias": "^5.0.1",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^18.2.17",
     "@types/react-textfit": "^1.1.3",
     "@types/uuid": "^9.0.7",
     "agadoo": "^3.0.0",
@@ -124,7 +124,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.69.5",
     "serialize-query-params": "^2.0.2",
-    "svgo": "^3.0.3",
+    "svgo": "^3.0.4",
     "ts-jest": "^29.1.1",
     "ttypescript": "^1.5.15",
     "typescript-transform-paths": "^3.4.6"

packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -6,6 +6,7 @@ import {
   QueryClient,
   useInfiniteQuery,
   useQueryClient,
+  keepPreviousData,
 } from "@tanstack/react-query"
 import isChromatic from "chromatic"
 import { InlineNotification } from "~components/Notification"
@@ -171,43 +172,54 @@ export const Async: Story = {
     const [selectedPeople, setSelectedPeople] = useState<string[]>([])
     const [searchState, setSearchState] = useState("")
     const queryClient = useQueryClient()
+
+    const fetchSWAPI = async ({
+      pageParam,
+    }: {
+      pageParam: string
+    }): Promise<{
+      results: Array<{ name: string; url: string }>
+      next: string
+    }> => {
+      const res = await fetch(
+        `https://swapi.dev/api/people/?page=${pageParam}&search=${searchState}`
+      )
+
+      return res.json()
+    }
+
     const {
       data,
       isLoading,
       fetchNextPage,
       isFetchingNextPage,
       hasNextPage,
       isRefetching,
-    } = useInfiniteQuery(
-      ["startrek-sg1", searchState],
-      ({ pageParam = 1 }) =>
-        fetch(
-          `https://swapi.dev/api/people/?page=${pageParam}&search=${searchState}`
-        ).then(res => res.json()) as Promise<{
-          results: Array<{ name: string; url: string }>
-          next: string
-        }>,
-      {
-        enabled: open,
-        keepPreviousData: true,
-        getNextPageParam: lastPage => {
-          if (!lastPage.next) return undefined
-          const url = new URL(lastPage.next)
-          const params = new URLSearchParams(url.searchParams)
-          return params.get("page")
-        },
-      }
-    )
+    } = useInfiniteQuery({
+      enabled: true,
+      initialPageParam: "1",
+      queryKey: ["startrek-sg1", searchState],
+      queryFn: fetchSWAPI,
+      placeholderData: keepPreviousData,
+      getNextPageParam: lastPage => {
+        if (!lastPage.next) return undefined
+        const url = new URL(lastPage.next)
+        const params = new URLSearchParams(url.searchParams)
+        return params.get("page")
+      },
+    })
+
+    type QueriesData = {
+      pages: { results: Array<{ name: string; url: string }> }
+    }
 
     /**
      * We need access to the previously fetched people. If a user has selected a
      * particular person and then searched to no longer return that person, we have
      * only the selected keys to work with, no renderable values.
      */
     const cachedPeople = queryClient
-      .getQueriesData<{
-        pages: { results: Array<{ name: string; url: string }> }
-      }>(["startrek-sg1"])
+      .getQueriesData<QueriesData>({ queryKey: ["startrek-sg1"] })
       .flatMap(([, cachedData]) => cachedData?.pages ?? [])
       .flatMap(page => page.results)
       .map(item => ({ label: item.name, value: item.url }))

packages/design-tokens/package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "@types/lodash.flatmap": "^4.5.9",
     "@types/react-highlight": "^0.12.8",
-    "@types/yargs": "^17.0.31",
+    "@types/yargs": "^17.0.32",
     "json-to-flat-sass": "^1.0.0",
     "lodash.flatmap": "^4.5.0",
     "object-to-css-variables": "^0.2.1",