@commercetools-uikit/filters 19.15.0 → 19.16.0

package/dist/commercetools-uikit-filters.cjs.prod.js

@@ -5,16 +5,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@emotion/react');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 require('prop-types');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react$1 = require('react');
 var Popover = require('@radix-ui/react-popover');
+var CollapsibleMotion = require('@commercetools-uikit/collapsible-motion');
+var designSystem = require('@commercetools-uikit/design-system');
 var FlatButton = require('@commercetools-uikit/flat-button');
-var SelectInput = require('@commercetools-uikit/select-input');
 var icons = require('@commercetools-uikit/icons');
-var react$1 = require('react');
+var SelectInput = require('@commercetools-uikit/select-input');
 var Spacings = require('@commercetools-uikit/spacings');
-var designSystem = require('@commercetools-uikit/design-system');
 var reactIntl = require('react-intl');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var CollapsibleMotion = require('@commercetools-uikit/collapsible-motion');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
+var IconButton = require('@commercetools-uikit/icon-button');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -36,11 +55,317 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceProperty);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
+var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
-var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Array$from__default = /*#__PURE__*/_interopDefault(_Array$from);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+
+var messages$1 = reactIntl.defineMessages({
+  clearAllButtonLabel: {
+    id: 'UIKit.ClearAllButton.clearAllButtonLabel',
+    description: 'Label for the clear all button',
+    defaultMessage: 'Clear all'
+  }
+});
+
+const footerContainerStyles = /*#__PURE__*/react.css("border-top:", designSystem.designTokens.borderWidth1, " solid ", designSystem.designTokens.colorNeutral90, ";padding-top:", designSystem.designTokens.spacing20, ";display:grid;grid-template-columns:1fr 1fr;align-items:center;width:100%;div:last-of-type{display:flex;justify-content:flex-end;}" + ("" ), "" );
+const Footer = _ref => {
+  let renderApplyButton = _ref.renderApplyButton,
+    onClearRequest = _ref.onClearRequest;
+  const intl = reactIntl.useIntl();
+  if (!renderApplyButton && !onClearRequest) return null;
+  return jsxRuntime.jsxs("footer", {
+    css: footerContainerStyles,
+    children: [jsxRuntime.jsx("div", {
+      children: renderApplyButton && renderApplyButton()
+    }), jsxRuntime.jsx("div", {
+      children: onClearRequest && jsxRuntime.jsx(FlatButton__default["default"], {
+        icon: jsxRuntime.jsx(icons.CloseBoldIcon, {}),
+        tone: "secondary",
+        onClick: onClearRequest,
+        label: intl.formatMessage(messages$1.clearAllButtonLabel)
+      })
+    })]
+  });
+};
+Footer.propTypes = {};
+Footer.displayName = 'Footer';
+var Footer$1 = Footer;
+
+const headerContainerStyles = /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral40, ";font-weight:", designSystem.designTokens.fontWeight500, ";font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";display:grid;grid-template-columns:1fr min-content;align-items:center;padding-bottom:", designSystem.designTokens.spacing10, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";width:100%;" + ("" ), "" );
+const selectInputStyles = /*#__PURE__*/react.css("flex:0 0 auto;max-width:", designSystem.designTokens.constraint3, ";margin-left:", designSystem.designTokens.spacing20, ";" + ("" ), "" );
+const sortButtonMargin = /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.spacing40, ";" + ("" ), "" );
+const operatorInputContainer = {
+  name: "1ckoci3",
+  styles: "word-break:break-word;display:flex;align-items:center"
+} ;
+const Header = props => {
+  const _useState = react$1.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  return jsxRuntime.jsxs("header", {
+    css: headerContainerStyles,
+    children: [jsxRuntime.jsxs("div", {
+      css: [operatorInputContainer, props.onSortRequest && sortButtonMargin, "" , "" ],
+      children: [jsxRuntime.jsx("div", {
+        children: props.label
+      }), props.renderOperatorsInput && jsxRuntime.jsx("div", {
+        css: selectInputStyles,
+        children: props.renderOperatorsInput()
+      })]
+    }), props.onSortRequest && jsxRuntime.jsx(IconButton__default["default"], {
+      size: "20",
+      theme: isActive ? 'info' : 'default',
+      label: "Sort",
+      icon: jsxRuntime.jsx(icons.SortingIcon, {}),
+      isToggleButton: true,
+      onClick: e => {
+        setIsActive(!isActive);
+        return props.onSortRequest && props.onSortRequest(e);
+      }
+    })]
+  });
+};
+Header.propTypes = {};
+var Header$1 = Header;
+
+const triggerWrapper = /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral40, ";background-color:", designSystem.designTokens.colorSurface, ";font-size:", designSystem.designTokens.fontSize20, ";font-weight:", designSystem.designTokens.fontWeight500, ";line-height:", designSystem.designTokens.lineHeight20, ";position:relative;display:inline-flex;align-items:center;gap:", designSystem.designTokens.spacing20, ";padding:3px ", designSystem.designTokens.spacing25, ";border-radius:", designSystem.designTokens.borderRadius20, ";box-shadow:0 0 0 ", designSystem.designTokens.borderWidth1, " ", designSystem.designTokens.colorNeutral85, ";cursor:pointer;height:", designSystem.designTokens.spacing50, ";max-width:min(100%, ", designSystem.designTokens.constraint13, ");align-self:flex-start;&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";.ui-kit-filter-trigger-badge-container{background:linear-gradient(\n        to right,\n        transparent,\n        ", designSystem.designTokens.colorPrimary98, " 25%\n      );}}" + ("" ), "" );
+const disabled = /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral40, ";background-color:", designSystem.designTokens.colorNeutral95, ";cursor:not-allowed;&:hover{background-color:", designSystem.designTokens.colorNeutral95, ";.ui-kit-filter-trigger-badge-container{background:linear-gradient(\n        to right,\n        transparent,\n        ", designSystem.designTokens.colorNeutral95, " 25%\n      );}}.ui-kit-filter-trigger-badge-container{background:linear-gradient(\n      to right,\n      transparent,\n      ", designSystem.designTokens.colorNeutral95, " 25%\n    );}>*{pointer-events:none;}" + ("" ), "" );
+const mainActionButton = /*#__PURE__*/react.css("background:transparent;border:0;position:absolute;inset:0;z-index:1;border-radius:", designSystem.designTokens.borderRadius20, ";&:focus{box-shadow:0 0 0 2px ", designSystem.designTokens.colorPrimary40, ";}" + ("" ), "" );
+const removeButton = /*#__PURE__*/react.css("position:relative;z-index:2;flex-grow:0;flex-shrink:0;display:flex;svg{fill:", designSystem.designTokens.colorNeutral40, "!important;&:hover{fill:", designSystem.designTokens.colorPrimary40, "!important;}}" + ("" ), "" );
+const label = /*#__PURE__*/react.css("flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;cursor:inherit;white-space:nowrap;max-width:", designSystem.designTokens.constraint6, ";" + ("" ), "" );
+const operatorContainer = /*#__PURE__*/react.css("font-style:italic;font-weight:300;margin-left:", designSystem.designTokens.spacing20, ";" + ("" ), "" );
+const valuesContainer = /*#__PURE__*/react.css("display:flex;align-items:center;justify-content:flex-start;gap:", designSystem.designTokens.spacing10, ";overflow:hidden;position:relative;padding-left:0;margin:0;" + ("" ), "" );
+const badgeContainer = /*#__PURE__*/react.css("position:absolute;right:0;display:flex;align-items:center;padding-left:", designSystem.designTokens.spacing30, ";background:linear-gradient(\n    to right,\n    transparent,\n    ", designSystem.designTokens.colorSurface, " 25%\n  );" + ("" ), "" );
+
+const badgeStyles = /*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize20, ";font-weight:", designSystem.designTokens.fontWeight500, ";line-height:", designSystem.designTokens.lineHeight20, ";color:", designSystem.designTokens.colorSurface, ";background-color:", designSystem.designTokens.colorInfo, ";padding:0 calc(", designSystem.designTokens.spacing05, " + ", designSystem.designTokens.spacing10, ");border-radius:", designSystem.designTokens.borderRadius20, ";display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:", designSystem.designTokens.spacing40, ";" + ("" ), "" );
+const disabledBadgeStyles = /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorNeutral, ";" + ("" ), "" );
+function Badge(props) {
+  return jsxRuntime.jsx("span", {
+    "aria-label": props['aria-label'],
+    css: [badgeStyles, props.isDisabled && disabledBadgeStyles, "" , "" ],
+    id: props.id,
+    role: "status",
+    children: props.label
+  });
+}
+
+const chipStyles = /*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize20, ";font-weight:", designSystem.designTokens.fontWeight400, ";line-height:", designSystem.designTokens.lineHeight20, ";color:", designSystem.designTokens.colorPrimary20, ";background-color:", designSystem.designTokens.colorPrimary95, ";height:", designSystem.designTokens.spacing40, ";padding:0 ", designSystem.designTokens.spacing20, ";border-radius:calc(\n    ", designSystem.designTokens.borderRadius20, " - ", designSystem.designTokens.borderRadius4, "\n  );display:inline-flex;justify-content:center;align-items:center;list-style:none;white-space:nowrap;" + ("" ), "" );
+const disabledChipStyles = /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral40, ";background-color:", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" );
+function Chip(props) {
+  return jsxRuntime.jsx("li", {
+    css: [chipStyles, props.isDisabled && disabledChipStyles, "" , "" ],
+    children: props.label
+  });
+}
+Chip.propTypes = {};
+
+const _excluded = ["filterKey", "label", "operatorLabel", "appliedFilterValues", "isDisabled", "isPersistent", "onRemoveRequest"];
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const useScrollObserver = values => {
+  const _useState = react$1.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOverflowing = _useState2[0],
+    setIsOverflowing = _useState2[1];
+  const _useState3 = react$1.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    overflowCount = _useState4[0],
+    setOverflowCount = _useState4[1];
+  const containerRef = react$1.useRef(null);
+  const setContainerRef = react$1.useCallback(node => {
+    if (node) {
+      containerRef.current = node;
+      const clientWidth = node.clientWidth,
+        scrollWidth = node.scrollWidth,
+        children = node.children;
+      const hasOverflow = scrollWidth > clientWidth;
+      setIsOverflowing(hasOverflow);
+      let visibleChipCount = 0;
+      if (hasOverflow) {
+        var _context;
+        _forEachInstanceProperty__default["default"](_context = _Array$from__default["default"](children)).call(_context, child => {
+          var _context2;
+          const childRect = child.getBoundingClientRect();
+          const containerRect = node.getBoundingClientRect();
+          if (
+          // if the right hand side of the child is past the right of the container
+          childRect.right <= containerRect.right &&
+          // and it's not the badge
+          !_includesInstanceProperty__default["default"](_context2 = _Array$from__default["default"](child.classList)).call(_context2, 'ui-kit-filter-trigger-badge-container')) {
+            ++visibleChipCount;
+          }
+        });
+      }
+      setOverflowCount(values.length - visibleChipCount);
+    }
+  }, [values]);
+  return {
+    isOverflowing,
+    overflowCount,
+    setContainerRef
+  };
+};
+const TriggerButton = /*#__PURE__*/react$1.forwardRef(function TriggerButton(props, ref) {
+  const filterKey = props.filterKey,
+    label$1 = props.label,
+    operatorLabel = props.operatorLabel,
+    appliedFilterValues = props.appliedFilterValues,
+    isDisabled = props.isDisabled,
+    isPersistent = props.isPersistent,
+    onRemoveRequest = props.onRemoveRequest,
+    rest = _objectWithoutProperties(props, _excluded);
+  const values = appliedFilterValues || [];
+  const filtersApplied = values.length > 0;
+  const _useScrollObserver = useScrollObserver(values),
+    isOverflowing = _useScrollObserver.isOverflowing,
+    overflowCount = _useScrollObserver.overflowCount,
+    setContainerRef = _useScrollObserver.setContainerRef;
+  return jsxRuntime.jsxs("div", {
+    css: [triggerWrapper, isDisabled && disabled, "" , "" ],
+    children: [jsxRuntime.jsxs("label", {
+      css: label,
+      htmlFor: `${filterKey}-menu-trigger`,
+      id: `${filterKey}-menu-label`,
+      children: [label$1, ":", operatorLabel && jsxRuntime.jsx("span", {
+        css: operatorContainer,
+        children: operatorLabel
+      })]
+    }), filtersApplied && jsxRuntime.jsxs("ul", {
+      ref: setContainerRef,
+      css: valuesContainer,
+      "aria-label": `${filterKey} selected values`,
+      "aria-live": "polite",
+      children: [_mapInstanceProperty__default["default"](values).call(values, value => jsxRuntime.jsx(Chip, {
+        label: value.label,
+        isDisabled: isDisabled
+      }, value.value)), isOverflowing && overflowCount && jsxRuntime.jsx("li", {
+        className: "ui-kit-filter-trigger-badge-container",
+        css: badgeContainer,
+        children: jsxRuntime.jsx(Badge, {
+          id: "ui-kit-filter-trigger-overflow-count-badge",
+          label: `+${overflowCount}`,
+          isDisabled: isDisabled
+        })
+      })]
+    }), !filtersApplied && jsxRuntime.jsx(icons.CaretDownIcon, {
+      "aria-label": `toggle filter menu icon`,
+      size: "small",
+      color: "neutral60"
+    }), jsxRuntime.jsx("button", _objectSpread(_objectSpread({
+      css: [mainActionButton, "" , "" ],
+      ref: ref,
+      id: `${filterKey}-menu-trigger`,
+      "aria-disabled": isDisabled,
+      "aria-labelledby": `${filterKey}-menu-label`
+    }, rest), isDisabled && {
+      tabIndex: -1,
+      disabled: true,
+      readOnly: true
+    })), filtersApplied && onRemoveRequest && !isPersistent && jsxRuntime.jsx("div", {
+      css: [removeButton, "" , "" ],
+      children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        icon: jsxRuntime.jsx(icons.CloseBoldIcon, {}),
+        size: "10",
+        label: `remove ${label$1} filter`,
+        isDisabled: props.isDisabled,
+        onClick: e => {
+          e.stopPropagation();
+          onRemoveRequest(e);
+        }
+      })
+    })]
+  });
+});
+var TriggerButton$1 = TriggerButton;
+
+const FOCUSABLE_CSS_SELECTOR = `a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex], *[contenteditable]`;
+
+/**
+ * Find the first focusable element in the given container,
+ * such as the first focusable list item.
+ * @param {HTMLElement} container
+ * @returns {HTMLElement | null}
+ */
+function findFirstFocusable(container) {
+  return container.querySelector(FOCUSABLE_CSS_SELECTOR);
+}
+const menuStyles = /*#__PURE__*/react.css("display:flex;flex-direction:column;align-items:flex-start;gap:", designSystem.designTokens.spacing30, ";width:", designSystem.designTokens.constraint6, ";max-height:", designSystem.designTokens.constraint10, ";padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius8, ";box-shadow:", designSystem.designTokens.shadow18, ";animation-duration:", designSystem.designTokens.transitionStandard, ";will-change:'transform, opacity';margin-top:", designSystem.designTokens.spacing10, ";position:relative;z-index:5;" + ("" ), "" );
+const menuBodyStyle = {
+  name: "pw6q3u",
+  styles: "width:100%;overflow:hidden auto"
+} ;
+function FilterMenu(props) {
+  const menuBodyRef = react$1.useRef(null);
+  const focusMenuBody = react$1.useCallback(e => {
+    if (menuBodyRef.current) {
+      const firstFocusableElementInMenuBody = findFirstFocusable(menuBodyRef.current);
+      if (firstFocusableElementInMenuBody) {
+        e.preventDefault();
+        firstFocusableElementInMenuBody.focus();
+      }
+    }
+  }, [menuBodyRef]);
+  return jsxRuntime.jsxs(Popover__namespace.Root, {
+    defaultOpen: props.isDisabled ? false : props.defaultOpen,
+    onOpenChange: open => {
+      if (!open && !props.appliedFilterValues?.length && !props.isPersistent && props.onRemoveRequest) {
+        props.onRemoveRequest();
+      }
+    },
+    children: [jsxRuntime.jsx(Popover__namespace.Trigger, {
+      asChild: true,
+      children: jsxRuntime.jsx(TriggerButton$1, {
+        filterKey: props.filterKey,
+        label: props.label,
+        operatorLabel: props.operatorLabel,
+        appliedFilterValues: props.appliedFilterValues,
+        isDisabled: props.isDisabled,
+        isPersistent: props.isPersistent,
+        onRemoveRequest: props.onRemoveRequest
+      })
+    }), jsxRuntime.jsx(Popover__namespace.Portal, {
+      children: jsxRuntime.jsxs(Popover__namespace.Content, {
+        side: "bottom",
+        align: "start",
+        css: menuStyles,
+        onOpenAutoFocus: focusMenuBody,
+        children: [jsxRuntime.jsx(Header$1, {
+          label: props.label,
+          renderOperatorsInput: props.renderOperatorsInput,
+          onSortRequest: props.onSortRequest
+        }), jsxRuntime.jsx("div", {
+          css: menuBodyStyle,
+          ref: menuBodyRef,
+          children: props.renderMenuBody()
+        }), jsxRuntime.jsx(Footer$1, {
+          onClearRequest: props.onClearRequest,
+          renderApplyButton: props.renderApplyButton
+        })]
+      })
+    })]
+  });
+}
+FilterMenu.propTypes = {};
 
 var messages = reactIntl.defineMessages({
   addFilterButtonLabel: {
@@ -60,24 +385,108 @@ var messages = reactIntl.defineMessages({
   }
 });
 
-const menuStyles = /*#__PURE__*/react.css("display:flex;flex-direction:column;align-items:flex-start;gap:", designSystem.designTokens.spacing30, ";width:", designSystem.designTokens.constraint6, ";padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius8, ";box-shadow:", designSystem.designTokens.shadow18, ";animation-duration:", designSystem.designTokens.transitionStandard, ";will-change:'transform, opacity';margin-top:", designSystem.designTokens.spacing10, ";position:relative;z-index:5;" + ("" ), "" );
-
-const horizontalDividerStyles = /*#__PURE__*/react.css("width:100%;height:1px;border:1px solid ", designSystem.designTokens.colorNeutral90, ";margin-top:", designSystem.designTokens.spacing25, ";margin-bottom:", designSystem.designTokens.spacing30, ";" + ("" ), "" );
+const horizontalDividerStyles = /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral90, ";background-color:", designSystem.designTokens.colorNeutral90, ";width:100%;height:1px;border:0;margin-top:", designSystem.designTokens.spacing25, ";margin-bottom:", designSystem.designTokens.spacing30, ";" + ("" ), "" );
 const verticalDividerStyles = /*#__PURE__*/react.css("width:1px;height:", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorNeutral90, ";margin:0 ", designSystem.designTokens.spacing20, " 0 ", designSystem.designTokens.spacing20, ";" + ("" ), "" );
-const menuListStyles = /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;gap:", designSystem.designTokens.spacing20, ";" + ("" ), "" );
-var _ref2 = {
+const menuListStyles = /*#__PURE__*/react.css("width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:", designSystem.designTokens.spacing20, ";" + ("" ), "" );
+function getFilterOptions(filters, filterGroups) {
+  let filterOptions = [];
+  // define option groups
+  if (filterGroups) {
+    filterOptions = _mapInstanceProperty__default["default"](filterGroups).call(filterGroups, filterGroup => ({
+      label: filterGroup.label,
+      key: filterGroup.key,
+      options: []
+    }));
+  }
+  return _reduceInstanceProperty__default["default"](filters).call(filters, (filterOptions, filter) => {
+    const formattedOption = {
+      value: filter.key,
+      label: filter.label,
+      isDisabled: filter.isDisabled
+    };
+    //if theres a groupkey, filterGroups, and the groupKey matches a filterGroup, add option to its group
+    if (filter.groupKey && filterGroups) {
+      const optionGroup = _findInstanceProperty__default["default"](filterOptions).call(filterOptions, option => 'key' in option && option.key === filter.groupKey);
+      if (optionGroup && 'options' in optionGroup) {
+        optionGroup.options.push(formattedOption);
+        return filterOptions;
+      }
+    }
+    // otherwise add option directly
+    return [formattedOption, ...filterOptions];
+  }, filterOptions);
+}
+var _ref9 = {
   name: "1lv1yo7",
   styles: "display:inline-flex"
 } ;
-function Filters(props) {
+function Filters(_ref) {
+  var _context, _context2;
+  let appliedFilters = _ref.appliedFilters,
+    filters = _ref.filters,
+    filterGroups = _ref.filterGroups,
+    onClearAllRequest = _ref.onClearAllRequest,
+    onAddFilterRequest = _ref.onAddFilterRequest,
+    renderSearchComponent = _ref.renderSearchComponent,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
   const intl = reactIntl.useIntl();
-  const _useState = react$1.useState(false),
+  const _useState = react$1.useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
-    showAddFilters = _useState2[0],
-    setShowAddFilters = _useState2[1];
+    showFilterControls = _useState2[0],
+    setShowFilterControls = _useState2[1];
   const handleFiltersClick = () => {
-    setShowAddFilters(currState => !currState);
+    setShowFilterControls(currState => !currState);
   };
+  /**
+   * persisted filters: always visible
+   * applied filters: filters for which values have been selected
+   * visible filters = persisted + applied
+   *
+   * visibleFiltersFromProps = filters visible based on props
+   * localVisibleFilters = filters actually visible in component currently
+   */
+  const persistedFilterKeys = _mapInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](filters).call(filters, _ref2 => {
+    let isPersistent = _ref2.isPersistent;
+    return isPersistent;
+  })).call(_context, filter => filter.key);
+  const persistedFiltersRef = react$1.useRef(persistedFilterKeys);
+  const appliedFilterKeys = _mapInstanceProperty__default["default"](appliedFilters).call(appliedFilters, _ref3 => {
+    let filterKey = _ref3.filterKey;
+    return filterKey;
+  });
+
+  // applied filters must have corresponding filter in `props.filters`,
+  const visibleFiltersFromProps = _sortInstanceProperty__default["default"](_context2 = _filterInstanceProperty__default["default"](filters).call(filters, _ref4 => {
+    let key = _ref4.key,
+      isPersistent = _ref4.isPersistent;
+    const isVisible = Boolean(isPersistent) || _includesInstanceProperty__default["default"](appliedFilterKeys).call(appliedFilterKeys, key);
+    return isVisible;
+  })
+  // persistent filters should be first in filter list
+  ).call(_context2, _ref5 => {
+    let isPersistent = _ref5.isPersistent;
+    return isPersistent ? -1 : 1;
+  });
+
+  // set initial state as visibleFiltersFromProps
+  const _useState3 = react$1.useState(_mapInstanceProperty__default["default"](visibleFiltersFromProps).call(visibleFiltersFromProps, _ref6 => {
+      let key = _ref6.key;
+      return key;
+    })),
+    _useState4 = _slicedToArray(_useState3, 2),
+    localVisibleFilters = _useState4[0],
+    setLocalVisibleFilters = _useState4[1];
+
+  //update localVisibleFilters if persisted filter count changes
+  if (persistedFiltersRef.current.length !== persistedFilterKeys.length) {
+    setLocalVisibleFilters(_mapInstanceProperty__default["default"](visibleFiltersFromProps).call(visibleFiltersFromProps, _ref7 => {
+      let key = _ref7.key;
+      return key;
+    }));
+    persistedFiltersRef.current = persistedFilterKeys;
+  }
+  const removeFilter = filterKey => setLocalVisibleFilters(currentVisibleFilters => _filterInstanceProperty__default["default"](currentVisibleFilters).call(currentVisibleFilters, visibleFilterKey => visibleFilterKey !== filterKey));
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       scale: "m",
@@ -86,53 +495,104 @@ function Filters(props) {
         css: /*#__PURE__*/react.css({
           maxWidth: `${designSystem.designTokens.constraint16}`
         }, "" , "" ),
-        children: props.renderSearchComponent()
-      }), jsxRuntime.jsx(FlatButton__default["default"], {
-        "data-testid": "filters-button",
-        label: intl.formatMessage(messages.filtersButtonLabel),
-        icon: jsxRuntime.jsx(icons.FilterIcon, {}),
-        onClick: handleFiltersClick
+        children: renderSearchComponent
+      }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+        scale: "s",
+        alignItems: "center",
+        children: [jsxRuntime.jsx(FlatButton__default["default"], {
+          label: intl.formatMessage(messages.filtersButtonLabel),
+          icon: jsxRuntime.jsx(icons.FilterIcon, {}),
+          onClick: handleFiltersClick
+        }), appliedFilters.length > 1 && !showFilterControls && jsxRuntime.jsx(Badge, {
+          id: 'uikit-filters-selected-filter-count',
+          label: `${appliedFilters.length}`
+        })]
       })]
-    }), jsxRuntime.jsx("div", {
+    }), jsxRuntime.jsx("hr", {
       css: horizontalDividerStyles
     }), jsxRuntime.jsx(CollapsibleMotion__default["default"], {
-      isClosed: !showAddFilters,
-      onToggle: () => setShowAddFilters(!showAddFilters),
-      children: _ref => {
-        let registerContentNode = _ref.registerContentNode,
-          containerStyles = _ref.containerStyles;
+      isClosed: !showFilterControls,
+      onToggle: () => setShowFilterControls(!showFilterControls),
+      children: _ref8 => {
+        let registerContentNode = _ref8.registerContentNode,
+          containerStyles = _ref8.containerStyles;
         return jsxRuntime.jsx("div", {
           style: containerStyles,
           children: jsxRuntime.jsxs("div", {
             ref: registerContentNode,
             css: menuListStyles,
-            children: [jsxRuntime.jsxs(Popover__namespace.Root, {
+            "aria-live": "polite",
+            children: [_mapInstanceProperty__default["default"](localVisibleFilters).call(localVisibleFilters, activeFilter => {
+              const activeFilterConfig = _findInstanceProperty__default["default"](filters).call(filters, filter => filter.key === activeFilter);
+              return jsxRuntime.jsx(FilterMenu, {
+                filterKey: activeFilterConfig.key,
+                label: activeFilterConfig.label,
+                operatorLabel: activeFilterConfig.operatorLabel,
+                isPersistent: activeFilterConfig.isPersistent,
+                isDisabled: activeFilterConfig.isDisabled,
+                renderMenuBody: activeFilterConfig.filterMenuConfiguration.renderMenuBody,
+                renderOperatorsInput: activeFilterConfig.filterMenuConfiguration.renderOperatorsInput,
+                renderApplyButton: activeFilterConfig.filterMenuConfiguration.renderApplyButton,
+                appliedFilterValues: _findInstanceProperty__default["default"](appliedFilters).call(appliedFilters, appliedFilter => activeFilter === appliedFilter.filterKey)?.values,
+                onClearRequest: activeFilterConfig.filterMenuConfiguration.onClearRequest,
+                onRemoveRequest: e => {
+                  removeFilter(activeFilter);
+                  activeFilterConfig.filterMenuConfiguration.onClearRequest(e);
+                },
+                onSortRequest: activeFilterConfig.filterMenuConfiguration.onSortRequest,
+                defaultOpen: activeFilterConfig.isPersistent || localVisibleFilters.length === visibleFiltersFromProps.length ? false : true
+              }, activeFilterConfig.key);
+            }), jsxRuntime.jsxs(Popover__namespace.Root, {
               children: [jsxRuntime.jsx(Popover__namespace.Trigger, {
                 asChild: true,
                 children: jsxRuntime.jsx("div", {
-                  css: _ref2,
+                  css: _ref9,
                   children: jsxRuntime.jsx(FlatButton__default["default"], {
-                    "data-testid": "add-filter-button",
                     label: intl.formatMessage(messages.addFilterButtonLabel),
                     icon: jsxRuntime.jsx(icons.PlusBoldIcon, {}),
-                    onClick: () => setShowAddFilters(true)
+                    onClick: e => {
+                      if (onAddFilterRequest) {
+                        onAddFilterRequest(e);
+                      }
+                      setShowFilterControls(true);
+                    }
                   })
                 })
               }), jsxRuntime.jsx(Popover__namespace.Portal, {
                 children: jsxRuntime.jsx(Popover__namespace.Content, {
                   side: "bottom",
                   align: "start",
-                  css: menuStyles,
-                  children: jsxRuntime.jsx(SelectInput__default["default"], {})
+                  css: [menuStyles, menuBodyStyle, "" , "" ],
+                  children: jsxRuntime.jsx(SelectInput__default["default"], {
+                    id: "ui-kit-add-filters-select",
+                    name: "select filters",
+                    "aria-label": "select filters",
+                    appearance: "filter",
+                    options: getFilterOptions(filters, filterGroups),
+                    onChange: e => {
+                      var _context3;
+                      setLocalVisibleFilters(_concatInstanceProperty__default["default"](_context3 = Array.prototype).call(_context3, e.target.value ? e.target.value : []));
+                    },
+                    value: localVisibleFilters,
+                    isMulti: true
+                    // @ts-ignore
+                    ,
+                    isOptionDisabled: option => option.isDisabled
+                  })
                 })
               })]
-            }), jsxRuntime.jsx("div", {
-              css: verticalDividerStyles
-            }), jsxRuntime.jsx(FlatButton__default["default"], {
-              icon: jsxRuntime.jsx(icons.CloseBoldIcon, {}),
-              label: intl.formatMessage(messages.clearAllFiltersButtonLabel),
-              onClick: props.onClearAllRequest,
-              tone: "secondary"
+            }), appliedFilters.length > 1 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx("div", {
+                css: verticalDividerStyles
+              }), jsxRuntime.jsx(FlatButton__default["default"], {
+                icon: jsxRuntime.jsx(icons.CloseBoldIcon, {}),
+                label: intl.formatMessage(messages.clearAllFiltersButtonLabel),
+                onClick: e => {
+                  onClearAllRequest(e);
+                  setLocalVisibleFilters(persistedFilterKeys);
+                },
+                tone: "secondary"
+              })]
             })]
           })
         });
@@ -144,7 +604,7 @@ Filters.propTypes = {};
 Filters.displayName = 'Filters';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.15.0";
+var version = "19.16.0";
 
 exports["default"] = Filters;
 exports.version = version;