@kaizen/components 3.3.1 → 3.3.3

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

@@ -1,52 +1,49 @@
 import { __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 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 modules_a08aa86f from './MenuPopup.module.css.mjs';
-const MenuPopup = /*#__PURE__*/function () {
-  const MenuPopup = function (_a) {
-    var isLoading = _a.isLoading,
-      loadingSkeleton = _a.loadingSkeleton,
-      children = _a.children;
-    var menuTriggerState = useMenuTriggerContext().menuTriggerState;
-    var onClose = function () {
-      return menuTriggerState.close();
-    };
-    // Handle events that should cause the menu to close,
-    // e.g. blur, clicking outside, or pressing the escape key.
-    var overlayRef = /*#__PURE__*/React.createRef();
-    var overlayProps = useOverlay({
-      onClose: onClose,
-      isOpen: menuTriggerState.isOpen,
-      isDismissable: true
-    }, overlayRef).overlayProps;
-    // 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 ? (/*#__PURE__*/React.createElement("div", __assign({}, overlayProps, {
-      ref: overlayRef,
-      className: modules_a08aa86f.menuPopup
-    }), isLoading && loadingSkeleton ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DismissButton, {
-      onDismiss: onClose
-    }), loadingSkeleton, /*#__PURE__*/React.createElement(DismissButton, {
-      onDismiss: onClose
-    }))) : (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    React.createElement(FocusScope, {
-      contain: true,
-      autoFocus: true,
-      restoreFocus: true
-    }, /*#__PURE__*/React.createElement(DismissButton, {
-      onDismiss: onClose
-    }), children, /*#__PURE__*/React.createElement(DismissButton, {
-      onDismiss: onClose
-    }))))) : (/*#__PURE__*/React.createElement(React.Fragment, null));
+var MenuPopup = function (_a) {
+  var isLoading = _a.isLoading,
+    loadingSkeleton = _a.loadingSkeleton,
+    children = _a.children;
+  var menuTriggerState = useMenuTriggerContext().menuTriggerState;
+  var onClose = function () {
+    return menuTriggerState.close();
   };
-  MenuPopup.displayName = 'FilterMultiSelect.MenuPopup';
-  return MenuPopup;
-}();
+  // Handle events that should cause the menu to close,
+  // e.g. blur, clicking outside, or pressing the escape key.
+  var overlayRef = /*#__PURE__*/React__default.createRef();
+  var overlayProps = useOverlay({
+    onClose: onClose,
+    isOpen: menuTriggerState.isOpen,
+    isDismissable: true
+  }, overlayRef).overlayProps;
+  // 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 ? (/*#__PURE__*/React__default.createElement("div", __assign({}, overlayProps, {
+    ref: overlayRef,
+    className: modules_a08aa86f.menuPopup
+  }), isLoading && loadingSkeleton ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DismissButton, {
+    onDismiss: onClose
+  }), loadingSkeleton, /*#__PURE__*/React__default.createElement(DismissButton, {
+    onDismiss: onClose
+  }))) : (
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/no-autofocus
+  React__default.createElement(FocusScope, {
+    contain: true,
+    autoFocus: true,
+    restoreFocus: true
+  }, /*#__PURE__*/React__default.createElement(DismissButton, {
+    onDismiss: onClose
+  }), children, /*#__PURE__*/React__default.createElement(DismissButton, {
+    onDismiss: onClose
+  }))))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null));
+};
+MenuPopup.displayName = 'FilterMultiSelect.MenuPopup';
 export { MenuPopup };

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

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useEffect } from 'react';
+import React__default, { 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';
@@ -8,78 +8,75 @@ import '../../context/SelectionProvider/SelectionProvider.mjs';
 import modules_a08aa86f 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 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;
-      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(modules_a08aa86f.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));
+      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    });
   };
-  ResponsiveMenuPopup.displayName = 'FilterMultiSelect.ResponsiveMenuPopup';
-  return ResponsiveMenuPopup;
-}();
+  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__default.createElement(FocusOn, {
+    enabled: menuTriggerState.isOpen,
+    scrollLock: true,
+    returnFocus: false,
+    onClickOutside: menuTriggerState.close,
+    onEscapeKey: menuTriggerState.close,
+    onDeactivation: handleReturnFocus
+  }, /*#__PURE__*/React__default.createElement("div", __assign({
+    ref: setFloatingElement,
+    style: floatingStyles,
+    className: classnames(modules_a08aa86f.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__default.createElement(React__default.Fragment, null));
+};
+ResponsiveMenuPopup.displayName = 'FilterMultiSelect.ResponsiveMenuPopup';
 export { ResponsiveMenuPopup };

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

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import React, { useId } from 'react';
+import React__default, { useId } from 'react';
 import { useIntl, FormattedMessage } from '@cultureamp/i18n-react-intl';
 import { useFocusRing } from '@react-aria/focus';
 import { useOption } from '@react-aria/listbox';
@@ -11,58 +11,55 @@ import { VisuallyHidden } from '../../../../VisuallyHidden/VisuallyHidden.mjs';
 import '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
 import modules_c285230b from './MultiSelectOption.module.scss.mjs';
-const MultiSelectOption = /*#__PURE__*/function () {
-  const MultiSelectOption = function (_a) {
-    var _b, _c, _d;
-    var classNameOverride = _a.classNameOverride,
-      item = _a.item;
-    var state = useSelectionContext().selectionState;
-    // Get props for the option element
-    var ref = /*#__PURE__*/React.createRef();
-    var _e = useOption({
-        key: item.key
-      }, state, ref),
-      optionProps = _e.optionProps,
-      isSelected = _e.isSelected,
-      isDisabled = _e.isDisabled;
-    // Determine whether we should show a keyboard
-    // focus ring for accessibility
-    var _f = useFocusRing(),
-      isFocusVisible = _f.isFocusVisible,
-      focusProps = _f.focusProps;
-    var countElementId = useId();
-    var formatNumber = useIntl().formatNumber;
-    return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(optionProps, focusProps), {
-      ref: ref,
-      className: classnames(modules_c285230b.option, classNameOverride, isSelected && modules_c285230b.isSelected, isFocusVisible && modules_c285230b.isFocusVisible, isDisabled && modules_c285230b.isDisabled),
-      "aria-label": (_b = item.value) === null || _b === void 0 ? void 0 : _b.label,
-      "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : undefined
-    }), /*#__PURE__*/React.createElement("span", {
-      className: classnames(modules_c285230b.icon, isSelected && modules_c285230b.isSelected)
-    }, isSelected && /*#__PURE__*/React.createElement(Icon, {
-      name: "check",
-      isPresentational: true
-    })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && (/*#__PURE__*/React.createElement("span", {
-      id: countElementId,
-      className: modules_c285230b.badgeContainer
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      defaultMessage: "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>",
-      id: "filterMultiSelectMultiSelectOption.available",
-      description: "Number of filter items available",
-      values: {
-        count: formatNumber(parseInt(item.value.count)),
-        Badge: function (children) {
-          return /*#__PURE__*/React.createElement(Badge, {
-            classNameOverride: modules_c285230b.badge
-          }, children);
-        },
-        VisuallyHidden: function (children) {
-          return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
-        }
+var MultiSelectOption = function (_a) {
+  var _b, _c, _d;
+  var classNameOverride = _a.classNameOverride,
+    item = _a.item;
+  var state = useSelectionContext().selectionState;
+  // Get props for the option element
+  var ref = /*#__PURE__*/React__default.createRef();
+  var _e = useOption({
+      key: item.key
+    }, state, ref),
+    optionProps = _e.optionProps,
+    isSelected = _e.isSelected,
+    isDisabled = _e.isDisabled;
+  // Determine whether we should show a keyboard
+  // focus ring for accessibility
+  var _f = useFocusRing(),
+    isFocusVisible = _f.isFocusVisible,
+    focusProps = _f.focusProps;
+  var countElementId = useId();
+  var formatNumber = useIntl().formatNumber;
+  return /*#__PURE__*/React__default.createElement("li", __assign({}, mergeProps(optionProps, focusProps), {
+    ref: ref,
+    className: classnames(modules_c285230b.option, classNameOverride, isSelected && modules_c285230b.isSelected, isFocusVisible && modules_c285230b.isFocusVisible, isDisabled && modules_c285230b.isDisabled),
+    "aria-label": (_b = item.value) === null || _b === void 0 ? void 0 : _b.label,
+    "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : undefined
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: classnames(modules_c285230b.icon, isSelected && modules_c285230b.isSelected)
+  }, isSelected && /*#__PURE__*/React__default.createElement(Icon, {
+    name: "check",
+    isPresentational: true
+  })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && (/*#__PURE__*/React__default.createElement("span", {
+    id: countElementId,
+    className: modules_c285230b.badgeContainer
+  }, /*#__PURE__*/React__default.createElement(FormattedMessage, {
+    defaultMessage: "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>",
+    id: "filterMultiSelectMultiSelectOption.available",
+    description: "Number of filter items available",
+    values: {
+      count: formatNumber(parseInt(item.value.count)),
+      Badge: function (children) {
+        return /*#__PURE__*/React__default.createElement(Badge, {
+          classNameOverride: modules_c285230b.badge
+        }, children);
+      },
+      VisuallyHidden: function (children) {
+        return /*#__PURE__*/React__default.createElement(VisuallyHidden, null, children);
       }
-    }))));
-  };
-  MultiSelectOption.displayName = 'FilterMultiSelect.Option';
-  return MultiSelectOption;
-}();
+    }
+  }))));
+};
+MultiSelectOption.displayName = 'FilterMultiSelect.Option';
 export { MultiSelectOption };

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

@@ -1,19 +1,16 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { Text } from '../../../../Text/Text.mjs';
 import modules_738825e8 from './NoResults.module.scss.mjs';
-const NoResults = /*#__PURE__*/function () {
-  const NoResults = function (_a) {
-    var children = _a.children,
-      restProps = __rest(_a, ["children"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
-      className: modules_738825e8.container
-    }, restProps), /*#__PURE__*/React.createElement(Text, {
-      variant: "extra-small",
-      color: "dark-reduced-opacity"
-    }, children));
-  };
-  NoResults.displayName = 'FilterMultiSelect.NoResults';
-  return NoResults;
-}();
+var NoResults = function (_a) {
+  var children = _a.children,
+    restProps = __rest(_a, ["children"]);
+  return /*#__PURE__*/React__default.createElement("div", __assign({
+    className: modules_738825e8.container
+  }, restProps), /*#__PURE__*/React__default.createElement(Text, {
+    variant: "extra-small",
+    color: "dark-reduced-opacity"
+  }, children));
+};
+NoResults.displayName = 'FilterMultiSelect.NoResults';
 export { NoResults };

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

@@ -1,50 +1,47 @@
-import React, { useId } from 'react';
+import React__default, { useId } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import { InputSearch } from '../../../../Input/InputSearch/InputSearch.mjs';
 import '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
 import modules_a21b6cbd from './SearchInput.module.scss.mjs';
-const SearchInput = /*#__PURE__*/function () {
-  const SearchInput = function (_a) {
-    var label = _a.label,
-      id = _a.id,
-      isLoading = _a.isLoading;
-    var formatMessage = useIntl().formatMessage;
-    var _b = useSelectionContext(),
-      setSearchQuery = _b.setSearchQuery,
-      searchQuery = _b.searchQuery;
-    var handleChange = function (e) {
-      setSearchQuery(e.target.value);
-    };
-    var handleClear = function () {
-      return setSearchQuery('');
-    };
-    var reactId = useId();
-    var inputId = id !== null && id !== void 0 ? id : reactId;
-    var defaultAriaLabel = formatMessage({
-      id: 'filterMultiSelectSearchInput.label',
-      defaultMessage: 'Filter options by search query',
-      description: 'Label for the search input'
-    });
-    var placeholder = formatMessage({
-      id: 'filterMultiSelectSearchInput.placeholder',
-      defaultMessage: 'Search…',
-      description: 'Placeholder for the search input'
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: modules_a21b6cbd.inputSearchContainer
-    }, /*#__PURE__*/React.createElement(InputSearch, {
-      id: inputId,
-      "aria-label": label !== null && label !== void 0 ? label : defaultAriaLabel,
-      secondary: true,
-      placeholder: placeholder,
-      value: searchQuery,
-      onChange: handleChange,
-      onClear: handleClear,
-      loading: isLoading
-    }));
+var SearchInput = function (_a) {
+  var label = _a.label,
+    id = _a.id,
+    isLoading = _a.isLoading;
+  var formatMessage = useIntl().formatMessage;
+  var _b = useSelectionContext(),
+    setSearchQuery = _b.setSearchQuery,
+    searchQuery = _b.searchQuery;
+  var handleChange = function (e) {
+    setSearchQuery(e.target.value);
   };
-  SearchInput.displayName = 'FilterMultiSelect.SearchInput';
-  return SearchInput;
-}();
+  var handleClear = function () {
+    return setSearchQuery('');
+  };
+  var reactId = useId();
+  var inputId = id !== null && id !== void 0 ? id : reactId;
+  var defaultAriaLabel = formatMessage({
+    id: 'filterMultiSelectSearchInput.label',
+    defaultMessage: 'Filter options by search query',
+    description: 'Label for the search input'
+  });
+  var placeholder = formatMessage({
+    id: 'filterMultiSelectSearchInput.placeholder',
+    defaultMessage: 'Search…',
+    description: 'Placeholder for the search input'
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: modules_a21b6cbd.inputSearchContainer
+  }, /*#__PURE__*/React__default.createElement(InputSearch, {
+    id: inputId,
+    "aria-label": label !== null && label !== void 0 ? label : defaultAriaLabel,
+    secondary: true,
+    placeholder: placeholder,
+    value: searchQuery,
+    onChange: handleChange,
+    onClear: handleClear,
+    loading: isLoading
+  }));
+};
+SearchInput.displayName = 'FilterMultiSelect.SearchInput';
 export { SearchInput };

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React__default from 'react';
 import { Divider } from '../../../../Divider/Divider.mjs';
 import modules_07bb815f from './SectionDivider.module.scss.mjs';
 var SectionDivider = function () {
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React__default.createElement("li", {
     className: modules_07bb815f.divider,
     "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement(Divider, {
+  }, /*#__PURE__*/React__default.createElement(Divider, {
     variant: "canvas"
   }));
 };

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.mjs

@@ -1,41 +1,38 @@
-import React from 'react';
+import React__default from 'react';
 import { FormattedMessage } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
 import '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { useSelectionContext } from '../../../context/SelectionProvider/SelectionProvider.mjs';
 import modules_fc9c301d from '../SelectionControlButton.module.scss.mjs';
-const ClearButton = /*#__PURE__*/function () {
-  const ClearButton = function () {
-    var selectionState = useSelectionContext().selectionState;
-    var filteredOptions = Array.from(selectionState.collection.getKeys());
-    var selectedOptions = Array.from(selectionState.selectionManager.selectedKeys);
-    var isDisabled = filteredOptions.length === 0 || !filteredOptions.find(function (key) {
-      return selectionState.selectionManager.isSelected(key);
-    });
-    return /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classnames(modules_fc9c301d.button, isDisabled && modules_fc9c301d.isDisabled),
-      "aria-disabled": isDisabled,
-      onClick: function () {
-        if (!isDisabled) {
-          selectionState.selectionManager.setSelectedKeys(selectedOptions.filter(function (option) {
-            return !filteredOptions.includes(option);
-          }));
-        }
+var ClearButton = function () {
+  var selectionState = useSelectionContext().selectionState;
+  var filteredOptions = Array.from(selectionState.collection.getKeys());
+  var selectedOptions = Array.from(selectionState.selectionManager.selectedKeys);
+  var isDisabled = filteredOptions.length === 0 || !filteredOptions.find(function (key) {
+    return selectionState.selectionManager.isSelected(key);
+  });
+  return /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: classnames(modules_fc9c301d.button, isDisabled && modules_fc9c301d.isDisabled),
+    "aria-disabled": isDisabled,
+    onClick: function () {
+      if (!isDisabled) {
+        selectionState.selectionManager.setSelectedKeys(selectedOptions.filter(function (option) {
+          return !filteredOptions.includes(option);
+        }));
       }
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      defaultMessage: "Clear<VisuallyHidden> selections</VisuallyHidden>",
-      id: "filterMultiSelectClearButton.label",
-      description: "Clear button label for filter multi-select",
-      values: {
-        VisuallyHidden: function (children) {
-          return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
-        }
+    }
+  }, /*#__PURE__*/React__default.createElement(FormattedMessage, {
+    defaultMessage: "Clear<VisuallyHidden> selections</VisuallyHidden>",
+    id: "filterMultiSelectClearButton.label",
+    description: "Clear button label for filter multi-select",
+    values: {
+      VisuallyHidden: function (children) {
+        return /*#__PURE__*/React__default.createElement(VisuallyHidden, null, children);
       }
-    }));
-  };
-  ClearButton.displayName = 'FilterMultiSelect.ClearButton';
-  return ClearButton;
-}();
+    }
+  }));
+};
+ClearButton.displayName = 'FilterMultiSelect.ClearButton';
 export { ClearButton };