@m4l/components 9.2.59 → 9.2.60-13062025.beta.1

package/components/DynamicSort/DynamicSort.styles.js

@@ -5,50 +5,55 @@ const dynamicSortStyles = {
   /**
    * Root: Estilos del contenedor principal del componente.
    */
-  root: () => ({
+  root: ({ theme, ownerState }) => ({
     containerName: CONTAINER_QUERY_NAME,
     containerType: "inline-size",
     width: "100%",
     height: "auto",
-    padding: 0
+    padding: 0,
+    ...getSizeStyles(
+      theme,
+      ownerState?.size || "medium",
+      "container",
+      (size) => ({
+        height: size,
+        maxHeight: size,
+        minHeight: size
+      })
+    )
   }),
   /**
    * innerContainer: Estilos del contenedor interno del componente.
    */
   innerContainer: ({ theme, ownerState }) => ({
-    display: "grid",
-    gridTemplateColumns: "auto 1fr auto",
-    gridTemplateAreas: '"input-sort applied-sorts actions-sort"',
+    display: "flex",
     alignItems: "center",
     justifyContent: "flex-start",
     width: "100%",
     height: "fit-content",
-    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,
+    borderRadius: theme.vars.size.borderRadius.r2,
     background: theme.vars.palette.background.default,
+    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.secondary}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
+    overflow: "hidden",
     '&:has([aria-expanded="true"])': {
-      borderColor: ownerState?.isValid ? theme.vars.palette.primary.active : theme.vars.palette.error.enabled
+      boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1.3px ${theme.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${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.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
     paddingRight: theme.vars.size.baseSpacings.sp1,
     height: "100%",
     overflow: "hidden",
-    maxWidth: "135px",
+    maxWidth: "120px",
     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",
@@ -62,6 +67,8 @@ const dynamicSortStyles = {
    * inputSortInput: Estilos del campo de entrada de ordenamiento.
    */
   inputSortInput: ({ theme, ownerState }) => ({
+    width: "100%",
+    background: "#ffffff00",
     ...getSizeStyles(
       theme,
       ownerState?.size || "medium",
@@ -72,51 +79,57 @@ 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: theme.vars.size.borderStroke.container,
+      border: "unset",
       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 }) => ({
-    gridArea: "applied-sorts",
+  appliedSorts: ({ theme, ownerState }) => ({
     width: "100%",
     height: "fit-content",
-    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
     borderLeft: "none",
     margin: "0px",
-    padding: `0px ${theme.vars.size.baseSpacings.sp1}`
+    padding: `0px ${theme.vars.size.baseSpacings.sp1}`,
+    flex: 1,
+    overflow: "hidden",
+    ...getSizeStyles(
+      theme,
+      ownerState?.size || "medium",
+      "container",
+      (size) => ({
+        height: size,
+        maxHeight: size,
+        minHeight: size
+      })
+    )
   }),
   /**
    * appliedSortInnerContainer: Estilos del contenedor interno de los campos de ordenamiento aplicados.
    */
-  appliedSortInnerContainer: ({ theme }) => ({
+  appliedSortInnerContainer: ({ theme, ownerState }) => ({
     padding: theme.vars.size.baseSpacings["sp0-5"],
     gap: theme.vars.size.baseSpacings.sp1,
     height: "fit-content",
@@ -126,13 +139,30 @@ const dynamicSortStyles = {
     justifyContent: "flex-start",
     alignItems: "center",
     overflow: "auto hidden",
-    position: "relative"
+    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`
+        }
+      }
+    }
   }),
   /**
    * actions: Estilos del contenedor de los botones de acción.
    */
   actions: ({ theme, ownerState }) => ({
-    gridArea: "actions-sort",
+    gridArea: "actions-filter",
     overflow: "hidden",
     display: "flex",
     flexDirection: "row",
@@ -142,19 +172,33 @@ const dynamicSortStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    borderLeft: !ownerState?.visibleRefresh && !ownerState?.isDirty ? "none" : theme.vars.size.borderStroke.container,
-    borderColor: theme.vars.palette.border?.default
+    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.secondary}`,
+    ...!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`
+      }
+    }
   }),
-  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": {
@@ -209,66 +253,21 @@ const dynamicSortStyles = {
       }
     }
   }),
-  /**
-   * 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: () => ({
+  popoverSortContainerFields: ({ theme }) => ({
     height: "fit-content",
     "& > div": {
-      display: "flex",
-      height: "auto",
-      flexDirection: "column"
+      display: "grid",
+      flexDirection: "column",
+      gap: theme.vars.size.baseSpacings.sp2
     }
   }),
-  /**
-   * contentSort: Estilos del contenedor entre el change sort y actions
-   */
-  contentSort: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    padding: theme.vars.size.baseSpacings.sp3,
-    gap: theme.vars.size.baseSpacings.sp3
-  }),
   /**
    * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
    */
-  popoverSortActions: ({ theme }) => ({
-    padding: `${theme.vars.size.baseSpacings.sp3} 0px`
-  }),
+  popoverSortActions: {},
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */

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

@@ -34,15 +34,6 @@ 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,7 +4,6 @@ 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", {
@@ -55,18 +54,6 @@ 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
@@ -77,7 +64,6 @@ const InputSortInputSkeletonStyled = styled(Skeleton, {
 })(dynamicSortStyles?.inputSortInputSkeleton);
 export {
   AppliedSortsStyled as A,
-  ContentSortStyled as C,
   InnerContainerStyled as I,
   PopoverMenuStyled as P,
   RootStyled as R,
@@ -86,11 +72,9 @@ export {
   InputSortInputSkeletonStyled as c,
   InputSortInputStyled as d,
   PopoverStyled as e,
-  PopoverHeaderStyled as f,
-  PopoverHeaderTitleStyled as g,
-  PopoverContainerFieldsStyled as h,
-  PopoverHeaderActionsStyled as i,
-  ActionsStyled as j,
-  ActionsClearButtonStyled as k,
-  ActionsSubmitButtonStyled as l
+  PopoverContainerFieldsStyled as f,
+  PopoverHeaderActionsStyled as g,
+  ActionsStyled as h,
+  ActionsClearButtonStyled as i,
+  ActionsSubmitButtonStyled as j
 };

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

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

package/components/DynamicSort/slots/SlotsEnum.js

@@ -11,11 +11,8 @@ 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"] = "inputSortInputSkeleton";
+  DynamicSortSlots2["inputSortInputSkeleton"] = "inputSortInputSkelecontentSortton";
   return DynamicSortSlots2;
 })(DynamicSortSlots || {});
 export {

package/components/DynamicSort/subcomponents/InputSort/InputSort.js

@@ -33,6 +33,8 @@ const InputSort = () => {
         value: inputData,
         placeholder: inputPlaceHolder,
         ownerState: { ...ownerState },
+        role: "searchbox",
+        "aria-label": "searchbox",
         ...inputHandlersProps
       }
     ),

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Icon } from "../../../Icon/Icon.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverSort } from "./usePopoverSort.js";
-import { e as PopoverStyled, f as PopoverHeaderStyled, g as PopoverHeaderTitleStyled, C as ContentSortStyled, h as PopoverContainerFieldsStyled, i as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
+import { e as PopoverStyled, f as PopoverContainerFieldsStyled, g as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.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 PopoverSort() {
@@ -22,7 +22,7 @@ function PopoverSort() {
     statusLoad,
     canRender
   } = usePopoverSort();
-  const { ownerState, size } = useDynamicSortBase();
+  const { size } = useDynamicSortBase();
   if (!canRender) {
     return null;
   }
@@ -38,26 +38,30 @@ function PopoverSort() {
       anchorEl,
       onKeyDown: handleKeyDownPopper,
       onClose: handleClosePopover,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         RHFormProvider,
         {
           onSubmit,
           values: sortFormValue,
           validationSchema: popupValidationSchema,
           statusLoad,
-          children: [
-            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: { ...ownerState }, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(Icon, { src: field.urlIcon, size }),
-              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", size, children: labelField })
-            ] }),
-            /* @__PURE__ */ jsxs(ContentSortStyled, { children: [
-              /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
-              /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
-                /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
-                /* @__PURE__ */ jsx(ActionIntro, { size })
-              ] })
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxs(
+            WindowBase,
+            {
+              title: labelField,
+              iconUrl: field.urlIcon,
+              variant: "text",
+              type: "popup",
+              selected: true,
+              children: [
+                /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
+                /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
+                  /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
+                  /* @__PURE__ */ jsx(ActionIntro, { size, "aria-label": "applySort" })
+                ] })
+              ]
+            }
+          )
         }
       )
     }

package/components/DynamicSort/subcomponents/SortActions/SortActions.js

@@ -3,7 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { u as useSortActions } from "./useSortActions.js";
-import { j as ActionsStyled, k as ActionsClearButtonStyled, l as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
+import { h as ActionsStyled, i as ActionsClearButtonStyled, j as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
 function SortActions() {
   const {
     sortIconUrl,
@@ -16,7 +16,7 @@ function SortActions() {
   } = useSortActions();
   const { size, visibleRefresh, ownerState: { isDirty } } = useDynamicSortBase();
   const { getLabel } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh }, children: [
+  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh, isValid: ownerState?.isValid, inEdition: ownerState?.inEdition }, children: [
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {

package/components/DynamicSort/subcomponents/SortActions/useSortActions.d.ts

@@ -11,6 +11,8 @@ declare function useSortActions(): {
     sortButtonDictionaryTooltip: string;
     ownerState: {
         isValid: boolean;
+        isDirty: boolean;
+        inEdition: boolean;
     };
 };
 export default useSortActions;

package/components/DynamicSort/subcomponents/SortActions/useSortActions.js

@@ -9,6 +9,7 @@ function useSortActions() {
   const isValid = useDynamicSortStore((state) => state.ownerState?.isValid);
   const isDirty = useDynamicSortStore((state) => state.ownerState?.isDirty);
   const appliedSorts = useDynamicSortStore((state) => state.appliedSorts);
+  const inEdition = useDynamicSortStore((state) => state.ownerState?.inEdition);
   const { hidePopoverSort, clearSorts, fireOnChangeSorts } = useDynamicSortStore(
     (state) => state.actions
   );
@@ -31,7 +32,7 @@ function useSortActions() {
     onClickClearSorts,
     onClickSort: fireOnChangeSorts,
     sortButtonDictionaryTooltip,
-    ownerState: { isValid }
+    ownerState: { isValid, isDirty, inEdition }
   };
 }
 export {

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,9 +56,11 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/PaperForm/styles.js

@@ -13,7 +13,8 @@ const paperFormStyles = {
     borderColor: theme.vars.palette.border.default,
     overflow: "hidden",
     width: "100%",
-    height: "auto"
+    height: "auto",
+    container: "container / inline-size"
   }),
   /**
    * ************************************************************

package/components/PropertyValue/PropertyValue.styles.js

@@ -9,7 +9,8 @@ const propertyValueStyles = {
       minWidth: `${maxWidth}px`,
       [`@container ${CONTAINER_QUERY_NAME} (max-width: ${maxWidth - 1}px)`]: {
         minWidth: "100px",
-        maxWidth: "100%"
+        maxWidth: "100%",
+        width: "100%"
       }
     });
     const semanticStylesMap = {

package/components/SideBar/SideBar.js

@@ -23,7 +23,8 @@ const SideBar = memo((props) => {
     expandedWidth = "230px",
     companyName,
     companySlogan,
-    urlIconPrefix = `${host_static_assets}/${environment_assets}${PATH_ICONS}`
+    urlIconPrefix = `${host_static_assets}/${environment_assets}${PATH_ICONS}`,
+    promotion
   } = props;
   const menuDataWithState = useMemo(() => getMenuDataWithState({ menuData: menuData ?? getDataToSkeleton(), moduleSelectedId }), [menuData, moduleSelectedId]);
   const isMobile = useIsMobile();
@@ -44,7 +45,8 @@ const SideBar = memo((props) => {
         expandedWidth,
         companyName,
         companySlogan,
-        urlIconPrefix
+        urlIconPrefix,
+        promotion
       },
       children: !isMobile ? /* @__PURE__ */ jsx(SideBarDesktop, {}) : /* @__PURE__ */ jsx(SideBarMobile, {})
     }

package/components/SideBar/constants.d.ts

@@ -1,8 +1,32 @@
+import { HeaderSidebarSlots, ContentGroupsSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots, ContentComponentSlots } from './slots/SideBarEnum';
 export declare const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
 export declare const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
 export declare const LIST_MENU_ITEM = "M4LListMenuItem";
-export declare const ITEM_ACTIVE = "M4LItemActive";
-export declare const ITEM_IN_TREE_ACTIVE = "M4LItemInTreeActive";
 export declare const PATH_ICONS = "/frontend/domain/microfrontends/";
 export declare const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
 export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
+export declare const ALL_SIDEBAR_SLOTS: {
+    contentComponentRoot: ContentComponentSlots.contentComponentRoot;
+    contentComponentHide: ContentComponentSlots.contentComponentHide;
+    containerTreeItemsAndPromotion: ContentComponentSlots.containerTreeItemsAndPromotion;
+    containerNodeMenuItem: ContentComponentSlots.containerNodeMenuItem;
+    containerNodeMenuItemMain: ContentComponentSlots.containerNodeMenuItemMain;
+    menuItemMain: ContentComponentSlots.menuItemMain;
+    containerFooter: SideBarFooterSlots.containerFooter;
+    containerHeaderSidebarRoot: HeaderSidebarSlots.containerHeaderSidebarRoot;
+    containerTitleSubtitle: HeaderSidebarSlots.containerTitleSubtitle;
+    containerTreeGroupItems: ContentGroupsSlots.containerTreeGroupItems;
+    containerContentGroups: ContentGroupsSlots.containerContentGroups;
+    containerContentTitle: ContentGroupsSlots.containerContentTitle;
+    containerContentNavItems: ContentGroupsSlots.containerContentNavItems;
+    containerContentItem: ContentGroupsSlots.containerContentItem;
+    containerArrowIconRoot: ContentGroupsSlots.containerArrowIconRoot;
+    containerSideBarMobile: SideBarMobileSlots.containerSideBarMobile;
+    containerDesktopRoot: SideBarDesktopSlots.containerDesktopRoot;
+    containerDesktopContent: SideBarDesktopSlots.containerDesktopContent;
+    containerBtnAnchored: SideBarDesktopSlots.containerBtnAnchored;
+};
+export declare const CLASS_NAME_IS_ROOT = "is-root";
+export declare const CLASS_NAME_MENU_ACTIVE = "menu-active";
+export declare const CLASS_NAME_ITEM_IN_TREE_ACTIVE = "item-in-tree-active";
+export declare const CLASS_NAME_HAS_CHILDREN = "has-children";

package/components/SideBar/constants.js

@@ -1,18 +1,30 @@
+import { C as ContentComponentSlots, S as SideBarFooterSlots, H as HeaderSidebarSlots, a as ContentGroupsSlots, b as SideBarMobileSlots, c as SideBarDesktopSlots } from "./slots/SideBarEnum.js";
 const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
 const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
-const LIST_MENU_ITEM = "M4LListMenuItem";
-const ITEM_ACTIVE = "M4LItemActive";
-const ITEM_IN_TREE_ACTIVE = "M4LItemInTreeActive";
 const PATH_ICONS = "/frontend/domain/microfrontends/";
 const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
 const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
+const ALL_SIDEBAR_SLOTS = {
+  ...SideBarDesktopSlots,
+  ...SideBarMobileSlots,
+  ...ContentGroupsSlots,
+  ...HeaderSidebarSlots,
+  ...SideBarFooterSlots,
+  ...ContentComponentSlots
+};
+const CLASS_NAME_IS_ROOT = "is-root";
+const CLASS_NAME_MENU_ACTIVE = "menu-active";
+const CLASS_NAME_ITEM_IN_TREE_ACTIVE = "item-in-tree-active";
+const CLASS_NAME_HAS_CHILDREN = "has-children";
 export {
+  ALL_SIDEBAR_SLOTS as A,
   CONTAINER_BTN_ANCHORED as C,
-  ITEM_ACTIVE as I,
-  LIST_MENU_ITEM as L,
   PATH_ICONS as P,
   SIDEBAR_KEY_COMPONENT as S,
   PATH_ARROW_RIGHT_ICON as a,
-  ITEM_IN_TREE_ACTIVE as b,
-  PATH_ARROW_DOWN_ICON as c
+  CLASS_NAME_IS_ROOT as b,
+  CLASS_NAME_MENU_ACTIVE as c,
+  CLASS_NAME_ITEM_IN_TREE_ACTIVE as d,
+  CLASS_NAME_HAS_CHILDREN as e,
+  PATH_ARROW_DOWN_ICON as f
 };