@m4l/components 9.1.142 → 9.1.144

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

@@ -2,6 +2,7 @@ import { useRef, useMemo, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { u as useDynamicFilterStore } from "../../store/useDynamicFilterStore.js";
 import { f as fieldFactory } from "../FieldTypes/fieldFactory.js";
+import { shallow } from "zustand/shallow";
 function usePopoverFilter() {
   let anchorEl;
   let field;
@@ -10,7 +11,7 @@ function usePopoverFilter() {
   let popupValidationSchema;
   const { getLabel } = useModuleDictionary();
   const popoverFilterData = useDynamicFilterStore((state) => state.popoverFilterData);
-  const elementRef = useDynamicFilterStore((state) => state.elementRef);
+  const elementRef = useDynamicFilterStore((state) => state.actions.getElementRef(), shallow);
   const { hidePopoverFilter, addFilter, updateFilter, getNewId } = useDynamicFilterStore(
     (state) => state.actions
   );

package/components/DynamicFilter/subcomponents/PopoverMenuFields/usePopoverMenuFields.d.ts

@@ -5,7 +5,6 @@ import { FilterField } from '../../types';
  */
 declare function usePopoverMenuFields(): {
     elementRef: import('react').MutableRefObject<HTMLElement | null> | null;
-    openPopoverMenuFields: boolean | undefined;
     isOpenPopoverMenuFields: boolean | undefined;
     getItemLabel: (field: FilterField) => string;
     handleClosePopover: () => void;

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

@@ -3,8 +3,7 @@ import { u as useDynamicFilterStore } from "../../store/useDynamicFilterStore.js
 import { shallow } from "zustand/shallow";
 function usePopoverMenuFields() {
   const { getLabel } = useModuleDictionary();
-  const openPopoverMenuFields = useDynamicFilterStore((state) => state.isOpenPopoverMenuFields);
-  const elementRef = useDynamicFilterStore((state) => state.elementRef, shallow);
+  const elementRef = useDynamicFilterStore((state) => state.actions.getElementRef(), shallow);
   const isOpenPopoverMenuFields = useDynamicFilterStore((state) => state.isOpenPopoverMenuFields);
   const { showPopoverFilterForAdd, closePopoverMenuFields } = useDynamicFilterStore(
     (state) => state.actions
@@ -20,7 +19,6 @@ function usePopoverMenuFields() {
   }
   return {
     elementRef,
-    openPopoverMenuFields,
     isOpenPopoverMenuFields,
     getItemLabel,
     handleClosePopover,

package/components/DynamicFilter/types.d.ts

@@ -134,8 +134,8 @@ export interface RawFilterFieldApply {
     o: Operator;
     ft: FieldType;
     o1: Maybe<OperandType>;
-    o2: Maybe<OperandType>;
-    oa: Maybe<OperandType[]>;
+    o2?: Maybe<OperandType>;
+    oa?: Maybe<OperandType[]>;
 }
 export type FilterToEditApply = FilterFieldApplied;
 export interface DataTypeFilerLabels {

package/components/DynamicSort/DynamicSort.styles.js

@@ -35,6 +35,9 @@ const dynamicSortStyles = {
       gridTemplateAreas: `"input-sort  actions-sort"
                           "applied-sorts applied-sorts"`
     },
+    '&:has([aria-expanded="true"])': {
+      borderColor: theme.vars.palette.primary.active
+    },
     "&:focus-within": {
       borderColor: !ownerState.isValid ? theme.vars.palette.error.enabled : theme.vars.palette.primary.active
     },

package/components/DynamicSort/constants.d.ts

@@ -1,5 +1,6 @@
-import { Operator, StringOperator } from './types';
+import { SortOperator } from './types';
 export declare const DYNAMIC_SORT_KEY_COMPONENT = "M4LDynamicSort";
+export declare const DYNAMIC_SORT_STORE_ID = "M4LDynamicSortStore";
 export declare const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
 export declare const ASSETS: {
     readonly refresh: "restart.svg";
@@ -7,5 +8,4 @@ export declare const ASSETS: {
     readonly list_bulleted: "list_bulleted.svg";
     readonly clean: "clean.svg";
 };
-export declare const SORT_OPERATORS: Array<StringOperator>;
-export declare const OPERATORS: Array<Operator>;
+export declare const OPERATORS: Array<SortOperator>;

package/components/DynamicSort/constants.js

@@ -1,4 +1,5 @@
 const DYNAMIC_SORT_KEY_COMPONENT = "M4LDynamicSort";
+const DYNAMIC_SORT_STORE_ID = "M4LDynamicSortStore";
 const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
 const ASSETS = {
   refresh: "restart.svg",
@@ -6,10 +7,11 @@ const ASSETS = {
   list_bulleted: "list_bulleted.svg",
   clean: "clean.svg"
 };
-const SORT_OPERATORS = ["asc", "desc"];
+const OPERATORS = ["asc", "desc"];
 export {
   ASSETS_URL as A,
   DYNAMIC_SORT_KEY_COMPONENT as D,
-  SORT_OPERATORS as S,
-  ASSETS as a
+  OPERATORS as O,
+  DYNAMIC_SORT_STORE_ID as a,
+  ASSETS as b
 };

package/components/DynamicSort/dictionary.js

@@ -22,7 +22,8 @@ const getDynamicSortDictionary = (key) => {
   return `${DYNAMICSORT_DICTIONARY_ID}.${key}`;
 };
 export {
-  DICCTIONARY as D,
-  getDynamicSortComponentsDictionary as a,
+  DYNAMICSORT_DICTIONARY_ID as D,
+  DICCTIONARY as a,
+  getDynamicSortComponentsDictionary as b,
   getDynamicSortDictionary as g
 };

package/components/DynamicSort/helpers/formatToRowSort.js

@@ -1,7 +1,8 @@
 const formatToRowSort = (appliedSorts) => {
   const sortsApplied = appliedSorts.map((appliedSort) => ({
-    f: appliedSort.field.name,
-    o: appliedSort.operator
+    n: appliedSort.field.name,
+    o: appliedSort.operator,
+    ft: appliedSort.field.type
   }));
   return sortsApplied;
 };

package/components/DynamicSort/helpers/frontEndHelpers.d.ts

@@ -0,0 +1,7 @@
+import { SortFieldType, SortOperator } from '../types';
+type SortValue = string | number | boolean | Date | null;
+/**
+ * Comparadir de valores para el sort cuando se usa en el frontEnd, y no atraves de la API
+ */
+export declare const SortCompareValues: (valueA: SortValue, valueB: SortValue, fieldType: SortFieldType, order: SortOperator) => number;
+export {};

package/components/DynamicSort/helpers/frontEndHelpers.js

@@ -0,0 +1,38 @@
+import { g as getValidDate } from "../../../utils/getValidDate.js";
+const SortCompareValues = (valueA, valueB, fieldType, order) => {
+  if (valueA === null || valueB === null) {
+    return 0;
+  }
+  switch (fieldType) {
+    case "string":
+      if (typeof valueA === "string" && typeof valueB === "string") {
+        return order === "asc" ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+      }
+      return 0;
+    case "number":
+      if (typeof valueA === "number" && typeof valueB === "number") {
+        return order === "asc" ? valueA - valueB : valueB - valueA;
+      }
+      return 0;
+    case "boolean":
+      if (typeof valueA === "boolean" && typeof valueB === "boolean") {
+        const comparison = valueA === valueB ? 0 : valueA ? 1 : -1;
+        if (comparison !== 0) {
+          return order === "asc" ? comparison : -comparison;
+        }
+      }
+      return 0;
+    case "date":
+      const dateA = getValidDate(valueA);
+      const dateB = getValidDate(valueB);
+      if (dateA === null || dateB === null) {
+        return 0;
+      }
+      return order === "asc" ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime();
+    default:
+      return 0;
+  }
+};
+export {
+  SortCompareValues as S
+};

package/components/DynamicSort/helpers/getPurgedInitialSortApplyed.js

@@ -18,7 +18,7 @@ const getPurgedInitialSortApplied = (fields, initialSort, getFieldByName) => {
       if (!field) {
         continue;
       }
-      const add = fieldFactory(field.type).verifySort(initialSortData, field);
+      const add = fieldFactory().verifySort(initialSortData, field);
       if (add === true) {
         if (field.presence === "fixed") {
           if (fixedFields.findIndex((f) => f === field.name) === -1) {
@@ -39,7 +39,7 @@ const getPurgedInitialSortApplied = (fields, initialSort, getFieldByName) => {
     const field = fields[index];
     if (field.presence === "initialized" || field.presence === "fixed") {
       if (!initialSort.find((f) => f.name === field.name)) {
-        const newFilter = fieldFactory(field.type).getDefaultSort(
+        const newFilter = fieldFactory().getDefaultSort(
           field,
           field.presence === "fixed"
         );

package/components/DynamicSort/index.d.ts

@@ -1,3 +1,4 @@
 export * from './DynamicSort';
 export { getDynamicSortComponentsDictionary } from './dictionary';
-export type { SortFieldApplied as SortFieldApply, RawSortFieldApply, InitialSortApplied, SortField, } from './types';
+export type { SortFieldApplied, RawSortFieldApply, InitialSortApplied, SortField, SortFieldType, SortOperator, } from './types';
+export { SortCompareValues } from './helpers/frontEndHelpers';

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

@@ -1,63 +1,63 @@
-export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-export declare const InnerContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const InnerContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-export declare const InputSortStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const InputSortStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-export declare const InputSortInputStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const InputSortInputStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import('react').ClassAttributes<HTMLInputElement> | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, {}>;
-export declare const InputSortIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const InputSortIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const AppliedSortsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const AppliedSortsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-export declare const AppliedSortInnerContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const AppliedSortInnerContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-export declare const AppliedSortChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Chip').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../Chip').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const AppliedSortChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Chip').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../Chip').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const ActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const ActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-export declare const ActionsClearButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ActionsClearButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "rotationAngle" | "placement" | "tooltipContent" | "componentPaletteColor" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const ActionsSubmitButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const ActionsSubmitButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "rotationAngle" | "placement" | "tooltipContent" | "componentPaletteColor" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const PopoverMenuStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Popover/types').PopoverProps, keyof import('../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const PopoverMenuStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Popover/types').PopoverProps, keyof import('../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const PopoverMenuItemStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuItem/types').MenuItemProps, keyof import('../../mui_extended/MenuItem/types').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const PopoverMenuItemStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuItem/types').MenuItemProps, keyof import('../../mui_extended/MenuItem/types').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const PopoverMenuItemIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const PopoverMenuItemIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Popover/types').PopoverProps, keyof import('../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Popover/types').PopoverProps, keyof import('../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const PopoverContainerFieldsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+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>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-export declare const PopoverHeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+}, 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>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-export declare const PopoverHeaderIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PopoverHeaderIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-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> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+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>;
 }, {}, {}>;
-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> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+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>;
 }, {}, {}>;
-export declare const InputSortInputSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
+export declare const InputSortInputSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;

package/components/DynamicSort/store/DynamicSortContext.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import { DynamicSortProps } from '../types';
-declare const DynamicSortContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('./type').DynamicSortStateWithActions>, "setState"> & {
+declare const DynamicSortContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('./types').DynamicSortStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
-    }>(partial: import('./type').DynamicSortStateWithActions | Partial<import('./type').DynamicSortStateWithActions> | ((state: import('./type').DynamicSortStateWithActions) => import('./type').DynamicSortStateWithActions | Partial<import('./type').DynamicSortStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+    }>(partial: import('./types').DynamicSortStateWithActions | Partial<import('./types').DynamicSortStateWithActions> | ((state: import('./types').DynamicSortStateWithActions) => import('./types').DynamicSortStateWithActions | Partial<import('./types').DynamicSortStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: import('./type').DynamicSortStateWithActions | Partial<import('./type').DynamicSortStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./type').DynamicSortStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: import('./types').DynamicSortStateWithActions | Partial<import('./types').DynamicSortStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./types').DynamicSortStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 }) | null>;

package/components/DynamicSort/store/DynamicSortContext.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, useRef, useEffect } from "react";
 import { useStore } from "zustand";
 import { shallow } from "zustand/shallow";
-import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { useIsMobile, useFirstRender } from "@m4l/graphics";
+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";
@@ -16,13 +15,12 @@ function DynamicSortProvider(props) {
     onChangeSorts,
     dataTestId = "",
     size = "medium",
+    storeId,
+    storeDevtoolsEnabled,
     children
   } = props;
   const { getLabel } = useModuleDictionary();
   const dynamicSortStoreRef = useRef();
-  const isDesktop = !useIsMobile();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
   if (!dynamicSortStoreRef.current) {
     dynamicSortStoreRef.current = createAreaStore({
       fields,
@@ -30,16 +28,15 @@ function DynamicSortProvider(props) {
       getLabel,
       dataTestId,
       size,
+      storeId,
       ownerState: {
-        isSkeleton,
         isDirty: !automatic,
         inEdition: false,
         isValid: true,
-        isMobile: !isDesktop,
         isEmpty: true,
         size
       }
-    });
+    }, storeDevtoolsEnabled);
     dynamicSortStoreRef.current.getState().actions.init(initialAppliedSorts);
   }
   const countOnChangeSortsApplyed = useStore(
@@ -59,12 +56,6 @@ function DynamicSortProvider(props) {
       );
     }
   }, [countOnChangeSortsApplyed]);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    dynamicSortStoreRef.current?.getState().actions.setExternalState({ isMobile: !isDesktop, isSkeleton });
-  }, [isDesktop, isSkeleton]);
   useEffect(() => {
     if (automatic) {
       dynamicSortStoreRef.current?.getState().actions.fireOnChangeSorts();

package/components/DynamicSort/store/DynamicSortStore.d.ts

@@ -1,12 +1,12 @@
 import { WritableDraft } from 'immer/dist/internal';
-import { DynamicSortStateWithActions, InitialStoreProps } from './type';
+import { DynamicSortStateWithActions, InitialStoreProps } from './types';
 export type OpenFor = 'add' | 'edit';
 /**
  *  Crea el store de zustand para el componente DynamicSort
  * @param initProps Variables iniciales que necesita store para poder inicializarlo
  * @returns
  */
-export declare const createAreaStore: (initProps: InitialStoreProps) => Omit<Omit<import('zustand').StoreApi<DynamicSortStateWithActions>, "setState"> & {
+export declare const createAreaStore: (initProps: InitialStoreProps, storeDevtoolsEnabled?: boolean) => Omit<Omit<import('zustand').StoreApi<DynamicSortStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
     }>(partial: DynamicSortStateWithActions | Partial<DynamicSortStateWithActions> | ((state: DynamicSortStateWithActions) => DynamicSortStateWithActions | Partial<DynamicSortStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;

package/components/DynamicSort/store/DynamicSortStore.js

@@ -1,6 +1,7 @@
 import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
+import { a as DYNAMIC_SORT_STORE_ID } from "../constants.js";
 import { g as getPurgedInitialSortApplied } from "../helpers/getPurgedInitialSortApplyed.js";
 const updateAvailableFields = (state) => {
   const newFields = [];
@@ -37,18 +38,26 @@ const updateAutomatic = (state) => {
     }
   }
 };
-const createAreaStore = (initProps) => {
+const createDevtools = (immerMiddlewere, config) => {
+  const { enabled = false } = config;
+  if (enabled && process.env.NODE_ENV === "development") {
+    return devtools(immerMiddlewere, config);
+  }
+  return immerMiddlewere;
+};
+const createAreaStore = (initProps, storeDevtoolsEnabled = false) => {
   const startProps = {
     countOnChangeSortsApplyed: 0,
     appliedSorts: [],
     availableFields: [],
-    fnAnchorEl: void 0,
+    // elementRef: null,
     popoverSortData: void 0,
     inputData: "",
     ...initProps
   };
+  let elementRef = null;
   return createStore(
-    devtools(
+    createDevtools(
       immer((set, get) => ({
         ...startProps,
         actions: {
@@ -65,6 +74,15 @@ const createAreaStore = (initProps) => {
               updateAutomatic(state);
             });
           },
+          /**
+           *  Actualiza la referencia del elemento (inputFilter) desde donde se desprende el listado de campos
+           */
+          setElementRef: (ref) => {
+            elementRef = ref;
+          },
+          getElementRef: () => {
+            return elementRef;
+          },
           /**
            * Funcion para obtener un Field a través del nombre
            */
@@ -92,26 +110,24 @@ const createAreaStore = (initProps) => {
           /**
            * TODO: Documentar
            */
-          showPopoverSortForAdd: (anchorEl, field) => {
+          showPopoverSortForAdd: (field) => {
             set((state) => {
-              state.fnAnchorEl = void 0;
               state.inputData = "";
               state.popoverSortData = {
                 openFor: "add",
-                fnAnchorEl: () => anchorEl,
                 field
               };
+              state.isOpenPopoverMenuFields = false;
+              state.ownerState.inEdition = true;
             });
-            get().actions.setInEdition(true);
           },
           /**
            * TODO: Documentar
            */
-          showPopoverSortForEdit: (anchorEl, sortToEdit) => {
+          showPopoverSortForEdit: (sortToEdit) => {
             set((state) => {
               state.popoverSortData = {
                 openFor: "edit",
-                fnAnchorEl: () => anchorEl,
                 sort: sortToEdit
               };
             });
@@ -194,17 +210,10 @@ const createAreaStore = (initProps) => {
           /**
            * TODO: Documentar
            */
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          openPopoverMenuFields: (anchorEl) => {
+          openPopoverMenuFields: () => {
             set((state) => {
-              state.fnAnchorEl = () => anchorEl;
+              state.isOpenPopoverMenuFields = true;
+              state.ownerState.inEdition = true;
             });
           },
           /**
@@ -212,7 +221,7 @@ const createAreaStore = (initProps) => {
            */
           closePopoverMenuFields: (newInEdition) => {
             set((state) => {
-              state.fnAnchorEl = void 0;
+              state.isOpenPopoverMenuFields = false;
               state.ownerState.inEdition = newInEdition || false;
             });
           },
@@ -227,7 +236,7 @@ const createAreaStore = (initProps) => {
           }
         }
       })),
-      { name: "Dynamic Sort" }
+      { name: `${DYNAMIC_SORT_STORE_ID}: ${initProps.storeId}`, enabled: storeDevtoolsEnabled }
     )
   );
 };