@m4l/components 9.2.60-24062025.beta.1 → 9.2.60-J18062025.beta.1

package/components/DynamicFilter/subcomponents/PopoverFilter/PopoverFilter.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilterBase.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverFilter } from "./usePopoverFilter.js";
-import { P as PopoverStyled, h as PopoverContainerFieldsStyled, i as PopoverHeaderActionsStyled } from "../../slots/dynamicFilterSlots.js";
+import { P as PopoverStyled, h as PopoverHeaderStyled, i as PopoverHeaderTitleStyled, C as ContentFilterStyled, j as PopoverContainerFieldsStyled, k as PopoverHeaderActionsStyled } from "../../slots/dynamicFilterSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
-import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
 function PopoverFilter() {
@@ -21,6 +22,7 @@ function PopoverFilter() {
     statusLoad,
     canRender
   } = usePopoverFilter();
+  const { ownerState } = useDynamicFilterBase();
   if (!canRender) {
     return null;
   }
@@ -32,37 +34,30 @@ function PopoverFilter() {
       transitionDuration: 0,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
-      sx: (theme) => ({
-        mt: theme.vars.size.baseSpacings.sp2
-      }),
       arrowType: "top-left",
       anchorEl,
       onKeyDown: handleKeyDownPopper,
       onClose: handleClosePopover,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         RHFormProvider,
         {
           onSubmit,
           values: filterFormValue,
           validationSchema: popupValidationSchema,
           statusLoad,
-          children: /* @__PURE__ */ jsxs(
-            WindowBase,
-            {
-              title: labelField,
-              iconUrl: field.urlIcon,
-              variant: "text",
-              type: "popup",
-              selected: true,
-              children: [
-                /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formFilter, statusLoad }) }),
-                /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
-                  /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
-                  /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px", "aria-label": "applyFilter" })
-                ] })
-              ]
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: { ...ownerState }, children: [
+              field.urlIcon && /* @__PURE__ */ jsx(Icon, { src: field.urlIcon }),
+              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", children: labelField })
+            ] }),
+            /* @__PURE__ */ jsxs(ContentFilterStyled, { ownerState: { ...ownerState }, children: [
+              /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formFilter, statusLoad }) }),
+              /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
+                /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
+                /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
+              ] })
+            ] })
+          ]
         }
       )
     }

package/components/DynamicFilter/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -5,7 +5,7 @@ import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilter
 import { useModuleDictionary } from "@m4l/core";
 import { a as DICCTIONARY } from "../../dictionary.js";
 import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
-import { j as PopoverMenuStyled } from "../../slots/dynamicFilterSlots.js";
+import { l as PopoverMenuStyled } from "../../slots/dynamicFilterSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
   const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
@@ -21,9 +21,6 @@ function PopoverMenuFields(props) {
       arrowType: "top-left",
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
-      sx: (theme) => ({
-        mt: theme.vars.size.baseSpacings.sp2
-      }),
       open: !!isOpenPopoverMenuFields,
       onClose: handleClosePopover,
       anchorEl,

package/components/DynamicFilter/types.d.ts

@@ -354,5 +354,8 @@ export type DynamicFilterSlotsType = keyof typeof DynamicFilterSlots;
 export type DynamicFilterStyles = M4LOverridesStyleRules<DynamicFilterSlotsType, 'M4LDynamicFilter', Theme>;
 export interface DynamicFilterRef {
     fireOnChangeFilter: () => void;
+    openPopoverMenuFields: () => void;
+    addExternalFilter: (columnKey: string) => void;
+    getCurrentFilters: () => FilterFieldApplied[];
 }
 export {};

package/components/DynamicSort/DynamicSort.js

@@ -3,13 +3,17 @@ import { useFlagsPresent, CommonFlags } from "@m4l/core";
 import { forwardRef } from "react";
 import { D as DynamicSortProvider } from "./store/DynamicSortContext.js";
 import { D as DynamicSortBase } from "./subcomponents/DynamicSortBase/DynamicSortBase.js";
-const DynamicSort = forwardRef((props, ref) => {
-  const hasPresentFlags = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
-  if (!hasPresentFlags) {
-    return null;
+const DynamicSort = forwardRef(
+  (props, ref) => {
+    const hasPresentFlags = useFlagsPresent([
+      CommonFlags.FLAG_DICTIONARY_LOADED
+    ]);
+    if (!hasPresentFlags) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(DynamicSortProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, {}) });
   }
-  return /* @__PURE__ */ jsx(DynamicSortProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, {}) });
-});
+);
 export {
   DynamicSort as D
 };

package/components/DynamicSort/DynamicSort.styles.js

@@ -5,55 +5,50 @@ const dynamicSortStyles = {
   /**
    * Root: Estilos del contenedor principal del componente.
    */
-  root: ({ theme, ownerState }) => ({
+  root: () => ({
     containerName: CONTAINER_QUERY_NAME,
     containerType: "inline-size",
     width: "100%",
     height: "auto",
-    padding: 0,
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "container",
-      (size) => ({
-        height: size,
-        maxHeight: size,
-        minHeight: size
-      })
-    )
+    padding: 0
   }),
   /**
    * innerContainer: Estilos del contenedor interno del componente.
    */
   innerContainer: ({ theme, ownerState }) => ({
-    display: "flex",
+    display: "grid",
+    gridTemplateColumns: "auto 1fr auto",
+    gridTemplateAreas: '"input-sort applied-sorts actions-sort"',
     alignItems: "center",
     justifyContent: "flex-start",
     width: "100%",
     height: "fit-content",
-    borderRadius: theme.vars.size.borderRadius.r2,
+    border: theme.vars.size.borderStroke.container,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    borderColor: ownerState?.isValid ? theme.vars.palette.border?.default : theme.vars.palette.error.enabled,
     background: theme.vars.palette.background.default,
-    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.default}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
-    overflow: "hidden",
     '&:has([aria-expanded="true"])': {
-      boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1.3px ${theme.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`
+      borderColor: ownerState?.isValid ? theme.vars.palette.primary.active : theme.vars.palette.error.enabled
     }
   }),
   /**
    * inputSort: Estilos del contenedor del campo de entrada de ordenamiento.
    */
   inputSort: ({ theme, ownerState }) => ({
+    gridArea: "input-sort",
     display: "flex",
     flexDirection: "row",
-    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
     paddingRight: theme.vars.size.baseSpacings.sp1,
     height: "100%",
     overflow: "hidden",
-    maxWidth: "120px",
+    maxWidth: "135px",
     width: "100%",
     alignItems: "center",
     borderTopLeftRadius: theme.vars.size.borderRadius.r1,
     borderBottomLeftRadius: theme.vars.size.borderRadius.r1,
+    borderRight: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border?.default,
     ...getSizeStyles(
       theme,
       ownerState?.size || "medium",
@@ -67,8 +62,6 @@ const dynamicSortStyles = {
    * inputSortInput: Estilos del campo de entrada de ordenamiento.
    */
   inputSortInput: ({ theme, ownerState }) => ({
-    width: "100%",
-    background: "#ffffff00",
     ...getSizeStyles(
       theme,
       ownerState?.size || "medium",
@@ -79,57 +72,51 @@ const dynamicSortStyles = {
         maxHeight: size
       })
     ),
-    fontFamily: "inherit",
     ...getTypographyStyles(
       theme.generalSettings.isMobile,
       ownerState?.size || "medium",
       "body"
     ),
+    background: theme.vars.palette.background.default,
     color: theme.vars.palette.text.secondary,
     border: 0,
     borderColor: "transparent",
     paddingLeft: theme.vars.size.baseSpacings.sp2,
     paddingRight: theme.vars.size.baseSpacings.sp2,
+    width: "100%",
     height: "100%",
     "&::placeholder": {
       color: theme.vars.palette.text.secondary
     },
     "&:focus-visible": {
       color: theme.vars.palette.text.secondary,
-      border: "unset",
+      border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.primary.opacity,
+      background: theme.vars.palette.primary.opacity,
       BorderRadius: theme.vars.size.borderRadius["r0-5"],
       outline: "none!important"
+    },
+    "&:hover": {
+      borderColor: theme.vars.palette.primary?.toneOpacity,
+      background: theme.vars.palette.background?.hover
     }
   }),
   /**
    * appliedSorts: Estilos del contenedor de los campos de ordenamiento aplicados.
    */
-  appliedSorts: ({ theme, ownerState }) => ({
+  appliedSorts: ({ theme }) => ({
+    gridArea: "applied-sorts",
     width: "100%",
     height: "fit-content",
-    display: "flex",
-    alignItems: "center",
+    overflow: "hidden",
     borderLeft: "none",
     margin: "0px",
-    padding: `0px ${theme.vars.size.baseSpacings.sp1}`,
-    flex: 1,
-    overflow: "hidden",
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "container",
-      (size) => ({
-        height: size,
-        maxHeight: size,
-        minHeight: size
-      })
-    )
+    padding: `0px ${theme.vars.size.baseSpacings.sp1}`
   }),
   /**
    * appliedSortInnerContainer: Estilos del contenedor interno de los campos de ordenamiento aplicados.
    */
-  appliedSortInnerContainer: ({ theme, ownerState }) => ({
+  appliedSortInnerContainer: ({ theme }) => ({
     padding: theme.vars.size.baseSpacings["sp0-5"],
     gap: theme.vars.size.baseSpacings.sp1,
     height: "fit-content",
@@ -139,30 +126,13 @@ const dynamicSortStyles = {
     justifyContent: "flex-start",
     alignItems: "center",
     overflow: "auto hidden",
-    position: "relative",
-    "& .M4LChip-root": {
-      borderRadius: theme.vars.size.borderRadius.r1,
-      ...getSizeStyles(
-        theme,
-        ownerState?.size || "medium",
-        "action",
-        (size) => ({
-          height: size
-        })
-      ),
-      "& .M4LIconButton-styledMUIIconButton:hover": {
-        backgroundColor: `${theme.vars.palette.chips.error.contained.backgroundHover} !important`,
-        "& .M4LIcon-icon": {
-          backgroundColor: `${theme.vars.palette.chips.error.contained.backgroundColorTone} !important`
-        }
-      }
-    }
+    position: "relative"
   }),
   /**
    * actions: Estilos del contenedor de los botones de acción.
    */
   actions: ({ theme, ownerState }) => ({
-    gridArea: "actions-filter",
+    gridArea: "actions-sort",
     overflow: "hidden",
     display: "flex",
     flexDirection: "row",
@@ -172,33 +142,19 @@ const dynamicSortStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.default}`,
-    ...!ownerState?.visibleRefresh && !ownerState?.isDirty && {
-      display: "none"
-    },
-    ...ownerState?.inEdition && ownerState?.isValid && {
-      boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.main}`
-    },
-    ...!ownerState?.isValid && {
-      boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.error.enabled}`
-    }
-  }),
-  /**
-   * actionsClearButton: Estilos del botón de acción de limpiar.
-   */
-  actionsClearButton: ({ theme }) => ({
-    visibility: "visible",
-    "&:hover": {
-      backgroundColor: `${theme.vars.palette.chips.error.contained.backgroundHover} !important`,
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.chips.error.contained.backgroundColorTone} !important`
-      }
-    }
+    borderLeft: !ownerState?.visibleRefresh && !ownerState?.isDirty ? "none" : theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border?.default
   }),
+  actionsClearButton: {
+    visibility: "visible"
+  },
   /**
    * actionsSubmitButton: Estilos del botón de acción de envío de formulario.
    */
   actionsSubmitButton: ({ theme, ownerState }) => ({
+    ...ownerState?.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.enabled}` } : {
+      visibility: "visible"
+    },
     ...ownerState?.isDirty ? {
       animation: "changeBgColor 0.9s ease infinite",
       "& .M4LIcon-icon": {
@@ -250,27 +206,69 @@ const dynamicSortStyles = {
         minWidth: "220px",
         maxWidth: "420px",
         height: "fit-content"
-      },
-      "& .M4LWindowBase-root": {
-        border: "unset!important",
-        "& .M4LWindowBase-headerWindowComponent": {
-          cursor: "unset"
-        }
       }
     }
   }),
+  /**
+   * popoverSortHeader: Estilos del encabezado del menú emergente de ordenamiento.
+   */
+  popoverSortHeader: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    padding: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    borderTopLeftRadius: theme.vars.size.borderRadius.r1,
+    borderTopRightRadius: theme.vars.size.borderRadius.r1,
+    borderBottom: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.secondary,
+    "& .MuiTypography-root": {
+      color: theme.vars.palette.primary.main
+    },
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.primary.main
+    },
+    ...getSizeStyles(
+      theme,
+      ownerState?.size || "medium",
+      "container",
+      (size) => ({
+        height: size
+      })
+    )
+  }),
+  /**
+   * popoverSortHeaderTitle: Estilos del título del menú emergente de ordenamiento.
+   */
+  popoverSortHeaderTitle: ({ theme }) => ({
+    color: `${theme.vars.palette.primary.main} !important`
+  }),
   /**
    * popoverSortContainerFields: Estilos del contenedor de campos del menú emergente de ordenamiento.
    */
-  popoverSortContainerFields: ({ theme }) => ({
+  popoverSortContainerFields: () => ({
+    height: "fit-content",
+    "& > div": {
+      display: "flex",
+      height: "auto",
+      flexDirection: "column"
+    }
+  }),
+  /**
+   * contentSort: Estilos del contenedor entre el change sort y actions
+   */
+  contentSort: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp4
+    padding: theme.vars.size.baseSpacings.sp3,
+    gap: theme.vars.size.baseSpacings.sp3
   }),
   /**
    * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
    */
-  popoverSortActions: {},
+  popoverSortActions: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp3} 0px`
+  }),
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */

package/components/DynamicSort/slots/DynamicSortSlots.d.ts

@@ -34,6 +34,15 @@ export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pi
 export declare const PopoverContainerFieldsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PopoverHeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContentSortStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PopoverHeaderTitleStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
 export declare const PopoverHeaderActionsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../CommonActions/components/ActionsContainer').ActionsContainerProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../CommonActions/components/ActionsContainer').ActionsContainerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/DynamicSort/slots/DynamicSortSlots.js

@@ -4,6 +4,7 @@ import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../constants.js";
 import { D as DynamicSortSlots } from "./SlotsEnum.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { P as Popover } from "../../mui_extended/Popover/Popover.js";
 const RootStyled = styled("div", {
@@ -54,6 +55,18 @@ const PopoverContainerFieldsStyled = styled("div", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.popoverSortContainerFields
 })(dynamicSortStyles?.popoverSortContainerFields);
+const PopoverHeaderStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.popoverSortHeader
+})(dynamicSortStyles?.popoverSortHeader);
+const ContentSortStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.contentSort
+})(dynamicSortStyles?.contentSort);
+const PopoverHeaderTitleStyled = styled(Typography, {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.popoverSortHeaderTitle
+})(dynamicSortStyles?.popoverSortHeaderTitle);
 const PopoverHeaderActionsStyled = styled(ActionsContainer, {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.popoverSortActions
@@ -64,6 +77,7 @@ const InputSortInputSkeletonStyled = styled(Skeleton, {
 })(dynamicSortStyles?.inputSortInputSkeleton);
 export {
   AppliedSortsStyled as A,
+  ContentSortStyled as C,
   InnerContainerStyled as I,
   PopoverMenuStyled as P,
   RootStyled as R,
@@ -72,9 +86,11 @@ export {
   InputSortInputSkeletonStyled as c,
   InputSortInputStyled as d,
   PopoverStyled as e,
-  PopoverContainerFieldsStyled as f,
-  PopoverHeaderActionsStyled as g,
-  ActionsStyled as h,
-  ActionsClearButtonStyled as i,
-  ActionsSubmitButtonStyled as j
+  PopoverHeaderStyled as f,
+  PopoverHeaderTitleStyled as g,
+  PopoverContainerFieldsStyled as h,
+  PopoverHeaderActionsStyled as i,
+  ActionsStyled as j,
+  ActionsClearButtonStyled as k,
+  ActionsSubmitButtonStyled as l
 };

package/components/DynamicSort/slots/SlotsEnum.d.ts

@@ -11,6 +11,9 @@ export declare enum DynamicSortSlots {
     popoverMenu = "popoverMenu",
     popoverSort = "popoverSort",
     popoverSortContainerFields = "popoverSortContainerFields",
+    popoverSortHeader = "popoverSortHeader",
+    contentSort = "contentSort",
+    popoverSortHeaderTitle = "popoverSortHeaderTitle",
     popoverSortActions = "popoverSortActions",
-    inputSortInputSkeleton = "inputSortInputSkelecontentSortton"
+    inputSortInputSkeleton = "inputSortInputSkeleton"
 }

package/components/DynamicSort/slots/SlotsEnum.js

@@ -11,8 +11,11 @@ var DynamicSortSlots = /* @__PURE__ */ ((DynamicSortSlots2) => {
   DynamicSortSlots2["popoverMenu"] = "popoverMenu";
   DynamicSortSlots2["popoverSort"] = "popoverSort";
   DynamicSortSlots2["popoverSortContainerFields"] = "popoverSortContainerFields";
+  DynamicSortSlots2["popoverSortHeader"] = "popoverSortHeader";
+  DynamicSortSlots2["contentSort"] = "contentSort";
+  DynamicSortSlots2["popoverSortHeaderTitle"] = "popoverSortHeaderTitle";
   DynamicSortSlots2["popoverSortActions"] = "popoverSortActions";
-  DynamicSortSlots2["inputSortInputSkeleton"] = "inputSortInputSkelecontentSortton";
+  DynamicSortSlots2["inputSortInputSkeleton"] = "inputSortInputSkeleton";
   return DynamicSortSlots2;
 })(DynamicSortSlots || {});
 export {