@kaizen/components 1.80.0 → 1.80.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.80.0",
+  "version": "1.80.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -102,26 +102,26 @@
     "kaizen-codemod": "./bin/codemod.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.2",
-    "@headlessui/react": "^2.2.4",
-    "@internationalized/date": "^3.8.1",
+    "@floating-ui/react-dom": "^2.1.4",
+    "@headlessui/react": "^2.2.6",
+    "@internationalized/date": "^3.8.2",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.13.1",
-    "@react-aria/datepicker": "^3.14.3",
-    "@react-aria/focus": "^3.20.3",
-    "@react-aria/i18n": "^3.12.9",
-    "@react-aria/listbox": "^3.14.4",
-    "@react-aria/menu": "^3.18.3",
-    "@react-aria/overlays": "^3.27.1",
-    "@react-aria/select": "^3.15.5",
-    "@react-aria/utils": "^3.29.0",
-    "@react-stately/collections": "^3.12.4",
-    "@react-stately/datepicker": "^3.14.1",
-    "@react-stately/list": "^3.12.2",
-    "@react-stately/menu": "^3.9.4",
-    "@react-stately/select": "^3.6.13",
-    "@react-types/shared": "^3.29.1",
+    "@react-aria/button": "^3.13.3",
+    "@react-aria/datepicker": "^3.14.5",
+    "@react-aria/focus": "^3.20.5",
+    "@react-aria/i18n": "^3.12.10",
+    "@react-aria/listbox": "^3.14.6",
+    "@react-aria/menu": "^3.18.5",
+    "@react-aria/overlays": "^3.27.3",
+    "@react-aria/select": "^3.15.7",
+    "@react-aria/utils": "^3.29.1",
+    "@react-stately/collections": "^3.12.5",
+    "@react-stately/datepicker": "^3.14.2",
+    "@react-stately/list": "^3.12.3",
+    "@react-stately/menu": "^3.9.5",
+    "@react-stately/select": "^3.6.14",
+    "@react-types/shared": "^3.30.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
@@ -130,24 +130,24 @@
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.5.0",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.1",
+    "prosemirror-model": "^1.25.2",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.10.4",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.39.3",
+    "prosemirror-view": "^1.40.1",
     "react-animate-height": "^3.2.3",
-    "react-aria": "^3.40.0",
-    "react-aria-components": "^1.9.0",
+    "react-aria": "^3.41.1",
+    "react-aria-components": "^1.10.1",
     "react-day-picker": "9.6.7",
     "react-focus-lock": "^2.13.6",
-    "react-focus-on": "^3.9.4",
+    "react-focus-on": "^3.10.0",
     "react-popper": "^2.3.0",
-    "react-select": "^5.10.1",
+    "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.4",
+    "use-debounce": "^10.0.5",
     "uuid": "^11.1.0"
   },
   "dependenciesComments": {
@@ -155,9 +155,9 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^2.9.1",
+    "@cultureamp/i18n-react-intl": "^2.12.2",
     "@cultureamp/package-bundler": "^2.3.2",
-    "@testing-library/dom": "^10.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-highlight": "^0.12.8",
@@ -169,23 +169,23 @@
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.1.6",
+    "postcss-import": "^16.1.1",
+    "postcss-preset-env": "^10.2.4",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.2.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "query-string": "^9.2.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-highlight": "^0.15.0",
     "react-intl": "^7.1.11",
-    "rollup": "^4.40.2",
+    "rollup": "^4.46.1",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "ts-patch": "^3.3.0",
-    "tsx": "^4.19.4",
+    "tsx": "^4.20.3",
     "@kaizen/design-tokens": "10.10.0"
   },
   "devDependenciesComments": {

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -3,6 +3,7 @@ import type { Selection } from '@react-types/shared'
 import type { Meta, StoryObj } from '@storybook/react'
 import { expect, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
+import { Card } from '~components/Card'
 import { InlineNotification } from '~components/Notification'
 import { TextField } from '~components/TextField'
 import { FilterMultiSelect, getSelectedOptionLabels } from '..'
@@ -323,6 +324,39 @@ const sourceCode = `
   </FilterMultiSelect>
 `
 
+export const WithContentBelow: Story = {
+  ...FilterMultiSelectTemplate,
+  decorators: [
+    (Story) => (
+      <div>
+        <Story />
+        <Card classNameOverride="mt-24 p-12" isElevated>
+          <p>
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis libero dolore
+            pariatur enim voluptates aperiam, delectus, harum cum earum quibusdam quos porro
+            explicabo quisquam sapiente cupiditate quae hic, minus nam.
+          </p>
+        </Card>
+      </div>
+    ),
+  ],
+  parameters: {
+    chromatic: {
+      disable: false,
+    },
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const triggerButton = await canvas.findByRole('button', {
+      name: /Engineer/i,
+    })
+    await step('Trigger opens the FilterMultiSelect dialog', async () => {
+      await userEvent.click(triggerButton)
+      await waitFor(() => expect(canvas.getByRole('option', { name: /Front-End/i })).toBeVisible())
+    })
+  },
+}
+
 export const AboveIfAvailable: Story = {
   ...WithSectionNotification,
   name: 'With customMenuPopup and vertical placement',

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.css

@@ -1,6 +1,7 @@
 @layer kz-components {
   .menuPopup {
     /* from $ca-z-index-dropdown */
+    position: absolute;
     z-index: 1000;
     box-sizing: border-box;
     background: var(--color-white);
@@ -11,10 +12,10 @@
     margin-top: var(--spacing-6);
     text-align: start;
     width: var(--menu-container-width, 294px);
-    max-height: var(--menu-container-height, 500px);
   }
 
   .menuPopup[popover]:popover-open {
+    max-height: var(--menu-container-height, 500px);
     z-index: unset;
     margin: 0;
     inset: unset;