@m4l/components 0.0.58 → 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/DynamicFilter/index.js

@@ -33,7 +33,9 @@ const WrapperApplyedFilters = styled("div")(({
   theme
 }) => ({
   width: "100%",
-  marginLeft: theme.spacing(1.5)
+  margin: theme.spacing(0, 1.5),
+  paddingLeft: theme.spacing(1.5),
+  borderLeft: `1px solid ${theme.palette.divider}`
 }));
 const ContainerApplyedFilters = styled("div")(({
   theme
@@ -42,7 +44,7 @@ const ContainerApplyedFilters = styled("div")(({
   display: "flex",
   justifyContent: "flex-start",
   alignItems: "center",
-  height: theme.spacing(3.75),
+  height: "auto",
   gap: theme.spacing(1.5)
 }));
 const STRING_OPERATORS = ["c", "nc"];
@@ -1043,8 +1045,9 @@ const WrapperApplyedFilter = styled("div")(({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  height: theme.spacing(3.75),
-  padding: theme.spacing(1),
+  height: "100%",
+  minHeight: theme.spacing(3),
+  padding: theme.spacing(0, 1),
   backgroundColor: theme.palette.action.disabledBackground,
   borderRadius: theme.spacing(1),
   "&.waf_no_setted": {
@@ -1059,7 +1062,7 @@ const AplyedFilterStyled = styled("div")(({
   justifyContent: "center",
   alignItems: "center",
   width: "auto",
-  height: theme.spacing(3.75),
+  height: "100%",
   marginRight: theme.spacing(1),
   marginLeft: theme.spacing(1),
   whiteSpace: "nowrap"
@@ -1156,6 +1159,7 @@ function ApplyedFilters() {
     });
   }
   return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+    className: "WrapperApplyedFilters",
     children: /* @__PURE__ */ jsx(ScrollBar, {
       children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
         id: "WrapperApplyedFilters",
@@ -1178,11 +1182,8 @@ const SKTClearFilters = styled$1("div")(({
 const WrapperClearFilters = styled$1("div")(({
   theme
 }) => ({
-  [theme.breakpoints.up("sm")]: {
-    paddingLeft: theme.spacing(1.5),
-    marginLeft: theme.spacing(1.5),
-    borderLeft: `1px solid ${theme.palette.divider}`
-  }
+  paddingLeft: theme.spacing(0.5),
+  borderLeft: `1px solid ${theme.palette.divider}`
 }));
 const ClearFilters = () => {
   const {
@@ -1223,7 +1224,12 @@ const SKTWrapperFilterButton = styled("div")(({
   height: theme.spacing(3.75),
   background: alpha(theme.palette.primary.main, 0.3)
 }));
-const WrapperFilterButton = styled("div")(() => ({
+const WrapperFilterButton = styled("div")(({
+  theme
+}) => ({
+  paddingRight: theme.spacing(0.75),
+  marginRight: theme.spacing(0.75),
+  borderRight: `1px solid ${theme.palette.divider}`,
   "&.isDirty": {
     animationName: "dirtyEffect",
     animationDuration: "1s",
@@ -1293,11 +1299,7 @@ const WrapperInputFilter = styled("div")(({
   justifyContent: "center",
   alignItems: "center",
   width: "100%",
-  height: theme.spacing(3.75),
-  marginLeft: theme.spacing(1.5),
-  padding: theme.spacing(0, 1.5),
-  borderRight: `1px solid ${theme.palette.divider}`,
-  borderLeft: `1px solid ${theme.palette.divider}`,
+  height: theme.spacing(3),
   [theme.breakpoints.up("sm")]: {
     width: theme.spacing(25)
   }
@@ -1309,7 +1311,6 @@ const StyledInputFilter = styled("input")(({
   justifyContent: "center",
   alignItems: "center",
   minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75),
   width: "100%",
   "&": {
     outline: "none",
@@ -1552,7 +1553,7 @@ const WrapperFilter = styled("div", {
   justifyContent: "flex-start",
   height: "auto",
   width: "100%",
-  padding: theme.spacing(1.5),
+  padding: theme.spacing(0.5),
   borderRadius: theme.spacing(1),
   border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
 }));
@@ -1569,10 +1570,15 @@ const WrapperFilterMobile = styled("div", {
   minWidth: theme.spacing(25),
   height: "auto",
   width: "100%",
-  padding: theme.spacing(1.5),
+  padding: theme.spacing(0.5),
   borderRadius: theme.spacing(1),
   border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
-  gap: theme.spacing(1.5)
+  gap: theme.spacing(0.75),
+  "& .WrapperApplyedFilters": {
+    margin: "0px",
+    padding: "0px",
+    border: "0px"
+  }
 }));
 const ContainerFistRow = styled("div")(() => ({
   width: "100%",
@@ -1591,7 +1597,7 @@ const DynamicFilter = (props) => {
       children: ({
         inEdition
       }) => isDesktop ? /* @__PURE__ */ jsxs(WrapperFilter, {
-        id: "WrapperDynamicFilter",
+        id: "WrapperFilter",
         inEdition,
         children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
       }) : /* @__PURE__ */ jsxs(WrapperFilterMobile, {

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",
@@ -9,7 +11,8 @@ const MaskIcon = styled("div", {
   width: props.width === void 0 ? "20px" : props.width,
   height: props.height === void 0 ? "20px" : props.height,
   backgroundColor: props.bgColor,
-  mask: `url('data:image/svg+xml;base64,${props.src}')`
+  mask: `url('data:image/svg+xml;base64,${props.src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${props.src}')`
 }));
 const WrapperPlaceHolder = styled("div", {
   shouldForwardProp: (props) => props !== "widht" && props !== "height"
@@ -29,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]);
   useEffect(() => {
     let mounted = true;
     (async function networkOperation() {
@@ -73,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.58",
+  "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.37",
+    "@m4l/graphics": "^0.0.39",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5",