@kaizen/components 1.79.9 → 1.80.0

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

@@ -0,0 +1,115 @@
+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 { type MenuPopupProps } from './MenuPopup'
+import styles from './MenuPopup.module.css'
+
+export type FloatingConfig = Pick<
+  UseFloatingOptions,
+  'placement' | 'strategy' | 'whileElementsMounted'
+> & {
+  /** Whether the component should automatically resize based on the available window height.
+   * @default true
+   */
+  shouldResize?: boolean
+  /** Whether the component should automatically flip to the top of the input based on the available window height.
+   * @default true
+   */
+  shouldFlip?: boolean
+}
+
+export type ResponsiveMenuPopupProps = MenuPopupProps & {
+  floatingConfig?: FloatingConfig
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+/** This is a popup primitive that can be used with the FilterMultiSelect when there are overflow issues with the original implementation. This uses the floating-ui */
+export const ResponsiveMenuPopup = ({
+  children,
+  floatingConfig = {
+    placement: 'bottom-start',
+    strategy: 'absolute',
+    whileElementsMounted: autoUpdate,
+    shouldFlip: true,
+    shouldResize: true,
+  },
+  classNameOverride,
+  isLoading,
+  loadingSkeleton,
+  ...restProps
+}: ResponsiveMenuPopupProps): JSX.Element => {
+  const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null)
+  const { menuTriggerState, buttonRef } = useMenuTriggerContext()
+  const referenceElement = buttonRef.current
+
+  const { floatingStyles, update } = useFloating({
+    elements: {
+      reference: referenceElement,
+      floating: floatingElement,
+    },
+    middleware: [
+      offset(6),
+      floatingConfig.shouldFlip &&
+        autoPlacement({ allowedPlacements: ['bottom-start', 'top-start'] }),
+      floatingConfig.shouldResize &&
+        size({
+          apply({ availableHeight, elements }) {
+            Object.assign(elements.floating.style, {
+              maxHeight: Math.max(250, Math.min(availableHeight - 12, 500)) + 'px',
+            })
+          },
+        }),
+    ],
+    ...floatingConfig,
+  })
+
+  const handleReturnFocus = (): void => {
+    requestAnimationFrame(() => {
+      buttonRef.current?.focus()
+    })
+  }
+
+  useEffect(() => {
+    if (floatingElement && referenceElement) {
+      floatingElement.showPopover?.()
+      update()
+    }
+  }, [floatingElement, referenceElement, update])
+
+  return menuTriggerState.isOpen ? (
+    <FocusOn
+      enabled={menuTriggerState.isOpen}
+      scrollLock={true}
+      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>
+  ) : (
+    <></>
+  )
+}
+
+ResponsiveMenuPopup.displayName = 'FilterMultiSelect.ResponsiveMenuPopup'

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/index.ts

@@ -1 +1,2 @@
 export * from './MenuPopup'
+export * from './ResponsiveMenuPopup'

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "listBox": "ListBox-module_listBox__q95MO",
-  "overflown": "ListBox-module_overflown__wChQA",
-  "hidden": "ListBox-module_hidden__eYdXv",
-  "noResultsWrapper": "ListBox-module_noResultsWrapper__WcLRm"
-};
-module.exports = styles;

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "listBox": "ListBox-module_listBox__q95MO",
-  "overflown": "ListBox-module_overflown__wChQA",
-  "hidden": "ListBox-module_hidden__eYdXv",
-  "noResultsWrapper": "ListBox-module_noResultsWrapper__WcLRm"
-};
-export { styles as default };

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "menuPopup": "MenuPopup-module_menuPopup__UVgnP"
-};
-export { styles as default };

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

@@ -1,25 +0,0 @@
-@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;
-  }
-
-  .overflown {
-    padding-right: $spacing-sm;
-  }
-
-  .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;
-  }
-}

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

@@ -1,24 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/shadow';
-@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;
-
-  .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;
-  }
-}