mcr-design-systems 1.0.113 → 1.0.115

package/dist/components/ButtonFilter/helper/index.js

@@ -33,7 +33,7 @@ const l = e({
       "xx-small": ["px-xs-4", "gap-xs-4"],
       "x-small": ["px-xs-2", "gap-xs-3"],
       small: ["px-sm-2", "gap-xs-3"],
-      medium: ["px-sm-2 py-2.5", "gap-xs-3"],
+      medium: ["px-sm-2", "gap-xs-3"],
       large: ["px-sm", "gap-xs-3"]
     },
     iconOnly: {

package/dist/components/ButtonFilter/index.d.ts

@@ -80,6 +80,10 @@ export interface ButtonFilterProps extends React.ButtonHTMLAttributes<HTMLButton
      * Whether the dropdown is open
      */
     isOpen?: boolean;
+    /**
+     * Whether to show clear button
+     */
+    showClearButton?: boolean;
 }
 /**
  * ButtonFilter component - specialized button for filtering with selected state support and dropdown functionality
@@ -107,4 +111,4 @@ export interface ButtonFilterProps extends React.ButtonHTMLAttributes<HTMLButton
  * </ButtonFilter>
  * ```
  */
-export default function ButtonFilter({ variant, size, iconOnly, leadingIcon, trailingIcon, icon, loading, isChosen, count, onClose, className, children, disabled, dropdownItems, selectedValues, onSelectionChange, multiSelect, withDropdown, selectionMode, search, shouldShowSeparator, isOpen: externalIsOpen, ...props }: ButtonFilterProps): import("react/jsx-runtime").JSX.Element;
+export default function ButtonFilter({ variant, size, iconOnly, leadingIcon, trailingIcon, icon, loading, isChosen, count, onClose, className, children, disabled, dropdownItems, selectedValues, onSelectionChange, multiSelect, withDropdown, selectionMode, search, shouldShowSeparator, showClearButton, isOpen: externalIsOpen, ...props }: ButtonFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ButtonFilter/index.js

@@ -1,62 +1,40 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { useState as M, useMemo as K } from "react";
-import { buttonFilter as h } from "./helper/index.js";
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { useState as w, useMemo as U } from "react";
+import { buttonFilter as d } from "./helper/index.js";
 import { cn as a } from "../../shared/utils/cn.js";
 import { dataTestId as C } from "../../shared/utils/dataTestId.js";
-import l from "../Icon/Icon.js";
-import Q from "../Badge/index.js";
-import { Dropdown as U } from "../Dropdown/index.js";
-function ie({
-  variant: m = "primary",
-  size: s = "medium",
-  iconOnly: W = !1,
+import u from "../Icon/Icon.js";
+import W from "../Badge/index.js";
+import { Dropdown as X } from "../Dropdown/index.js";
+function ae({
+  variant: l = "primary",
+  size: n = "medium",
+  iconOnly: Y = !1,
   leadingIcon: k,
-  trailingIcon: L,
-  icon: P,
+  trailingIcon: F,
+  icon: L,
   loading: e = !1,
-  isChosen: F = !1,
-  count: x,
+  isChosen: P = !1,
+  count: z,
   onClose: T,
   className: y,
   children: I,
-  disabled: o,
-  dropdownItems: g = [],
-  selectedValues: c = [],
-  onSelectionChange: d,
-  multiSelect: z = !0,
-  withDropdown: p = !1,
+  disabled: s,
+  dropdownItems: R = [],
+  selectedValues: o = [],
+  onSelectionChange: p,
+  multiSelect: B = !0,
+  withDropdown: b = !1,
   selectionMode: A = "default",
-  search: R = !0,
-  shouldShowSeparator: S,
+  search: S = !0,
+  shouldShowSeparator: q,
+  showClearButton: Z = !0,
   isOpen: j,
   ...O
 }) {
-  const [X, Y] = M(!1), v = j !== void 0 ? j : X, q = j !== void 0 ? () => {
-  } : Y, t = W && !!P, i = K(() => {
-    const r = x !== void 0 ? x : c?.length || 0;
-    return console.log(
-      "ButtonFilter effectiveCount:",
-      r,
-      "selectedValues:",
-      c,
-      "count:",
-      x
-    ), r;
-  }, [x, c]), b = K(() => {
-    if (p) {
-      const r = i > 0;
-      return console.log(
-        "ButtonFilter effectiveIsChosen (dropdown):",
-        r,
-        "effectiveCount:",
-        i,
-        "selectedValues:",
-        c
-      ), r;
-    }
-    return console.log("ButtonFilter effectiveIsChosen (no dropdown):", F), F;
-  }, [F, p, i, c]), u = (() => {
-    switch (s) {
+  const [_, $] = w(!1), m = j !== void 0 ? j : _, E = j !== void 0 ? () => {
+  } : $, t = Y && !!L, f = U(() => z !== void 0 ? z : o?.length || 0, [z, o]), x = U(() => b ? f > 0 : P, [P, b, f, o]), i = (() => {
+    switch (n) {
       case "xx-small":
         return 16;
       case "x-small":
@@ -69,8 +47,8 @@ function ie({
       default:
         return 24;
     }
-  })(), w = () => {
-    switch (s) {
+  })(), G = () => {
+    switch (n) {
       case "xx-small":
       case "x-small":
       case "small":
@@ -80,77 +58,77 @@ function ie({
       default:
         return "md";
     }
-  }, E = (r) => {
-    if (Array.isArray(r))
-      d?.(r);
+  }, H = (c) => {
+    if (Array.isArray(c))
+      p?.(c);
     else {
-      if (r === "") {
-        d?.([]);
+      if (c === "") {
+        p?.([]);
         return;
       }
-      if (!z || A === "radio") {
-        d?.([r]);
+      if (!B || A === "radio") {
+        p?.([c]);
         return;
       }
-      const _ = c.includes(r) ? c.filter(($) => $ !== r) : [...c, r];
-      d?.(_);
+      const g = o.includes(c) ? o.filter((D) => D !== c) : [...o, c];
+      p?.(g);
     }
-  }, G = () => {
-    d?.([]), T?.();
-  }, B = e ? /* @__PURE__ */ n(
-    l,
+  }, J = () => {
+    p?.([]), T?.();
+  }, N = e ? /* @__PURE__ */ r(
+    u,
     {
       name: "activity-heart",
-      size: u,
+      size: i,
       className: "animate-spin",
       "aria-hidden": "true"
     }
-  ) : null, N = k && !e ? /* @__PURE__ */ n(l, { name: k, size: u, "aria-hidden": "true" }) : null, Z = L && !e && !b && !p ? /* @__PURE__ */ n(l, { name: L, size: u, "aria-hidden": "true" }) : null, H = p && !e ? /* @__PURE__ */ n(l, { name: "chevron-down", size: u, "aria-hidden": "true" }) : null, J = t && !e ? /* @__PURE__ */ n(l, { name: P, size: u, "aria-hidden": "true" }) : null;
-  return p && !t ? b ? /* @__PURE__ */ f("div", { className: "inline-flex items-center", children: [
-    /* @__PURE__ */ n(
-      U,
+  ) : null, v = k && !e ? /* @__PURE__ */ r(u, { name: k, size: i, "aria-hidden": "true" }) : null, M = F && !e && !x && !b ? /* @__PURE__ */ r(u, { name: F, size: i, "aria-hidden": "true" }) : null, K = b && !e ? /* @__PURE__ */ r(u, { name: "chevron-down", size: i, "aria-hidden": "true" }) : null, Q = t && !e ? /* @__PURE__ */ r(u, { name: L, size: i, "aria-hidden": "true" }) : null;
+  return b && !t ? x ? /* @__PURE__ */ h("div", { className: "inline-flex items-center", children: [
+    /* @__PURE__ */ r(
+      X,
       {
-        items: g,
-        value: c,
-        open: v,
-        onOpenChange: q,
-        onValueChange: E,
-        disabled: o,
-        multiSelect: z,
-        search: R,
+        items: R,
+        value: o,
+        open: m,
+        onOpenChange: E,
+        onValueChange: H,
+        disabled: s,
+        multiSelect: B,
+        search: S,
         searchPlaceholder: "Search",
         selectionMode: A,
-        showClearButton: !0,
-        shouldShowSeparator: S,
-        trigger: /* @__PURE__ */ f(
+        showClearButton: Z,
+        shouldShowSeparator: q,
+        trigger: /* @__PURE__ */ h(
           "button",
           {
             className: a(
-              h({
-                variant: m,
-                size: s,
+              d({
+                variant: l,
+                size: n,
                 isChosen: !0,
-                isOpen: v,
-                spacing: s
+                isOpen: m,
+                spacing: n
               }),
               "rounded-r-none border-r-[1px]"
             ),
-            disabled: o || e,
+            disabled: s || e,
             type: "button",
             ...O,
             children: [
-              e && B,
-              !e && N,
+              e && N,
+              !e && v,
               !e && I,
-              i > 0 && /* @__PURE__ */ n(
-                Q,
+              f > 0 && /* @__PURE__ */ r(
+                W,
                 {
                   variant: "boldest",
-                  size: w(),
+                  size: G(),
                   emphasize: !0,
-                  disabled: o,
+                  disabled: s,
                   className: "ml-xs-3 text-fg-selected-rest",
-                  children: i
+                  children: f
                 }
               )
             ]
@@ -158,160 +136,158 @@ function ie({
         )
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ r(
       "button",
       {
         type: "button",
         className: a(
-          h({
-            variant: m,
-            size: s,
+          d({
+            variant: l,
+            size: n,
             isChosen: !0,
             iconOnly: !0
           }),
           "rounded-l-none border-l-0"
         ),
-        onClick: G,
-        disabled: o,
+        onClick: J,
+        disabled: s,
         "aria-label": "Clear all filters",
         ...C("button-filter-clear"),
-        children: /* @__PURE__ */ n(l, { name: "x-close", size: u, "aria-hidden": "true" })
+        children: /* @__PURE__ */ r(u, { name: "x-close", size: i, "aria-hidden": "true" })
       }
     )
-  ] }) : /* @__PURE__ */ n(
-    U,
+  ] }) : /* @__PURE__ */ r(
+    X,
     {
-      items: g,
-      value: c,
-      open: v,
-      onOpenChange: q,
-      onValueChange: E,
-      disabled: o,
-      multiSelect: z,
-      search: R,
+      items: R,
+      value: o,
+      open: m,
+      onOpenChange: E,
+      onValueChange: H,
+      disabled: s,
+      multiSelect: B,
+      search: S,
       searchPlaceholder: "Search",
       selectionMode: A,
       showClearButton: !0,
-      shouldShowSeparator: S,
+      shouldShowSeparator: q,
       className: y,
-      trigger: /* @__PURE__ */ f(
+      trigger: /* @__PURE__ */ h(
         "button",
         {
           className: a(
-            h({
-              variant: m,
-              size: s,
+            d({
+              variant: l,
+              size: n,
               iconOnly: t,
-              isChosen: b,
-              isOpen: v,
-              spacing: t ? void 0 : s
+              isChosen: x,
+              isOpen: m,
+              spacing: t ? void 0 : n
             }),
             y
           ),
-          disabled: o || e,
+          disabled: s || e,
           type: "button",
           ...C("button-filter"),
           ...O,
           children: [
-            e && B,
-            !e && !t && N,
-            !e && t && J,
+            e && N,
+            !e && !t && v,
+            !e && t && Q,
             !t && I,
-            !e && !t && H
+            !e && !t && K
           ]
         }
       )
     }
-  ) : b && !t ? /* @__PURE__ */ f(
+  ) : x && !t ? /* @__PURE__ */ h(
     "div",
     {
       className: a("inline-flex items-center", y),
       ...C("button-filter"),
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ h(
           "button",
           {
             className: a(
-              h({
-                variant: m,
-                size: s,
+              d({
+                variant: l,
+                size: n,
                 isChosen: !0,
-                isOpen: !1,
-                // Non-dropdown buttons don't have open state
-                spacing: s
+                isOpen: m,
+                spacing: n
               }),
               "rounded-r-none border-r-[1px]"
             ),
-            disabled: o || e,
+            disabled: s || e,
             ...O,
             children: [
-              e && B,
-              !e && N,
+              e && N,
+              !e && v,
               !e && I,
-              i > 0 && /* @__PURE__ */ n(
-                Q,
+              f > 0 && /* @__PURE__ */ r(
+                W,
                 {
                   variant: "boldest",
-                  size: w(),
+                  size: G(),
                   emphasize: !0,
-                  disabled: o,
+                  disabled: s,
                   className: "ml-xs-3 text-fg-selected-rest",
-                  children: i
+                  children: f
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             className: a(
-              h({
-                variant: m,
-                size: s,
+              d({
+                variant: l,
+                size: n,
                 isChosen: !0,
                 iconOnly: !0
               }),
               "rounded-l-none border-l-0"
             ),
-            onClick: T || G,
-            disabled: o,
+            onClick: T || J,
+            disabled: s,
             "aria-label": "Remove filter",
             ...C("button-filter-close"),
-            children: /* @__PURE__ */ n(l, { name: "x-close", size: u, "aria-hidden": "true" })
+            children: /* @__PURE__ */ r(u, { name: "x-close", size: i, "aria-hidden": "true" })
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ f(
+  ) : /* @__PURE__ */ h(
     "button",
     {
       className: a(
-        h({
-          variant: m,
-          size: s,
+        d({
+          variant: l,
+          size: n,
           iconOnly: t,
-          isChosen: b,
-          isOpen: !1,
-          // Regular buttons don't have open state
-          spacing: t ? void 0 : s
+          isChosen: x,
+          isOpen: m,
+          spacing: t ? void 0 : n
         }),
         y
       ),
-      disabled: o || e,
+      disabled: s || e,
       ...C("button-filter"),
       ...O,
       children: [
-        e && B,
-        !e && !t && N,
-        !e && t && J,
+        e && N,
+        !e && !t && v,
+        !e && t && Q,
         !t && I,
-        !e && !t && (Z || H)
+        !e && !t && (M || K)
       ]
     }
   );
 }
 export {
-  ie as default
+  ae as default
 };