@m4l/components 0.0.60 → 0.0.63

package/{dist/components → components}/CommonActions/components/Actions/index.js

@@ -82,9 +82,7 @@ function MenuActions(props) {
         size: "small",
         onClick: handleOpen,
         children: /* @__PURE__ */ jsx(Icon, {
-          src: urlFinalIcon,
-          width: 16,
-          height: 16
+          src: urlFinalIcon
         })
       })
     }), /* @__PURE__ */ jsx(MenuPopover, {
@@ -110,7 +108,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 → components}/DataGrid/index.js

@@ -179,24 +179,26 @@ function CheckboxIndeterminateIcon(props) {
     })
   });
 }
-const CheckboxFormatter = forwardRef(function CheckboxFormatter2({
-  onChange,
-  checked,
-  ...props
-}, _ref) {
-  function handleChange(e) {
-    onChange(e.target.checked, e.nativeEvent.shiftKey);
-  }
-  return /* @__PURE__ */ jsx(Checkbox, {
+const CheckboxFormatter = forwardRef(
+  function CheckboxFormatter2({
+    onChange,
     checked,
-    size: "small",
-    icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
-    checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
-    indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
-    onChange: handleChange,
     ...props
-  });
-});
+  }, _ref) {
+    function handleChange(e) {
+      onChange(e.target.checked, e.nativeEvent.shiftKey);
+    }
+    return /* @__PURE__ */ jsx(Checkbox, {
+      checked,
+      size: "small",
+      icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+      checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
+      indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
+      onChange: handleChange,
+      ...props
+    });
+  }
+);
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectFormatter(props) {
@@ -685,7 +687,9 @@ const getInOrderColumns = (columns, isMultipleRows, columnsConfig, columnsWidths
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
     return !column.hidden && visible;
-  }).sort((a, b) => getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)).map((columnSorted) => {
+  }).sort(
+    (a, b) => getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)
+  ).map((columnSorted) => {
     const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
     return {
       ...columnSorted,
@@ -719,7 +723,9 @@ const getAligByType = (columnType) => {
 };
 const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
   const { columnsConfig, columnsWidths, onChangeColumnsOrder, rowActionsGetter, isSkeleton } = useBase();
-  const [columns, setColumns] = useState(() => []);
+  const [columns, setColumns] = useState(
+    () => []
+  );
   const [sortColumns, setSortColumns] = useState([]);
   const { activeFilters, filters } = useFilters();
   const findKeyInColumns = (key, cols) => {
@@ -727,8 +733,18 @@ const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
     return index !== -1;
   };
   useEffect(() => {
-    setColumns(getInOrderColumns(sourceColumns, isMultipleRows, columnsConfig, columnsWidths, rowActionsGetter));
-    const finalSortedColumns = sortColumns.filter((sortColumn) => findKeyInColumns(sortColumn.columnKey, sourceColumns));
+    setColumns(
+      getInOrderColumns(
+        sourceColumns,
+        isMultipleRows,
+        columnsConfig,
+        columnsWidths,
+        rowActionsGetter
+      )
+    );
+    const finalSortedColumns = sortColumns.filter(
+      (sortColumn) => findKeyInColumns(sortColumn.columnKey, sourceColumns)
+    );
     if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
       setSortColumns(finalSortedColumns);
     }

package/components/DynamicFilter/components/ApplyedFilters/components/ApplyedFilter/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const WrapperApplyedFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AplyedFilterStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerOperator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerOperands: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/{dist/components → components}/DynamicFilter/index.js

@@ -1,5 +1,5 @@
 import { S as ScrollBar } from "../ScrollBar/index.js";
-import { styled, alpha } from "@mui/material/styles";
+import { styled, alpha as alpha$1 } from "@mui/material/styles";
 import require$$0, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
 import { useModuleDictionary, useHostTools, useEnvironment, voidFunction, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
@@ -7,7 +7,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import { F as FormProvider } from "../hook-form/FormProvider/index.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { R as RHFAutocomplete } from "../../vendor.js";
-import { styled as styled$1, Skeleton, MenuItem, useTheme, Popper } from "@mui/material";
+import { alpha, styled as styled$1, Skeleton, MenuItem, useTheme, Popper } from "@mui/material";
 import "../hook-form/RHFAutocompleteAsync/index.js";
 import "../hook-form/RHFCheckbox/index.js";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime.js";
@@ -18,10 +18,10 @@ import "../../react-lazy-load-image-component.js";
 import "../Image/index.js";
 import "../hook-form/RHFUpload.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.js";
-import { I as Icon } from "../Icon/index.js";
 import "../../simplebar.js";
 import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
 import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
+import { I as Icon } from "../Icon/index.js";
 import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.js";
 import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.js";
 import "react-router-dom";
@@ -33,8 +33,8 @@ const WrapperApplyedFilters = styled("div")(({
   theme
 }) => ({
   width: "100%",
-  margin: theme.spacing(0, 1.5),
-  paddingLeft: theme.spacing(1.5),
+  margin: theme.spacing(0, 1),
+  paddingLeft: theme.spacing(1),
   borderLeft: `1px solid ${theme.palette.divider}`
 }));
 const ContainerApplyedFilters = styled("div")(({
@@ -1047,8 +1047,11 @@ const WrapperApplyedFilter = styled("div")(({
   alignItems: "center",
   height: "100%",
   minHeight: theme.spacing(3),
-  padding: theme.spacing(0, 1),
-  backgroundColor: theme.palette.action.disabledBackground,
+  paddingLeft: theme.spacing(1),
+  backgroundColor: theme.palette.grid?.sectionHeader,
+  border: "1px solid",
+  borderColor: alpha(`${theme.palette.divider}`, 0.1),
+  overflow: "visible",
   borderRadius: theme.spacing(1),
   "&.waf_no_setted": {
     border: `1px solid ${theme.palette.error.main}`
@@ -1098,13 +1101,13 @@ function ApplyedFilter(props) {
     removeFilter,
     showPopupForEditFilter,
     hidePopupEdit,
-    getFieldByName,
-    isSkeleton
+    getFieldByName
   } = useBase();
   const {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  useModuleDictionary();
   const field = useMemo(() => {
     return getFieldByName(fieldName);
   }, [getFieldByName]);
@@ -1129,7 +1132,7 @@ function ApplyedFilter(props) {
   return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
     id: "WrapperApplyedFilter",
     className: !isSetted ? "waf_no_setted" : "",
-    children: [urlIcon && /* @__PURE__ */ jsx(Icon, {
+    children: [urlIcon && /* @__PURE__ */ jsx(IconButton, {
       src: urlIcon,
       onClick
     }), /* @__PURE__ */ jsxs(AplyedFilterStyled, {
@@ -1143,8 +1146,9 @@ function ApplyedFilter(props) {
       })]
     }), !fixed && /* @__PURE__ */ jsx(IconButton, {
       size: "small",
-      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close_filter.svg`,
-      onClick: onDelete
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+      onClick: onDelete,
+      dictionaryTooltip: "dynamic_filter.tooltip_clear_filter"
     })]
   });
 }
@@ -1208,7 +1212,8 @@ const ClearFilters = () => {
     return /* @__PURE__ */ jsx(WrapperClearFilters, {
       children: /* @__PURE__ */ jsx(IconButton, {
         src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
-        onClick: clearFilters
+        onClick: clearFilters,
+        dictionaryTooltip: "dynamic_filter.tooltip_clear_filters"
       })
     });
   }
@@ -1222,14 +1227,9 @@ const SKTWrapperFilterButton = styled("div")(({
   alignItems: "center",
   minWidth: theme.spacing(3.75),
   height: theme.spacing(3.75),
-  background: alpha(theme.palette.primary.main, 0.3)
+  background: alpha$1(theme.palette.primary.main, 0.3)
 }));
-const WrapperFilterButton = styled("div")(({
-  theme
-}) => ({
-  paddingRight: theme.spacing(0.75),
-  marginRight: theme.spacing(0.75),
-  borderRight: `1px solid ${theme.palette.divider}`,
+const WrapperFilterButton = styled("div")(() => ({
   "&.isDirty": {
     animationName: "dirtyEffect",
     animationDuration: "1s",
@@ -1272,14 +1272,14 @@ function FilterButton() {
     });
   }
   const color = useMemo(() => {
-    if (automatic) {
-      return "active";
+    if (automatic || !isDirty) {
+      return "action.active";
     }
     if (!isValid) {
-      return "error";
+      return "error.main";
     }
-    return "selected";
-  }, [automatic, isValid]);
+    return "primary.main";
+  }, [automatic, isValid, isDirty]);
   return /* @__PURE__ */ jsx(WrapperFilterButton, {
     id: "WrapperFilterButton",
     className: isDirty && isValid ? "isDirty" : "",
@@ -1300,6 +1300,9 @@ const WrapperInputFilter = styled("div")(({
   alignItems: "center",
   width: "100%",
   height: theme.spacing(3),
+  borderLeft: `1px solid ${theme.palette.divider}`,
+  paddingLeft: theme.spacing(1),
+  marginLeft: theme.spacing(1),
   [theme.breakpoints.up("sm")]: {
     width: theme.spacing(25)
   }

package/{dist/components → components}/Icon/index.js

@@ -1,68 +1,65 @@
-import { styled, useTheme } from "@mui/material";
+import { styled } from "@mui/material";
 import { useState, useMemo, 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", {
-  shouldForwardProp: (props) => props !== "src" && props !== "width" && props !== "height" && props !== "bgColor"
-})((props) => ({
+const DivIcon = styled("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "sizeIcon" && props !== "bgColor"
+})(({
+  size,
+  src,
+  bgColor
+}) => ({
   maskPosition: "center!important",
   maskRepeat: "no-repeat!important",
-  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}')`,
-  WebkitMask: `url('data:image/svg+xml;base64,${props.src}')`
+  WebkitMaskRepeat: "no-repeat!important",
+  width: size,
+  height: size,
+  backgroundColor: bgColor,
+  mask: `url('data:image/svg+xml;base64,${src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${src}')`
 }));
-const WrapperPlaceHolder = styled("div", {
-  shouldForwardProp: (props) => props !== "widht" && props !== "height"
-})((props) => ({
+const WrapperPlaceHolder = styled("div")(() => ({
   display: "flex",
   justifyContent: "center",
-  alignItems: "center",
-  width: props.width,
-  height: props.height
+  alignItems: "center"
 }));
 function Icon(props) {
   const {
     src,
-    width = "16px",
-    height = "16px",
-    bgColor = "active"
+    size = "small",
+    bgColor = "action.active"
   } = props;
   const [resource, setResource] = useState(void 0);
   const theme = useTheme();
-  const finalBgColor = useMemo(() => {
-    if (bgColor === "active") {
-      return theme.palette.action.active;
+  const finalSize = useMemo(() => {
+    switch (size) {
+      case "extra-small":
+        return "12px";
+      case "small":
+        return "16px";
+      case "medium":
+        return "18px";
+      case "large":
+        return "22px";
     }
-    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]);
+    return size;
+  }, [size]);
   useEffect(() => {
     let mounted = true;
     (async function networkOperation() {
       await fetch(src).then((response) => {
         return response.text() || "";
       }).then((xml) => {
-        xml = xml.match(/(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g)?.toString() || "";
+        xml = xml.match(
+          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
+        )?.toString() || "";
         if (mounted) {
           setResource(window.btoa(xml));
+          console.log("value icon set resource", resource);
         }
       }).catch((_err) => {
-        console.log("error icon");
+        console.log("error icon", _err);
       });
     })();
     return function clenUp() {
@@ -70,15 +67,13 @@ function Icon(props) {
     };
   }, [src]);
   const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
+  console.log("value for getColor", getPaletteColor(theme.palette, "error.main"));
   return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
     id: "IconReact",
-    width,
-    height,
-    children: resource ? /* @__PURE__ */ jsx(MaskIcon, {
+    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
       src: resource,
-      width,
-      height,
-      bgColor: finalBgColor
+      size: finalSize,
+      bgColor: getPaletteColor(theme.palette, bgColor)
     }) : /* @__PURE__ */ jsx("img", {
       src: placeHolder,
       alt: "icon_svg"

package/components/Icon/styles.d.ts

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