@m4l/components 0.0.60 → 0.0.61

package/dist/components/CommonActions/components/Actions/index.js

@@ -110,7 +110,7 @@ function MenuActions(props) {
         dense: true,
         onClick: () => handleClick(menuAction),
         sx: {
-          color: menuAction.color ? menuAction.color : "text.main"
+          color: menuAction.color ?? "text.main"
         },
         disabled: menuAction.disabled,
         children: [/* @__PURE__ */ jsx(Icon, {

package/dist/components/Icon/index.js

@@ -1,7 +1,9 @@
-import { styled, useTheme } from "@mui/material";
-import { useState, useMemo, useEffect } from "react";
+import { styled } from "@mui/material";
+import { useState, useEffect } from "react";
+import { useTheme } from "@mui/material/styles";
+import { g as getPaletteColor } from "../../vendor.js";
 import { jsx } from "react/jsx-runtime";
-const MaskIcon = styled("div", {
+const DivIcon = styled("div", {
   shouldForwardProp: (props) => props !== "src" && props !== "width" && props !== "height" && props !== "bgColor"
 })((props) => ({
   maskPosition: "center!important",
@@ -30,27 +32,6 @@ function Icon(props) {
   } = props;
   const [resource, setResource] = useState(void 0);
   const theme = useTheme();
-  const finalBgColor = useMemo(() => {
-    if (bgColor === "active") {
-      return theme.palette.action.active;
-    }
-    if (bgColor === "selected") {
-      return theme.palette.primary.main;
-    }
-    if (bgColor === "info") {
-      return theme.palette.info.main;
-    }
-    if (bgColor === "warning") {
-      return theme.palette.warning.main;
-    }
-    if (bgColor === "error") {
-      return theme.palette.error.main;
-    }
-    if (bgColor === "disabled") {
-      return theme.palette.action.disabled;
-    }
-    return bgColor;
-  }, [bgColor, theme]);
   useEffect(() => {
     let mounted = true;
     (async function networkOperation() {
@@ -74,11 +55,11 @@ function Icon(props) {
     id: "IconReact",
     width,
     height,
-    children: resource ? /* @__PURE__ */ jsx(MaskIcon, {
+    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
       src: resource,
       width,
       height,
-      bgColor: finalBgColor
+      bgColor: getPaletteColor(theme.palette, bgColor)
     }) : /* @__PURE__ */ jsx("img", {
       src: placeHolder,
       alt: "icon_svg"

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { WrapperPlaceHolderProps } from './types';
-export declare const MaskIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("./types").OwnProps & import("react").HTMLProps<HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("./types").OwnProps & import("react").HTMLProps<HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const WrapperPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & WrapperPlaceHolderProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/ModalDialog/index.js

@@ -2,7 +2,7 @@ import { Dialog, IconButton, Paper } from "@mui/material";
 import { D as Draggable } from "../../react-draggable.js";
 import { u as useModal } from "../../hooks/useModal/index.js";
 import { styled } from "@mui/material/styles";
-import { g as getThemeVariantColor } from "../../vendor.js";
+import { a as getThemeVariantColor } from "../../vendor.js";
 import { R as Resizeable } from "../Resizeable/index.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";

package/dist/contexts/ModalContext/index.js

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { M as ModalDialog } from "../../components/ModalDialog/index.js";
 import { A as ActionIntro } from "../../components/CommonActions/components/ActionIntro/index.js";
 import { A as ActionCancel } from "../../components/CommonActions/components/ActionCancel/index.js";
-import { a as getVariantColor } from "../../vendor.js";
+import { b as getVariantColor } from "../../vendor.js";
 const WrapperContentConfirm = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
-import { Theme } from '@mui/material/styles';
+import { Palette, Theme } from '@mui/material/styles';
 import { VariantColor } from './types';
+export declare const getPaletteColor: (palette: Palette, s: string) => string;
 export declare const getVariantColor: (variant: VariantColor | undefined) => "warning" | "info" | "primary" | "error";
 export declare const getThemeVariantColor: (theme: Theme, variant: VariantColor | undefined) => string;

package/dist/vendor.js

@@ -202,6 +202,21 @@ function RHFAutocomplete(props) {
     }
   });
 }
+const getPaletteColor = function(palette, s) {
+  s = s.replace(/\[(\w+)\]/g, ".$1");
+  s = s.replace(/^\./, "");
+  let o = palette;
+  const a = s.split(".");
+  for (let i = 0, n = a.length; i < n; ++i) {
+    const k = a[i];
+    if (k in o) {
+      o = o[k];
+    } else {
+      return palette.action.active;
+    }
+  }
+  return palette.action.active;
+};
 const getVariantColor = (variant) => {
   switch (variant) {
     case "warning":
@@ -245,4 +260,4 @@ const Button = (props) => {
     ...props
   });
 };
-export { Button as B, RHFAutocomplete as R, getVariantColor as a, getThemeVariantColor as g };
+export { Button as B, RHFAutocomplete as R, getThemeVariantColor as a, getVariantColor as b, getPaletteColor as g };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.60",
+  "version": "0.0.61",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,7 @@
     "format": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
-    "@m4l/graphics": "^0.0.38",
+    "@m4l/graphics": "^0.0.39",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5",