@kaizen/components 1.25.0 → 1.26.0

package/dist/cjs/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Button = require('../../../Button/Button/Button.cjs');
+require('../../../Button/IconButton/IconButton.cjs');
+require('../../../Button/PaginationLink/PaginationLink.cjs');
+require('../../../Button/DirectionalLink/DirectionalLink.cjs');
+var LoadMoreButton_module = require('./LoadMoreButton.module.scss.cjs');
+const LoadMoreButton = /*#__PURE__*/function () {
+  const LoadMoreButton = function (props) {
+    return React.createElement("div", {
+      className: LoadMoreButton_module.container
+    }, React.createElement(Button.Button, tslib.__assign({}, props, {
+      fullWidth: true
+    })));
+  };
+  LoadMoreButton.displayName = "FilterMultiSelect.LoadMoreButton";
+  return LoadMoreButton;
+}();
+exports.LoadMoreButton = LoadMoreButton;
+//# sourceMappingURL=LoadMoreButton.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadMoreButton.cjs","sources":["../../../../../src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.tsx"],"sourcesContent":["import React from \"react\"\nimport { Button, ButtonProps } from \"~components/Button\"\nimport styles from \"./LoadMoreButton.module.scss\"\n\nexport type LoadMoreButtonProps = ButtonProps\n\nexport const LoadMoreButton = (props: LoadMoreButtonProps): JSX.Element => (\n  <div className={styles.container}>\n    <Button {...props} fullWidth />\n  </div>\n)\n\nLoadMoreButton.displayName = \"FilterMultiSelect.LoadMoreButton\"\n"],"names":["LoadMoreButton","props","React","createElement","className","styles","container","Button","__assign","fullWidth","displayName"],"mappings":";;;;;;;;;MAMaA,cAAc;EAAA,MAAdA,cAAc,GAAG,SAAAA,CAACC,KAA0B,EAAA;IAAkB,OACzEC,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,qBAAM,CAACC;IAAS,CAAA,EAC9BJ,KAAC,CAAAC,aAAA,CAAAI,aAAM,EAAKC,KAAAA,CAAAA,QAAA,CAAA,CAAA,CAAA,EAAAP,KAAK,EAAE;MAAAQ,SAAS;OAAG,CAC3B;EACP,CAAA;EAEDT,cAAc,CAACU,WAAW,GAAG,kCAAkC;EAAA,OANlDV,cAAc;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "container": "LoadMoreButton-module_container__5VoUY"
+};
+module.exports = styles;
+//# sourceMappingURL=LoadMoreButton.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadMoreButton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var MenuFooter_module = require('./MenuFooter.module.scss.cjs');
+const MenuFooter = /*#__PURE__*/function () {
+  const MenuFooter = function (_a) {
+    var children = _a.children;
+    return React.createElement("div", {
+      className: MenuFooter_module.footer
+    }, children);
+  };
+  MenuFooter.displayName = "FilterMultiSelect.MenuFooter";
+  return MenuFooter;
+}();
+exports.MenuFooter = MenuFooter;
+//# sourceMappingURL=MenuFooter.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuFooter.cjs","sources":["../../../../../../src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.tsx"],"sourcesContent":["import React from \"react\"\nimport styles from \"./MenuFooter.module.scss\"\n\nexport type MenuFooterProps = {\n  children: React.ReactNode\n}\n\nexport const MenuFooter = ({ children }: MenuFooterProps): JSX.Element => (\n  <div className={styles.footer}>{children}</div>\n)\n\nMenuFooter.displayName = \"FilterMultiSelect.MenuFooter\"\n"],"names":["MenuFooter","_a","children","React","createElement","className","styles","footer","displayName"],"mappings":";;;;MAOaA,UAAU;EAAA,MAAVA,UAAU,GAAG,SAAAA,CAACC,EAA6B,EAAA;IAA3B,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;IAAqC,OACxEC,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,iBAAM,CAACC;KAAM,EAAGL,QAAQ,CAAO;EADyB,CAEzE;EAEDF,UAAU,CAACQ,WAAW,GAAG,8BAA8B;EAAA,OAJ1CR,UAAU;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "footer": "MenuFooter-module_footer__EAJQH"
+};
+module.exports = styles;
+//# sourceMappingURL=MenuFooter.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuFooter.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var loadingSkeleton = require('@kaizen/loading-skeleton');
+var MenuFooter = require('../MenuFooter/MenuFooter.cjs');
+var MenuLoadingSkeleton_module = require('./MenuLoadingSkeleton.module.scss.cjs');
+const MenuLoadingSkeleton = /*#__PURE__*/function () {
+  const MenuLoadingSkeleton = function (_a) {
+    var _b = _a.isAnimated,
+      isAnimated = _b === void 0 ? false : _b;
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+      className: MenuLoadingSkeleton_module.loadingContainer
+    }, React.createElement(loadingSkeleton.LoadingInput, {
+      classNameOverride: MenuLoadingSkeleton_module.loadingInput,
+      isAnimated: isAnimated
+    }), React.createElement(loadingSkeleton.LoadingParagraph, {
+      isAnimated: isAnimated
+    }), React.createElement(loadingSkeleton.LoadingParagraph, {
+      isAnimated: isAnimated
+    }), React.createElement(loadingSkeleton.LoadingParagraph, {
+      isAnimated: isAnimated
+    }), React.createElement(loadingSkeleton.LoadingParagraph, {
+      isAnimated: isAnimated
+    }), React.createElement(loadingSkeleton.LoadingParagraph, {
+      isAnimated: isAnimated
+    })), React.createElement(MenuFooter.MenuFooter, null, React.createElement(loadingSkeleton.LoadingInput, {
+      width: 40,
+      height: 36,
+      isAnimated: isAnimated
+    }), React.createElement(loadingSkeleton.LoadingInput, {
+      width: 30,
+      height: 36,
+      isAnimated: isAnimated
+    })));
+  };
+  MenuLoadingSkeleton.displayName = "FilterMultiSelect.MenuLoadingSkeleton";
+  return MenuLoadingSkeleton;
+}();
+exports.MenuLoadingSkeleton = MenuLoadingSkeleton;
+//# sourceMappingURL=MenuLoadingSkeleton.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLoadingSkeleton.cjs","sources":["../../../../../../src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.tsx"],"sourcesContent":["import React from \"react\"\nimport { LoadingInput, LoadingParagraph } from \"@kaizen/loading-skeleton\"\nimport { MenuFooter } from \"../MenuFooter\"\nimport styles from \"./MenuLoadingSkeleton.module.scss\"\n\nexport type MenuLoadingSkeletonProps = {\n  isAnimated?: boolean\n}\n\nexport const MenuLoadingSkeleton = ({\n  isAnimated = false,\n}: MenuLoadingSkeletonProps): JSX.Element => (\n  <>\n    <div className={styles.loadingContainer}>\n      <LoadingInput\n        classNameOverride={styles.loadingInput}\n        isAnimated={isAnimated}\n      />\n      <LoadingParagraph isAnimated={isAnimated} />\n      <LoadingParagraph isAnimated={isAnimated} />\n      <LoadingParagraph isAnimated={isAnimated} />\n      <LoadingParagraph isAnimated={isAnimated} />\n      <LoadingParagraph isAnimated={isAnimated} />\n    </div>\n    <MenuFooter>\n      <LoadingInput width={40} height={36} isAnimated={isAnimated} />\n      <LoadingInput width={30} height={36} isAnimated={isAnimated} />\n    </MenuFooter>\n  </>\n)\n\nMenuLoadingSkeleton.displayName = \"FilterMultiSelect.MenuLoadingSkeleton\"\n"],"names":["MenuLoadingSkeleton","_a","_b","isAnimated","React","createElement","Fragment","className","styles","loadingContainer","LoadingInput","classNameOverride","loadingInput","LoadingParagraph","MenuFooter","width","height","displayName"],"mappings":";;;;;;MASaA,mBAAmB;EAAA,MAAnBA,mBAAmB,GAAG,SAAAA,CAACC,EAET,EAAA;IADzB,IAAAC,EAAA,GAAAD,EAAA,CAAAE,UAAkB;MAAlBA,UAAU,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAAA,EAAA;IACyB,OAC3CE,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,EACEF,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKE,SAAS,EAAEC,0BAAM,CAACC;IAAgB,CAAA,EACrCL,KAAC,CAAAC,aAAA,CAAAK,eAAAA,CAAAA,YAAY,EACX;MAAAC,iBAAiB,EAAEH,0BAAM,CAACI,YAAY;MACtCT,UAAU,EAAEA;KACZ,CAAA,EACFC,KAAA,CAAAC,aAAA,CAACQ,eAAAA,CAAAA,gBAAgB,EAAA;MAACV,UAAU,EAAEA;IAAU,CAAI,CAAA,EAC5CC,KAAA,CAAAC,aAAA,CAACQ,eAAAA,CAAAA,gBAAgB,EAAA;MAACV,UAAU,EAAEA;IAAU,CAAI,CAAA,EAC5CC,KAAA,CAAAC,aAAA,CAACQ,eAAAA,CAAAA,gBAAgB,EAAA;MAACV,UAAU,EAAEA;IAAU,CAAI,CAAA,EAC5CC,KAAA,CAAAC,aAAA,CAACQ,eAAAA,CAAAA,gBAAgB,EAAA;MAACV,UAAU,EAAEA;IAAU,CAAI,CAAA,EAC5CC,KAAA,CAAAC,aAAA,CAACQ,eAAgB,CAAAA,gBAAA,EAAC;MAAAV,UAAU,EAAEA;MAAc,CACxC,EACNC,KAAA,CAAAC,aAAA,CAACS,UAAAA,CAAAA,UAAU,EAAA,IAAA,EACTV,KAAA,CAAAC,aAAA,CAACK,eAAY,CAAAA,YAAA,EAAA;MAACK,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEb,UAAU,EAAEA;KAAc,CAAA,EAC/DC,KAAA,CAAAC,aAAA,CAACK,4BAAY,EAAC;MAAAK,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEb,UAAU,EAAEA;IAAc,CAAA,CAAA,CACpD,CACZ;EAjBwC,CAkB5C;EAEDH,mBAAmB,CAACiB,WAAW,GAAG,uCAAuC;EAAA,OAtB5DjB,mBAAmB;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var styles = {
+  "loadingInput": "MenuLoadingSkeleton-module_loadingInput__XjXUs",
+  "loadingContainer": "MenuLoadingSkeleton-module_loadingContainer__Re0NU"
+};
+module.exports = styles;
+//# sourceMappingURL=MenuLoadingSkeleton.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLoadingSkeleton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+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');
+const MenuPopup = /*#__PURE__*/function () {
+  const MenuPopup = function (_a) {
+    var isLoading = _a.isLoading,
+      loadingSkeleton = _a.loadingSkeleton,
+      children = _a.children;
+    var menuTriggerState = MenuTriggerProvider.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 = React.createRef();
+    var overlayProps = overlays.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 ? React.createElement("div", tslib.__assign({}, overlayProps, {
+      ref: overlayRef,
+      className: MenuPopup_module.menuPopup
+    }), isLoading && loadingSkeleton ? React.createElement(React.Fragment, null, React.createElement(overlays.DismissButton, {
+      onDismiss: onClose
+    }), loadingSkeleton, React.createElement(overlays.DismissButton, {
+      onDismiss: onClose
+    })) :
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    React.createElement(focus.FocusScope, {
+      contain: true,
+      autoFocus: true,
+      restoreFocus: true
+    }, React.createElement(overlays.DismissButton, {
+      onDismiss: onClose
+    }), children, React.createElement(overlays.DismissButton, {
+      onDismiss: onClose
+    }))) : React.createElement(React.Fragment, null);
+  };
+  MenuPopup.displayName = "FilterMultiSelect.MenuPopup";
+  return MenuPopup;
+}();
+exports.MenuPopup = MenuPopup;
+//# sourceMappingURL=MenuPopup.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopup.cjs","sources":["../../../../../src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx"],"sourcesContent":["import React from \"react\"\nimport { FocusScope } from \"@react-aria/focus\"\nimport { useOverlay, DismissButton } from \"@react-aria/overlays\"\nimport { useMenuTriggerContext } from \"../../context\"\nimport styles from \"./MenuPopup.module.scss\"\n\nexport type MenuPopupProps = {\n  isLoading?: boolean\n  loadingSkeleton?: React.ReactNode\n  children: React.ReactNode\n}\n\nexport const MenuPopup = ({\n  isLoading,\n  loadingSkeleton,\n  children,\n}: MenuPopupProps): JSX.Element => {\n  const { menuTriggerState } = useMenuTriggerContext()\n\n  const onClose = (): void => menuTriggerState.close()\n\n  // Handle events that should cause the menu to close,\n  // e.g. blur, clicking outside, or pressing the escape key.\n  const overlayRef = React.createRef<HTMLDivElement>()\n  const { overlayProps } = useOverlay(\n    {\n      onClose,\n      isOpen: menuTriggerState.isOpen,\n      isDismissable: true,\n    },\n    overlayRef\n  )\n\n  // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed\n  // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)\n  // In addition, add hidden <DismissButton> components at the start and end of the list\n  // to allow screen reader users to dismiss the popup easily.\n  return menuTriggerState.isOpen ? (\n    <div {...overlayProps} ref={overlayRef} className={styles.menuPopup}>\n      {isLoading && loadingSkeleton ? (\n        <>\n          <DismissButton onDismiss={onClose} />\n          {loadingSkeleton}\n          <DismissButton onDismiss={onClose} />\n        </>\n      ) : (\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        <FocusScope contain autoFocus restoreFocus>\n          <DismissButton onDismiss={onClose} />\n\n          {children}\n          <DismissButton onDismiss={onClose} />\n        </FocusScope>\n      )}\n    </div>\n  ) : (\n    <></>\n  )\n}\n\nMenuPopup.displayName = \"FilterMultiSelect.MenuPopup\"\n"],"names":["MenuPopup","_a","isLoading","loadingSkeleton","children","menuTriggerState","useMenuTriggerContext","onClose","close","overlayRef","React","createRef","overlayProps","useOverlay","isOpen","isDismissable","createElement","__assign","ref","className","styles","menuPopup","Fragment","DismissButton","onDismiss","FocusScope","contain","autoFocus","restoreFocus","displayName"],"mappings":";;;;;;;;;MAYaA,SAAS;EAAA,MAATA,SAAS,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHf,IAAAC,SAAS,eAAA;MACTC,eAAe,GAAAF,EAAA,CAAAE,eAAA;MACfC,QAAQ,GAAAH,EAAA,CAAAG,QAAA;IAEA,IAAAC,gBAAgB,GAAKC,yCAAqB,CAAE,CAAA,iBAA5B;IAExB,IAAMC,OAAO,GAAG,SAAAA,CAAA,EAAA;MAAY,OAAAF,gBAAgB,CAACG,KAAK,CAAA,CAAE;IAAxB,CAAwB;;;IAIpD,IAAMC,UAAU,GAAGC,KAAK,CAACC,SAAS,EAAkB;IAC5C,IAAAC,YAAY,GAAKC,QAAAA,CAAAA,UAAU,CACjC;MACEN,OAAO,EAAAA,OAAA;MACPO,MAAM,EAAET,gBAAgB,CAACS,MAAM;MAC/BC,aAAa,EAAE;KAChB,EACDN,UAAU,CACX,CAAAG,YAPmB;;;;;IAapB,OAAOP,gBAAgB,CAACS,MAAM,GAC5BJ,KAAS,CAAAM,aAAA,CAAA,KAAA,EAAAC,KAAAA,CAAAA,QAAA,CAAA,CAAA,CAAA,EAAAL,YAAY,EAAE;MAAAM,GAAG,EAAET,UAAU;MAAEU,SAAS,EAAEC,gBAAM,CAACC;IAAS,CAAA,CAAA,EAChEnB,SAAS,IAAIC,eAAe,GAC3BO,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAY,QAAA,EAAA,IAAA,EACEZ,KAAA,CAAAM,aAAA,CAACO,QAAAA,CAAAA,aAAa,EAAA;MAACC,SAAS,EAAEjB;IAAO,CAAI,CAAA,EACpCJ,eAAe,EAChBO,KAAC,CAAAM,aAAA,CAAAO,QAAa,CAAAA,aAAA,EAAC;MAAAC,SAAS,EAAEjB;MAAW,CACpC;;IAGHG,KAAA,CAAAM,aAAA,CAACS,KAAU,CAAAA,UAAA,EAAC;MAAAC,OAAO,EAAC,IAAA;MAAAC,SAAS;MAACC,YAAY,EAAA;IAAA,CAAA,EACxClB,KAAA,CAAAM,aAAA,CAACO,QAAAA,CAAAA,aAAa,EAAA;MAACC,SAAS,EAAEjB;IAAO,CAAI,CAAA,EAEpCH,QAAQ,EACTM,KAAA,CAAAM,aAAA,CAACO,QAAAA,CAAAA,aAAa,EAAC;MAAAC,SAAS,EAAEjB;IAAO,EAAI,CAExC,CACG,GAENG,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAY,QAAA,EAAA,IAAA,CACD;EACH,CAAC;EAEDtB,SAAS,CAAC6B,WAAW,GAAG,6BAA6B;EAAA,OAhDxC7B,SAAS;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "menuPopup": "MenuPopup-module_menuPopup__JlPk3"
+};
+module.exports = styles;
+//# sourceMappingURL=MenuPopup.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopup.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var focus = require('@react-aria/focus');
+var listbox = require('@react-aria/listbox');
+var utils = require('@react-aria/utils');
+var classnames = require('classnames');
+var uuid = require('uuid');
+var a11y = require('@kaizen/a11y');
+var draftBadge = require('@kaizen/draft-badge');
+require('../../../Icon/subcomponents/SVG/SVG.cjs');
+var CheckIcon = require('../../../Icon/CheckIcon.cjs');
+require('../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
+var SelectionProvider = require('../../context/SelectionProvider/SelectionProvider.cjs');
+var MultiSelectOption_module = require('./MultiSelectOption.module.scss.cjs');
+const MultiSelectOption = /*#__PURE__*/function () {
+  const MultiSelectOption = function (_a) {
+    var _b, _c, _d;
+    var classNameOverride = _a.classNameOverride,
+      item = _a.item;
+    var state = SelectionProvider.useSelectionContext().selectionState;
+    // Get props for the option element
+    var ref = React.createRef();
+    var _e = listbox.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 = focus.useFocusRing(),
+      isFocusVisible = _f.isFocusVisible,
+      focusProps = _f.focusProps;
+    var countElementId = React.useMemo(function () {
+      return uuid.v4();
+    }, []);
+    return React.createElement("li", tslib.__assign({}, utils.mergeProps(optionProps, focusProps), {
+      ref: ref,
+      className: classnames(MultiSelectOption_module.option, classNameOverride, isSelected && MultiSelectOption_module.isSelected, isFocusVisible && MultiSelectOption_module.isFocusVisible, isDisabled && MultiSelectOption_module.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
+    }), React.createElement("span", {
+      className: classnames(MultiSelectOption_module.icon, isSelected && MultiSelectOption_module.isSelected)
+    }, isSelected && React.createElement(CheckIcon.CheckIcon, {
+      role: "presentation"
+    })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && React.createElement("span", {
+      id: countElementId,
+      className: MultiSelectOption_module.badgeContainer
+    }, React.createElement(draftBadge.Badge, {
+      classNameOverride: MultiSelectOption_module.badge
+    }, item.value.count), React.createElement(a11y.VisuallyHidden, null, " available")));
+  };
+  MultiSelectOption.displayName = "FilterMultiSelect.Option";
+  return MultiSelectOption;
+}();
+exports.MultiSelectOption = MultiSelectOption;
+//# sourceMappingURL=MultiSelectOption.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOption.cjs","sources":["../../../../../src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport { useFocusRing } from \"@react-aria/focus\"\nimport { useOption } from \"@react-aria/listbox\"\nimport { mergeProps } from \"@react-aria/utils\"\nimport classnames from \"classnames\"\nimport { v4 } from \"uuid\"\nimport { VisuallyHidden } from \"@kaizen/a11y\"\nimport { Badge } from \"@kaizen/draft-badge\"\nimport { CheckIcon } from \"~components/Icon\"\nimport { useSelectionContext } from \"../../context\"\nimport { MultiSelectItem } from \"../../types\"\nimport styles from \"./MultiSelectOption.module.scss\"\n\nexport interface MultiSelectOptionProps {\n  classNameOverride?: string\n  item: MultiSelectItem\n}\n\nexport const MultiSelectOption = ({\n  classNameOverride,\n  item,\n}: MultiSelectOptionProps): JSX.Element => {\n  const { selectionState: state } = useSelectionContext()\n  // Get props for the option element\n  const ref = React.createRef<HTMLLIElement>()\n  const { optionProps, isSelected, isDisabled } = useOption(\n    { key: item.key },\n    state,\n    ref\n  )\n\n  // Determine whether we should show a keyboard\n  // focus ring for accessibility\n  const { isFocusVisible, focusProps } = useFocusRing()\n  const countElementId = useMemo(() => v4(), [])\n\n  return (\n    <li\n      {...mergeProps(optionProps, focusProps)}\n      ref={ref}\n      className={classnames(\n        styles.option,\n        classNameOverride,\n        isSelected && styles.isSelected,\n        isFocusVisible && styles.isFocusVisible,\n        isDisabled && styles.isDisabled\n      )}\n      aria-label={item.value?.label}\n      aria-describedby={item.value?.count ? countElementId : undefined}\n    >\n      <span\n        className={classnames(styles.icon, isSelected && styles.isSelected)}\n      >\n        {isSelected && <CheckIcon role=\"presentation\" />}\n      </span>\n      {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/}\n      {item.rendered}\n      {item.value?.count && (\n        <span id={countElementId} className={styles.badgeContainer}>\n          <Badge classNameOverride={styles.badge}>{item.value.count}</Badge>\n          <VisuallyHidden> available</VisuallyHidden>\n        </span>\n      )}\n    </li>\n  )\n}\n\nMultiSelectOption.displayName = \"FilterMultiSelect.Option\"\n"],"names":["MultiSelectOption","_a","classNameOverride","item","state","useSelectionContext","ref","React","createRef","_e","useOption","key","optionProps","isSelected","isDisabled","_f","useFocusRing","isFocusVisible","focusProps","countElementId","useMemo","v4","createElement","__assign","mergeProps","className","classnames","styles","option","_b","value","label","_c","count","undefined","icon","CheckIcon","role","rendered","_d","id","badgeContainer","Badge","badge","VisuallyHidden","displayName"],"mappings":";;;;;;;;;;;;;;;;MAkBaA,iBAAiB;EAAA,MAAjBA,iBAAiB,GAAG,SAAAA,CAACC,EAGT,EAAA;;QAFvBC,iBAAiB,GAAAD,EAAA,CAAAC,iBAAA;MACjBC,IAAI,GAAAF,EAAA,CAAAE,IAAA;IAEI,IAAgBC,KAAK,GAAKC,qCAAmB,CAAE,CAAA,eAA1B;;IAE7B,IAAMC,GAAG,GAAGC,KAAK,CAACC,SAAS,EAAiB;IACtC,IAAAC,EAAA,GAA0CC,OAAAA,CAAAA,SAAS,CACvD;QAAEC,GAAG,EAAER,IAAI,CAACQ;MAAG,CAAE,EACjBP,KAAK,EACLE,GAAG,CACJ;MAJOM,WAAW,GAAAH,EAAA,CAAAG,WAAA;MAAEC,UAAU,GAAAJ,EAAA,CAAAI,UAAA;MAAEC,UAAU,GAAAL,EAAA,CAAAK,UAI1C;;;IAIK,IAAAC,EAAA,GAAiCC,KAAY,CAAAA,YAAA,CAAA,CAAE;MAA7CC,cAAc,GAAAF,EAAA,CAAAE,cAAA;MAAEC,UAAU,GAAAH,EAAA,CAAAG,UAAmB;IACrD,IAAMC,cAAc,GAAGC,KAAAA,CAAAA,OAAO,CAAC,YAAM;MAAA,OAAAC,IAAAA,CAAAA,EAAE,EAAE;IAAJ,CAAI,EAAE,EAAE,CAAC;IAE9C,OACEd,KAAA,CAAAe,aAAA,CAAA,IAAA,EAAAC,KAAA,CAAAA,QAAA,CAAA,CAAA,CAAA,EACMC,gBAAU,CAACZ,WAAW,EAAEM,UAAU,CAAC,EACvC;MAAAZ,GAAG,EAAEA,GAAG;MACRmB,SAAS,EAAEC,UAAU,CACnBC,wBAAM,CAACC,MAAM,EACb1B,iBAAiB,EACjBW,UAAU,IAAIc,wBAAM,CAACd,UAAU,EAC/BI,cAAc,IAAIU,wBAAM,CAACV,cAAc,EACvCH,UAAU,IAAIa,wBAAM,CAACb,UAAU,CAChC;MACW,YAAA,EAAA,CAAAe,EAAA,GAAA1B,IAAI,CAAC2B,KAAK,MAAE,IAAA,IAAAD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAE,KAAK;MACX,kBAAA,EAAA,CAAA,CAAAC,EAAA,GAAA7B,IAAI,CAAC2B,KAAK,MAAE,IAAA,IAAAE,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAC,KAAK,IAAGd,cAAc,GAAGe;IAAS,CAAA,CAAA,EAEhE3B,KACE,CAAAe,aAAA,CAAA,MAAA,EAAA;MAAAG,SAAS,EAAEC,UAAU,CAACC,wBAAM,CAACQ,IAAI,EAAEtB,UAAU,IAAIc,wBAAM,CAACd,UAAU;IAAC,CAAA,EAElEA,UAAU,IAAIN,KAAC,CAAAe,aAAA,CAAAc,SAAAA,CAAAA,SAAS;MAACC,IAAI,EAAC;IAAc,CAAA,CAAG,CAC3C,EAENlC,IAAI,CAACmC,QAAQ,EACb,CAAA,MAAAnC,IAAI,CAAC2B,KAAK,MAAA,IAAA,IAAAS,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAEN,KAAK,KAChB1B,KAAM,CAAAe,aAAA,CAAA,MAAA,EAAA;MAAAkB,EAAE,EAAErB,cAAc;MAAEM,SAAS,EAAEE,wBAAM,CAACc;IAAc,CAAA,EACxDlC,KAAA,CAAAe,aAAA,CAACoB,UAAK,CAAAA,KAAA,EAAA;MAACxC,iBAAiB,EAAEyB,wBAAM,CAACgB;KAAK,EAAGxC,IAAI,CAAC2B,KAAK,CAACG,KAAK,CAAS,EAClE1B,KAAA,CAAAe,aAAA,CAACsB,IAAc,CAAAA,cAAA,EAA4B,IAAA,EAAA,YAAA,CAAA,CAE9C,CACE;EAET,CAAC;EAED5C,iBAAiB,CAAC6C,WAAW,GAAG,0BAA0B;EAAA,OAjD7C7C,iBAAiB;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var styles = {
+  "icon": "MultiSelectOption-module_icon__rmfL-",
+  "option": "MultiSelectOption-module_option__1vbfi",
+  "badge": "MultiSelectOption-module_badge__VbnQR",
+  "isFocused": "MultiSelectOption-module_isFocused__XhwMs",
+  "isDisabled": "MultiSelectOption-module_isDisabled__FKH9f",
+  "badgeContainer": "MultiSelectOption-module_badgeContainer__6Xw7E",
+  "isSelected": "MultiSelectOption-module_isSelected__dXmuK"
+};
+module.exports = styles;
+//# sourceMappingURL=MultiSelectOption.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOption.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/cjs/FilterMultiSelect/subcomponents/NoResults/NoResults.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var typography = require('@kaizen/typography');
+var NoResults_module = require('./NoResults.module.scss.cjs');
+const NoResults = /*#__PURE__*/function () {
+  const NoResults = function (_a) {
+    var children = _a.children,
+      restProps = tslib.__rest(_a, ["children"]);
+    return React.createElement("div", tslib.__assign({
+      className: NoResults_module.container
+    }, restProps), React.createElement(typography.Paragraph, {
+      variant: "extra-small",
+      color: "dark-reduced-opacity"
+    }, children));
+  };
+  NoResults.displayName = "FilterMultiSelect.NoResults";
+  return NoResults;
+}();
+exports.NoResults = NoResults;
+//# sourceMappingURL=NoResults.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/NoResults/NoResults.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoResults.cjs","sources":["../../../../../src/FilterMultiSelect/subcomponents/NoResults/NoResults.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { Paragraph } from \"@kaizen/typography\"\nimport styles from \"./NoResults.module.scss\"\n\nexport type NoResultsProps = {\n  children: React.ReactNode\n} & HTMLAttributes<HTMLDivElement>\n\nexport const NoResults = ({\n  children,\n  ...restProps\n}: NoResultsProps): JSX.Element => (\n  <div className={styles.container} {...restProps}>\n    <Paragraph variant=\"extra-small\" color=\"dark-reduced-opacity\">\n      {children}\n    </Paragraph>\n  </div>\n)\n\nNoResults.displayName = \"FilterMultiSelect.NoResults\"\n"],"names":["NoResults","_a","children","restProps","__rest","React","className","styles","container","createElement","Paragraph","variant","color","displayName"],"mappings":";;;;;;MAQaA,SAAS;EAAA,MAATA,SAAS,GAAG,SAAAA,CAACC,EAGT,EAAA;IAFf,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACLC,SAAS,GAAAC,KAAAA,CAAAA,MAAA,CAAAH,EAAA,EAFY,YAGzB,CADa;IACqB,OACjCI;MAAKC,SAAS,EAAEC,gBAAM,CAACC;OAAeL,SAAS,CAAA,EAC7CE,KAAA,CAAAI,aAAA,CAACC,UAAS,CAAAA,SAAA,EAAA;MAACC,OAAO,EAAC,aAAa;MAACC,KAAK,EAAC;IAAsB,CAC1D,EAAAV,QAAQ,CACC,CACR;GACP;EAEDF,SAAS,CAACa,WAAW,GAAG,6BAA6B;EAAA,OAXxCb,SAAS;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "container": "NoResults-module_container__itPph"
+};
+module.exports = styles;
+//# sourceMappingURL=NoResults.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoResults.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/FilterMultiSelect/subcomponents/SearchInput/SearchInput.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var uuid = require('uuid');
+var InputSearch = require('../../../Input/InputSearch/InputSearch.cjs');
+require('../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
+var SelectionProvider = require('../../context/SelectionProvider/SelectionProvider.cjs');
+var SearchInput_module = require('./SearchInput.module.scss.cjs');
+const SearchInput = /*#__PURE__*/function () {
+  const SearchInput = function (_a) {
+    var label = _a.label,
+      id = _a.id,
+      isLoading = _a.isLoading;
+    var _b = SelectionProvider.useSelectionContext(),
+      setSearchQuery = _b.setSearchQuery,
+      searchQuery = _b.searchQuery;
+    var handleChange = function (e) {
+      setSearchQuery(e.target.value);
+    };
+    var handleClear = function () {
+      return setSearchQuery("");
+    };
+    var inputId = React.useMemo(function () {
+      return id !== null && id !== void 0 ? id : uuid.v4();
+    }, [id]);
+    return React.createElement("div", {
+      className: SearchInput_module.inputSearchContainer
+    }, React.createElement(InputSearch.InputSearch, {
+      id: inputId,
+      "aria-label": label !== null && label !== void 0 ? label : "Filter options by search query",
+      secondary: true,
+      placeholder: "Search\u2026",
+      value: searchQuery,
+      onChange: handleChange,
+      onClear: handleClear,
+      loading: isLoading
+    }));
+  };
+  SearchInput.displayName = "FilterMultiSelect.SearchInput";
+  return SearchInput;
+}();
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=SearchInput.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/SearchInput/SearchInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.cjs","sources":["../../../../../src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport { v4 } from \"uuid\"\nimport { InputSearch } from \"~components/Input/InputSearch\"\nimport { useSelectionContext } from \"../../context\"\nimport styles from \"./SearchInput.module.scss\"\n\nexport type SearchInputProps = {\n  label?: string\n  id?: string\n  isLoading?: boolean\n}\n\nexport const SearchInput = ({\n  label,\n  id,\n  isLoading,\n}: SearchInputProps): JSX.Element => {\n  const { setSearchQuery, searchQuery } = useSelectionContext()\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n    setSearchQuery(e.target.value)\n  }\n\n  const handleClear = (): void => setSearchQuery(\"\")\n\n  const inputId = useMemo(() => id ?? v4(), [id])\n\n  return (\n    <div className={styles.inputSearchContainer}>\n      <InputSearch\n        id={inputId}\n        aria-label={label ?? \"Filter options by search query\"}\n        secondary\n        placeholder=\"Search…\"\n        value={searchQuery}\n        onChange={handleChange}\n        onClear={handleClear}\n        loading={isLoading}\n      />\n    </div>\n  )\n}\n\nSearchInput.displayName = \"FilterMultiSelect.SearchInput\"\n"],"names":["SearchInput","_a","label","id","isLoading","_b","useSelectionContext","setSearchQuery","searchQuery","handleChange","e","target","value","handleClear","inputId","useMemo","v4","React","createElement","className","styles","inputSearchContainer","InputSearch","secondary","placeholder","onChange","onClear","loading","displayName"],"mappings":";;;;;;;;MAYaA,WAAW;EAAA,MAAXA,WAAW,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHjB,IAAAC,KAAK,WAAA;MACLC,EAAE,GAAAF,EAAA,CAAAE,EAAA;MACFC,SAAS,GAAAH,EAAA,CAAAG,SAAA;IAEH,IAAAC,EAAA,GAAkCC,iBAAmB,CAAAA,mBAAA,CAAA,CAAE;MAArDC,cAAc,GAAAF,EAAA,CAAAE,cAAA;MAAEC,WAAW,GAAAH,EAAA,CAAAG,WAA0B;IAE7D,IAAMC,YAAY,GAA+C,SAAAA,CAAAC,CAAC,EAAA;MAChEH,cAAc,CAACG,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;IAChC,CAAC;IAED,IAAMC,WAAW,GAAG,SAAAA,CAAA,EAAA;MAAY,OAAAN,cAAc,CAAC,EAAE,CAAC;IAAlB,CAAkB;IAElD,IAAMO,OAAO,GAAGC,KAAAA,CAAAA,OAAO,CAAC;MAAM,OAAAZ,EAAE,aAAFA,EAAE,KAAA,KAAA,CAAA,GAAFA,EAAE,GAAIa,IAAAA,CAAAA,EAAE,CAAE,CAAA;IAAA,CAAA,EAAE,CAACb,EAAE,CAAC,CAAC;IAE/C,OACEc,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,kBAAM,CAACC;IAAoB,CAAA,EACzCJ,KAAA,CAAAC,aAAA,CAACI,WAAAA,CAAAA,WAAW,EACV;MAAAnB,EAAE,EAAEW,OAAO;oBACCZ,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAI,gCAAgC;MACrDqB,SAAS,EAAA,IAAA;MACTC,WAAW,EAAC,cAAS;MACrBZ,KAAK,EAAEJ,WAAW;MAClBiB,QAAQ,EAAEhB,YAAY;MACtBiB,OAAO,EAAEb,WAAW;MACpBc,OAAO,EAAEvB;IAAS,CAClB,CAAA,CACE;EAEV,CAAC;EAEDJ,WAAW,CAAC4B,WAAW,GAAG,+BAA+B;EAAA,OA/B5C5B,WAAW;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "inputSearchContainer": "SearchInput-module_inputSearchContainer__2TCSY"
+};
+module.exports = styles;
+//# sourceMappingURL=SearchInput.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var draftDivider = require('@kaizen/draft-divider');
+var SectionDivider_module = require('./SectionDivider.module.scss.cjs');
+var SectionDivider = function () {
+  return React.createElement("li", {
+    className: SectionDivider_module.divider,
+    "aria-hidden": "true"
+  }, React.createElement(draftDivider.Divider, {
+    variant: "canvas"
+  }));
+};
+exports.SectionDivider = SectionDivider;
+//# sourceMappingURL=SectionDivider.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.cjs","sources":["../../../../../src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.tsx"],"sourcesContent":["import React from \"react\"\nimport { Divider } from \"@kaizen/draft-divider\"\nimport styles from \"./SectionDivider.module.scss\"\n\nexport const SectionDivider = (): JSX.Element => (\n  <li className={styles.divider} aria-hidden=\"true\">\n    <Divider variant=\"canvas\" />\n  </li>\n)\n"],"names":["SectionDivider","React","createElement","className","styles","divider","Divider","variant"],"mappings":";;;;;AAIO,IAAMA,cAAc,GAAG,SAAAA,CAAA;EAAmB,OAC/CC,KAAI,CAAAC,aAAA,CAAA,IAAA,EAAA;IAAAC,SAAS,EAAEC,qBAAM,CAACC,OAAO;mBAAc;EAAM,CAAA,EAC/CJ,KAAC,CAAAC,aAAA,CAAAI,YAAO,CAAAA,OAAA,EAAC;IAAAC,OAAO,EAAC;IAAW,CACzB;AAH0C,CAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "divider": "SectionDivider-module_divider__zlsWs"
+};
+module.exports = styles;
+//# sourceMappingURL=SectionDivider.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var a11y = require('@kaizen/a11y');
+require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
+var SelectionProvider = require('../../../context/SelectionProvider/SelectionProvider.cjs');
+var SelectionControlButton_module = require('../SelectionControlButton.module.scss.cjs');
+const ClearButton = /*#__PURE__*/function () {
+  const ClearButton = function () {
+    var selectionState = SelectionProvider.useSelectionContext().selectionState;
+    var filteredOptions = Array.from(selectionState.collection.getKeys());
+    var selectedOptions = Array.from(selectionState.selectionManager.selectedKeys);
+    var isDisabled = filteredOptions.length === 0 || !Boolean(filteredOptions.find(function (key) {
+      return selectionState.selectionManager.isSelected(key);
+    }));
+    return React.createElement("button", {
+      type: "button",
+      className: classnames(SelectionControlButton_module.button, isDisabled && SelectionControlButton_module.isDisabled),
+      "aria-disabled": isDisabled,
+      onClick: function () {
+        !isDisabled && selectionState.selectionManager.setSelectedKeys(selectedOptions.filter(function (option) {
+          return !filteredOptions.includes(option);
+        }));
+      }
+    }, "Clear", React.createElement(a11y.VisuallyHidden, null, " selections"));
+  };
+  ClearButton.displayName = "FilterMultiSelect.ClearButton";
+  return ClearButton;
+}();
+exports.ClearButton = ClearButton;
+//# sourceMappingURL=ClearButton.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearButton.cjs","sources":["../../../../../../src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.tsx"],"sourcesContent":["import React from \"react\"\nimport classnames from \"classnames\"\nimport { VisuallyHidden } from \"@kaizen/a11y\"\nimport { useSelectionContext } from \"../../../context\"\nimport styles from \"../SelectionControlButton.module.scss\"\n\nexport const ClearButton = (): JSX.Element => {\n  const { selectionState } = useSelectionContext()\n  const filteredOptions = Array.from(selectionState.collection.getKeys())\n  const selectedOptions = Array.from(\n    selectionState.selectionManager.selectedKeys\n  )\n  const isDisabled =\n    filteredOptions.length === 0 ||\n    !Boolean(\n      filteredOptions.find(key =>\n        selectionState.selectionManager.isSelected(key)\n      )\n    )\n\n  return (\n    <button\n      type=\"button\"\n      className={classnames(styles.button, isDisabled && styles.isDisabled)}\n      aria-disabled={isDisabled}\n      onClick={\n        (): void => {\n          !isDisabled &&\n            selectionState.selectionManager.setSelectedKeys(\n              selectedOptions.filter(\n                option => !filteredOptions.includes(option)\n              )\n            )\n        }\n        // TODO: add announcement here to inform selection cleared\n      }\n    >\n      Clear<VisuallyHidden> selections</VisuallyHidden>\n    </button>\n  )\n}\n\nClearButton.displayName = \"FilterMultiSelect.ClearButton\"\n"],"names":["ClearButton","selectionState","useSelectionContext","filteredOptions","Array","from","collection","getKeys","selectedOptions","selectionManager","selectedKeys","isDisabled","length","Boolean","find","key","isSelected","React","createElement","type","className","classnames","styles","button","onClick","setSelectedKeys","filter","option","includes","VisuallyHidden","displayName"],"mappings":";;;;;;;;MAMaA,WAAW;EAAA,MAAXA,WAAW,GAAG,SAAAA,CAAA,EAAA;IACjB,IAAAC,cAAc,GAAKC,qCAAmB,CAAE,CAAA,eAA1B;IACtB,IAAMC,eAAe,GAAGC,KAAK,CAACC,IAAI,CAACJ,cAAc,CAACK,UAAU,CAACC,OAAO,CAAA,CAAE,CAAC;IACvE,IAAMC,eAAe,GAAGJ,KAAK,CAACC,IAAI,CAChCJ,cAAc,CAACQ,gBAAgB,CAACC,YAAY,CAC7C;IACD,IAAMC,UAAU,GACdR,eAAe,CAACS,MAAM,KAAK,CAAC,IAC5B,CAACC,OAAO,CACNV,eAAe,CAACW,IAAI,CAAC,UAAAC,GAAG,EAAA;MACtB,OAAAd,cAAc,CAACQ,gBAAgB,CAACO,UAAU,CAACD,GAAG,CAAC;IAAA,CAAA,CAChD,CACF;IAEH,OACEE,KACE,CAAAC,aAAA,CAAA,QAAA,EAAA;MAAAC,IAAI,EAAC,QAAQ;MACbC,SAAS,EAAEC,UAAU,CAACC,6BAAM,CAACC,MAAM,EAAEZ,UAAU,IAAIW,6BAAM,CAACX,UAAU,CAAC;MACtD,eAAA,EAAAA,UAAU;MACzBa,OAAO,EACL,SAAAA,CAAA,EAAA;QACE,CAACb,UAAU,IACTV,cAAc,CAACQ,gBAAgB,CAACgB,eAAe,CAC7CjB,eAAe,CAACkB,MAAM,CACpB,UAAAC,MAAM,EAAA;UAAI,OAAA,CAACxB,eAAe,CAACyB,QAAQ,CAACD,MAAM,CAAC;QAAjC,CAAiC,CAC5C,CACF;;IACJ,CAAA,WAIEV,KAAA,CAAAC,aAAA,CAACW,IAAAA,CAAAA,cAAc,EAAA,IAAA,EAAA,aAAA,CAA6B,CAC1C;EAEb,CAAC;EAED7B,WAAW,CAAC8B,WAAW,GAAG,+BAA+B;EAAA,OApC5C9B,WAAW;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
+var SelectionProvider = require('../../../context/SelectionProvider/SelectionProvider.cjs');
+var SelectionControlButton_module = require('../SelectionControlButton.module.scss.cjs');
+const SelectAllButton = /*#__PURE__*/function () {
+  const SelectAllButton = function () {
+    var selectionState = SelectionProvider.useSelectionContext().selectionState;
+    var selectedOptions = Array.from(selectionState.selectionManager.selectedKeys);
+    var disabledOptions = selectionState.disabledKeys ? Array.from(selectionState.disabledKeys) : [];
+    var filteredOptions = Array.from(selectionState.collection.getKeys()).filter(function (key) {
+      return !disabledOptions.includes(key);
+    });
+    return React.createElement("button", {
+      type: "button",
+      className: classnames(SelectionControlButton_module.button, selectionState.selectionManager.isSelectAll && SelectionControlButton_module.isDisabled),
+      "aria-disabled": selectionState.selectionManager.isSelectAll,
+      onClick: function () {
+        return !selectionState.selectionManager.isSelectAll && selectionState.selectionManager.setSelectedKeys(tslib.__spreadArray(tslib.__spreadArray([], selectedOptions, true), filteredOptions, true));
+      }
+    }, "Select all");
+  };
+  SelectAllButton.displayName = "FilterMultiSelect.SelectAllButton";
+  return SelectAllButton;
+}();
+exports.SelectAllButton = SelectAllButton;
+//# sourceMappingURL=SelectAllButton.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAllButton.cjs","sources":["../../../../../../src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.tsx"],"sourcesContent":["import React from \"react\"\nimport classnames from \"classnames\"\nimport { useSelectionContext } from \"../../../context\"\nimport styles from \"../SelectionControlButton.module.scss\"\n\nexport const SelectAllButton = (): JSX.Element => {\n  const { selectionState } = useSelectionContext()\n  const selectedOptions = Array.from(\n    selectionState.selectionManager.selectedKeys\n  )\n  const disabledOptions = selectionState.disabledKeys\n    ? Array.from(selectionState.disabledKeys)\n    : []\n  const filteredOptions = Array.from(\n    selectionState.collection.getKeys()\n  ).filter(key => !disabledOptions.includes(key))\n\n  return (\n    <button\n      type=\"button\"\n      className={classnames(\n        styles.button,\n        selectionState.selectionManager.isSelectAll && styles.isDisabled\n      )}\n      aria-disabled={selectionState.selectionManager.isSelectAll}\n      onClick={\n        (): false | void =>\n          !selectionState.selectionManager.isSelectAll &&\n          selectionState.selectionManager.setSelectedKeys([\n            ...selectedOptions,\n            ...filteredOptions,\n          ])\n        // TODO: add announcement here to inform all selected\n      }\n    >\n      Select all\n    </button>\n  )\n}\n\nSelectAllButton.displayName = \"FilterMultiSelect.SelectAllButton\"\n"],"names":["SelectAllButton","selectionState","useSelectionContext","selectedOptions","Array","from","selectionManager","selectedKeys","disabledOptions","disabledKeys","filteredOptions","collection","getKeys","filter","key","includes","React","createElement","type","className","classnames","styles","button","isSelectAll","isDisabled","onClick","setSelectedKeys","displayName"],"mappings":";;;;;;;;MAKaA,eAAe;EAAA,MAAfA,eAAe,GAAG,SAAAA,CAAA,EAAA;IACrB,IAAAC,cAAc,GAAKC,qCAAmB,CAAE,CAAA,eAA1B;IACtB,IAAMC,eAAe,GAAGC,KAAK,CAACC,IAAI,CAChCJ,cAAc,CAACK,gBAAgB,CAACC,YAAY,CAC7C;IACD,IAAMC,eAAe,GAAGP,cAAc,CAACQ,YAAY,GAC/CL,KAAK,CAACC,IAAI,CAACJ,cAAc,CAACQ,YAAY,CAAC,GACvC,EAAE;IACN,IAAMC,eAAe,GAAGN,KAAK,CAACC,IAAI,CAChCJ,cAAc,CAACU,UAAU,CAACC,OAAO,CAAA,CAAE,CACpC,CAACC,MAAM,CAAC,UAAAC,GAAG,EAAA;MAAI,OAAA,CAACN,eAAe,CAACO,QAAQ,CAACD,GAAG,CAAC;IAA9B,CAA8B,CAAC;IAE/C,OACEE,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;MACEC,IAAI,EAAC,QAAQ;MACbC,SAAS,EAAEC,UAAU,CACnBC,6BAAM,CAACC,MAAM,EACbrB,cAAc,CAACK,gBAAgB,CAACiB,WAAW,IAAIF,6BAAM,CAACG,UAAU,CACjE;MAAA,eAAA,EACcvB,cAAc,CAACK,gBAAgB,CAACiB,WAAW;MAC1DE,OAAO,EACL,SAAAA,CAAA,EAAA;QACE,OAAA,CAACxB,cAAc,CAACK,gBAAgB,CAACiB,WAAW,IAC5CtB,cAAc,CAACK,gBAAgB,CAACoB,eAAe,6CAC1CvB,eAAe,EAAA,IAAA,CAAA,EACfO,eAAe,EAClB,IAAA,CAAA,CAAA;;IAAA,CAAA,EAAA,YAAA,CAKC;EAEb,CAAC;EAEDV,eAAe,CAAC2B,WAAW,GAAG,mCAAmC;EAAA,OAnCpD3B,eAAe;AAAA;"}

package/dist/cjs/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var styles = {
+  "button": "SelectionControlButton-module_button__F6wec",
+  "isDisabled": "SelectionControlButton-module_isDisabled__lYOrG"
+};
+module.exports = styles;
+//# sourceMappingURL=SelectionControlButton.module.scss.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionControlButton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var FilterButton = require('../../../../FilterButton/FilterButton/FilterButton.cjs');
+require('../../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
+var MenuTriggerProvider = require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
+require('../../../context/SelectionProvider/SelectionProvider.cjs');
+var getTruncatedLabel = require('../../../utils/getTruncatedLabel.cjs');
+const FilterTriggerButton = /*#__PURE__*/function () {
+  const FilterTriggerButton = function (_a) {
+    var selectedOptionLabels = _a.selectedOptionLabels,
+      label = _a.label,
+      classNameOverride = _a.classNameOverride,
+      _b = _a.labelCharacterLimitBeforeTruncate,
+      labelCharacterLimitBeforeTruncate = _b === void 0 ? 50 : _b;
+    var _c = MenuTriggerProvider.useMenuTriggerContext(),
+      buttonProps = _c.buttonProps,
+      buttonRef = _c.buttonRef,
+      menuTriggerState = _c.menuTriggerState;
+    var ref = React.useRef({
+      triggerRef: buttonRef
+    });
+    return React.createElement(FilterButton.FilterButton, tslib.__assign({
+      ref: ref
+    }, buttonProps, {
+      label: label,
+      selectedValue: getTruncatedLabel.getTruncatedLabels(selectedOptionLabels, labelCharacterLimitBeforeTruncate),
+      classNameOverride: classNameOverride,
+      isOpen: menuTriggerState.isOpen
+    }));
+  };
+  FilterTriggerButton.displayName = "FilterMultiSelect.TriggerButton";
+  return FilterTriggerButton;
+}();
+exports.FilterTriggerButton = FilterTriggerButton;
+//# sourceMappingURL=FilterTriggerButton.cjs.map

package/dist/cjs/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTriggerButton.cjs","sources":["../../../../../../src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.tsx"],"sourcesContent":["import React, { useRef } from \"react\"\nimport { FilterTriggerRef } from \"~components/Filter\"\nimport { FilterButton } from \"~components/FilterButton\"\nimport { useMenuTriggerContext } from \"../../../context\"\nimport { getTruncatedLabels } from \"../../../utils\"\n\nexport type FilterTriggerButtonProps = {\n  label: string\n  selectedOptionLabels: string[]\n  /**\n   * Character limit of the button label.\n   * It will always show the first selected label regardless if it exceeds the given character limit.\n   */\n  labelCharacterLimitBeforeTruncate?: number\n  classNameOverride?: string // TODO: migrate it to use OverrideClassName<T> and omit the props controlled by React-Aria\n}\n\nexport const FilterTriggerButton = ({\n  selectedOptionLabels,\n  label,\n  classNameOverride,\n  labelCharacterLimitBeforeTruncate = 50,\n}: FilterTriggerButtonProps): JSX.Element => {\n  const { buttonProps, buttonRef, menuTriggerState } = useMenuTriggerContext()\n  const ref = useRef<FilterTriggerRef>({ triggerRef: buttonRef })\n\n  return (\n    <FilterButton\n      ref={ref}\n      {...buttonProps}\n      label={label}\n      selectedValue={getTruncatedLabels(\n        selectedOptionLabels,\n        labelCharacterLimitBeforeTruncate\n      )}\n      classNameOverride={classNameOverride}\n      isOpen={menuTriggerState.isOpen}\n    />\n  )\n}\n\nFilterTriggerButton.displayName = \"FilterMultiSelect.TriggerButton\"\n"],"names":["FilterTriggerButton","_a","selectedOptionLabels","label","classNameOverride","_b","labelCharacterLimitBeforeTruncate","_c","useMenuTriggerContext","buttonProps","buttonRef","menuTriggerState","ref","useRef","triggerRef","React","createElement","FilterButton","__assign","selectedValue","getTruncatedLabels","isOpen","displayName"],"mappings":";;;;;;;;;MAiBaA,mBAAmB;EAAA,MAAnBA,mBAAmB,GAAG,SAAAA,CAACC,EAKT,EAAA;IAJzB,IAAAC,oBAAoB,GAAAD,EAAA,CAAAC,oBAAA;MACpBC,KAAK,GAAAF,EAAA,CAAAE,KAAA;MACLC,iBAAiB,GAAAH,EAAA,CAAAG,iBAAA;MACjBC,EAAsC,GAAAJ,EAAA,CAAAK,iCAAA;MAAtCA,iCAAiC,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,EAAA;IAEhC,IAAAE,EAA+C,GAAAC,mBAAAA,CAAAA,qBAAqB,EAAE;MAApEC,WAAW,GAAAF,EAAA,CAAAE,WAAA;MAAEC,SAAS,GAAAH,EAAA,CAAAG,SAAA;MAAEC,gBAAgB,GAAAJ,EAAA,CAAAI,gBAA4B;IAC5E,IAAMC,GAAG,GAAGC,KAAM,CAAAA,MAAA,CAAmB;MAAEC,UAAU,EAAEJ;IAAW,CAAA,CAAC;IAE/D,OACEK,KAAA,CAAAC,aAAA,CAACC,YAAAA,CAAAA,YAAY,EAAAC,KAAA,CAAAA,QAAA,CAAA;MACXN,GAAG,EAAEA;IACD,CAAA,EAAAH,WAAW;MACfN,KAAK,EAAEA,KAAK;MACZgB,aAAa,EAAEC,oCAAkB,CAC/BlB,oBAAoB,EACpBI,iCAAiC,CAClC;MACDF,iBAAiB,EAAEA,iBAAiB;MACpCiB,MAAM,EAAEV,gBAAgB,CAACU;IAAM,CAAA,CAAA,CAC/B;EAEN,CAAC;EAEDrB,mBAAmB,CAACsB,WAAW,GAAG,iCAAiC;EAAA,OAxBtDtB,mBAAmB;AAAA;"}