@kaizen/components 1.78.3 → 1.78.4

package/dist/styles.css

@@ -3861,6 +3861,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 .MenuPopup-module_menuPopup__QgGEa {
   /* from $ca-z-index-dropdown */
+  position: absolute;
   z-index: 1000;
   box-sizing: border-box;
   background: var(--color-white);
@@ -3871,10 +3872,10 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   margin-top: var(--spacing-6);
   text-align: start;
   width: var(--menu-container-width, 294px);
-  max-height: var(--menu-container-height, 500px);
 }
 
 .MenuPopup-module_menuPopup__QgGEa[popover]:popover-open {
+  max-height: var(--menu-container-height, 500px);
   z-index: unset;
   margin: 0;
   inset: unset;

package/package.json

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

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,5 +1,6 @@
 .menuPopup {
   /* from $ca-z-index-dropdown */
+  position: absolute;
   z-index: 1000;
   box-sizing: border-box;
   background: var(--color-white);
@@ -10,10 +11,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;