@kaizen/components 1.78.2 → 1.78.4

package/dist/cjs/src/Filter/FilterMultiSelect/FilterMultiSelect.cjs

@@ -10,6 +10,7 @@ var LoadMoreButton = require('./subcomponents/LoadMoreButton/LoadMoreButton.cjs'
 var MenuFooter = require('./subcomponents/MenuLayout/MenuFooter/MenuFooter.cjs');
 var MenuLoadingSkeleton = require('./subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.cjs');
 var MenuPopup = require('./subcomponents/MenuPopup/MenuPopup.cjs');
+var ResponsiveMenuPopup = require('./subcomponents/MenuPopup/ResponsiveMenuPopup.cjs');
 var MultiSelectOption = require('./subcomponents/MultiSelectOption/MultiSelectOption.cjs');
 var NoResults = require('./subcomponents/NoResults/NoResults.cjs');
 var SearchInput = require('./subcomponents/SearchInput/SearchInput.cjs');
@@ -27,6 +28,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var FilterMultiSelect = function (_a) {
   var trigger = _a.trigger,
     children = _a.children,
+    customMenuPopup = _a.customMenuPopup,
     isOpen = _a.isOpen,
     defaultOpen = _a.defaultOpen,
     onOpenChange = _a.onOpenChange,
@@ -41,17 +43,19 @@ var FilterMultiSelect = function (_a) {
     selectionMode = _b === void 0 ? 'multiple' : _b,
     onSearchInputChange = _a.onSearchInputChange,
     triggerRef = _a.triggerRef,
-    className = _a.className;
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["trigger", "children", "customMenuPopup", "isOpen", "defaultOpen", "onOpenChange", "isLoading", "loadingSkeleton", "label", "items", "selectedKeys", "defaultSelectedKeys", "onSelectionChange", "selectionMode", "onSearchInputChange", "triggerRef", "className"]);
+  var MenuComponent = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : MenuPopup.MenuPopup;
   var menuTriggerProps = {
     isOpen: isOpen,
     defaultOpen: defaultOpen,
     onOpenChange: onOpenChange,
     triggerRef: triggerRef
   };
-  var menuPopupProps = {
+  var menuPopupProps = tslib.__assign({
     isLoading: isLoading,
     loadingSkeleton: loadingSkeleton
-  };
+  }, restProps);
   var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function (item) {
     return item.isDisabled === true;
   }).map(function (disabledItem) {
@@ -69,7 +73,9 @@ var FilterMultiSelect = function (_a) {
   };
   return React__default.default.createElement(MenuTriggerProvider.MenuTriggerProvider, tslib.__assign({}, menuTriggerProps), React__default.default.createElement("div", {
     className: className
-  }, React__default.default.createElement(MenuTriggerProvider.MenuTriggerConsumer, null, trigger), React__default.default.createElement(MenuPopup.MenuPopup, tslib.__assign({}, menuPopupProps), React__default.default.createElement(SelectionProvider.SelectionProvider, tslib.__assign({}, selectionProps), React__default.default.createElement(SelectionProvider.SelectionConsumer, null, children)))));
+  }, React__default.default.createElement(MenuTriggerProvider.MenuTriggerConsumer, null, trigger), React__default.default.createElement(MenuComponent, tslib.__assign({
+    "aria-label": label
+  }, menuPopupProps), React__default.default.createElement(SelectionProvider.SelectionProvider, tslib.__assign({}, selectionProps), React__default.default.createElement(SelectionProvider.SelectionConsumer, null, children)))));
 };
 FilterMultiSelect.displayName = 'FilterMultiSelect';
 FilterMultiSelect.TriggerButton = FilterTriggerButton.FilterTriggerButton;
@@ -85,4 +91,5 @@ FilterMultiSelect.MenuFooter = MenuFooter.MenuFooter; // For layout
 FilterMultiSelect.MenuLoadingSkeleton = MenuLoadingSkeleton.MenuLoadingSkeleton; // Menu Loading Skeleton example
 FilterMultiSelect.LoadMoreButton = LoadMoreButton.LoadMoreButton;
 FilterMultiSelect.NoResults = NoResults.NoResults;
+FilterMultiSelect.ResponsiveMenuPopup = ResponsiveMenuPopup.ResponsiveMenuPopup;
 exports.FilterMultiSelect = FilterMultiSelect;

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

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var SelectionProvider = require('../../context/SelectionProvider/SelectionProvider.cjs');
-var ListBox_module = require('./ListBox.module.scss.cjs');
+var ListBox_module = require('./ListBox.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = {
+  "listBox": "ListBox-module_listBox__HBScm",
+  "overflown": "ListBox-module_overflown__PdKED",
+  "hidden": "ListBox-module_hidden__mO-oL",
+  "noResultsWrapper": "ListBox-module_noResultsWrapper__RnMj0"
+};
+module.exports = styles;

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.cjs

@@ -6,7 +6,7 @@ var focus = require('@react-aria/focus');
 var overlays = require('@react-aria/overlays');
 var MenuTriggerProvider = require('../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
 require('../../context/SelectionProvider/SelectionProvider.cjs');
-var MenuPopup_module = require('./MenuPopup.module.scss.cjs');
+var MenuPopup_module = require('./MenuPopup.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/{MenuPopup.module.scss.cjs → MenuPopup.module.css.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "menuPopup": "MenuPopup-module_menuPopup__UVgnP"
+  "menuPopup": "MenuPopup-module_menuPopup__QgGEa"
 };
 module.exports = styles;

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/ResponsiveMenuPopup.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactDom = require('@floating-ui/react-dom');
+var classnames = require('classnames');
+var reactFocusOn = require('react-focus-on');
+var MenuTriggerProvider = require('../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
+require('../../context/SelectionProvider/SelectionProvider.cjs');
+var MenuPopup_module = require('./MenuPopup.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/** 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 */
+var ResponsiveMenuPopup = function (_a) {
+  var children = _a.children,
+    _b = _a.floatingConfig,
+    floatingConfig = _b === void 0 ? {
+      placement: 'bottom-start',
+      strategy: 'absolute',
+      whileElementsMounted: reactDom.autoUpdate,
+      shouldFlip: true,
+      shouldResize: true
+    } : _b,
+    classNameOverride = _a.classNameOverride,
+    isLoading = _a.isLoading,
+    loadingSkeleton = _a.loadingSkeleton,
+    restProps = tslib.__rest(_a, ["children", "floatingConfig", "classNameOverride", "isLoading", "loadingSkeleton"]);
+  var _c = React.useState(null),
+    floatingElement = _c[0],
+    setFloatingElement = _c[1];
+  var _d = MenuTriggerProvider.useMenuTriggerContext(),
+    menuTriggerState = _d.menuTriggerState,
+    buttonRef = _d.buttonRef;
+  var referenceElement = buttonRef.current;
+  var _e = reactDom.useFloating(tslib.__assign({
+      elements: {
+        reference: referenceElement,
+        floating: floatingElement
+      },
+      middleware: [reactDom.offset(6), floatingConfig.shouldFlip && reactDom.autoPlacement({
+        allowedPlacements: ['bottom-start', 'top-start']
+      }), floatingConfig.shouldResize && reactDom.size({
+        apply: function (_a) {
+          var availableHeight = _a.availableHeight,
+            elements = _a.elements;
+          Object.assign(elements.floating.style, {
+            maxHeight: Math.max(250, Math.min(availableHeight - 12, 500)) + 'px'
+          });
+        }
+      })]
+    }, floatingConfig)),
+    floatingStyles = _e.floatingStyles,
+    update = _e.update;
+  var handleReturnFocus = function () {
+    requestAnimationFrame(function () {
+      var _a;
+      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  };
+  React.useEffect(function () {
+    var _a;
+    if (floatingElement && referenceElement) {
+      (_a = floatingElement.showPopover) === null || _a === void 0 ? void 0 : _a.call(floatingElement);
+      update();
+    }
+  }, [floatingElement, referenceElement, update]);
+  return menuTriggerState.isOpen ? React__default.default.createElement(reactFocusOn.FocusOn, {
+    enabled: menuTriggerState.isOpen,
+    scrollLock: true,
+    returnFocus: false,
+    onClickOutside: menuTriggerState.close,
+    onEscapeKey: menuTriggerState.close,
+    onDeactivation: handleReturnFocus
+  }, React__default.default.createElement("div", tslib.__assign({
+    ref: setFloatingElement,
+    style: floatingStyles,
+    className: classnames__default.default(MenuPopup_module.menuPopup, classNameOverride),
+    role: "dialog",
+    "aria-modal": "true",
+    // @ts-expect-error: popover is valid in supported browsers
+    popover: "manual"
+  }, restProps), isLoading && loadingSkeleton ? loadingSkeleton : children)) : React__default.default.createElement(React__default.default.Fragment, null);
+};
+ResponsiveMenuPopup.displayName = 'FilterMultiSelect.ResponsiveMenuPopup';
+exports.ResponsiveMenuPopup = ResponsiveMenuPopup;

package/dist/esm/src/Filter/FilterMultiSelect/FilterMultiSelect.mjs

@@ -1,4 +1,4 @@
-import { __assign } from 'tslib';
+import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { MenuTriggerProvider, MenuTriggerConsumer } from './context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { SelectionProvider, SelectionConsumer } from './context/SelectionProvider/SelectionProvider.mjs';
@@ -8,6 +8,7 @@ import { LoadMoreButton } from './subcomponents/LoadMoreButton/LoadMoreButton.mj
 import { MenuFooter } from './subcomponents/MenuLayout/MenuFooter/MenuFooter.mjs';
 import { MenuLoadingSkeleton } from './subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.mjs';
 import { MenuPopup } from './subcomponents/MenuPopup/MenuPopup.mjs';
+import { ResponsiveMenuPopup } from './subcomponents/MenuPopup/ResponsiveMenuPopup.mjs';
 import { MultiSelectOption } from './subcomponents/MultiSelectOption/MultiSelectOption.mjs';
 import { NoResults } from './subcomponents/NoResults/NoResults.mjs';
 import { SearchInput } from './subcomponents/SearchInput/SearchInput.mjs';
@@ -20,6 +21,7 @@ const FilterMultiSelect = /*#__PURE__*/function () {
   const FilterMultiSelect = function (_a) {
     var trigger = _a.trigger,
       children = _a.children,
+      customMenuPopup = _a.customMenuPopup,
       isOpen = _a.isOpen,
       defaultOpen = _a.defaultOpen,
       onOpenChange = _a.onOpenChange,
@@ -34,17 +36,19 @@ const FilterMultiSelect = /*#__PURE__*/function () {
       selectionMode = _b === void 0 ? 'multiple' : _b,
       onSearchInputChange = _a.onSearchInputChange,
       triggerRef = _a.triggerRef,
-      className = _a.className;
+      className = _a.className,
+      restProps = __rest(_a, ["trigger", "children", "customMenuPopup", "isOpen", "defaultOpen", "onOpenChange", "isLoading", "loadingSkeleton", "label", "items", "selectedKeys", "defaultSelectedKeys", "onSelectionChange", "selectionMode", "onSearchInputChange", "triggerRef", "className"]);
+    var MenuComponent = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : MenuPopup;
     var menuTriggerProps = {
       isOpen: isOpen,
       defaultOpen: defaultOpen,
       onOpenChange: onOpenChange,
       triggerRef: triggerRef
     };
-    var menuPopupProps = {
+    var menuPopupProps = __assign({
       isLoading: isLoading,
       loadingSkeleton: loadingSkeleton
-    };
+    }, restProps);
     var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function (item) {
       return item.isDisabled === true;
     }).map(function (disabledItem) {
@@ -62,7 +66,9 @@ const FilterMultiSelect = /*#__PURE__*/function () {
     };
     return /*#__PURE__*/React.createElement(MenuTriggerProvider, __assign({}, menuTriggerProps), /*#__PURE__*/React.createElement("div", {
       className: className
-    }, /*#__PURE__*/React.createElement(MenuTriggerConsumer, null, trigger), /*#__PURE__*/React.createElement(MenuPopup, __assign({}, menuPopupProps), /*#__PURE__*/React.createElement(SelectionProvider, __assign({}, selectionProps), /*#__PURE__*/React.createElement(SelectionConsumer, null, children)))));
+    }, /*#__PURE__*/React.createElement(MenuTriggerConsumer, null, trigger), /*#__PURE__*/React.createElement(MenuComponent, __assign({
+      "aria-label": label
+    }, menuPopupProps), /*#__PURE__*/React.createElement(SelectionProvider, __assign({}, selectionProps), /*#__PURE__*/React.createElement(SelectionConsumer, null, children)))));
   };
   FilterMultiSelect.displayName = 'FilterMultiSelect';
   FilterMultiSelect.TriggerButton = FilterTriggerButton;
@@ -79,6 +85,7 @@ const FilterMultiSelect = /*#__PURE__*/function () {
   FilterMultiSelect.MenuLoadingSkeleton = MenuLoadingSkeleton;
   FilterMultiSelect.LoadMoreButton = LoadMoreButton;
   FilterMultiSelect.NoResults = NoResults;
+  FilterMultiSelect.ResponsiveMenuPopup = ResponsiveMenuPopup;
   return FilterMultiSelect;
 }();
 export { FilterMultiSelect };

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

@@ -2,7 +2,7 @@ import { __assign, __spreadArray } from 'tslib';
 import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
-import styles from './ListBox.module.scss.mjs';
+import styles from './ListBox.module.css.mjs';
 var getItemsFromKeys = function (items, keys) {
   var itemKeys = Array.from(keys);
   return itemKeys.reduce(function (acc, itemKey) {

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

@@ -0,0 +1,7 @@
+var styles = {
+  "listBox": "ListBox-module_listBox__HBScm",
+  "overflown": "ListBox-module_overflown__PdKED",
+  "hidden": "ListBox-module_hidden__mO-oL",
+  "noResultsWrapper": "ListBox-module_noResultsWrapper__RnMj0"
+};
+export { styles as default };

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

@@ -4,7 +4,7 @@ import { FocusScope } from '@react-aria/focus';
 import { useOverlay, DismissButton } from '@react-aria/overlays';
 import { useMenuTriggerContext } from '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import '../../context/SelectionProvider/SelectionProvider.mjs';
-import styles from './MenuPopup.module.scss.mjs';
+import styles from './MenuPopup.module.css.mjs';
 const MenuPopup = /*#__PURE__*/function () {
   const MenuPopup = function (_a) {
     var isLoading = _a.isLoading,

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

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

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/ResponsiveMenuPopup.mjs

@@ -0,0 +1,85 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useEffect } from 'react';
+import { useFloating, offset, autoPlacement, size, autoUpdate } from '@floating-ui/react-dom';
+import classnames from 'classnames';
+import { FocusOn } from 'react-focus-on';
+import { useMenuTriggerContext } from '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
+import '../../context/SelectionProvider/SelectionProvider.mjs';
+import styles from './MenuPopup.module.css.mjs';
+
+/** 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 */
+const ResponsiveMenuPopup = /*#__PURE__*/function () {
+  const ResponsiveMenuPopup = function (_a) {
+    var children = _a.children,
+      _b = _a.floatingConfig,
+      floatingConfig = _b === void 0 ? {
+        placement: 'bottom-start',
+        strategy: 'absolute',
+        whileElementsMounted: autoUpdate,
+        shouldFlip: true,
+        shouldResize: true
+      } : _b,
+      classNameOverride = _a.classNameOverride,
+      isLoading = _a.isLoading,
+      loadingSkeleton = _a.loadingSkeleton,
+      restProps = __rest(_a, ["children", "floatingConfig", "classNameOverride", "isLoading", "loadingSkeleton"]);
+    var _c = useState(null),
+      floatingElement = _c[0],
+      setFloatingElement = _c[1];
+    var _d = useMenuTriggerContext(),
+      menuTriggerState = _d.menuTriggerState,
+      buttonRef = _d.buttonRef;
+    var referenceElement = buttonRef.current;
+    var _e = useFloating(__assign({
+        elements: {
+          reference: referenceElement,
+          floating: floatingElement
+        },
+        middleware: [offset(6), floatingConfig.shouldFlip && autoPlacement({
+          allowedPlacements: ['bottom-start', 'top-start']
+        }), floatingConfig.shouldResize && size({
+          apply: function (_a) {
+            var availableHeight = _a.availableHeight,
+              elements = _a.elements;
+            Object.assign(elements.floating.style, {
+              maxHeight: Math.max(250, Math.min(availableHeight - 12, 500)) + 'px'
+            });
+          }
+        })]
+      }, floatingConfig)),
+      floatingStyles = _e.floatingStyles,
+      update = _e.update;
+    var handleReturnFocus = function () {
+      requestAnimationFrame(function () {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      });
+    };
+    useEffect(function () {
+      var _a;
+      if (floatingElement && referenceElement) {
+        (_a = floatingElement.showPopover) === null || _a === void 0 ? void 0 : _a.call(floatingElement);
+        update();
+      }
+    }, [floatingElement, referenceElement, update]);
+    return menuTriggerState.isOpen ? (/*#__PURE__*/React.createElement(FocusOn, {
+      enabled: menuTriggerState.isOpen,
+      scrollLock: true,
+      returnFocus: false,
+      onClickOutside: menuTriggerState.close,
+      onEscapeKey: menuTriggerState.close,
+      onDeactivation: handleReturnFocus
+    }, /*#__PURE__*/React.createElement("div", __assign({
+      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))) : (/*#__PURE__*/React.createElement(React.Fragment, null));
+  };
+  ResponsiveMenuPopup.displayName = 'FilterMultiSelect.ResponsiveMenuPopup';
+  return ResponsiveMenuPopup;
+}();
+export { ResponsiveMenuPopup };