@m4l/base 1.7.2-beta-improvement-804-reports-mfs-enhancements.1 → 1.7.2

package/@types/types.d.ts

@@ -1,53 +1,53 @@
-import { ComponentsOverrides, ComponentsVariants, Theme } from '@mui/material/styles';
-import type { IconOwnerState, IconSlotsType } from '../components/Icon/types';
-import type {
-  ButtonBaseOwnerState,
-  ButtonBaseSlotsType,
-} from '../extended/mui/ButtonBase/types';
-import type {
-  TooltipOwnerState,
-  TooltipSlotsType,
-} from '../extended/mui/Tooltip/types';
-import type {
-  TypographyOwnerState,
-  TypographySlotsType,
-} from '../extended/mui/Typography/types';
-
-declare module '@mui/material/styles' {
-  interface ComponentNameToClassKey {
-    M4LButtonBase: ButtonBaseSlotsType;
-    M4LIcon: IconSlotsType;
-    M4LTooltip: TooltipSlotsType;
-    M4LTypography: TypographySlotsType;
-  }
-
-  interface ComponentsPropsList {
-    M4LButtonBase: Partial<ButtonBaseOwnerState>;
-    M4LIcon: Partial<IconOwnerState>;
-    M4LTooltip: Partial<TooltipOwnerState>;
-    M4LTypography: Partial<TypographyOwnerState>;
-  }
-
-  interface Components {
-    M4LButtonBase?: {
-      defaultProps?: ComponentsPropsList['M4LButtonBase'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LButtonBase'];
-      variants?: ComponentsVariants['M4LButtonBase'];
-    };
-    M4LIcon?: {
-      defaultProps?: ComponentsPropsList['M4LIcon'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LIcon'];
-      variants?: ComponentsVariants['M4LIcon'];
-    };
-    M4LTooltip?: {
-      defaultProps?: ComponentsPropsList['M4LTooltip'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LTooltip'];
-      variants?: ComponentsVariants['M4LTooltip'];
-    };
-    M4LTypography?: {
-      defaultProps?: ComponentsPropsList['M4LTypography'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LTypography'];
-      variants?: ComponentsVariants['M4LTypography'];
-    };
-  }
+import { ComponentsOverrides, ComponentsVariants, Theme } from '@mui/material/styles';
+import type { IconOwnerState, IconSlotsType } from '../components/Icon/types';
+import type {
+  ButtonBaseOwnerState,
+  ButtonBaseSlotsType,
+} from '../extended/mui/ButtonBase/types';
+import type {
+  TooltipOwnerState,
+  TooltipSlotsType,
+} from '../extended/mui/Tooltip/types';
+import type {
+  TypographyOwnerState,
+  TypographySlotsType,
+} from '../extended/mui/Typography/types';
+
+declare module '@mui/material/styles' {
+  interface ComponentNameToClassKey {
+    M4LButtonBase: ButtonBaseSlotsType;
+    M4LIcon: IconSlotsType;
+    M4LTooltip: TooltipSlotsType;
+    M4LTypography: TypographySlotsType;
+  }
+
+  interface ComponentsPropsList {
+    M4LButtonBase: Partial<ButtonBaseOwnerState>;
+    M4LIcon: Partial<IconOwnerState>;
+    M4LTooltip: Partial<TooltipOwnerState>;
+    M4LTypography: Partial<TypographyOwnerState>;
+  }
+
+  interface Components {
+    M4LButtonBase?: {
+      defaultProps?: ComponentsPropsList['M4LButtonBase'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LButtonBase'];
+      variants?: ComponentsVariants['M4LButtonBase'];
+    };
+    M4LIcon?: {
+      defaultProps?: ComponentsPropsList['M4LIcon'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIcon'];
+      variants?: ComponentsVariants['M4LIcon'];
+    };
+    M4LTooltip?: {
+      defaultProps?: ComponentsPropsList['M4LTooltip'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTooltip'];
+      variants?: ComponentsVariants['M4LTooltip'];
+    };
+    M4LTypography?: {
+      defaultProps?: ComponentsPropsList['M4LTypography'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTypography'];
+      variants?: ComponentsVariants['M4LTypography'];
+    };
+  }
 }

package/components/Icon/Icon.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/components/Icon/Icon.styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAkB,UAAU,EAAE,MAAM,SAAS,CAAC;AAkD1D,eAAO,MAAM,UAAU,EAAE,UAmExB,CAAC"}
+{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/components/Icon/Icon.styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAkB,UAAU,EAAE,MAAM,SAAS,CAAC;AAkD1D,eAAO,MAAM,UAAU,EAAE,UAiExB,CAAC"}

package/components/Icon/Icon.styles.js

@@ -1,42 +1,42 @@
-import { getSizeStyles as l } from "../../utils/getSizeStyles/getSizeStyles.js";
-import { ICON_CLASSES as a } from "./constants.js";
+import { getSizeStyles as a } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { ICON_CLASSES as l } from "./constants.js";
 import { getOriginalSvgIconRootPaintStyles as d, ICON_SVG_SHAPE_SELECTOR as c } from "../../utils/getIconPaintStyles/getIconPaintStyles.js";
 const p = {
   small: 16,
   medium: 24
 };
-function u(e, i) {
-  const t = e.vars?.palette ?? e.palette;
+function u(t, i) {
+  const e = t.vars?.palette ?? t.palette;
   return i.split(".").reduce((s, n) => {
     if (s && typeof s == "object" && n in s)
       return s[n];
-  }, t) ?? (i.includes(".") ? t.text.primary : i);
+  }, e) ?? (i.includes(".") ? e.text.primary : i);
 }
-function o(e, i = "medium") {
-  if (e.vars?.size && e.generalSettings)
-    return l(e, i, "base", (r) => ({
+function o(t, i = "medium") {
+  if (t.vars?.size && t.generalSettings)
+    return a(t, i, "base", (r) => ({
       width: r,
       height: r
     }));
-  const t = p[i];
+  const e = p[i];
   return {
-    width: t,
-    height: t
+    width: e,
+    height: e
   };
 }
-const b = {
+const k = {
   /**
    * Root styles for the Icon component, handling both mask and non-mask strategies, as well as disabled and selected states.
    */
-  root: ({ theme: e, ownerState: i }) => {
-    const t = i?.disabled ? (e.vars?.palette ?? e.palette).text.disabled : i?.selected && i?.enabledSelected ? (e.vars?.palette ?? e.palette).primary.enabled : u(e, String(i?.color));
+  root: ({ theme: t, ownerState: i }) => {
+    const e = i?.disabled ? (t.vars?.palette ?? t.palette).text.disabled : i?.selected && i?.enabledSelected ? (t.vars?.palette ?? t.palette).primary.enabled : u(t, String(i?.color));
     return {
       display: i?.isSkeleton ? "none" : "flex",
       justifyContent: "center",
       alignItems: "center",
       width: "fit-content",
       transition: "transform 0.5s ease-in-out",
-      ...o(e, i?.size ?? "medium"),
+      ...o(t, i?.size ?? "medium"),
       ...i?.isMaskStrategy === !1 && {
         "& .MuiSvgIcon-root": {
           width: "inherit",
@@ -44,15 +44,13 @@ const b = {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          ...(!i?.originalColor || i?.disabled) && {
-            [c]: {
-              fill: t
-            }
+          [c]: {
+            fill: e
           }
         }
       },
       ...i?.isMaskStrategy === !0 && {
-        [`& .${a.icon}`]: {
+        [`& .${l.icon}`]: {
           maskPosition: "center",
           maskRepeat: "no-repeat",
           maskSize: "cover",
@@ -63,7 +61,7 @@ const b = {
           ...i?.rotationAngle && {
             transform: `rotate(${i.rotationAngle}deg)`
           },
-          backgroundColor: t
+          backgroundColor: e
         }
       },
       ...i?.originalColor && d()
@@ -79,14 +77,14 @@ const b = {
   /**
    * Skeleton styles for the icon element when in loading state.
    */
-  iconSkeleton: ({ theme: e, ownerState: i }) => ({
+  iconSkeleton: ({ theme: t, ownerState: i }) => ({
     "&": {
-      borderRadius: e.size?.borderRadius?.r1 ?? e.shape.borderRadius,
-      ...o(e, i?.size ?? "medium")
+      borderRadius: t.size?.borderRadius?.r1 ?? t.shape.borderRadius,
+      ...o(t, i?.size ?? "medium")
     }
   }),
   tooltip: {}
 };
 export {
-  b as iconStyles
+  k as iconStyles
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/base",
-  "version": "1.7.2-beta-improvement-804-reports-mfs-enhancements.1",
+  "version": "1.7.2",
   "publishConfig": {
     "access": "public"
   },

package/utils/getIconPaintStyles/getIconPaintStyles.d.ts

@@ -8,8 +8,13 @@
  * silently misses every SVG icon, so both branches must always be declared.
  */
 export declare const ICON_SVG_SHAPE_SELECTOR = "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use";
-export declare const ORIGINAL_SVG_ICON_PAINT_SELECTOR = "&&&:not(.Mui-disabled) .M4LIcon-root .MuiSvgIcon-root [fill]";
-export declare const ORIGINAL_SVG_ICON_ROOT_PAINT_SELECTOR = "&&&:not([aria-disabled=\"true\"]) .MuiSvgIcon-root [fill]";
+/**
+ * Nodes whose fill multicolor sources restore. Besides shapes with an authored `fill`,
+ * stroke-only shapes (e.g. an illustration card border) and the `g` groups they inherit
+ * from must be reverted too, or they keep the icon color and cover the artwork.
+ */
+export declare const ORIGINAL_SVG_ICON_PAINT_SELECTOR = "&&&:not(.Mui-disabled) .M4LIcon-root .MuiSvgIcon-root :is([fill], [stroke], g)";
+export declare const ORIGINAL_SVG_ICON_ROOT_PAINT_SELECTOR = "&&&:not([aria-disabled=\"true\"]) .MuiSvgIcon-root :is([fill], [stroke], g)";
 export interface IconPaintOptions {
     /**
      * Selector inserted between the rule root and the icon nodes, for call sites
@@ -46,7 +51,7 @@ export declare function getIconPaintStyles(color: string, options?: IconPaintOpt
  * Restore presentation fills for enabled multicolor SVG actions.
  */
 export declare function getOriginalSvgIconPaintStyles(): {
-    "&&&:not(.Mui-disabled) .M4LIcon-root .MuiSvgIcon-root [fill]": {
+    "&&&:not(.Mui-disabled) .M4LIcon-root .MuiSvgIcon-root :is([fill], [stroke], g)": {
         fill: string;
     };
 };
@@ -54,7 +59,7 @@ export declare function getOriginalSvgIconPaintStyles(): {
  * Restore presentation fills for enabled multicolor SVG resources rendered directly by Icon.
  */
 export declare function getOriginalSvgIconRootPaintStyles(): {
-    "&&&:not([aria-disabled=\"true\"]) .MuiSvgIcon-root [fill]": {
+    "&&&:not([aria-disabled=\"true\"]) .MuiSvgIcon-root :is([fill], [stroke], g)": {
         fill: string;
     };
 };

package/utils/getIconPaintStyles/getIconPaintStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getIconPaintStyles.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/utils/getIconPaintStyles/getIconPaintStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,2GACsE,CAAC;AAC3G,eAAO,MAAM,gCAAgC,iEACmB,CAAC;AACjE,eAAO,MAAM,qCAAqC,8DACS,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB;;;;;;;;;;;EAgB3E;AAED;;GAEG;AACH,wBAAgB,6BAA6B;;;;EAM5C;AAED;;GAEG;AACH,wBAAgB,iCAAiC;;;;EAMhD"}
+{"version":3,"file":"getIconPaintStyles.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/utils/getIconPaintStyles/getIconPaintStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,2GACsE,CAAC;AAC3G;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,mFACqC,CAAC;AACnF,eAAO,MAAM,qCAAqC,gFAC2B,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB;;;;;;;;;;;EAgB3E;AAED;;GAEG;AACH,wBAAgB,6BAA6B;;;;EAM5C;AAED;;GAEG;AACH,wBAAgB,iCAAiC;;;;EAMhD"}

package/utils/getIconPaintStyles/getIconPaintStyles.js

@@ -1,11 +1,11 @@
-const l = "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use", c = "&&&:not(.Mui-disabled) .M4LIcon-root .MuiSvgIcon-root [fill]", a = '&&&:not([aria-disabled="true"]) .MuiSvgIcon-root [fill]';
-function s(t, i) {
-  const { scope: n, important: r = !0 } = i ?? {}, o = n ? `& ${n} ` : "& ", e = r ? `${t} !important` : t;
+const l = "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use", c = "&&&:not(.Mui-disabled) .M4LIcon-root .MuiSvgIcon-root :is([fill], [stroke], g)", s = '&&&:not([aria-disabled="true"]) .MuiSvgIcon-root :is([fill], [stroke], g)';
+function a(t, i) {
+  const { scope: o, important: r = !0 } = i ?? {}, n = o ? `& ${o} ` : "& ", e = r ? `${t} !important` : t;
   return {
-    [`${o}.M4LIcon-icon`]: {
+    [`${n}.M4LIcon-icon`]: {
       backgroundColor: e
     },
-    [`${o}.MuiSvgIcon-root`]: {
+    [`${n}.MuiSvgIcon-root`]: {
       [l]: {
         fill: e,
         stroke: "none"
@@ -20,9 +20,9 @@ function I() {
     }
   };
 }
-function u() {
+function g() {
   return {
-    [a]: {
+    [s]: {
       fill: "revert-layer"
     }
   };
@@ -30,8 +30,8 @@ function u() {
 export {
   l as ICON_SVG_SHAPE_SELECTOR,
   c as ORIGINAL_SVG_ICON_PAINT_SELECTOR,
-  a as ORIGINAL_SVG_ICON_ROOT_PAINT_SELECTOR,
-  s as getIconPaintStyles,
+  s as ORIGINAL_SVG_ICON_ROOT_PAINT_SELECTOR,
+  a as getIconPaintStyles,
   I as getOriginalSvgIconPaintStyles,
-  u as getOriginalSvgIconRootPaintStyles
+  g as getOriginalSvgIconRootPaintStyles
 };