@commercetools-uikit/filters 20.1.0 → 20.2.1

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

@@ -309,7 +309,10 @@ const FOCUSABLE_CSS_SELECTOR = `a[href], button:not([disabled]), input:not([disa
 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.constraint7, ";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:10010;" + ("" ), "" );
+const menuStyles = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/react.css("display:flex;flex-direction:column;align-items:flex-start;gap:", designSystem.designTokens.spacing30, ";width:", props.hasWideMenu ? designSystem.designTokens.constraint14 : designSystem.designTokens.constraint7, ";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:10010;" + ("" ), "" );
+};
 const menuBodyStyle = {
   name: "pw6q3u",
   styles: "width:100%;overflow:hidden auto"
@@ -347,7 +350,7 @@ function FilterMenu(props) {
       children: jsxRuntime.jsxs(Popover__namespace.Content, {
         side: "bottom",
         align: "start",
-        css: menuStyles,
+        css: () => menuStyles(props),
         onOpenAutoFocus: focusMenuBody,
         children: [jsxRuntime.jsx(Header$1, {
           label: props.label,
@@ -551,6 +554,7 @@ function Filters(_ref) {
                 operatorLabel: activeFilterConfig.operatorLabel,
                 isPersistent: activeFilterConfig.isPersistent,
                 isDisabled: activeFilterConfig.isDisabled,
+                hasWideMenu: activeFilterConfig.hasWideMenu,
                 renderMenuBody: activeFilterConfig.filterMenuConfiguration.renderMenuBody,
                 renderOperatorsInput: activeFilterConfig.filterMenuConfiguration.renderOperatorsInput,
                 renderApplyButton: activeFilterConfig.filterMenuConfiguration.renderApplyButton,
@@ -583,7 +587,9 @@ function Filters(_ref) {
                 children: jsxRuntime.jsx(Popover__namespace.Content, {
                   side: "bottom",
                   align: "start",
-                  css: [menuStyles, menuBodyStyle, "" , "" ],
+                  css: [() => menuStyles({
+                    hasWideMenu: false
+                  }), menuBodyStyle, "" , "" ],
                   children: jsxRuntime.jsx(SelectInput__default["default"], {
                     id: "ui-kit-add-filters-select",
                     name: "select filters",
@@ -624,7 +630,7 @@ function Filters(_ref) {
 Filters.displayName = 'Filters';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.1.0";
+var version = "20.2.1";
 
 exports["default"] = Filters;
 exports.version = version;