@m4l/components 9.1.124 → 9.1.126

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

@@ -1,4 +1,4 @@
-import { Field, SortFieldApplied, InitialSortApplied } from '../types';
+import { SortField, SortFieldApplied, InitialSortApplied } from '../types';
 /**
  * Función encargada de purgar cualquier error que pueda venir del endpoint, por algun cambio de versión
  * @param fields todos los campos que pueden aparecer en el sort
@@ -6,4 +6,4 @@ import { Field, SortFieldApplied, InitialSortApplied } from '../types';
  * @param getFieldByName Funcion para obtener el Field a través del nombre
  * @returns Array de filtros aplicados excluyendo los que tengan errores
  */
-export declare const getPurgedInitialSortApplied: (fields: Array<Field>, initialSort: Array<InitialSortApplied>, getFieldByName: (name: string) => Field) => Array<SortFieldApplied>;
+export declare const getPurgedInitialSortApplied: (fields: Array<SortField>, initialSort: Array<InitialSortApplied>, getFieldByName: (name: string) => SortField) => Array<SortFieldApplied>;

package/components/DynamicSort/helpers/getPurgedInitialSortApplyed.js

@@ -0,0 +1,55 @@
+import { f as fieldFactory } from "../subcomponents/FieldTypes/fieldFactory.js";
+const getPurgedInitialSortApplied = (fields, initialSort, getFieldByName) => {
+  const newSorts = [];
+  const fixedFields = [];
+  for (let index = 0; index < initialSort.length; index++) {
+    try {
+      const initialSortData = initialSort[index];
+      const field = getFieldByName(initialSortData.name);
+      const sort = {
+        id: 0,
+        isSet: true,
+        fixed: false,
+        field,
+        fieldType: field.type,
+        operator: initialSort[index].operator
+        // operator
+      };
+      if (!field) {
+        continue;
+      }
+      const add = fieldFactory(field.type).verifySort(initialSortData, field);
+      if (add === true) {
+        if (field.presence === "fixed") {
+          if (fixedFields.findIndex((f) => f === field.name) === -1) {
+            sort.fixed = true;
+            fixedFields.push(field.name);
+          } else {
+            sort.fixed = false;
+          }
+        }
+        sort.isSet = true;
+        sort.id = newSorts.length + 1;
+        newSorts.push(sort);
+      }
+    } catch (_e) {
+    }
+  }
+  for (let index = 0; index < fields.length; index++) {
+    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(
+          field,
+          field.presence === "fixed"
+        );
+        newFilter.id = newSorts.length + 1;
+        newSorts.push(newFilter);
+      }
+    }
+  }
+  return newSorts;
+};
+export {
+  getPurgedInitialSortApplied as g
+};

package/components/DynamicSort/index.d.ts

@@ -1,3 +1,3 @@
 export * from './DynamicSort';
 export { getDynamicSortComponentsDictionary } from './dictionary';
-export type { SortFieldApplied as SortFieldApply, RawSortFieldApply, InitialSortApplied, Field, } from './types';
+export type { SortFieldApplied as SortFieldApply, RawSortFieldApply, InitialSortApplied, SortField, } from './types';

package/components/DynamicSort/slots/DynamicSortSlots.js

@@ -0,0 +1,146 @@
+import { styled } from "@mui/material/styles";
+import { MenuItem } from "@mui/material";
+import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../constants.js";
+import { d as dynamicSortStyles } from "../DynamicSort.styles.js";
+import { D as DynamicSortSlots } from "./SlotsEnum.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 { I as Icon } from "../../Icon/Icon.js";
+import { P as Popover } from "../../mui_extended/Popover/Popover.js";
+const RootStyled = styled("div", { name: DYNAMIC_SORT_KEY_COMPONENT, slot: DynamicSortSlots.root })(
+  dynamicSortStyles?.root
+);
+const InnerContainerStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.innerContainer
+})(dynamicSortStyles?.innerContainer);
+const InputSortStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.inputSort
+})(dynamicSortStyles?.inputSort);
+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
+})(dynamicSortStyles?.appliedSorts);
+const AppliedSortInnerContainerStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.appliedSortInnerContainer
+})(dynamicSortStyles?.appliedSortInnerContainer);
+const AppliedSortChipStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.appliedSortChip
+})(dynamicSortStyles?.appliedSortChip);
+const AppliedSortChipIconStyled = styled(IconButton, {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.appliedSortChipIcon
+})(dynamicSortStyles?.appliedSortChipIcon);
+const AppliedSortChipInfoStyled = styled("button", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.appliedSortChipInfo
+})(dynamicSortStyles?.appliedSortChipInfo);
+const AppliedSortChipInfoFieldNameStyled = styled("span", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.appliedSortChipInfoFieldName
+})(dynamicSortStyles?.appliedSortChipInfoFieldName);
+const AppliedSortChipInfoOperatorStyled = styled("span", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.appliedSortChipInfoOperator
+})(dynamicSortStyles?.appliedSortChipInfoOperator);
+const AppliedSortChipRemoveButtonStyled = styled(IconButton, {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.appliedSortChipRemoveButton
+})(dynamicSortStyles?.appliedSortChipRemoveButton);
+const ActionsStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.actions
+})(dynamicSortStyles?.actions);
+const ActionsSkeletonButtonStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.actionsSkeletonButton
+})(dynamicSortStyles?.actionsSkeletonButton);
+const ActionsClearButtonStyled = styled(IconButton, {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.actionsClearButton
+})(dynamicSortStyles?.actionsClearButton);
+const ActionsSubmitButtonStyled = styled(IconButton, {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.actionsSubmitButton
+})(dynamicSortStyles?.actionsSubmitButton);
+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 PopoverMenuItemLabelStyled = styled("div", {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.popoverMenuItemLabel
+})(dynamicSortStyles?.popoverMenuItemLabel);
+const PopoverStyled = styled(Popover, {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.popoverSort
+})(dynamicSortStyles?.popoverSort);
+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 PopoverHeaderIconStyled = styled(Icon, {
+  name: DYNAMIC_SORT_KEY_COMPONENT,
+  slot: DynamicSortSlots.popoverSortHeaderIcon
+})(dynamicSortStyles?.popoverSortHeaderIcon);
+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
+})(dynamicSortStyles?.popoverSortActions);
+export {
+  AppliedSortChipStyled as A,
+  InnerContainerStyled as I,
+  PopoverMenuStyled as P,
+  RootStyled as R,
+  AppliedSortChipIconStyled as a,
+  AppliedSortChipInfoStyled as b,
+  AppliedSortChipInfoFieldNameStyled as c,
+  AppliedSortChipInfoOperatorStyled as d,
+  AppliedSortChipRemoveButtonStyled as e,
+  AppliedSortsStyled as f,
+  AppliedSortInnerContainerStyled as g,
+  InputSortStyled as h,
+  InputSortIconStyled as i,
+  InputSortInputStyled as j,
+  PopoverMenuItemStyled as k,
+  PopoverMenuItemIconStyled as l,
+  PopoverMenuItemLabelStyled as m,
+  PopoverStyled as n,
+  PopoverHeaderStyled as o,
+  PopoverHeaderIconStyled as p,
+  PopoverHeaderTitleStyled as q,
+  PopoverContainerFieldsStyled as r,
+  PopoverHeaderActionsStyled as s,
+  ActionsStyled as t,
+  ActionsClearButtonStyled as u,
+  ActionsSubmitButtonStyled as v,
+  ActionsSkeletonButtonStyled as w
+};

package/components/DynamicSort/slots/SlotsEnum.js

@@ -0,0 +1,34 @@
+var DynamicSortSlots = /* @__PURE__ */ ((DynamicSortSlots2) => {
+  DynamicSortSlots2["root"] = "root";
+  DynamicSortSlots2["innerContainer"] = "innerContainer";
+  DynamicSortSlots2["inputSort"] = "inputSort";
+  DynamicSortSlots2["inputSortInput"] = "inputSortInput";
+  DynamicSortSlots2["inputSortIcon"] = "inputSortIcon";
+  DynamicSortSlots2["appliedSorts"] = "appliedSorts";
+  DynamicSortSlots2["appliedSortInnerContainer"] = "appliedSortInnerContainer";
+  DynamicSortSlots2["appliedSortChip"] = "appliedSortChip";
+  DynamicSortSlots2["appliedSortChipIcon"] = "appliedSortChipIcon";
+  DynamicSortSlots2["appliedSortChipInfo"] = "appliedSortChipInfo";
+  DynamicSortSlots2["appliedSortChipInfoFieldName"] = "appliedSortChipInfoFieldName";
+  DynamicSortSlots2["appliedSortChipInfoOperator"] = "appliedSortChipInfoOperator";
+  DynamicSortSlots2["appliedSortChipInfoOperands"] = "appliedSortChipInfoOperands";
+  DynamicSortSlots2["appliedSortChipRemoveButton"] = "appliedSortChipRemoveButton";
+  DynamicSortSlots2["actions"] = "actions";
+  DynamicSortSlots2["actionsSkeletonButton"] = "actionsSkeletonButton";
+  DynamicSortSlots2["actionsClearButton"] = "actionsClearButton";
+  DynamicSortSlots2["actionsSubmitButton"] = "actionsSubmitButton";
+  DynamicSortSlots2["popoverMenu"] = "popoverMenu";
+  DynamicSortSlots2["popoverMenuItem"] = "popoverMenuItem";
+  DynamicSortSlots2["popoverMenuItemIcon"] = "popoverMenuItemIcon";
+  DynamicSortSlots2["popoverMenuItemLabel"] = "popoverMenuItemLabel";
+  DynamicSortSlots2["popoverSort"] = "popoverSort";
+  DynamicSortSlots2["popoverSortContainerFields"] = "popoverSortContainerFields";
+  DynamicSortSlots2["popoverSortHeader"] = "popoverSortHeader";
+  DynamicSortSlots2["popoverSortHeaderIcon"] = "popoverSortHeaderIcon";
+  DynamicSortSlots2["popoverSortHeaderTitle"] = "popoverSortHeaderTitle";
+  DynamicSortSlots2["popoverSortActions"] = "popoverSortActions";
+  return DynamicSortSlots2;
+})(DynamicSortSlots || {});
+export {
+  DynamicSortSlots as D
+};

package/components/DynamicSort/store/DynamicSortContext.js

@@ -0,0 +1,76 @@
+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 { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { c as createAreaStore } from "./DynamicSortStore.js";
+import { f as formatToInitialSorts } from "../helpers/formatToInitialSorts.js";
+import { f as formatToRowSort } from "../helpers/formatToRowSort.js";
+const DynamicSortContext = createContext(null);
+function DynamicSortProvider(props) {
+  const {
+    automatic = true,
+    fields,
+    initialAppliedSorts = [],
+    onChangeSorts,
+    dataTestId = "",
+    children
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const dynamicSortStoreRef = useRef();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
+  if (!dynamicSortStoreRef.current) {
+    dynamicSortStoreRef.current = createAreaStore({
+      fields,
+      automatic,
+      getLabel,
+      dataTestId,
+      ownerState: {
+        isSkeleton,
+        isDirty: !automatic,
+        inEdition: false,
+        isValid: true,
+        isMobile: !isDesktop,
+        isEmpty: true
+      }
+    });
+    dynamicSortStoreRef.current.getState().actions.init(initialAppliedSorts);
+  }
+  const countOnChangeSortsApplyed = useStore(
+    dynamicSortStoreRef.current,
+    (state) => state.countOnChangeSortsApplyed,
+    shallow
+  );
+  useEffect(() => {
+    if (countOnChangeSortsApplyed === 0) {
+      return;
+    }
+    const state = dynamicSortStoreRef.current?.getState();
+    if (state) {
+      onChangeSorts?.(
+        formatToInitialSorts(state.appliedSorts),
+        formatToRowSort(state.appliedSorts)
+      );
+    }
+  }, [countOnChangeSortsApplyed]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    dynamicSortStoreRef.current?.getState().actions.setExternalState({ isMobile: !isDesktop, isSkeleton });
+  }, [isDesktop, isSkeleton]);
+  useEffect(() => {
+    if (automatic) {
+      dynamicSortStoreRef.current?.getState().actions.fireOnChangeSorts();
+      return;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(DynamicSortContext.Provider, { value: dynamicSortStoreRef.current, children });
+}
+export {
+  DynamicSortProvider as D,
+  DynamicSortContext as a
+};

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

@@ -1,6 +1,6 @@
 import { GetLabelType } from '@m4l/core';
 import { WritableDraft } from 'immer/dist/internal';
-import { Field, SortFieldApplied, SortToEditApply, InitialSortApplied, OwnerState } from '../types';
+import { SortField, SortFieldApplied, SortToEditApply, InitialSortApplied, OwnerState } from '../types';
 export type OpenFor = 'add' | 'edit';
 export interface PopoverSortDataBase {
     /**
@@ -17,7 +17,7 @@ export interface PopoverSortDataAdd extends PopoverSortDataBase {
     /**
      *  "field" Campo por el cual se va a filtrar
      */
-    field: Field;
+    field: SortField;
 }
 export interface PopoverSortDataEdit extends PopoverSortDataBase {
     openFor: 'edit';
@@ -42,7 +42,7 @@ export interface DynamicSortState {
     /**
      *  "fields" Campos por los que se puede filtrar
      */
-    fields: Array<Field>;
+    fields: Array<SortField>;
     /**
      *  "ownerState" estado a nivel de clases del componente
      */
@@ -64,7 +64,7 @@ export interface DynamicSortState {
     /**
      * Campos disponibles para filtrar
      */
-    availableFields: Array<Field>;
+    availableFields: Array<SortField>;
     /**
      *  "applyedFilters" sorts aplicados actualmente
      */
@@ -95,7 +95,7 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @param name
          * @returns Field o undefined si no se encuentra
          */
-        getFieldByName: (name: string) => Field;
+        getFieldByName: (name: string) => SortField;
         /**
          * remueve un sort si existe, y dispara el trigger de onChangeSorts
          * @param id //identificador unico de un sort
@@ -107,7 +107,7 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @param field Campo por el cual se va filtrar
          * @returns
          */
-        showPopoverSortForAdd: (anchorEl: Element, field: Field) => void;
+        showPopoverSortForAdd: (anchorEl: Element, field: SortField) => void;
         /**
          * Muestra la ventan de edición de un sort aplicado
          * @param anchorEl Anchor de elemento desde donde debe emerger

package/components/DynamicSort/store/DynamicSortStore.js

@@ -0,0 +1,227 @@
+import { createStore } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { g as getPurgedInitialSortApplied } from "../helpers/getPurgedInitialSortApplyed.js";
+const updateAvailableFields = (state) => {
+  const newFields = [];
+  for (let index = 0; index < state.fields.length; index++) {
+    let add;
+    const field = state.fields[index];
+    add = true;
+    const fIndx = state.appliedSorts.findIndex((f) => f.field.name === field.name);
+    if (fIndx > -1) {
+      add = false;
+    }
+    if (add) {
+      newFields.push(field);
+    }
+  }
+  state.availableFields = newFields;
+};
+const updateOwnerStateIsValid = (state) => {
+  state.ownerState.isValid = true;
+  for (let index = 0; index < state.appliedSorts.length; index++) {
+    const element = state.appliedSorts[index];
+    if (!element.isSet) {
+      state.ownerState.isValid = false;
+    }
+  }
+};
+const updateAutomatic = (state) => {
+  updateOwnerStateIsValid(state);
+  updateAvailableFields(state);
+  if (state.ownerState.isValid) {
+    if (state.automatic) {
+      state.ownerState.isDirty = false;
+      state.countOnChangeSortsApplyed++;
+    }
+  }
+};
+const createAreaStore = (initProps) => {
+  const startProps = {
+    countOnChangeSortsApplyed: 0,
+    appliedSorts: [],
+    availableFields: [],
+    fnAnchorEl: void 0,
+    popoverSortData: void 0,
+    inputData: "",
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        actions: {
+          /**
+           * TODO: Documentar
+           */
+          init: (initialSortApplyed) => {
+            set((state) => {
+              state.appliedSorts = getPurgedInitialSortApplied(
+                state.fields,
+                initialSortApplyed,
+                state.actions.getFieldByName
+              );
+              updateAutomatic(state);
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          getFieldByName: (name) => {
+            const field = get().fields.find((f) => {
+              return f.name === name;
+            });
+            if (field) {
+              return field;
+            }
+            throw new Error("Field does not exist");
+          },
+          /**
+           * TODO: Documentar
+           */
+          removeSort: (id) => {
+            set((state) => {
+              const index_to_remove = state.appliedSorts.findIndex((f) => id === f.id && !f.fixed);
+              if (index_to_remove > -1) {
+                state.appliedSorts.splice(index_to_remove, 1);
+                updateAutomatic(state);
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          showPopoverSortForAdd: (anchorEl, field) => {
+            set((state) => {
+              state.fnAnchorEl = void 0;
+              state.inputData = "";
+              state.popoverSortData = {
+                openFor: "add",
+                fnAnchorEl: () => anchorEl,
+                field
+              };
+            });
+            get().actions.setInEdition(true);
+          },
+          /**
+           * TODO: Documentar
+           */
+          showPopoverSortForEdit: (anchorEl, sortToEdit) => {
+            set((state) => {
+              state.popoverSortData = {
+                openFor: "edit",
+                fnAnchorEl: () => anchorEl,
+                sort: sortToEdit
+              };
+            });
+            get().actions.setInEdition(true);
+          },
+          /**
+           * TODO: Documentar
+           */
+          hidePopoverSort: (stayInEditon) => {
+            set((state) => {
+              state.popoverSortData = void 0;
+            });
+            get().actions.setInEdition(stayInEditon);
+          },
+          /**
+           * TODO: Documentar
+           */
+          clearSorts: () => {
+            set((state) => {
+              state.appliedSorts = state.appliedSorts.filter((f) => f.fixed);
+              updateAvailableFields(state);
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          fireOnChangeSorts: () => {
+            set((state) => {
+              if (state.ownerState.isValid) {
+                state.ownerState.isDirty = false;
+                state.countOnChangeSortsApplyed++;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          getNewId: () => {
+            return get().appliedSorts.reduce((prev, n) => {
+              return n.id > prev ? n.id : prev;
+            }, 0) + 1;
+          },
+          /**
+           * TODO: Documentar
+           */
+          addSort: (newSort) => {
+            set((state) => {
+              state.appliedSorts.push(newSort);
+              updateAutomatic(state);
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          updateSort: (editSort) => {
+            set((state) => {
+              const index = state.appliedSorts.findIndex((ap) => ap.id === editSort.id);
+              if (index > -1) {
+                state.appliedSorts[index] = editSort;
+              }
+              updateAutomatic(state);
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setInputData: (inputData) => {
+            set((state) => {
+              state.inputData = inputData;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setInEdition: (newInEdition) => {
+            set((state) => {
+              state.ownerState.inEdition = newInEdition;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          openPopoverMenuFields: (anchorEl) => {
+            set((state) => {
+              state.fnAnchorEl = () => anchorEl;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          closePopoverMenuFields: (newInEdition) => {
+            set((state) => {
+              state.fnAnchorEl = void 0;
+              state.ownerState.inEdition = newInEdition || false;
+            });
+          }
+        }
+      })),
+      { name: "Dynamic Sort" }
+    )
+  );
+};
+export {
+  createAreaStore as c
+};

package/components/DynamicSort/store/useDynamicSortStore.js

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { a as DynamicSortContext } from "./DynamicSortContext.js";
+function useDynamicSortStore(selector, equalityFn) {
+  const store = useContext(DynamicSortContext);
+  if (!store) {
+    throw new Error("useDynamicSortStore context must be use inside DynamicSortContext");
+  }
+  return useStore(store, selector, shallow);
+}
+export {
+  useDynamicSortStore as u
+};

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

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { u as useAppliedSortChip } from "./useAppliedSortChip.js";
+import { A as AppliedSortChipStyled, a as AppliedSortChipIconStyled, b as AppliedSortChipInfoStyled, c as AppliedSortChipInfoFieldNameStyled, d as AppliedSortChipInfoOperatorStyled, e as AppliedSortChipRemoveButtonStyled } from "../../slots/DynamicSortSlots.js";
+function AppliedSortChip(props) {
+  const { fixed } = props;
+  const { onEditSort, onDelete, iconFieldUrl, removeIconUrl, labels } = useAppliedSortChip(props);
+  return /* @__PURE__ */ jsxs(AppliedSortChipStyled, { ownerState: {}, children: [
+    iconFieldUrl && /* @__PURE__ */ jsx(AppliedSortChipIconStyled, { onClick: onEditSort, src: iconFieldUrl, ownerState: {} }),
+    /* @__PURE__ */ jsxs(AppliedSortChipInfoStyled, { onClick: onEditSort, ownerState: {}, children: [
+      /* @__PURE__ */ jsx(AppliedSortChipInfoFieldNameStyled, { ownerState: {}, children: labels.labelField }),
+      /* @__PURE__ */ jsx(AppliedSortChipInfoOperatorStyled, { ownerState: {}, children: labels.labelOperator })
+    ] }),
+    !fixed && /* @__PURE__ */ jsx(
+      AppliedSortChipRemoveButtonStyled,
+      {
+        src: removeIconUrl,
+        size: "small",
+        dictionaryTooltipId: "dynamic_sort.tooltip_clear_sort",
+        onClick: onDelete,
+        ownerState: {}
+      }
+    )
+  ] });
+}
+export {
+  AppliedSortChip as A
+};