@m4l/components 9.2.48 → 9.2.50-beta.1

package/components/mui_extended/CheckBox/slots/CheckBoxSlots.js

@@ -31,9 +31,9 @@ const IconStyled = styled(Icon, {
 })(checkBoxStyles.icon);
 export {
   CheckBoxRootStyled as C,
-  IconCheckedStyled as I,
+  IconStyled as I,
   MUICheckboxStyled as M,
   SkeletonStyled as S,
   TypographyStyled as T,
-  IconStyled as a
+  IconCheckedStyled as a
 };

package/components/mui_extended/DateTimePicker/slots/DateTimePickerSlots.js

@@ -1,5 +1,5 @@
 import { styled, Popper, Paper } from "@mui/material";
-import { DesktopDateTimePicker, MobileDateTimePicker, PickersCalendarHeader, PickersDay } from "@mui/x-date-pickers";
+import { PickersCalendarHeader, PickersDay, MobileDateTimePicker, DesktopDateTimePicker } from "@mui/x-date-pickers";
 import { d as dateTimePickerStyles } from "../DateTimePicker.styles.js";
 import { D as DATE_TIME_PICKER_KEY_COMPONENT } from "../constants.js";
 import { D as DateTimePickerEnum } from "./DateTimePickerEnum.js";

package/components/mui_extended/IconButton/slots/IconButtonSlots.js

@@ -3,8 +3,8 @@ import { styled } from "@mui/material/styles";
 import { i as iconButtonStyles } from "../IconButton.styles.js";
 import { a as ICON_BUTTON_KEY_COMPONENT } from "../constants.js";
 import { I as IconButtonSlots } from "./IconButtonEnum.js";
-import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { I as Icon } from "../../../Icon/Icon.js";
+import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 const StyledMUIIconButton = styled(IconButton, {
   name: ICON_BUTTON_KEY_COMPONENT,
   slot: IconButtonSlots.styledMUIIconButton

package/components/mui_extended/ImageButton/utils/Clases/index.js

@@ -1,4 +1,4 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { c as componentName } from "./constants.js";
 generateUtilityClasses(componentName, [

package/components/mui_extended/MenuItem/slots/MenuItemSlots.js

@@ -3,8 +3,8 @@ import { MenuItem } from "@mui/material";
 import { a as MENUITEM_KEY_COMPONENT } from "../constants.js";
 import { m as menuItemStyles } from "../MenuItem.styles.js";
 import { M as MenuItemSlots } from "./MenuItemEnum.js";
-import { T as Typography } from "../../Typography/Typography.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
+import { T as Typography } from "../../Typography/Typography.js";
 import { I as Icon } from "../../../Icon/Icon.js";
 const MenuItemRootStyled = styled(MenuItem, {
   name: MENUITEM_KEY_COMPONENT,

package/components/mui_extended/NavLink/NavLink.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { R as RouterNavLinkRootStyled, a as RouterNavLinkStyled, T as TypographyStyled, S as SkeletonStyled } from "./slots/NavLinkSlots.js";
 import { useModuleSkeleton } from "@m4l/core";
-import { N as NAV_LINK_KEY_COMPONENT, c as classNavLinkRoot, a as NAV_LINK_SPECIFY } from "./constants.js";
+import { c as classNavLinkRoot, N as NAV_LINK_SPECIFY, a as NAV_LINK_KEY_COMPONENT } from "./constants.js";
 import { N as NavLinkSlots } from "./slots/NavLinkEnum.js";
 import { clsx } from "clsx";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";

package/components/mui_extended/NavLink/constants.js

@@ -4,7 +4,7 @@ const NAV_LINK_KEY_COMPONENT = "M4LNavLink";
 const NAV_LINK_SPECIFY = "M4lclassCssSpecificity";
 const classNavLinkRoot = getComponentClasses(NAV_LINK_KEY_COMPONENT, NavLinkSlots);
 export {
-  NAV_LINK_KEY_COMPONENT as N,
-  NAV_LINK_SPECIFY as a,
+  NAV_LINK_SPECIFY as N,
+  NAV_LINK_KEY_COMPONENT as a,
   classNavLinkRoot as c
 };

package/components/mui_extended/NavLink/slots/NavLinkSlots.js

@@ -1,7 +1,7 @@
 import { NavLink } from "react-router-dom";
 import { styled } from "@mui/material/styles";
 import { N as NavLinkSlots } from "./NavLinkEnum.js";
-import { N as NAV_LINK_KEY_COMPONENT } from "../constants.js";
+import { a as NAV_LINK_KEY_COMPONENT } from "../constants.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { n as navLinkStyles } from "../NavLink.styles.js";
 import { T as Typography } from "../../Typography/Typography.js";

package/components/mui_extended/Popover/Popover.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { P as POPOVER_CLASS_NAME_SPECIFY, a as POPOVER_PREFIX } from "./constants.js";
+import { P as POPOVER_PREFIX, a as POPOVER_CLASS_NAME_SPECIFY } from "./constants.js";
 import clsx from "clsx";
 import { P as PopoverRootStyled } from "./slots/PopoverSlots.js";
 import { P as PopoverSlots } from "./slots/PopoverEnum.js";

package/components/mui_extended/Popover/Popover.styles.js

@@ -9,11 +9,7 @@ const popoverStyles = {
         borderRadius: theme.vars.size.borderRadius.r1
       }
     }
-  }),
-  /**
-   * Styles applied to the Popover arrow element.
-   */
-  arrow: () => ({})
+  })
 };
 export {
   popoverStyles as p

package/components/mui_extended/Popover/constants.js

@@ -2,7 +2,7 @@ const POPOVER_KEY_COMPONENT = "M4LPopover";
 const POPOVER_PREFIX = "Popover";
 const POPOVER_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
 export {
-  POPOVER_CLASS_NAME_SPECIFY as P,
-  POPOVER_PREFIX as a,
+  POPOVER_PREFIX as P,
+  POPOVER_CLASS_NAME_SPECIFY as a,
   POPOVER_KEY_COMPONENT as b
 };

package/components/mui_extended/Select/Select.js

@@ -4,7 +4,7 @@ import { useTheme } from "@mui/material";
 import clsx from "clsx";
 import { forwardRef, useMemo, useState, useCallback } from "react";
 import { A as ArrowDownStyled, a as AdormentStyled, S as SelectRootStyled, b as SkeletonSelectStyled, M as MenuItemListStyled, c as MenuItemNoOptionStyled, L as LabelPlaceholerStyled, R as RenderValueContainerStyled, d as RenderValueTypography } from "./slots/SelectSlots.js";
-import { S as SELECT_CLASSES, a as SELECT_KEY_COMPONENT, I as ICON_ARROW_DOWN } from "./constants.js";
+import { I as ICON_ARROW_DOWN, S as SELECT_CLASSES, a as SELECT_KEY_COMPONENT } from "./constants.js";
 import { S as SELECT_DICTIONARY } from "./dictionary.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";

package/components/mui_extended/Select/Select.styles.js

@@ -1,5 +1,5 @@
 import { S as SELECT_CLASSES } from "./constants.js";
-import { a as getHeightSizeStyles, g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles, a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const selectStyles = {
   /**
    * Estilos para el componente Select

package/components/mui_extended/Select/constants.js

@@ -1,5 +1,5 @@
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
-import { S as SelectSlots, a as SelectComplementaryClasses } from "./slots/SelectEnum.js";
+import { a as SelectComplementaryClasses, S as SelectSlots } from "./slots/SelectEnum.js";
 const SELECT_KEY_COMPONENT = "M4LSelect";
 const ICON_ARROW_DOWN = "frontend/components/select/arrow_down.svg";
 const COMBINATED_TEXTFIELD_ENUMS = {

package/components/mui_extended/Select/slots/SelectSlots.js

@@ -4,8 +4,8 @@ import { a as SELECT_KEY_COMPONENT } from "../constants.js";
 import { s as selectStyles } from "../Select.styles.js";
 import { S as SelectSlots } from "./SelectEnum.js";
 import { I as IconButton } from "../../IconButton/IconButton.js";
-import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
+import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 import { T as Typography } from "../../Typography/Typography.js";
 import { I as Icon } from "../../../Icon/Icon.js";
 const SelectRootStyled = () => styled(Select, {

package/components/mui_extended/Tab/Tab.js

@@ -5,7 +5,7 @@ import { T as TabSlots } from "./Slots/TabEnum.js";
 import { T as TAB_KEY_COMPONENT } from "./constants.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { R as RootStyled, T as TypographyStyled, I as IconStyled } from "./Slots/TabSlots.js";
+import { R as RootStyled, I as IconStyled, T as TypographyStyled } from "./Slots/TabSlots.js";
 function Tab(props) {
   const {
     size = "medium",

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

@@ -6,7 +6,7 @@ const tabContentStyles = {
     padding: theme.vars.size.baseSpacings.sp3,
     display: "flex",
     overflow: "hidden",
-    height: "100%",
+    // height: '100%',
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp2,
     background: theme.vars.palette.background.default,
@@ -14,6 +14,7 @@ const tabContentStyles = {
     borderTopLeftRadius: theme.vars.size.borderRadius.r0,
     position: "relative",
     flex: 1,
+    flexGrow: 1,
     border: theme.vars.size.borderStroke.container,
     borderColor: theme.vars.palette?.border.secondary,
     boxSizing: "border-box",

package/components/mui_extended/TextField/constants.js

@@ -1,5 +1,5 @@
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
-import { T as TextFieldSlots, a as TexFieldComplementaryClasses } from "./slots/TextFieldEnum.js";
+import { a as TexFieldComplementaryClasses, T as TextFieldSlots } from "./slots/TextFieldEnum.js";
 const TEXT_FIELD_KEY_COMPONENT = "M4LTextField";
 const COMBINATED_TEXTFIELD_ENUMS = {
   ...TextFieldSlots,

package/components/mui_extended/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { R as RootStyled, T as TextStyled, a as TooltipStyled } from "./slots/TooltipSlots.js";
-import { T as TOOLTIP_CLASSES, D as DEFAULT_TOOLTIP_OFFSET } from "./constants.js";
+import { R as RootStyled, T as TooltipStyled, a as TextStyled } from "./slots/TooltipSlots.js";
+import { D as DEFAULT_TOOLTIP_OFFSET, T as TOOLTIP_CLASSES } from "./constants.js";
 import clsx from "clsx";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const Tooltip = (props) => {

package/components/mui_extended/Tooltip/slots/TooltipSlots.js

@@ -17,6 +17,6 @@ const TooltipStyled = styled("div", {
 })(tooltipStyles?.tooltip);
 export {
   RootStyled as R,
-  TextStyled as T,
-  TooltipStyled as a
+  TooltipStyled as T,
+  TextStyled as a
 };

package/components/mui_extended/Typography/Typography.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
-import { T as TYPOGRAPHY_CLASS_NAME_SPECIFY, a as TYPOGRAPHY_CLASSES, b as TYPOGRAPHY_KEY_COMPONENT } from "./constants.js";
+import { T as TYPOGRAPHY_CLASSES, a as TYPOGRAPHY_KEY_COMPONENT, b as TYPOGRAPHY_CLASS_NAME_SPECIFY } from "./constants.js";
 import { T as TypographySlots } from "./slots/typographyEnum.js";
 import { S as StyledMUITypography, a as StyledSkeleton } from "./slots/typographySlots.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";

package/components/mui_extended/Typography/constants.js

@@ -4,7 +4,7 @@ const TYPOGRAPHY_KEY_COMPONENT = "M4LTypography";
 const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
 const TYPOGRAPHY_CLASSES = getComponentClasses(TYPOGRAPHY_KEY_COMPONENT, TypographySlots);
 export {
-  TYPOGRAPHY_CLASS_NAME_SPECIFY as T,
-  TYPOGRAPHY_CLASSES as a,
-  TYPOGRAPHY_KEY_COMPONENT as b
+  TYPOGRAPHY_CLASSES as T,
+  TYPOGRAPHY_KEY_COMPONENT as a,
+  TYPOGRAPHY_CLASS_NAME_SPECIFY as b
 };

package/components/mui_extended/Typography/slots/typographySlots.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { b as TYPOGRAPHY_KEY_COMPONENT } from "../constants.js";
+import { a as TYPOGRAPHY_KEY_COMPONENT } from "../constants.js";
 import { T as TypographySlots } from "./typographyEnum.js";
 import { t as typographyStyles } from "../typography.styles.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";

package/components/popups/components/PopupsViewer/icons.js

@@ -1,5 +1,4 @@
 const POPUPS_ICONS = {
-  CLOSE: "close.svg",
   EDITION_INFO: "edition_info.svg"
 };
 export {

package/hooks/useDataGridPersistence/constants.js

@@ -1,6 +1,6 @@
 const COOKIE_COLUMNS_WIDTHS = "columns_widths";
 const COOKIE_COLUMNS_CONFIG = "columns_config";
 export {
-  COOKIE_COLUMNS_WIDTHS as C,
-  COOKIE_COLUMNS_CONFIG as a
+  COOKIE_COLUMNS_CONFIG as C,
+  COOKIE_COLUMNS_WIDTHS as a
 };

package/hooks/useDataGridPersistence/useDataGridPersistence.js

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "react";
 import { g as getColumnsConfigCookie } from "./helpers.js";
-import { C as COOKIE_COLUMNS_WIDTHS, a as COOKIE_COLUMNS_CONFIG } from "./constants.js";
+import { C as COOKIE_COLUMNS_CONFIG, a as COOKIE_COLUMNS_WIDTHS } from "./constants.js";
 import { u as useWindowToolsMF } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
 const useDataGridPersistence = (props) => {
   const { prefixCookie } = props;

package/hooks/useDynamicFilterAndSort/styles.js

@@ -21,6 +21,8 @@ const dynamicFilterAndSortStyles = {
     flexDirection: theme.generalSettings.isMobile ? "column" : "row",
     gap: theme.vars.size.baseSpacings.sp3,
     padding: `0 ${theme.vars.size.baseSpacings.sp1}`,
+    height: "auto",
+    alignItems: "center",
     [`& [class*="${DYNAMIC_FILTER_KEY_COMPONENT}-root"]`]: {
       display: ownerState.showDynamicFilter ? "block" : "none",
       width: "auto",

package/hooks/useDynamicFilterAndSort/types.d.ts

@@ -28,6 +28,7 @@ export interface UseDynamicFilterAndSortProps extends Pick<DynamicFilterProps, '
     dataTestId?: string;
     sorts?: DynamicSortProps['fields'];
     filterSortAutomatic?: boolean;
+    withExternalRefresh?: boolean;
 }
 export interface DynamicFilterAndSortOwnerState {
     showDynamicFilter: boolean;

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -27,7 +27,8 @@ const useDynamicFilterAndSort = (props) => {
     setCookie,
     getCookie,
     filterSortAutomatic = true,
-    visibleRefresh
+    visibleRefresh,
+    withExternalRefresh
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const [togglesLeftActions, setTogglesLeftActions] = useState(() => ({ filter: initialFilterToggleed, sort: initialSortToggleed }));
@@ -45,7 +46,7 @@ const useDynamicFilterAndSort = (props) => {
     sort: initialAppliedSorts?.length === 0
   }));
   const visibleCustomHeader = useMemo(() => togglesLeftActions.filter || togglesLeftActions.sort, [togglesLeftActions]);
-  const sortIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS.refresh}`;
+  const refreshIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS.refresh}`;
   const eventRefs = useRef({
     eventFilters: { filters: initialAppliedFilters, rawFilters: [] },
     eventSorts: { sorts: initialAppliedSorts, rawSorts: [] }
@@ -53,6 +54,13 @@ const useDynamicFilterAndSort = (props) => {
   const handleToggles = (key) => {
     setTogglesLeftActions((prev) => ({ ...prev, [key]: !prev[key] }));
   };
+  const isValidFilters = useCallback(() => {
+    if (fields.some((field) => field.presence === "fixed")) {
+      const filters = eventRefs.current?.eventFilters?.filters;
+      return !(!filters || filters.length === 0);
+    }
+    return true;
+  }, [eventRefs, fields]);
   const handleChangeFilters = useCallback((filters, rawFilters) => {
     setInvisibleBadge((prev) => ({ ...prev, filter: filters.length === 0 }));
     if (eventRefs.current?.eventFilters?.filters && !deepEqual(eventRefs.current?.eventFilters?.filters, filters)) {
@@ -76,8 +84,12 @@ const useDynamicFilterAndSort = (props) => {
       ...eventRefs.current,
       eventSorts: { sorts: Sorts, rawSorts }
     };
-    onChangeFilterSort(eventRefs.current);
-  }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge]);
+    if (isValidFilters()) {
+      onChangeFilterSort(eventRefs.current);
+    } else {
+      refOnChangeFilterSort.current++;
+    }
+  }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, isValidFilters]);
   const onRefresh = useCallback(() => {
     if (fireOnChangeFilterRef.current) {
       fireOnChangeFilterRef.current.fireOnChangeFilter();
@@ -85,8 +97,10 @@ const useDynamicFilterAndSort = (props) => {
     if (fireOnChangeSortRef.current) {
       fireOnChangeSortRef.current.fireOnChangeSort();
     }
-    onChangeFilterSort(eventRefs.current);
-  }, [onChangeFilterSort, fireOnChangeFilterRef]);
+    if (isValidFilters()) {
+      onChangeFilterSort(eventRefs.current);
+    }
+  }, [onChangeFilterSort, fireOnChangeFilterRef, isValidFilters]);
   const leftActions = useMemo(() => /* @__PURE__ */ jsxs(StackLeftActionsStyled, { direction: "row", ownerState: {}, ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackLeftActions, dataTestId), children: [
     /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.filter, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`, isToggled: togglesLeftActions.filter, onToggle: () => handleToggles("filter") }) }),
     /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.sort, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`, isToggled: togglesLeftActions.sort, onToggle: () => handleToggles("sort") }) })
@@ -101,7 +115,7 @@ const useDynamicFilterAndSort = (props) => {
         /* @__PURE__ */ jsx(
           IconButton,
           {
-            icon: sortIconUrl,
+            icon: refreshIconUrl,
             "aria-label": "refresh",
             onClick: onRefresh
           }
@@ -109,12 +123,42 @@ const useDynamicFilterAndSort = (props) => {
         rightActions
       ]
     }
-  ), [dataTestId, rightActions, sortIconUrl, onRefresh]);
+  ), [dataTestId, rightActions, refreshIconUrl, onRefresh]);
   const dynamicsFiltersSorts = useMemo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(DynamicFilter, { ref: fireOnChangeFilterRef, visibleRefresh, automatic: filterSortAutomatic, fields, initialAppliedFilters, onChangeFilters: handleChangeFilters, withAllField }),
-    sorts ? /* @__PURE__ */ jsx(DynamicSort, { ref: fireOnChangeSortRef, visibleRefresh, automatic: filterSortAutomatic, fields: sorts, initialAppliedSorts, onChangeSorts: handleChangeSorts }) : null
-  ] }), [fields, sorts, initialAppliedFilters, initialAppliedSorts, handleChangeFilters, handleChangeSorts, withAllField, filterSortAutomatic, visibleRefresh]);
-  const customHeaderComponent = useMemo(() => /* @__PURE__ */ jsx(StackCustomHeaderStyled, { direction: "row", ownerState: { showDynamicFilter: togglesLeftActions.filter, showDynamicSort: togglesLeftActions.sort }, ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackCustomHeader, dataTestId), children: dynamicsFiltersSorts }), [togglesLeftActions]);
+    /* @__PURE__ */ jsx(
+      DynamicFilter,
+      {
+        ref: fireOnChangeFilterRef,
+        visibleRefresh,
+        automatic: filterSortAutomatic,
+        fields,
+        initialAppliedFilters,
+        onChangeFilters: handleChangeFilters,
+        withAllField
+      }
+    ),
+    sorts ? /* @__PURE__ */ jsx(
+      DynamicSort,
+      {
+        ref: fireOnChangeSortRef,
+        visibleRefresh,
+        automatic: filterSortAutomatic,
+        fields: sorts,
+        initialAppliedSorts,
+        onChangeSorts: handleChangeSorts
+      }
+    ) : null,
+    withExternalRefresh && /* @__PURE__ */ jsx(IconButton, { icon: refreshIconUrl, "aria-label": "refresh", onClick: onRefresh })
+  ] }), [visibleRefresh, filterSortAutomatic, fields, initialAppliedFilters, handleChangeFilters, withAllField, sorts, initialAppliedSorts, handleChangeSorts, withExternalRefresh, refreshIconUrl, onRefresh]);
+  const customHeaderComponent = useMemo(() => /* @__PURE__ */ jsx(
+    StackCustomHeaderStyled,
+    {
+      direction: "row",
+      ownerState: { showDynamicFilter: togglesLeftActions.filter, showDynamicSort: togglesLeftActions.sort },
+      ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackCustomHeader, dataTestId),
+      children: dynamicsFiltersSorts
+    }
+  ), [togglesLeftActions]);
   return {
     leftActions,
     rightActions: finalRightActions,

package/hooks/useSvgColor/constants.js

@@ -31,8 +31,8 @@ const SVG_ICON_ERROR = "data:image/svg+xml;base64," + btoa(`<svg viewBox="0 0 64
 </svg>`);
 export {
   REPLACEMENT_PRYMARY_COLOR as R,
-  SVG_CACHE_PREFIX as S,
-  SKELETON_SVG_ICON as a,
+  SKELETON_SVG_ICON as S,
+  SVG_CACHE_PREFIX as a,
   SVG_ICON_ERROR as b,
   REPLACEMENT_SECONDARY_COLOR as c
 };

package/hooks/useSvgColor/helpers.js

@@ -1,4 +1,4 @@
-import { S as SVG_CACHE_PREFIX, a as SKELETON_SVG_ICON } from "./constants.js";
+import { S as SKELETON_SVG_ICON, a as SVG_CACHE_PREFIX } from "./constants.js";
 function purgedColor(color) {
   return color.replace(/[#\s]/g, "");
 }

package/hooks/useSvgColor/useSvgColor.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { b as SVG_ICON_ERROR, S as SVG_CACHE_PREFIX, R as REPLACEMENT_PRYMARY_COLOR, c as REPLACEMENT_SECONDARY_COLOR } from "./constants.js";
+import { b as SVG_ICON_ERROR, a as SVG_CACHE_PREFIX, R as REPLACEMENT_PRYMARY_COLOR, c as REPLACEMENT_SECONDARY_COLOR } from "./constants.js";
 import { g as getSVG, p as purgedColor } from "./helpers.js";
 function useSvgColor(props) {
   const { src, cacheKey, primaryColor, secondaryColor = "#FFFFFF", skeletonIcon, fallBackIcon = SVG_ICON_ERROR } = props;