@m4l/components 9.79.1 → 9.80.0

package/components/datagrids/views/TableView/hooks/useSortColumnsRows/useSortColumnsRows.js

@@ -1,53 +1,53 @@
-import { jsx as H } from "@emotion/react/jsx-runtime";
-import { useState as N, useEffect as O, useMemo as I } from "react";
-import { useModuleSkeleton as K, getPropertyByString as M } from "@m4l/core";
-import { SELECT_COLUMN_KEY as _ } from "react-data-grid";
-import { getDragHeaderRenderer as $ } from "../../helpers/getDragHeaderRenderer/getDragHeaderRenderer.js";
+import { jsx as M } from "@emotion/react/jsx-runtime";
+import { useState as N, useEffect as O, useMemo as D } from "react";
+import { useModuleSkeleton as K, getPropertyByString as _ } from "@m4l/core";
+import { SELECT_COLUMN_KEY as $ } from "react-data-grid";
+import { getDragHeaderRenderer as B } from "../../helpers/getDragHeaderRenderer/getDragHeaderRenderer.js";
 import { SkeletonFormatter as G } from "../../subcomponents/SkeletonFormatter/SkeletonFormatter.js";
-import { filterColumnClassName as B, SelectColumn as P } from "../../subcomponents/SelectColumn/SelectColumn.js";
-import { RenderGroupCell as J } from "../../subcomponents/RenderGroupCell/RenderGroupCell.js";
-import { ActionsColumn as L } from "../../subcomponents/ActionsColumn/ActionsColumn.js";
-import { RadioSelectColumn as T } from "../../subcomponents/RadioSelectColumn/RadioSelectColumn.js";
-import { useDataGrid as j } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
-import { useFilters as U } from "../../../../hooks/shared/useFilters/useFilters.js";
-function V(n, l) {
-  const s = n.find((d) => d.key === l);
+import { filterColumnClassName as P, SelectColumn as J } from "../../subcomponents/SelectColumn/SelectColumn.js";
+import { RenderGroupCell as L } from "../../subcomponents/RenderGroupCell/RenderGroupCell.js";
+import { ActionsColumn as T } from "../../subcomponents/ActionsColumn/ActionsColumn.js";
+import { RadioSelectColumn as j } from "../../subcomponents/RadioSelectColumn/RadioSelectColumn.js";
+import { useDataGrid as U } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { useFilters as V } from "../../../../hooks/shared/useFilters/useFilters.js";
+function Y(n, l) {
+  const s = n.find((u) => u.key === l);
   let r = "string";
-  return s && (r = s.type || "string"), s?.customSort ? s.customSort : r === "number" ? (d, m) => {
+  return s && (r = s.type || "string"), s?.customSort ? s.customSort : r === "number" ? (u, m) => {
     try {
-      return Number(d[l]) - Number(m[l]);
+      return Number(u[l]) - Number(m[l]);
     } catch {
       return -1;
     }
-  } : (d, m) => {
+  } : (u, m) => {
     try {
-      return d[l].toString().localeCompare(m[l].toString());
+      return u[l].toString().localeCompare(m[l].toString());
     } catch {
       return -1;
     }
   };
 }
-const b = (n, l) => l.findIndex((s) => s.key === n), Y = (n, l) => l.findIndex(
+const b = (n, l) => l.findIndex((s) => s.key === n), q = (n, l) => l.findIndex(
   (r) => n === r.key && r.hidden !== !0
-) !== -1, q = (n, l, s, r, d, m) => {
+) !== -1, Q = (n, l, s, r, u, m) => {
   let a = n.filter((t) => {
     const i = b(t.key, r), f = i > -1 ? r[i].visible : !0;
     return !t.hidden && f;
   }).sort((t, i) => {
     let f = b(t.key, r);
     f = f === -1 ? r.length : f;
-    let u = b(i.key, r);
-    return u = u === -1 ? r.length : u, f - u;
+    let d = b(i.key, r);
+    return d = d === -1 ? r.length : d, f - d;
   }).map((t) => {
     const i = b(t.key, r);
     return {
       ...t,
       frozen: i > -1 ? r[i].frozen : !1,
-      width: typeof d.get(t.key) == "number" ? d.get(t.key) : t.width
+      width: typeof u.get(t.key) == "number" ? u.get(t.key) : t.width
     };
   }).sort((t, i) => (t.frozen === void 0 || t.frozen === !1) == (i.frozen === void 0 || i.frozen === !1) ? 0 : t.frozen ? -1 : 1);
-  return m && (a = [L, ...a]), l && (a = [s === !1 ? T : P, ...a]), a;
-}, Q = (n) => {
+  return m && (a = [T, ...a]), l && (a = [s === !1 ? j : J, ...a]), a;
+}, W = (n) => {
   switch (n) {
     case "string":
       return "left";
@@ -59,36 +59,37 @@ const b = (n, l) => l.findIndex((s) => s.key === n), Y = (n, l) => l.findIndex(
       return "right";
   }
   return "left";
-}, ae = (n, l, s) => {
+}, fe = (n, l, s) => {
   const {
     columnsConfig: r,
-    columnsWidths: d,
+    columnsWidths: u,
     onChangeColumnsOrder: m,
     rowActionsGetter: a,
     checkedRows: t,
     onCheckedRowsChange: i,
     checkedRowsMultiple: f,
-    sortColumns: u,
-    setSortColumns: R
-  } = j(), [S, E] = N(
+    sortColumns: d,
+    setSortColumns: R,
+    headerClickDeferMs: z
+  } = U(), [S, E] = N(
     () => []
-  ), z = K(), { activeFilters: F, filters: k } = U();
+  ), F = K(), { activeFilters: I, filters: k } = V();
   O(() => {
     E(
-      q(
+      Q(
         n,
         !!t && !!i,
         //Si están seteados se habilita el múltipe
         f,
         r,
-        d,
+        u,
         a
       )
     );
-    const C = u.filter(
-      (o) => Y(o.columnKey, n)
+    const C = d.filter(
+      (o) => q(o.columnKey, n)
     );
-    JSON.stringify(C) !== JSON.stringify(u) && R(C);
+    JSON.stringify(C) !== JSON.stringify(d) && R(C);
   }, [
     n,
     r,
@@ -96,31 +97,32 @@ const b = (n, l) => l.findIndex((s) => s.key === n), Y = (n, l) => l.findIndex(
     t,
     i,
     f,
-    d,
     u,
+    d,
     R
   ]);
-  const A = I(() => {
-    const C = $(
+  const A = D(() => {
+    const C = B(
       (o, p) => m("table", o, p),
       {
-        openPopover: s?.openPopover
+        openPopover: s?.openPopover,
+        headerClickDeferMs: z
       }
     );
     return S.map((o) => {
-      const p = o.align !== void 0 ? `rdg-cell-align-${o.align}` : `rdg-cell-align-${Q(o.type)}`, e = {
+      const p = o.align !== void 0 ? `rdg-cell-align-${o.align}` : `rdg-cell-align-${W(o.type)}`, e = {
         ...o,
         cellClass: p,
         headerCellClass: p
       };
-      if (e.key === _ || e.isDraggable !== void 0 && e.isDraggable === !1)
+      if (e.key === $ || e.isDraggable !== void 0 && e.isDraggable === !1)
         return e;
-      z ? (e.renderHeaderCell = G, e.renderCell = G, e.renderEditCell = G) : (e.formatter && !e.renderCell && (e.renderCell = e.formatter), e.editor && !e.renderEditCell && (e.renderEditCell = e.editor)), e.renderHeaderCell && (e.withinHeaderRenderer = e.renderHeaderCell), (e?.withFilter === void 0 || e.withFilter === !0) && F && (e.headerCellClass = `${e.headerCellClass} ${B}`.trim()), e.renderHeaderCell = C;
+      F ? (e.renderHeaderCell = G, e.renderCell = G, e.renderEditCell = G) : (e.formatter && !e.renderCell && (e.renderCell = e.formatter), e.editor && !e.renderEditCell && (e.renderEditCell = e.editor)), e.renderHeaderCell && (e.withinHeaderRenderer = e.renderHeaderCell), (e?.withFilter === void 0 || e.withFilter === !0) && I && (e.headerCellClass = `${e.headerCellClass} ${P}`.trim()), e.renderHeaderCell = C;
       const g = r.find((y) => y.key === o.key)?.grouped === !0, x = n.find((y) => y.key === o.key), h = x?.renderGroupCell !== void 0;
       if (g) {
         const y = h ? x?.renderGroupCell : void 0;
-        e.renderGroupCell = (c) => /* @__PURE__ */ H(
-          J,
+        e.renderGroupCell = (c) => /* @__PURE__ */ M(
+          L,
           {
             ...c,
             customRenderGroupCell: y
@@ -130,14 +132,15 @@ const b = (n, l) => l.findIndex((s) => s.key === n), Y = (n, l) => l.findIndex(
       return e;
     });
   }, [
-    z,
-    S,
     F,
+    S,
+    I,
     m,
     s,
+    z,
     r,
     n
-  ]), D = I(() => {
+  ]), H = D(() => {
     const C = l.filter((o) => {
       if (!k || k.size === 0)
         return !0;
@@ -149,7 +152,7 @@ const b = (n, l) => l.findIndex((s) => s.key === n), Y = (n, l) => l.findIndex(
           customFilter: void 0
         };
         let y;
-        const c = M(o, x);
+        const c = _(o, x);
         let v;
         typeof c == "string" ? v = c : typeof c == "number" ? v = c.toString() : c != null ? v = String(c) : v = "";
         try {
@@ -162,17 +165,17 @@ const b = (n, l) => l.findIndex((s) => s.key === n), Y = (n, l) => l.findIndex(
       }
       return e;
     });
-    return u.length === 0 || C.sort((o, p) => {
-      for (const e of u) {
-        const g = V(S, e.columnKey)(o, p);
+    return d.length === 0 || C.sort((o, p) => {
+      for (const e of d) {
+        const g = Y(S, e.columnKey)(o, p);
         if (g !== 0)
           return e.direction === "ASC" ? g : -g;
       }
       return 0;
     }), C;
-  }, [l, u, k, S]);
-  return { finalColumns: A, sortColumns: u, setSortColumns: R, finalRows: D };
+  }, [l, d, k, S]);
+  return { finalColumns: A, sortColumns: d, setSortColumns: R, finalRows: H };
 };
 export {
-  ae as useSortColumnsRows
+  fe as useSortColumnsRows
 };

package/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/DraggableHeaderRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableHeaderRenderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/DraggableHeaderRenderer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAC1C,KAAK,EAAE,4BAA4B,CAAC,IAAI,CAAC,GACxC,GAAG,CAwOL"}
+{"version":3,"file":"DraggableHeaderRenderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/DraggableHeaderRenderer.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAC1C,KAAK,EAAE,4BAA4B,CAAC,IAAI,CAAC,GACxC,GAAG,CAqSL"}

package/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/DraggableHeaderRenderer.js

@@ -1,46 +1,74 @@
-import { jsxs as c, jsx as r } from "@emotion/react/jsx-runtime";
-import { useState as z, useEffect as B } from "react";
-import { useModuleDictionary as E } from "@m4l/core";
-import { useDrag as G, useDrop as L } from "react-dnd";
-import { renderHeaderCell as M } from "react-data-grid";
-import { NameColumnIconStyled as $, NameColumnStyled as K, IconColumnStyled as T, DraggableHeaderRootStyled as U, ButtonHeaderActionsStyled as V, DraggableWrapperInputBaseStyled as J, IconSearchStyled as W, HeaderInputBaseStyled as q } from "../../../../slots/DataGridSlot.js";
-import { pathIcons as i } from "../../../../icons.js";
-import { Icon as g } from "@m4l/base";
-import { useFocusRef as Q } from "../../hooks/useFocusRef/useFocusRef.js";
-import { useDataGrid as X } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
-import { useFilters as Y } from "../../../../hooks/shared/useFilters/useFilters.js";
-function de(s) {
+import { jsxs as u, jsx as o } from "@emotion/react/jsx-runtime";
+import { useState as V, useRef as J, useCallback as C, useEffect as k } from "react";
+import { useModuleDictionary as W } from "@m4l/core";
+import { useDrag as q, useDrop as Q } from "react-dnd";
+import { renderHeaderCell as X } from "react-data-grid";
+import { NameColumnIconStyled as Y, NameColumnStyled as Z, IconColumnStyled as ee, DraggableHeaderRootStyled as te, ButtonHeaderActionsStyled as re, DraggableWrapperInputBaseStyled as ne, IconSearchStyled as oe, HeaderInputBaseStyled as le } from "../../../../slots/DataGridSlot.js";
+import { pathIcons as c } from "../../../../icons.js";
+import { Icon as D } from "@m4l/base";
+import { normalizeHeaderClickDeferMs as ae } from "../../../../helpers/normalizeHeaderClickDeferMs.js";
+import { useFocusRef as ie } from "../../hooks/useFocusRef/useFocusRef.js";
+import { useColumnSortRules as ce } from "../../hooks/useColumnSortRules/useColumnSortRules.js";
+import { useDataGrid as se } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { useFilters as ue } from "../../../../hooks/shared/useFilters/useFilters.js";
+function Ie(d) {
   const {
-    onColumnsReorder: h,
+    onColumnsReorder: x,
     column: t,
-    tabIndex: l,
-    openPopover: y,
-    ...S
-  } = s, { ref: x, tabIndex: C } = Q(
-    l !== void 0 && l >= 0
-  ), { getLabel: D } = E(), {
-    size: d,
-    classes: I,
-    reorderable: u,
-    externalSortSettings: b,
-    externalFilterSettings: w,
-    currentRowHeightVariant: k
-  } = X(), { activeFilters: a, filters: v, onChangeFilter: m } = Y(), [R, f] = z(v?.get(t.key) || ""), p = b?.sortsApplied?.find(
+    tabIndex: s,
+    openPopover: m,
+    headerClickDeferMs: b,
+    ...I
+  } = d, { ref: w, tabIndex: H } = ie(
+    s !== void 0 && s >= 0
+  ), { getLabel: R } = W(), {
+    size: f,
+    classes: F,
+    reorderable: g,
+    externalSortSettings: v,
+    externalFilterSettings: A,
+    currentRowHeightVariant: M
+  } = se(), { activeFilters: i, filters: P, onChangeFilter: p } = ue(), [T, y] = V(P?.get(t.key) || ""), h = ae(b), { canToggleSort: z, toggleSort: N } = ce({
+    columnKey: t.key,
+    column: t,
+    defaultSortable: !0
+  }), a = J(null), r = C(() => {
+    a.current !== null && (clearTimeout(a.current), a.current = null);
+  }, []);
+  k(() => r, [r]);
+  const O = (e) => {
+    const n = e.currentTarget;
+    if (e.detail > 2) {
+      r();
+      return;
+    }
+    if (h === 0 || !z || t.type === "custom" || e.detail === 0) {
+      r(), m?.(n, t.key);
+      return;
+    }
+    if (e.detail === 2) {
+      r(), N();
+      return;
+    }
+    r(), a.current = setTimeout(() => {
+      a.current = null, m?.(n, t.key);
+    }, h);
+  }, B = C(() => (r(), { key: t.key }), [r, t.key]), S = v?.sortsApplied?.find(
     (e) => e.columnKey === t.key
-  ), H = w?.filtersApplied?.find(
+  ), E = A?.filtersApplied?.find(
     (e) => e.columnKey === t.key
-  ), [{ isDragging: F }, A] = G({
+  ), [{ isDragging: _ }, j] = q({
     type: "COLUMN_DRAG",
-    item: { key: t.key },
-    canDrag: () => u,
+    item: B,
+    canDrag: () => g,
     collect: (e) => ({
       isDragging: e.isDragging()
     })
-  }), [{ isOver: N }, O] = L({
+  }), [{ isOver: G }, K] = Q({
     accept: "COLUMN_DRAG",
-    canDrop: () => u,
+    canDrop: () => g,
     drop({ key: e }) {
-      h(e, t.key);
+      x(e, t.key);
     },
     /**
      * Recolecta el estado del monitor de drop para detectar si hay un elemento sobre esta columna
@@ -49,15 +77,15 @@ function de(s) {
       isOver: e.isOver(),
       canDrop: e.canDrop()
     })
-  }), P = (e) => {
-    a && m && m(t, e.target.value), f(e.target.value);
-  }, _ = (e) => e === "asc" ? i.sortAsc : i.sortDesc, j = () => {
+  }), L = (e) => {
+    i && p && p(t, e.target.value), y(e.target.value);
+  }, $ = (e) => e === "asc" ? c.sortAsc : c.sortDesc, U = () => {
     const e = [];
-    if (p) {
-      const n = _(p.direction);
+    if (S) {
+      const n = $(S.direction);
       e.push(
-        /* @__PURE__ */ r(
-          g,
+        /* @__PURE__ */ o(
+          D,
           {
             src: n,
             size: "small",
@@ -67,11 +95,11 @@ function de(s) {
         )
       );
     }
-    if (H?.isValid) {
-      const n = i.filter2;
+    if (E?.isValid) {
+      const n = c.filter2;
       e.push(
-        /* @__PURE__ */ r(
-          g,
+        /* @__PURE__ */ o(
+          D,
           {
             src: n,
             size: "small",
@@ -83,12 +111,12 @@ function de(s) {
     }
     return e.length > 0 ? e : null;
   };
-  B(() => {
-    a || f("");
-  }, [a]);
-  const o = { ...t };
-  if (o.withinHeaderRenderer && (o.name = o.withinHeaderRenderer(s)), !o.withinHeaderRenderer) {
-    const e = j();
+  k(() => {
+    i || y("");
+  }, [i]);
+  const l = { ...t };
+  if (l.withinHeaderRenderer && (l.name = l.withinHeaderRenderer(d)), !l.withinHeaderRenderer) {
+    const e = U();
     if (e) {
       const n = () => {
         switch (t.align) {
@@ -102,67 +130,65 @@ function de(s) {
             return "flex-start";
         }
       };
-      o.name = /* @__PURE__ */ c($, { ownerState: {}, style: { justifyContent: n() }, children: [
-        /* @__PURE__ */ r(K, { ownerState: { size: d, currentRowHeightVariant: k }, children: o.name }),
-        /* @__PURE__ */ r(T, { ownerState: {}, children: e })
+      l.name = /* @__PURE__ */ u(Y, { ownerState: {}, style: { justifyContent: n() }, children: [
+        /* @__PURE__ */ o(Z, { ownerState: { size: f, currentRowHeightVariant: M }, children: l.name }),
+        /* @__PURE__ */ o(ee, { ownerState: {}, children: e })
       ] });
     }
   }
-  return /* @__PURE__ */ c(
-    U,
+  return /* @__PURE__ */ u(
+    te,
     {
       ownerState: {},
-      className: I?.draggableHeaderRoot,
+      className: F?.draggableHeaderRoot,
       ref: (e) => {
-        A(e), O(e);
+        j(e), K(e);
       },
       style: {
-        opacity: F ? 0.5 : 1,
-        backgroundColor: N ? "#ececec" : void 0
+        opacity: _ ? 0.5 : 1,
+        backgroundColor: G ? "#ececec" : void 0
       },
       onClick: (e) => {
         e.stopPropagation();
       },
       children: [
-        /* @__PURE__ */ r(
-          V,
+        /* @__PURE__ */ o(
+          re,
           {
             ownerState: {},
             role: "button",
             "aria-label": `header-column-button-${t.key}`,
-            onClick: (e) => {
-              y?.(e.currentTarget, t.key);
-            },
-            children: /* @__PURE__ */ r(
-              M,
+            onClick: O,
+            children: /* @__PURE__ */ o(
+              X,
               {
-                column: o,
-                tabIndex: l,
-                ...S
+                column: l,
+                tabIndex: s,
+                ...I
               }
             )
           }
         ),
-        a && (t?.withFilter === void 0 || t.withFilter === !0) && /* @__PURE__ */ c(J, { ownerState: {}, children: [
-          /* @__PURE__ */ r(
-            W,
+        i && (t?.withFilter === void 0 || t.withFilter === !0) && /* @__PURE__ */ u(ne, { ownerState: {}, children: [
+          /* @__PURE__ */ o(
+            oe,
             {
               ownerState: {},
-              src: i.search,
+              src: c.search,
               color: "text.secondary",
-              size: d
+              size: f
             }
           ),
-          /* @__PURE__ */ r(
-            q,
+          /* @__PURE__ */ o(
+            le,
             {
               ownerState: {},
-              inputRef: x,
-              placeholder: D("data_grid.filter_holder"),
-              tabIndex: C,
+              inputRef: w,
+              placeholder: R("data_grid.filter_holder"),
+              tabIndex: H,
               type: "text",
-              onChange: P,
-              value: R,
+              onChange: L,
+              value: T,
               inputProps: {
                 "data-testid": `column-filter-input-${t.key}`,
                 "aria-label": `column-filter-input-${t.key}`
@@ -175,5 +201,5 @@ function de(s) {
   );
 }
 export {
-  de as DraggableHeaderRenderer
+  Ie as DraggableHeaderRenderer
 };

package/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/types.d.ts

@@ -11,5 +11,7 @@ export interface DraggableHeaderRendererProps<TRow> extends RenderHeaderCellProp
     onColumnsReorder: (sourceKey: string, targetKey: string) => void;
     /** Callback opcional para abrir el popover de acciones del header */
     openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
+    /** Normalized delay before opening the header menu after a click. */
+    headerClickDeferMs?: number;
 }
 //# sourceMappingURL=types.d.ts.map

package/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,WAAW,4BAA4B,CAAC,IAAI,CAChD,SAAQ,qBAAqB,CAAC,IAAI,CAAC;IACnC,4DAA4D;IAC5D,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,qEAAqE;IACrE,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/TableView/subcomponents/DraggableHeaderRenderer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,WAAW,4BAA4B,CAAC,IAAI,CAChD,SAAQ,qBAAqB,CAAC,IAAI,CAAC;IACnC,4DAA4D;IAC5D,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,qEAAqE;IACrE,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/components/extended/mui/IconButton/IconButton.styles.d.ts

@@ -11,7 +11,7 @@ type IconButtonShellStyleOptions = {
  * Build IconButton shell styles, optionally excluding nested Icon color rules.
  */
 export declare function getIconButtonShellStyles({ ownerState, theme }: IconButtonStyleArgs, { includeIconColorStyles }?: IconButtonShellStyleOptions): {
-    "&&&:not(.Mui-disabled) .M4LIcon-root .MuiSvgIcon-root [fill]"?: {
+    "&&&:not(.Mui-disabled) .M4LIcon-root .MuiSvgIcon-root :is([fill], [stroke], g)"?: {
         fill: string;
     } | undefined;
     '&&&': any;