@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { autoPlacement, offset, size } from '@floating-ui/react-dom'
 import type { Selection } from '@react-types/shared'
 import type { Meta, StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
@@ -308,3 +309,90 @@ export const WithSectionNotification: Story = {
     chromatic: { disable: false },
   },
 }
+
+export const AboveIfAvailable: Story = {
+  name: 'Limited viewport autoplacement above',
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: 'Limited vertical space',
+          styles: {
+            width: '1024px',
+            height: '500px',
+          },
+        },
+      },
+      defaultViewport: 'LimitedViewportAutoPlace',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="mt-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const WithFloatingOptions: Story = {
+  name: 'With floatingOptions',
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: 'Limited vertical space',
+          styles: {
+            width: '1024px',
+            height: '500px',
+          },
+        },
+      },
+      defaultViewport: 'LimitedViewportAutoPlace',
+    },
+  },
+  args: {
+    floatingOptions: {
+      strategy: 'fixed',
+      middleware: [
+        size({
+          apply({ availableHeight, availableWidth, elements }) {
+            Object.assign(elements.floating.style, {
+              maxHeight: `${Math.max(300, availableHeight - 25)}px`,
+              maxWidth: `${availableWidth}px`,
+            })
+          },
+        }),
+        offset(6),
+        autoPlacement({
+          allowedPlacements: ['bottom-start', 'bottom', 'top-start', 'top'],
+        }),
+      ],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="mt-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args) => {
+    const [selectedKeys, setSelectedKeys] = useState<Selection | undefined>(args.selectedKeys)
+    console.log(args)
+
+    return (
+      <FilterMultiSelect
+        {...args}
+        onSelectionChange={setSelectedKeys}
+        selectedKeys={selectedKeys}
+        trigger={(): JSX.Element => (
+          <FilterMultiSelect.TriggerButton
+            selectedOptionLabels={getSelectedOptionLabels(selectedKeys, args.items)}
+            label={args.label}
+          />
+        )}
+      />
+    )
+  },
+}

package/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.spec.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { vi } from 'vitest'
 import { FilterTriggerButton } from '~components/Filter/FilterMultiSelect/subcomponents/Trigger'
 import { MenuPopup } from '../../subcomponents/MenuPopup'
 import { MenuTriggerProvider, type MenuTriggerProviderProps } from './MenuTriggerProvider'
@@ -53,15 +52,11 @@ describe('<MenuTriggerProvider /> - Visual content', () => {
       rerender(<MenuTriggerProviderWrapper isOpen={false} />)
       expect(screen.queryByText('menu-content-mock')).not.toBeInTheDocument()
     })
-
-    it('fires the onOpenChange callback when the trigger is interacted', async () => {
+    it('fires the onOpenChange callback on user interaction to close the menu', async () => {
       const onOpenChange = vi.fn()
       render(<MenuTriggerProviderWrapper isOpen onOpenChange={onOpenChange} />)
 
-      const trigger = screen.getByRole('button', {
-        name: 'trigger-display-label-mock',
-      })
-      await user.click(trigger)
+      await user.keyboard('{Escape}')
 
       await waitFor(() => {
         expect(onOpenChange).toBeCalledTimes(1)
@@ -86,17 +81,6 @@ describe('<MenuTriggerProvider /> - Mouse interaction', () => {
   })
 
   describe('Given the menu is opened', () => {
-    it('is closed when user clicks on the trigger', async () => {
-      render(<MenuTriggerProviderWrapper defaultOpen />)
-      const trigger = screen.getByRole('button', {
-        name: 'trigger-display-label-mock',
-      })
-      await user.click(trigger)
-      await waitFor(() => {
-        expect(screen.queryByText('menu-content-mock')).not.toBeInTheDocument()
-      })
-    })
-
     it('is closed when user clicks outside of the menu', async () => {
       render(<MenuTriggerProviderWrapper defaultOpen />)
       await user.click(document.body)

package/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss

@@ -1,25 +1,23 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .listBox {
-    list-style: none;
-    padding: $spacing-sm;
-    margin: 0 $spacing-sm 0 0;
-    display: grid;
-    max-height: 22rem;
-    overflow-y: auto;
-  }
+.listBox {
+  list-style: none;
+  padding: $spacing-sm;
+  margin: 0 $spacing-sm 0 0;
+  display: grid;
+  max-height: 22rem;
+  overflow-y: auto;
+}
 
-  .overflown {
-    padding-right: $spacing-sm;
-  }
+.overflown {
+  padding-right: $spacing-sm;
+}
 
-  .hidden {
-    display: none;
-  }
+.hidden {
+  display: none;
+}
 
-  // this is a div but remove styles briefly flickering to a bullet list as the sections are removed
-  .noResultsWrapper {
-    list-style: none;
-  }
+// this is a div but remove styles briefly flickering to a bullet list as the sections are removed
+.noResultsWrapper {
+  list-style: none;
 }

package/src/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.module.scss

@@ -2,19 +2,17 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .listBoxSection {
-    display: grid;
-    list-style: none;
-    padding: 0;
-  }
+.listBoxSection {
+  display: grid;
+  list-style: none;
+  padding: 0;
+}
 
-  .listBoxSectionHeader {
-    font-family: $typography-heading-6-font-family;
-    font-size: $typography-heading-6-font-size;
-    font-weight: $typography-heading-6-font-weight;
-    line-height: $typography-heading-6-line-height;
-    color: rgba($color-purple-800-rgb, 0.7);
-    margin: $spacing-6 0;
-  }
+.listBoxSectionHeader {
+  font-family: $typography-heading-6-font-family;
+  font-size: $typography-heading-6-font-size;
+  font-weight: $typography-heading-6-font-weight;
+  line-height: $typography-heading-6-line-height;
+  color: rgba($color-purple-800-rgb, 0.7);
+  margin: $spacing-6 0;
 }

package/src/Filter/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.module.scss

@@ -1,7 +1,5 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .container {
-    padding: $spacing-sm $spacing-sm 0;
-  }
+.container {
+  padding: $spacing-sm $spacing-sm 0;
 }

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss

@@ -1,11 +1,9 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .footer {
-    border-top: 1px solid rgba($color-gray-600-rgb, 0.1);
-    gap: $spacing-xs;
-    display: flex;
-    padding: $spacing-sm $spacing-sm 0;
-  }
+.footer {
+  border-top: 1px solid rgba($color-gray-600-rgb, 0.1);
+  gap: $spacing-xs;
+  display: flex;
+  padding: $spacing-sm $spacing-sm 0;
 }

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss

@@ -1,12 +1,10 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .loadingInput {
-    margin-bottom: $spacing-sm;
-  }
+.loadingInput {
+  margin-bottom: $spacing-sm;
+}
 
-  .loadingContainer {
-    margin-left: $spacing-sm;
-    margin-right: $spacing-sm;
-  }
+.loadingContainer {
+  margin-left: $spacing-sm;
+  margin-right: $spacing-sm;
 }

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

@@ -3,22 +3,26 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  // figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
-  $menu-container-width: 294px;
-  $menu-container-max-height: 312px;
+// figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
+$menu-container-width: 294px;
+$menu-container-max-height: 312px;
 
-  .menuPopup {
-    position: absolute;
-    z-index: 1000; // from $ca-z-index-dropdown
-    box-sizing: border-box;
-    background: $color-white;
-    color: $color-purple-800;
-    border-radius: $border-solid-border-radius;
-    box-shadow: $shadow-large-box-shadow;
-    padding: $spacing-sm 0;
-    margin-top: $spacing-xs;
-    text-align: start;
-    width: $menu-container-width;
-  }
+.menuPopup {
+  z-index: 1000; // from $ca-z-index-dropdown
+  box-sizing: border-box;
+  background: $color-white;
+  color: $color-purple-800;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-large-box-shadow;
+  padding: $spacing-sm 0;
+  margin-top: $spacing-xs;
+  text-align: start;
+  width: $menu-container-width;
+  // scrollbar-width: none;
+}
+
+.menuPopup[popover]:popover-open {
+  z-index: unset;
+  margin: 0;
+  inset: unset;
 }

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx

@@ -1,58 +1,98 @@
-import React from 'react'
-import { FocusScope } from '@react-aria/focus'
-import { DismissButton, useOverlay } from '@react-aria/overlays'
+import React, { useEffect, useState, type HTMLAttributes } from 'react'
+import {
+  autoPlacement,
+  autoUpdate,
+  offset,
+  size,
+  useFloating,
+  type UseFloatingOptions,
+} from '@floating-ui/react-dom'
+import classnames from 'classnames'
+import { FocusOn } from 'react-focus-on'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useMenuTriggerContext } from '../../context'
 import styles from './MenuPopup.module.scss'
 
 export type MenuPopupProps = {
+  children: React.ReactNode
+  floatingOptions?: Partial<UseFloatingOptions>
   isLoading?: boolean
   loadingSkeleton?: React.ReactNode
-  children: React.ReactNode
-}
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 export const MenuPopup = ({
+  children,
+  floatingOptions,
+  classNameOverride,
   isLoading,
   loadingSkeleton,
-  children,
+  ...restProps
 }: MenuPopupProps): JSX.Element => {
-  const { menuTriggerState } = useMenuTriggerContext()
-
-  const onClose = (): void => menuTriggerState.close()
-
-  // Handle events that should cause the menu to close,
-  // e.g. blur, clicking outside, or pressing the escape key.
-  const overlayRef = React.createRef<HTMLDivElement>()
-  const { overlayProps } = useOverlay(
-    {
-      onClose,
-      isOpen: menuTriggerState.isOpen,
-      isDismissable: true,
+  const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null)
+  const { menuTriggerState, buttonRef } = useMenuTriggerContext()
+
+  const referenceElement = buttonRef.current
+
+  const { floatingStyles, update } = useFloating({
+    placement: 'bottom-start',
+    elements: {
+      reference: referenceElement,
+      floating: floatingElement,
     },
-    overlayRef,
-  )
+    strategy: 'absolute',
+    middleware: [
+      size({
+        apply({ availableWidth, elements }) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${Math.max(320, 550)}px`,
+            maxWidth: `${availableWidth}px`,
+          })
+        },
+      }),
+      offset(6),
+      autoPlacement({
+        allowedPlacements: ['bottom-start', 'bottom', 'top-start', 'top'],
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+    ...floatingOptions,
+  })
+
+  const handleReturnFocus = (): void => {
+    requestAnimationFrame(() => {
+      buttonRef.current?.focus()
+    })
+  }
+
+  useEffect(() => {
+    if (floatingElement && referenceElement) {
+      floatingElement.showPopover?.()
+      update()
+    }
+  }, [floatingElement, referenceElement, update])
 
-  // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
-  // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
-  // In addition, add hidden <DismissButton> components at the start and end of the list
-  // to allow screen reader users to dismiss the popup easily.
   return menuTriggerState.isOpen ? (
-    <div {...overlayProps} ref={overlayRef} className={styles.menuPopup}>
-      {isLoading && loadingSkeleton ? (
-        <>
-          <DismissButton onDismiss={onClose} />
-          {loadingSkeleton}
-          <DismissButton onDismiss={onClose} />
-        </>
-      ) : (
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        <FocusScope contain autoFocus restoreFocus>
-          <DismissButton onDismiss={onClose} />
-
-          {children}
-          <DismissButton onDismiss={onClose} />
-        </FocusScope>
-      )}
-    </div>
+    <FocusOn
+      enabled={menuTriggerState.isOpen}
+      scrollLock={false}
+      returnFocus={false}
+      onClickOutside={menuTriggerState.close}
+      onEscapeKey={menuTriggerState.close}
+      onDeactivation={handleReturnFocus}
+    >
+      <div
+        ref={setFloatingElement}
+        style={floatingStyles}
+        className={classnames(styles.menuPopup, classNameOverride)}
+        role="dialog"
+        aria-modal="true"
+        // @ts-expect-error: popover is valid in supported browsers
+        popover="manual"
+        {...restProps}
+      >
+        {isLoading && loadingSkeleton ? loadingSkeleton : children}
+      </div>
+    </FocusOn>
   ) : (
     <></>
   )

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss

@@ -3,112 +3,110 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  $iconAndBadgeHeight: $spacing-md;
-
-  .icon {
-    line-height: 1;
-    height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-    width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-    border: $border-solid-border-width $border-solid-border-style;
-    border-color: $color-gray-500;
-    border-radius: $border-solid-border-radius;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .option {
-    height: fit-content;
-    align-items: flex-start;
-    display: inline-grid;
-    grid-template-columns: $spacing-md 1fr auto;
-    gap: $spacing-xs;
-    padding: $spacing-xs;
-    position: relative;
-    font-family: $typography-paragraph-body-font-family;
-    font-size: $typography-paragraph-body-font-size;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    font-weight: $typography-paragraph-body-font-weight;
-    line-height: $typography-paragraph-body-line-height;
-    border: $border-solid-border-width $border-solid-border-style;
-    border-color: $border-borderless-border-color;
-    border-radius: $border-solid-border-radius;
-    cursor: default;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $color-blue-100;
-
-      .badge {
-        background-color: $color-white;
-      }
-
-      .icon {
-        border-color: $color-gray-600;
-        background-color: $color-gray-200;
-      }
-    }
+$iconAndBadgeHeight: $spacing-md;
+
+.icon {
+  line-height: 1;
+  height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+  width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $color-gray-500;
+  border-radius: $border-solid-border-radius;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
 
-    &.isFocused,
-    &:focus-visible {
-      background-color: $color-blue-100;
-
-      &::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-        content: '';
-        position: absolute;
-        background: transparent;
-        border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-        border-radius: $border-focus-ring-border-radius;
-        inset: calc(-1 * #{$focus-ring-offset});
-        z-index: 1; // show border when sibling option is hovered
-      }
+.option {
+  height: fit-content;
+  align-items: flex-start;
+  display: inline-grid;
+  grid-template-columns: $spacing-md 1fr auto;
+  gap: $spacing-xs;
+  padding: $spacing-xs;
+  position: relative;
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  font-weight: $typography-paragraph-body-font-weight;
+  line-height: $typography-paragraph-body-line-height;
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $border-borderless-border-color;
+  border-radius: $border-solid-border-radius;
+  cursor: default;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $color-blue-100;
+
+    .badge {
+      background-color: $color-white;
     }
 
-    &:focus {
-      outline: none; // cancel browser style
+    .icon {
+      border-color: $color-gray-600;
+      background-color: $color-gray-200;
     }
   }
 
-  .isDisabled {
-    opacity: 30%;
-    background: none;
+  &.isFocused,
+  &:focus-visible {
+    background-color: $color-blue-100;
 
-    &:hover {
-      .icon {
-        border-color: $color-gray-500;
-      }
+    &::after {
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
 
-      .badge {
-        background-color: $color-gray-300;
-      }
+      content: '';
+      position: absolute;
+      background: transparent;
+      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
+      border-radius: $border-focus-ring-border-radius;
+      inset: calc(-1 * #{$focus-ring-offset});
+      z-index: 1; // show border when sibling option is hovered
     }
   }
 
-  .badgeContainer {
-    // Must be the same height as .icon, so they align vertically
-    height: $iconAndBadgeHeight;
-    display: flex;
-    align-items: center;
+  &:focus {
+    outline: none; // cancel browser style
   }
+}
+
+.isDisabled {
+  opacity: 30%;
+  background: none;
 
-  .isSelected {
-    font-weight: $typography-paragraph-bold-font-weight;
+  &:hover {
+    .icon {
+      border-color: $color-gray-500;
+    }
 
-    &.icon {
-      background-color: $color-gray-500;
-      color: $color-white;
+    .badge {
+      background-color: $color-gray-300;
     }
+  }
+}
+
+.badgeContainer {
+  // Must be the same height as .icon, so they align vertically
+  height: $iconAndBadgeHeight;
+  display: flex;
+  align-items: center;
+}
+
+.isSelected {
+  font-weight: $typography-paragraph-bold-font-weight;
+
+  &.icon {
+    background-color: $color-gray-500;
+    color: $color-white;
+  }
 
-    &:hover,
-    &:active,
-    &:focus {
-      .icon {
-        background-color: $color-gray-600;
-      }
+  &:hover,
+  &:active,
+  &:focus {
+    .icon {
+      background-color: $color-gray-600;
     }
   }
 }

package/src/Filter/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .container {
-    padding: 1.125rem; // There's no spacing token for 18px -_-
-  }
+.container {
+  padding: 1.125rem; // There's no spacing token for 18px -_-
 }

package/src/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss

@@ -1,8 +1,6 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .inputSearchContainer {
-    position: relative;
-    margin: 0 $spacing-sm;
-  }
+.inputSearchContainer {
+  position: relative;
+  margin: 0 $spacing-sm;
 }