Merge branch 'main' into KZN-2653/icon--material-symbols

.changeset/sharp-garlics-switch.md

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

docs/.storybook/preview.tsx

@@ -3,11 +3,8 @@ import "highlight.js/styles/a11y-light.css"
 import "./preview.css"
 
 import React, { useEffect } from "react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { decorators as bgDecorators } from "@storybook/addon-backgrounds/preview"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Preview } from "@storybook/react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import isChromatic from "chromatic"
 import { KaizenProvider } from "~components/KaizenProvider"
 import { I18nProvider } from "~components/__react-aria-components__"
@@ -110,32 +107,123 @@ const preview = {
       container: DefaultDocsContainer,
     },
     options: {
-      storySort: {
-        method: "alphabetical",
-        order: [
-          "Introduction",
-          "Guides",
-          [
-            "App starter",
-            "Layout and spacing",
-            "Tailwind",
-            [
+      storySort: (a, b) => {
+        // Two exact same stories
+        if (a.id === b.id) {
+          return 0
+        }
+
+        // Custom ordering for Tailwind docs
+        if (a.id.includes("tailwind") && b.id.includes("tailwind")) {
+          if (b.title.includes("References")) {
+            if (a.title.includes("References")) {
+              // Overview above all other stories
+              if (a.title.includes("Overview")) return -1
+              if (b.title.includes("Overview")) return 1
+              return 0
+            }
+            // Put References below other stories
+            return -1
+          }
+
+          // Put References below other stories
+          if (a.title.includes("References")) return 1
+
+          if (a.type === "docs" && b.type === "docs") {
+            const docs = [
               "Overview",
               "Getting Started",
               "Configuration",
               "Working with Tailwind",
-              "*",
-              "Utility Class References",
-              ["Overview", "*"],
-            ],
-          ],
-          // This will group new folders like Actions, Overlays, etc in the same way
-          "*",
-          ["*", ["*", ["Usage Guidelines", "API Specification", "*"]]],
+            ]
+            const docsNameA = a.title.split("/").pop()
+            const docsNameB = b.title.split("/").pop()
+            if (docs.includes(docsNameA) && docs.includes(docsNameB)) {
+              const docsDifference =
+                docs.indexOf(docsNameA) - docs.indexOf(docsNameB)
+              if (docsDifference !== 0) {
+                // Sort docs by listed order
+                return docsDifference
+              }
+            }
+
+            // Sort listed docs above unlisted ones
+            if (docs.includes(docsNameA)) return -1
+            // Sort unlisted docs below listed ones
+            if (docs.includes(docsNameB)) return 1
+          }
+
+          // All other stories appear in the order they are defined
+          return 0
+        }
+
+        const customDocNames = ["Usage Guidelines", "API Specification"]
+        // Don't type the param - we can't use TypeScript within storySort
+        const removeCustomDocNames = title => {
+          return customDocNames.reduce((acc, docName) => {
+            const regex = new RegExp(`/${docName}$`)
+            return acc.replace(regex, "")
+          }, title)
+        }
+
+        const titleA = removeCustomDocNames(a.title)
+        const titleB = removeCustomDocNames(b.title)
+
+        const groupA = titleA.split("/")[0]
+        const groupB = titleB.split("/")[0]
+
+        const groups = [
+          "Introduction",
+          "Guides",
+          "Actions",
+          "Containers",
+          "Illustrations",
+          "Layout",
+          "Overlays",
           "Components",
-          ["Kaizen Provider", "*"],
           "Pages",
-        ],
+        ]
+        const groupDifference = groups.indexOf(groupA) - groups.indexOf(groupB)
+        if (groupDifference !== 0) {
+          // Sort stories of different groups manually by the groups array
+          return groupDifference
+        }
+
+        // Sort Kaizen Provider to top
+        if (a.title.includes("Kaizen Provider")) {
+          // If both are Kaizen Provider, do not sort
+          if (b.title.includes("Kaizen Provider")) return 0
+          return -1
+        }
+        if (b.title.includes("Kaizen Provider")) return 1
+
+        const titleDifference = titleA.localeCompare(titleB, undefined, {
+          numeric: true,
+        })
+
+        if (titleDifference !== 0) {
+          // Sort nested stories to top
+          if (a.title.includes(b.title)) return -1
+          if (b.title.includes(a.title)) return 1
+
+          return titleDifference
+        }
+
+        if (a.type === "docs" && b.type === "docs") {
+          const docs = ["Usage Guidelines", "API Specification", "Docs"]
+          const docsNameA = a.title.split("/").pop()
+          const docsNameB = b.title.split("/").pop()
+
+          const docsDifference =
+            docs.indexOf(docsNameA) - docs.indexOf(docsNameB)
+          if (docsDifference !== 0) {
+            // Sort stories of different groups manually by the groups array
+            return docsDifference
+          }
+        }
+
+        // Let stories appear in the order they are defined
+        return 0
       },
     },
     chromatic: { disable: true },

docs/tsconfig.json

@@ -11,6 +11,6 @@
       "~design-tokens/*": ["../packages/design-tokens/src/*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", ".storybook/*.tsx"],
   "files": ["./types.d.ts"]
 }

package.json

@@ -95,5 +95,14 @@
     "chromatic": "Required for Storybook stories across all packages",
     "playwright": "Required for github actions setup",
     "vite-plugin-node-polyfills": "Adds the node `assert` polyfill to Vite for prosemirror to run in storybook"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "react": "18",
+        "react-dom": "18",
+        "eslint": "9"
+      }
+    }
   }
 }

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 1.61.3
+
+### Patch Changes
+
+- [#5014](https://github.com/cultureamp/kaizen-design-system/pull/5014) [`390de02405bb8b4cab2c334d21925ef3e41d6802`](https://github.com/cultureamp/kaizen-design-system/commit/390de02405bb8b4cab2c334d21925ef3e41d6802) - Add z-index 100000 to Select/MultiSelect popover
+
+- [#5015](https://github.com/cultureamp/kaizen-design-system/pull/5015) [`6bb072f67008803fb8a604c187413ae2b756760e`](https://github.com/cultureamp/kaizen-design-system/commit/6bb072f67008803fb8a604c187413ae2b756760e) - Future Select: remove redundant focus management
+
 ## 1.61.2
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.61.2",
+  "version": "1.61.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

packages/components/src/Collapsible/Collapsible/_docs/Collapsible.mdx

@@ -30,8 +30,6 @@ Collapsibles are used to collapse and expand content inline on a page. This lets
 
 <DocsStory of={CollapsibleStories.CustomHeader} />
 
-<DocsStory of={CollapsibleStories.Sticky} sourceState="shown" />
-
 ### Controlled
 
 Control the open state using a `useState` (or similar) by setting the `controlled` prop to `true`

packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -107,9 +107,7 @@ describe("<FilterSelect>", () => {
         render(<FilterSelectWrapper isOpen />)
         expect(screen.queryByRole("listbox")).toBeVisible()
         await waitFor(() => {
-          expect(
-            screen.queryByRole("option", { name: "Regular" })
-          ).toHaveFocus()
+          expect(screen.queryByRole("listbox")).toHaveFocus()
         })
       })
 

packages/components/src/MultiSelect/subcomponents/Popover/Popover.module.scss

@@ -10,6 +10,7 @@
   border-radius: $border-solid-border-radius;
   background: $color-white;
   overflow: auto;
+  z-index: 100000;
 
   &:focus {
     outline: none;

packages/components/src/__future__/Select/Select.spec.tsx

@@ -194,11 +194,11 @@ describe("<Select />", () => {
       })
 
       describe("Given the menu is opened", () => {
-        it("moves the focus to the first focusable element inside the menu initially", async () => {
+        it("focuses the listbox initially", async () => {
           const { getByRole } = render(<SelectWrapper defaultOpen />)
           expect(getByRole("listbox")).toBeVisible()
           await waitFor(() => {
-            expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+            expect(getByRole("listbox")).toHaveFocus()
           })
         })
         it("is closed when hits the escape key", async () => {
@@ -305,12 +305,12 @@ describe("<Select />", () => {
         })
       })
 
-      it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
+      it("focuses the last item in the list on up arrow press", async () => {
         const { getByRole } = render(<SelectWrapper />)
         await user.tab()
         await user.keyboard("{ArrowUp}")
         await waitFor(() => {
-          expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+          expect(getByRole("option", { name: "Magic" })).toHaveFocus()
         })
       })
 

packages/components/src/__future__/Select/Select.tsx

@@ -191,16 +191,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
           trigger(selectToggleProps, selectToggleProps.ref)
         )}
         {state.isOpen && (
-          <Popover
-            id={popoverId}
-            portalContainer={portalContainer}
-            refs={refs}
-            focusOnProps={{
-              onEscapeKey: state.close,
-              onClickOutside: state.close,
-              noIsolation: true,
-            }}
-          >
+          <Popover id={popoverId} portalContainer={portalContainer} refs={refs}>
             <SelectProvider<Option> state={state}>
               <SelectPopoverContents menuProps={menuProps}>
                 {children}

packages/components/src/__future__/Select/subcomponents/ListBox/ListBox.module.scss

@@ -5,8 +5,8 @@
   padding: 0;
   display: grid;
   max-height: 22rem;
+}
 
-  &.focus {
-    outline: none;
-  }
+.listBox:focus-visible {
+  outline: none;
 }

packages/components/src/__future__/Select/subcomponents/ListBox/ListBox.tsx

@@ -23,7 +23,7 @@ export const ListBox = <Option extends SelectOption>({
   const { state } = useSelectContext<Option>()
   const ref = React.useRef<HTMLUListElement>(null)
   const { listBoxProps } = useListBox(
-    { ...menuProps, disallowEmptySelection: true, autoFocus: "first" },
+    { ...menuProps, disallowEmptySelection: true },
     state,
     ref
   )

packages/design-tokens/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 10.6.1
+
+### Patch Changes
+
+- [#5019](https://github.com/cultureamp/kaizen-design-system/pull/5019) [`c1cb79944f215fe7d885b4b1dfbf33310d9c4d34`](https://github.com/cultureamp/kaizen-design-system/commit/c1cb79944f215fe7d885b4b1dfbf33310d9c4d34) - Move `color-string` to dependencies.
+
 ## 10.6.0
 
 ### Minor Changes

packages/design-tokens/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kaizen/design-tokens",
   "description": "Tokens used in the Kaizen Design System",
-  "version": "10.6.0",
+  "version": "10.6.1",
   "homepage": "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/design-tokens",
   "repository": {
     "type": "git",
@@ -35,6 +35,7 @@
     "clean:dist": "rimraf 'dist'"
   },
   "dependencies": {
+    "color-string": "^1.9.1",
     "lodash.kebabcase": "^4.1.1"
   },
   "devDependencies": {
@@ -43,7 +44,6 @@
     "@types/lodash.flatmap": "^4.5.9",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/react-highlight": "^0.12.8",
-    "color-string": "^1.9.1",
     "json-to-flat-sass": "^1.0.0",
     "lodash.flatmap": "^4.5.0",
     "object-to-css-variables": "^0.2.1",

packages/package-bundler/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @kaizen/package-bundler
 
+## 1.1.5
+
+### Patch Changes
+
+- [#5020](https://github.com/cultureamp/kaizen-design-system/pull/5020) [`517a83b45eb4e83293af813ce01ee171cecbeeaf`](https://github.com/cultureamp/kaizen-design-system/commit/517a83b45eb4e83293af813ce01ee171cecbeeaf) - Allow postcss-preset-env v10 in peerDependencies.
+
+  Version 10 contains no breaking changes relevant to Culture Amp usage. [See the changelog for more details](https://github.com/csstools/postcss-plugins/wiki/PostCSS-Preset-Env-10).
+  Version 9 is still allowed.
+
 ## 1.1.4
 
 ### Patch Changes

packages/package-bundler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/package-bundler",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Bundles libraries",
   "main": "dist/index.js",
   "type": "module",
@@ -50,7 +50,7 @@
   },
   "peerDependencies": {
     "postcss": "^8.4.41",
-    "postcss-preset-env": "^9.5.14",
+    "postcss-preset-env": "^9.5.14 || ^10.0.0",
     "rollup": "^4.18.0",
     "tslib": ">=2.6.2"
   }

packages/tailwind/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 1.3.2
+
+### Patch Changes
+
+- Updated dependencies [[`c1cb79944f215fe7d885b4b1dfbf33310d9c4d34`](https://github.com/cultureamp/kaizen-design-system/commit/c1cb79944f215fe7d885b4b1dfbf33310d9c4d34)]:
+  - @kaizen/design-tokens@10.6.1
+
 ## 1.3.1
 
 ### Patch Changes

packages/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/tailwind",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Kaizen Tailwind presets",
   "scripts": {
     "build": "pnpm package-bundler build",