@m4l/components 9.50.0 → 9.51.0-beta-m4lcom-764-device-picker.0

package/components/SideBar/subcomponents/TreeGroupItems/styles.js

@@ -1,5 +1,17 @@
-import { getSizeStyles as t } from "../../../../utils/getSizeStyles/getSizeStyles.js";
-const o = {
+import { ICON_SVG_SHAPE_SELECTOR as e } from "@m4l/base";
+import { getSizeStyles as o } from "../../../../utils/getSizeStyles/getSizeStyles.js";
+const r = (i) => ({
+  "& .M4LIcon-icon": {
+    backgroundColor: `${i}!important`
+  },
+  "& .MuiSvgIcon-root": {
+    color: `${i}!important`,
+    [e]: {
+      fill: `${i}!important`,
+      stroke: "none"
+    }
+  }
+}), c = {
   /**
    * Container for the group items in the sidebar
    */
@@ -82,7 +94,7 @@ const o = {
     paddingTop: i.vars.size.baseSpacings.sp2,
     paddingBottom: i.vars.size.baseSpacings.sp2,
     paddingLeft: i.vars.size.baseSpacings.sp2,
-    ...t(
+    ...o(
       i,
       a?.size || "medium",
       "container",
@@ -95,73 +107,73 @@ const o = {
   /**
    * Styles applied to the container of the adornment icon in the header component
    */
-  containerAdornmentIcon: ({ theme: i, ownerState: a }) => ({
-    overflow: "visible",
-    borderRadius: i.vars.size.borderRadius["r1-5"],
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "relative",
-    width: "fit-content",
-    height: "fit-content",
-    minWidth: "fit-content",
-    minHeight: "fit-content",
-    padding: "1px",
-    "& .M4LIcon-root": {
+  containerAdornmentIcon: ({ theme: i, ownerState: a }) => {
+    const n = o(
+      i,
+      a?.size || "medium",
+      "base",
+      (t) => ({
+        width: `${t}!important`,
+        height: `${t}!important`,
+        minWidth: `${t}!important`,
+        minHeight: `${t}!important`
+      })
+    );
+    return {
+      overflow: "visible",
+      borderRadius: i.vars.size.borderRadius["r1-5"],
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative",
       width: "fit-content",
       height: "fit-content",
-      padding: i.vars.size.baseSpacings["sp0-5"],
-      "& .M4LIcon-icon": {
-        ...t(
-          i,
-          a?.size || "medium",
-          "base",
-          (n) => ({
-            width: `${n}!important`,
-            height: `${n}!important`,
-            minWidth: `${n}!important`,
-            minHeight: `${n}!important`
-          })
-        )
-      }
-    },
-    ...a?.variant !== "itemActive" && a?.variant !== "normal" && {
-      "& .M4LIcon-icon": {
-        backgroundColor: `${i.vars.palette.chips.persianGreen.contained.colorTone}!important`
-      }
-    },
-    ...a?.variant === "normal" && {
-      "& .M4LIcon-icon": {
-        backgroundColor: `${i.vars.palette.text.secondary}!important`
-      }
-    },
-    ...a?.variant === "main" && {
-      backgroundColor: i.vars.palette.chips.persianGreen.contained.backgroundColorTone
-    },
-    ...a?.variant === "root" && {
-      backgroundColor: i.vars.palette.primary.enabled,
-      boxShadow: i.vars.customShadows.primary2
-    },
-    ...a?.variant === "itemActive" && {
-      boxShadow: i.vars.customShadows.primary2,
-      background: `linear-gradient(to right, 
-      ${i.vars.palette.primary.opacityGradient1}, 
-      ${i.vars.palette.primary.opacityGradient2})`,
-      "& .M4LSideBar-backgroundAdornmentIcon": {
-        background: i.vars.palette.background.default
+      minWidth: "fit-content",
+      minHeight: "fit-content",
+      padding: "1px",
+      "& .M4LIcon-root": {
+        width: "fit-content",
+        height: "fit-content",
+        padding: i.vars.size.baseSpacings["sp0-5"],
+        "& .M4LIcon-icon": {
+          ...n
+        },
+        "& .MuiSvgIcon-root": {
+          ...n
+        }
+      },
+      ...a?.variant !== "itemActive" && a?.variant !== "normal" && {
+        ...r(i.vars.palette.chips.persianGreen.contained.colorTone)
       },
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        inset: "1.4px",
-        background: i.vars.palette.primary.enabledOpacity,
-        borderRadius: "5px"
+      ...a?.variant === "normal" && {
+        ...r(i.vars.palette.text.secondary)
       },
-      "& .M4LIcon-icon": {
-        backgroundColor: `${i.vars.palette.primary.enabled}!important`
+      ...a?.variant === "main" && {
+        backgroundColor: i.vars.palette.chips.persianGreen.contained.backgroundColorTone
+      },
+      ...a?.variant === "root" && {
+        backgroundColor: i.vars.palette.primary.enabled,
+        boxShadow: i.vars.customShadows.primary2
+      },
+      ...a?.variant === "itemActive" && {
+        boxShadow: i.vars.customShadows.primary2,
+        background: `linear-gradient(to right,
+        ${i.vars.palette.primary.opacityGradient1},
+        ${i.vars.palette.primary.opacityGradient2})`,
+        "& .M4LSideBar-backgroundAdornmentIcon": {
+          background: i.vars.palette.background.default
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          inset: "1.4px",
+          background: i.vars.palette.primary.enabledOpacity,
+          borderRadius: "5px"
+        },
+        ...r(i.vars.palette.primary.enabled)
       }
-    }
-  }),
+    };
+  },
   /**
    * Styles applied to the background of the adornment icon in the header component
    */
@@ -175,5 +187,5 @@ const o = {
   })
 };
 export {
-  o as contentGroupStyles
+  c as contentGroupStyles
 };

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/types.d.ts

@@ -1,5 +1,6 @@
+import { IconProps } from '@m4l/base';
 export interface AdornmentIconProps {
-    icon: string;
+    icon: NonNullable<IconProps['src']>;
     variant: 'main' | 'root' | 'itemActive' | 'normal';
 }
 //# sourceMappingURL=types.d.ts.map

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;CACpD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;CACpD"}

package/components/SideBar/tests/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/SideBar/tests/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,eAAO,MAAM,cAAc,eAAe,CAAC;AAC3C,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,YAAY,CAsCrC,CAAC;AACF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,YAAY,CAiBrC,CAAC;AACF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,YAAY,CAiBrC,CAAC;AAyBF,eAAO,MAAM,QAAQ,EAAE,YAAY,EA68BlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,YAAY,EAAgC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/SideBar/tests/constants.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,cAAc,eAAe,CAAC;AAC3C,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,YAAY,CAsCrC,CAAC;AACF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,YAAY,CAiBrC,CAAC;AACF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,YAAY,CAiBrC,CAAC;AAyBF,eAAO,MAAM,QAAQ,EAAE,YAAY,EA68BlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,YAAY,EAAgC,CAAC"}