@m4l/components 9.2.56-beta.2 → 9.2.56-beta.4

package/components/mui_extended/TabContent/TabContent.js

@@ -3,9 +3,9 @@ import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.j
 import { T as TAB_CONTENT_KEY_COMPONENT } from "./constants.js";
 import { T as TabContentRootStyled } from "./slots/TabContentSlots.js";
 const TabContent = (props) => {
-  const { children, className, ...others } = props;
+  const { children, className, background = false, ...others } = props;
   const root = getComponentSlotRoot(TAB_CONTENT_KEY_COMPONENT);
-  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ...others, children });
+  return /* @__PURE__ */ jsx(TabContentRootStyled, { className: root, ownerState: { background }, ...others, children });
 };
 export {
   TabContent as T

package/components/mui_extended/TabContent/TabContent.styles.js

@@ -2,14 +2,13 @@ const tabContentStyles = {
   /**
    * Elemento root referencia a `TabContent`
    */
-  root: ({ theme }) => ({
+  root: ({ theme, ownerState }) => ({
     padding: theme.vars.size.baseSpacings.sp3,
     display: "flex",
     overflow: "hidden",
     // height: '100%',
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp2,
-    background: theme.vars.palette.background.base,
     position: "relative",
     flex: 1,
     flexGrow: 1,
@@ -18,6 +17,9 @@ const tabContentStyles = {
     boxSizing: "border-box",
     zIndex: "0",
     top: "-1px",
+    ...ownerState?.background ? {
+      backgroundColor: theme.vars.palette.background.default
+    } : {},
     "& .M4LStack-root": {
       gap: `${theme.vars.size.baseSpacings.sp2} !important`
     },

package/components/mui_extended/TabContent/types.d.ts

@@ -7,5 +7,6 @@ export interface TabContentProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     children: React.ReactNode;
     style?: React.CSSProperties;
     key?: Key | null | undefined;
+    background?: boolean;
 }
 export type TabContentStyles = M4LOverridesStyleRules<keyof typeof TabContentSlots, typeof TABS_KEY_COMPONENT, Theme>;

package/components/popups/components/PopupsViewer/PopupsViewer.styles.js

@@ -19,13 +19,13 @@ const popupsViewerStyles = {
    * id: 'global',
    * },
    */
-  popupDragWindowRoot: ({ theme, ownerState }) => ({
+  popupDragWindowRoot: ({ ownerState }) => ({
     display: "flex",
     flexDirection: "column",
     position: "relative",
     width: "100%",
     height: "100%",
-    backgroundColor: theme.vars.palette.background.default,
+    backgroundColor: "transparent",
     zIndex: ownerState?.zIndex || 0,
     "&.fade-enter": {
       opacity: 0

package/hooks/useDynamicFilterAndSort/icons.d.ts

@@ -1,6 +1,6 @@
 export declare const ICON_PATH_FILTER = "frontend/components/data_grid/assets/icons/filter.svg";
 export declare const ICON_PATH_SORT = "frontend/components/data_grid/assets/icons/sort.svg";
-export declare const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
+export declare const ASSETS_URL = "frontend/components/DynamincFilterAndSort/assets/icons";
 export declare const ASSETS: {
-    readonly refresh: "frontend/components/Dynamic_sort/assets/icons/restart.svg";
+    readonly refresh: "frontend/components/DynamincFilterAndSort/assets/icons/refresh.svg";
 };

package/hooks/useDynamicFilterAndSort/icons.js

@@ -1,8 +1,8 @@
 const ICON_PATH_FILTER = "frontend/components/data_grid/assets/icons/filter.svg";
 const ICON_PATH_SORT = "frontend/components/data_grid/assets/icons/sort.svg";
-const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
+const ASSETS_URL = "frontend/components/DynamincFilterAndSort/assets/icons";
 const ASSETS = {
-  refresh: `${ASSETS_URL}/restart.svg`
+  refresh: `${ASSETS_URL}/refresh.svg`
 };
 export {
   ASSETS as A,

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo, useCallback } from "react";
 import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter.js";
 import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
@@ -12,6 +12,8 @@ import { D as DynamicFilterAndSortSlots } from "./slots/DynamicFilterAndSortEnum
 import { S as StackLeftActionsStyled, a as StackRightActionsStyled, b as StackCustomHeaderStyled } from "./slots/DynamicFilterAndSortSlots.js";
 import { deepEqual } from "fast-equals";
 import { g as getPurgedCookie } from "./helpers.js";
+import { u as useWindowToolsMF } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
+import { a as DICCTIONARY } from "../../components/DynamicFilter/dictionary.js";
 const useDynamicFilterAndSort = (props) => {
   const { fields, sorts, onChangeFilterSort, dataTestId, withAllField, rightActions, initialFilterToggleed = true, initialSortToggleed = true, prefixCookie, setCookie, getCookie, filterSortAutomatic = true, visibleRefresh = false, withExternalRefresh } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -25,6 +27,8 @@ const useDynamicFilterAndSort = (props) => {
   const refOnChangeFilterSort = useRef(0);
   const fireOnChangeFilterRef = useRef(null);
   const fireOnChangeSortRef = useRef(null);
+  const { toast } = useWindowToolsMF();
+  const { getLabel } = useModuleDictionary();
   const [invisibleBadge, setInvisibleBadge] = useState(() => ({
     filter: initialAppliedFilters?.length === 0,
     sort: initialAppliedSorts?.length === 0
@@ -59,14 +63,14 @@ const useDynamicFilterAndSort = (props) => {
     }
     refOnChangeFilterSort.current++;
   }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, sorts]);
-  const handleChangeSorts = useCallback((Sorts, rawSorts) => {
-    setInvisibleBadge((prev) => ({ ...prev, sort: Sorts.length === 0 }));
-    if (eventRefs.current?.eventSorts?.sorts && !deepEqual(eventRefs.current?.eventSorts?.sorts, Sorts)) {
-      setCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS, "window", Sorts);
+  const handleChangeSorts = useCallback((newSorts, rawSorts) => {
+    setInvisibleBadge((prev) => ({ ...prev, sort: newSorts.length === 0 }));
+    if (eventRefs.current?.eventSorts?.sorts && !deepEqual(eventRefs.current?.eventSorts?.sorts, newSorts)) {
+      setCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS, "window", newSorts);
     }
     eventRefs.current = {
       ...eventRefs.current,
-      eventSorts: { sorts: Sorts, rawSorts }
+      eventSorts: { sorts: newSorts, rawSorts }
     };
     if (isValidFilters()) {
       onChangeFilterSort(eventRefs.current);
@@ -85,9 +89,11 @@ const useDynamicFilterAndSort = (props) => {
     } else {
       if (isValidFilters()) {
         onChangeFilterSort(eventRefs.current);
+      } else {
+        toast({ title: getLabel(DICCTIONARY.error_invalid_filters_before) }, { type: "error" });
       }
     }
-  }, [filterSortAutomatic, isValidFilters, onChangeFilterSort]);
+  }, [filterSortAutomatic, getLabel, isValidFilters, onChangeFilterSort, toast]);
   const leftActions = useMemo(() => /* @__PURE__ */ jsxs(StackLeftActionsStyled, { direction: "row", ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackLeftActions, dataTestId), children: [
     /* @__PURE__ */ jsx(ToggleIconButton, { badgeProps: { variant: "dot", invisible: invisibleBadge.filter, color: "primary" }, icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`, isToggled: togglesLeftActions.filter, onToggle: () => handleToggles("filter") }),
     /* @__PURE__ */ jsx(ToggleIconButton, { badgeProps: { variant: "dot", invisible: invisibleBadge.sort, color: "primary" }, icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`, isToggled: togglesLeftActions.sort, onToggle: () => handleToggles("sort") })
@@ -103,7 +109,8 @@ const useDynamicFilterAndSort = (props) => {
           {
             icon: refreshIconUrl,
             "aria-label": "refresh",
-            onClick: onRefresh
+            onClick: onRefresh,
+            variant: "outline"
           }
         ),
         rightActions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.56-beta.2",
+  "version": "9.2.56-beta.4",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "^2.9.5",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.1-beta.2",
-    "@m4l/styles": "7.1.28-beta.2",
+    "@m4l/graphics": "7.1.1-beta.4",
+    "@m4l/styles": "7.1.28-beta.4",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/types.d.ts

@@ -1,2 +0,0 @@
-export interface SettingsProps {
-}