@m4l/components 9.2.11 → 9.2.12

package/components/DynamicSort/slots/DynamicSortSlots.js

@@ -6,10 +6,7 @@ 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 { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
-import { I as Icon } from "../../Icon/Icon.js";
-import { C as Chip } from "../../Chip/Chip.js";
 import { P as Popover } from "../../mui_extended/Popover/Popover.js";
-import { M as MenuItem } from "../../mui_extended/MenuItem/MenuItem.js";
 const RootStyled = styled("div", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.root
@@ -26,10 +23,6 @@ const InputSortInputStyled = styled("input", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.inputSortInput
 })(dynamicSortStyles?.inputSortInput);
-const InputSortIconStyled = styled(Icon, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.inputSortIcon
-})(dynamicSortStyles?.inputSortIcon);
 const AppliedSortsStyled = styled("div", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.appliedSorts
@@ -38,10 +31,6 @@ const AppliedSortInnerContainerStyled = styled("div", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.appliedSortInnerContainer
 })(dynamicSortStyles?.appliedSortInnerContainer);
-const AppliedSortChipStyled = styled(Chip, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.appliedSortChip
-})(dynamicSortStyles?.appliedSortChip);
 const ActionsStyled = styled("div", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.actions
@@ -58,14 +47,6 @@ const PopoverMenuStyled = styled(Popover, {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.popoverMenu
 })(dynamicSortStyles?.popoverMenu);
-const PopoverMenuItemStyled = styled(MenuItem, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.popoverMenuItem
-})(dynamicSortStyles?.popoverMenuItem);
-const PopoverMenuItemIconStyled = styled(Icon, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.popoverMenuItemIcon
-})(dynamicSortStyles?.popoverMenuItemIcon);
 const PopoverStyled = styled(Popover, {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.popoverSort
@@ -78,10 +59,10 @@ const PopoverHeaderStyled = styled("div", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.popoverSortHeader
 })(dynamicSortStyles?.popoverSortHeader);
-const PopoverHeaderIconStyled = styled(Icon, {
+const ContentSortStyled = styled("div", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.popoverSortHeaderIcon
-})(dynamicSortStyles?.popoverSortHeaderIcon);
+  slot: DynamicSortSlots.contentSort
+})(dynamicSortStyles?.contentSort);
 const PopoverHeaderTitleStyled = styled(Typography, {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.popoverSortHeaderTitle
@@ -95,25 +76,21 @@ const InputSortInputSkeletonStyled = styled(Skeleton, {
   slot: DynamicSortSlots.inputSortInputSkeleton
 })(dynamicSortStyles?.inputSortInputSkeleton);
 export {
-  AppliedSortChipStyled as A,
+  AppliedSortsStyled as A,
+  ContentSortStyled as C,
   InnerContainerStyled as I,
   PopoverMenuStyled as P,
   RootStyled as R,
-  AppliedSortsStyled as a,
-  AppliedSortInnerContainerStyled as b,
-  InputSortStyled as c,
-  InputSortIconStyled as d,
-  InputSortInputSkeletonStyled as e,
-  InputSortInputStyled as f,
-  PopoverMenuItemStyled as g,
-  PopoverMenuItemIconStyled as h,
-  PopoverStyled as i,
-  PopoverHeaderStyled as j,
-  PopoverHeaderIconStyled as k,
-  PopoverHeaderTitleStyled as l,
-  PopoverContainerFieldsStyled as m,
-  PopoverHeaderActionsStyled as n,
-  ActionsStyled as o,
-  ActionsClearButtonStyled as p,
-  ActionsSubmitButtonStyled as q
+  AppliedSortInnerContainerStyled as a,
+  InputSortStyled as b,
+  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
 };

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

@@ -3,20 +3,16 @@ export declare enum DynamicSortSlots {
     innerContainer = "innerContainer",
     inputSort = "inputSort",
     inputSortInput = "inputSortInput",
-    inputSortIcon = "inputSortIcon",
     appliedSorts = "appliedSorts",
     appliedSortInnerContainer = "appliedSortInnerContainer",
-    appliedSortChip = "appliedSortChip",
     actions = "actions",
     actionsClearButton = "actionsClearButton",
     actionsSubmitButton = "actionsSubmitButton",
     popoverMenu = "popoverMenu",
-    popoverMenuItem = "popoverMenuItem",
-    popoverMenuItemIcon = "popoverMenuItemIcon",
     popoverSort = "popoverSort",
     popoverSortContainerFields = "popoverSortContainerFields",
     popoverSortHeader = "popoverSortHeader",
-    popoverSortHeaderIcon = "popoverSortHeaderIcon",
+    contentSort = "contentSort",
     popoverSortHeaderTitle = "popoverSortHeaderTitle",
     popoverSortActions = "popoverSortActions",
     inputSortInputSkeleton = "inputSortInputSkeleton"

package/components/DynamicSort/slots/SlotsEnum.js

@@ -3,20 +3,16 @@ var DynamicSortSlots = /* @__PURE__ */ ((DynamicSortSlots2) => {
   DynamicSortSlots2["innerContainer"] = "innerContainer";
   DynamicSortSlots2["inputSort"] = "inputSort";
   DynamicSortSlots2["inputSortInput"] = "inputSortInput";
-  DynamicSortSlots2["inputSortIcon"] = "inputSortIcon";
   DynamicSortSlots2["appliedSorts"] = "appliedSorts";
   DynamicSortSlots2["appliedSortInnerContainer"] = "appliedSortInnerContainer";
-  DynamicSortSlots2["appliedSortChip"] = "appliedSortChip";
   DynamicSortSlots2["actions"] = "actions";
   DynamicSortSlots2["actionsClearButton"] = "actionsClearButton";
   DynamicSortSlots2["actionsSubmitButton"] = "actionsSubmitButton";
   DynamicSortSlots2["popoverMenu"] = "popoverMenu";
-  DynamicSortSlots2["popoverMenuItem"] = "popoverMenuItem";
-  DynamicSortSlots2["popoverMenuItemIcon"] = "popoverMenuItemIcon";
   DynamicSortSlots2["popoverSort"] = "popoverSort";
   DynamicSortSlots2["popoverSortContainerFields"] = "popoverSortContainerFields";
   DynamicSortSlots2["popoverSortHeader"] = "popoverSortHeader";
-  DynamicSortSlots2["popoverSortHeaderIcon"] = "popoverSortHeaderIcon";
+  DynamicSortSlots2["contentSort"] = "contentSort";
   DynamicSortSlots2["popoverSortHeaderTitle"] = "popoverSortHeaderTitle";
   DynamicSortSlots2["popoverSortActions"] = "popoverSortActions";
   DynamicSortSlots2["inputSortInputSkeleton"] = "inputSortInputSkeleton";

package/components/DynamicSort/slots/tests/DynamicSort.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DynamicSort/store/DynamicSortContext.js

@@ -6,6 +6,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { f as formatToInitialSorts } from "../helpers/formatToInitialSorts.js";
 import { f as formatToRowSort } from "../helpers/formatToRowSort.js";
 import { c as createAreaStore } from "./DynamicSortStore.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const DynamicSortContext = createContext(null);
 function DynamicSortProvider(props) {
   const {
@@ -19,6 +20,8 @@ function DynamicSortProvider(props) {
     storeDevtoolsEnabled,
     children
   } = props;
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const { getLabel } = useModuleDictionary();
   const dynamicSortStoreRef = useRef();
   if (!dynamicSortStoreRef.current) {
@@ -57,8 +60,8 @@ function DynamicSortProvider(props) {
     }
   }, [countOnChangeSortsApplyed]);
   useEffect(() => {
-    dynamicSortStoreRef.current?.getState().actions.setSize(size);
-  }, [size]);
+    dynamicSortStoreRef.current?.getState().actions.setSize(adjustedSize);
+  }, [adjustedSize]);
   return /* @__PURE__ */ jsx(DynamicSortContext.Provider, { value: dynamicSortStoreRef.current, children });
 }
 export {

package/components/DynamicSort/subcomponents/AppliedSortChip/AppliedSortChip.js

@@ -1,17 +1,16 @@
 import { jsx } from "react/jsx-runtime";
+import { C as Chip } from "../../../Chip/Chip.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { u as useAppliedSortChip } from "./useAppliedSortChip.js";
-import { A as AppliedSortChipStyled } from "../../slots/DynamicSortSlots.js";
 function AppliedSortChip(props) {
   const { fixed } = props;
   const { onEditSort, onDelete, iconFieldUrl, labels, iconSort } = useAppliedSortChip(props);
   const { size } = useDynamicSortBase();
   return /* @__PURE__ */ jsx(
-    AppliedSortChipStyled,
+    Chip,
     {
       opacity: true,
       variant: "contained",
-      ownerState: {},
       onClick: onEditSort,
       startIcon: iconFieldUrl,
       label: labels.labelField,

package/components/DynamicSort/subcomponents/AppliedSorts/AppliedSorts.js

@@ -1,11 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
 import { D as DynamicSortSlots } from "../../slots/SlotsEnum.js";
 import { u as useAppliedSorts } from "./useAppliedSorts.js";
-import { a as AppliedSortsStyled, b as AppliedSortInnerContainerStyled } from "../../slots/DynamicSortSlots.js";
+import { A as AppliedSortsStyled, a as AppliedSortInnerContainerStyled } from "../../slots/DynamicSortSlots.js";
 import { A as AppliedSortChip } from "../AppliedSortChip/AppliedSortChip.js";
 function AppliedSorts() {
   const { appliedSortsSorted, isSkeleton } = useAppliedSorts();
@@ -18,7 +17,7 @@ function AppliedSorts() {
     {
       ...getPropDataTestId(DYNAMIC_SORT_KEY_COMPONENT, DynamicSortSlots.appliedSorts, dataTestId),
       ownerState: { ...ownerState },
-      children: /* @__PURE__ */ jsx(ScrollBar, { autoHide: true, children: /* @__PURE__ */ jsx(AppliedSortInnerContainerStyled, { ownerState: {}, children: appliedSortsSorted?.reverse()?.map((sort) => /* @__PURE__ */ jsx(AppliedSortChip, { ...sort }, sort.id)) }) })
+      children: /* @__PURE__ */ jsx(AppliedSortInnerContainerStyled, { ownerState: {}, children: appliedSortsSorted?.reverse()?.map((sort) => /* @__PURE__ */ jsx(AppliedSortChip, { ...sort }, sort.id)) })
     }
   );
 }

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

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { u as useInputSort } from "./useInputSort.js";
-import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { useRef, useEffect } from "react";
-import { c as InputSortStyled, d as InputSortIconStyled, e as InputSortInputSkeletonStyled, f as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { u as useInputSort } from "./useInputSort.js";
+import { b as InputSortStyled, c as InputSortInputSkeletonStyled, d as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
 import { P as PopoverMenuFields } from "../PopoverMenuFields/PopoverMenuFields.js";
 const InputSort = () => {
   const {
@@ -23,7 +24,7 @@ const InputSort = () => {
   }, [setElementRef]);
   const { ownerState, size } = useDynamicSortBase();
   return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: { ...ownerState }, "aria-expanded": isOpenPopoverMenuFields || isOpenPopoverSort, children: [
-    /* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, size, ownerState: { ...ownerState } }),
+    /* @__PURE__ */ jsx(Icon, { src: iconUrl, size }),
     isSkeleton ? /* @__PURE__ */ jsx(InputSortInputSkeletonStyled, { ownerState: { ...ownerState }, variant: "rounded" }) : /* @__PURE__ */ jsx(
       InputSortInputStyled,
       {

package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -1,7 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
-import { P as PopoverMenuStyled, g as PopoverMenuItemStyled, h as PopoverMenuItemIconStyled } from "../../slots/DynamicSortSlots.js";
+import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { P as PopoverMenuStyled } from "../../slots/DynamicSortSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
   const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
@@ -20,15 +22,14 @@ function PopoverMenuFields(props) {
       anchorEl,
       ownerState: {},
       children: isOpenPopoverMenuFields && fields.map((field, index) => /* @__PURE__ */ jsx(
-        PopoverMenuItemStyled,
+        MenuItem,
         {
-          startIcon: /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { size, src: field.urlIcon, ownerState: {} }),
+          startIcon: /* @__PURE__ */ jsx(Icon, { size, src: field.urlIcon }),
           label: getItemLabel(field),
           dense: true,
           size,
           selected: index === selectFieldIndex,
-          onClick: (event) => handleOpenPopUpClickItem(event, field),
-          ownerState: {}
+          onClick: (event) => handleOpenPopUpClickItem(event, field)
         },
         `menu_action_${getItemLabel(field)}`
       ))

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

@@ -1,8 +1,9 @@
 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 { i as PopoverStyled, j as PopoverHeaderStyled, k as PopoverHeaderIconStyled, l as PopoverHeaderTitleStyled, m as PopoverContainerFieldsStyled, n as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.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 { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
@@ -21,7 +22,7 @@ function PopoverSort() {
     statusLoad,
     canRender
   } = usePopoverSort();
-  const { size } = useDynamicSortBase();
+  const { ownerState, size } = useDynamicSortBase();
   if (!canRender) {
     return null;
   }
@@ -46,14 +47,16 @@ function PopoverSort() {
           validationSchema: popupValidationSchema,
           statusLoad,
           children: [
-            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, size, ownerState: {} }),
+            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: { ...ownerState }, children: [
+              field.urlIcon && /* @__PURE__ */ jsx(Icon, { src: field.urlIcon, size }),
               /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", size, ownerState: {}, children: labelField })
             ] }),
-            /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
-            /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
-              /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose, skeletonWidth: "68px" }),
-              /* @__PURE__ */ jsx(ActionIntro, { size, skeletonWidth: "64px" })
+            /* @__PURE__ */ jsxs(ContentSortStyled, { ownerState: {}, children: [
+              /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
+              /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
+                /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
+                /* @__PURE__ */ jsx(ActionIntro, { size })
+              ] })
             ] })
           ]
         }

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useSortActions } from "./useSortActions.js";
 import { g as getDynamicSortDictionary, a as DICCTIONARY } from "../../dictionary.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
-import { o as ActionsStyled, p as ActionsClearButtonStyled, q as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
+import { j as ActionsStyled, k as ActionsClearButtonStyled, l as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
 function SortActions() {
   const {
     sortIconUrl,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.11",
+  "version": "9.2.12",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"

package/storybook/components/DynamicFilter/mocks/mocksData.d.ts

@@ -0,0 +1 @@
+export declare const MockData: import('msw').HttpHandler[];

package/components/DynamicFilter/subcomponents/FilterActions/FilterActionsSkeleton.d.ts

@@ -1,5 +0,0 @@
-/**
- * TODO: Documentar
- */
-declare function FilterActionsSkeleton(): import("react/jsx-runtime").JSX.Element;
-export default FilterActionsSkeleton;

package/components/DynamicFilter/subcomponents/FilterActions/FilterActionsSkeleton.js

@@ -1,12 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Skeleton } from "@mui/material";
-import { l as ActionsSkeletonButtonStyled } from "../../slots/dynamicFilterSlots.js";
-function FilterActionsSkeleton() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) }),
-    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) })
-  ] });
-}
-export {
-  FilterActionsSkeleton as F
-};

package/components/DynamicFilter/subcomponents/InputFilter/InputFilterSkeleton.d.ts

@@ -1,5 +0,0 @@
-/**
- * TODO: Documentar
- */
-declare function InputFilterSkeleton(): import("react/jsx-runtime").JSX.Element;
-export default InputFilterSkeleton;

package/components/DynamicFilter/subcomponents/InputFilter/InputFilterSkeleton.js

@@ -1,19 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Skeleton } from "@mui/material";
-function InputFilterSkeleton() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        variant: "circular",
-        width: "16px",
-        height: "16px",
-        sx: { minWidth: "16px", minHeight: "16px" }
-      }
-    ),
-    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "16px", sx: { minWidth: "80px" } })
-  ] });
-}
-export {
-  InputFilterSkeleton as I
-};

package/utils/containerQuery.js

@@ -1,6 +0,0 @@
-function containerQuery(breakpoints, containerName = "", size = "sm") {
-  return breakpoints.down(size).replace("@media ", `@container ${containerName} `);
-}
-export {
-  containerQuery as c
-};