@m4l/components 9.1.124 → 9.1.126

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

@@ -1,15 +1,16 @@
 import { useModuleDictionary } from "@m4l/core";
 import { u as useDynamicFilterStore } from "../../store/useDynamicFilterStore.js";
+import { shallow } from "zustand/shallow";
 function usePopoverMenuFields() {
   const { getLabel } = useModuleDictionary();
-  const fnAnchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
+  const openPopoverMenuFields = useDynamicFilterStore((state) => state.isOpenPopoverMenuFields);
+  const elementRef = useDynamicFilterStore((state) => state.elementRef, shallow);
+  const isOpenPopoverMenuFields = useDynamicFilterStore((state) => state.isOpenPopoverMenuFields);
   const { showPopoverFilterForAdd, closePopoverMenuFields } = useDynamicFilterStore(
     (state) => state.actions
   );
   function handleOpenPopUpClickItem(_event, field) {
-    if (fnAnchorEl) {
-      showPopoverFilterForAdd(fnAnchorEl(), field);
-    }
+    showPopoverFilterForAdd(field);
   }
   function handleClosePopover() {
     closePopoverMenuFields(false);
@@ -18,7 +19,9 @@ function usePopoverMenuFields() {
     return field.label ?? getLabel(field.dictionaryId);
   }
   return {
-    fnAnchorEl,
+    elementRef,
+    openPopoverMenuFields,
+    isOpenPopoverMenuFields,
     getItemLabel,
     handleClosePopover,
     handleOpenPopUpClickItem

package/components/DynamicFilter/types.d.ts

@@ -1,9 +1,10 @@
 import { Theme } from '@mui/material/styles';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Maybe } from '@m4l/core';
 import { RHFAutocompleteAsyncBaseProps } from '../hook-form/RHFAutocompleteAsync/types';
 import { DynamicFilterSlots } from './slots';
-export type FieldType = 'number' | 'string' | 'boolean' | 'datetime' | 'select';
+import { RHFSelectProps } from '../hook-form/RHFSelect';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+export type FieldType = 'number' | 'string' | 'boolean' | 'datetime' | 'select' | 'selectAsync';
 export type OperandType = number | string | boolean | Date | [] | object;
 export type OperandInitialFilterType = number | string | boolean | [] | object;
 export type OperatorB = 'b';
@@ -14,18 +15,21 @@ export type BooleanOperator = 'e' | 'ne';
 export type DateTimeOperator = OperatorB | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
 export type SelectOperator = 'in' | 'nin';
 export type FieldPresence = 'initialized' | 'fixed' | 'optional';
-export type FormOperandSelect = Record<string, any>;
+export type FormOperandSelectAsync = Record<string, any>;
+export type FormOperandSelect = string | number;
 /**
  * Posibles valores para el operandsArray para el caso del select o otros fields
  */
-export type OperandsArrayValues = Array<FormOperandSelect>;
+export type OperandsSelectAsyncArrayValues = Array<FormOperandSelectAsync>;
+export type OperandsSelectArrayValues = Array<FormOperandSelect>;
 export type FieldTypeOperator<T extends FieldType> = T extends 'boolean' ? BooleanOperator : T extends 'datetime' ? DateTimeOperator : T extends 'number' ? NumberOperator : T extends 'select' ? SelectOperator : T extends 'string' ? StringOperator : T;
-export type FieldTypeOperand<T extends FieldType> = T extends 'boolean' ? boolean : T extends 'datetime' ? Date : T extends 'number' ? number : T extends 'string' ? string : T extends 'select' ? OperandsArrayValues : FieldType;
-type SelectOptions = Pick<RHFAutocompleteAsyncBaseProps<{
+export type FieldTypeOperand<T extends FieldType> = T extends 'boolean' ? boolean : T extends 'datetime' ? Date : T extends 'number' ? number : T extends 'string' ? string : T extends 'select' ? OperandsSelectArrayValues : T extends 'selectAsync' ? OperandsSelectAsyncArrayValues : FieldType;
+type SelectAsyncOptions = Pick<RHFAutocompleteAsyncBaseProps<{
     [key: string]: any;
 }>, 'type' | 'endPoint' | 'getOptionLabel' | 'isOptionEqualToValue' | 'multiple' | 'autoComplete' | 'autoCapitalize' | 'parms' | 'timeout'> & {
     getOptionId: (option: Record<string, any>) => string | number;
 };
+type SelectOptions = Omit<RHFSelectProps<any, true>, 'name'>;
 export interface FieldBase<T extends FieldType = FieldType> {
     name: string;
     type: T;
@@ -37,6 +41,10 @@ export interface FieldBase<T extends FieldType = FieldType> {
     defaultOperand2?: Maybe<FieldTypeOperand<T>>;
     defaultOperandsArray?: Maybe<FieldTypeOperand<T>>;
     selectOptions?: SelectOptions;
+    selectAsyncOptions?: SelectAsyncOptions;
+}
+export interface FieldWithSelectAsync<T extends 'selectAsync'> extends FieldBase<T> {
+    selectAsyncOptions: SelectAsyncOptions;
 }
 export interface FieldWithSelect<T extends 'select'> extends FieldBase<T> {
     selectOptions: SelectOptions;
@@ -49,66 +57,71 @@ export interface Label<T extends FieldType = FieldType> extends FieldBase<T> {
     label: string;
     dictionaryId?: undefined;
 }
-export type Field<T extends FieldType = FieldType> = T extends 'select' ? FieldWithSelect<T> & (FieldDictionaryId<T> | Label<T>) : FieldDictionaryId<T> | Label<T>;
+export type FilterField<T extends FieldType = FieldType> = T extends 'selectAsync' ? FieldWithSelectAsync<T> & (FieldDictionaryId<T> | Label<T>) : T extends 'select' ? FieldWithSelect<T> & (FieldDictionaryId<T> | Label<T>) : FieldDictionaryId<T> | Label<T>;
 export interface BaseApplyFilter<T extends FieldType = FieldType> {
     id: number;
-    field: Field<T>;
+    field: FilterField<T>;
     isSet: boolean;
     fixed: boolean;
 }
 /**
  * Base para el tipado de overloading de los valores de un filtro
  */
-export interface FilterValueBase {
-    fieldType: FieldType;
+export interface FilterValueBase<T extends FieldType = FieldType> {
+    fieldType: T;
     operator: Operator;
     operand1?: Maybe<OperandType>;
     operand2?: Maybe<OperandType>;
-    operandsArray?: OperandsArrayValues;
+    operandsArray?: T extends 'selectAsync' ? OperandsSelectAsyncArrayValues : T extends 'select' ? OperandsSelectArrayValues : never;
 }
-export interface FilterValueBoolean extends FilterValueBase {
+export interface FilterValueBoolean extends FilterValueBase<'boolean'> {
     fieldType: 'boolean';
     operator: BooleanOperator;
     operand1: boolean;
 }
-export interface FilterValueDateTimeNoB extends FilterValueBase {
+export interface FilterValueDateTimeNoB extends FilterValueBase<'datetime'> {
     fieldType: 'datetime';
     operator: Exclude<DateTimeOperator, OperatorB>;
     operand1: Date;
 }
-export interface FilterValueDateTimeB extends FilterValueBase {
+export interface FilterValueDateTimeB extends FilterValueBase<'datetime'> {
     fieldType: 'datetime';
     operator: OperatorB;
     operand1: Date;
     operand2: Date;
 }
 export type FilterValueDateTime = FilterValueDateTimeNoB | FilterValueDateTimeB;
-export interface FilterValueNumberNoB extends FilterValueBase {
+export interface FilterValueNumberNoB extends FilterValueBase<'number'> {
     fieldType: 'number';
     operator: Exclude<NumberOperator, OperatorB>;
     operand1: Maybe<number>;
 }
-export interface FilterValueNumberB extends FilterValueBase {
+export interface FilterValueNumberB extends FilterValueBase<'number'> {
     fieldType: 'number';
     operator: OperatorB;
     operand1: Maybe<number>;
     operand2: Maybe<number>;
 }
 export type FilterValueNumber = FilterValueNumberNoB | FilterValueNumberB;
-export interface FilterValueString extends FilterValueBase {
+export interface FilterValueString extends FilterValueBase<'string'> {
     fieldType: 'string';
     operator: StringOperator;
     operand1: string;
 }
-export interface FilterValueSelect extends FilterValueBase {
+export interface FilterValueSelectAsync extends FilterValueBase<'selectAsync'> {
+    fieldType: 'selectAsync';
+    operator: SelectOperator;
+    operandsArray: OperandsSelectAsyncArrayValues;
+}
+export interface FilterValueSelect extends FilterValueBase<'select'> {
     fieldType: 'select';
     operator: SelectOperator;
-    operandsArray: OperandsArrayValues;
+    operandsArray: OperandsSelectArrayValues;
 }
 /**
  * Valor de un filtro sobrecargado para cada tipo de dato
  */
-export type FilterValue = FilterValueBoolean | FilterValueDateTime | FilterValueNumber | FilterValueString | FilterValueSelect;
+export type FilterValue = FilterValueBoolean | FilterValueDateTime | FilterValueNumber | FilterValueString | FilterValueSelectAsync | FilterValueSelect;
 /**
  * Estado del Filtro + Valor valor del filtro.
  */
@@ -119,9 +132,10 @@ export type FilterFieldApplied<T extends FieldType = FieldType> = BaseApplyFilte
 export interface RawFilterFieldApply {
     n: string;
     o: Operator;
+    ft: FieldType;
     o1: Maybe<OperandType>;
     o2: Maybe<OperandType>;
-    oa: Maybe<OperandType>;
+    oa: Maybe<OperandType[]>;
 }
 export type FilterToEditApply = FilterFieldApplied;
 export interface DataTypeFilerLabels {
@@ -150,7 +164,7 @@ export type FormOperandBoolean = {
 export type FormOperandDateTime = Date;
 export type FormOperandNumber = number;
 export type FormOperandString = string;
-export type FormOperand = FormOperandBoolean | FormOperandDateTime | FormOperandNumber | FormOperandString | FormOperandSelect;
+export type FormOperand = FormOperandBoolean | FormOperandDateTime | FormOperandNumber | FormOperandString | FormOperandSelectAsync;
 /**
  * Base para el tipado de overloading de los valor de un filtro
  */
@@ -180,6 +194,11 @@ export interface FormFilterValueString extends FormFilterValueBase {
     formValueOperator: FormOperator<StringOperator>;
     formValueOperand1: string;
 }
+export interface FormFilterValueSelectAsync extends FormFilterValueBase {
+    fieldType: 'selectAsync';
+    formValueOperator: FormOperator<SelectOperator>;
+    formValueOperandsArray: Array<FormOperandSelectAsync> | FormOperandSelectAsync;
+}
 export interface FormFilterValueSelect extends FormFilterValueBase {
     fieldType: 'select';
     formValueOperator: FormOperator<SelectOperator>;
@@ -188,7 +207,7 @@ export interface FormFilterValueSelect extends FormFilterValueBase {
 /**
  * Valor de un filtro sobrecargado para cada tipo de dato
  */
-export type FormFilterValue = FormFilterValueBoolean | FormFilterValueDateTime | FormFilterValueNumber | FormFilterValueString | FormFilterValueSelect;
+export type FormFilterValue = FormFilterValueBoolean | FormFilterValueDateTime | FormFilterValueNumber | FormFilterValueString | FormFilterValueSelectAsync | FormFilterValueSelect;
 /**
  * Estado del Filtro + Valor valor del filtro.
  */
@@ -210,6 +229,14 @@ rawFilters: Array<RawFilterFieldApply>) => void;
  * Propiedades que recibe el componente DynamicFilter
  */
 export interface DynamicFilterProps {
+    /**
+     *  "storeId" identificador del store
+     */
+    storeId?: string;
+    /**
+     *  "storeDevtoolsEnabled" determina si se debe usar devtools para el store
+     */
+    storeDevtoolsEnabled?: boolean;
     /**
      *  Define si el filtro se ejecuta automáticamente cuando se agrega o se modifica un filtro.
      *  @default true
@@ -221,7 +248,7 @@ export interface DynamicFilterProps {
      */
     withAllField?: boolean;
     /** Array con la configuración de cada campo por el que se podrá filtrar. */
-    fields: Array<Field>;
+    fields: Array<FilterField>;
     /** Array con la configuración de cada campo por el que se podrá filtrar.*/
     initialAppliedFilters?: Array<InitialFilterApplied>;
     /** Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion el boton de filtrar */
@@ -261,5 +288,5 @@ export interface OwnerState {
 export interface DynamicFilterOwnerState extends DynamicFilterProps, OwnerState {
 }
 export type DynamicFilterSlotsType = keyof typeof DynamicFilterSlots;
-export type DynamicFilterStyles = Partial<OverridesStyleRules<DynamicFilterSlotsType, 'M4LDynamicFilter', Theme> | undefined> | undefined;
+export type DynamicFilterStyles = M4LOverridesStyleRules<DynamicFilterSlotsType, 'M4LDynamicFilter', Theme>;
 export {};

package/components/DynamicSort/DynamicSort.js

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

package/components/DynamicSort/DynamicSort.styles.js

@@ -0,0 +1,365 @@
+import { alpha } from "@mui/material";
+import { c as containerQuery } from "../../utils/containerQuery.js";
+const CONTAINER_QUERY_NAME = "dynamic";
+const dynamicSortStyles = {
+  root: {
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    width: "100%",
+    height: "auto",
+    padding: 0
+  },
+  /**
+   * TODO: Documentar
+   */
+  innerContainer: ({ theme, ownerState }) => ({
+    display: "grid",
+    gridTemplateColumns: "auto 1fr auto",
+    gridTemplateAreas: '"input-sort applied-sorts actions-sort"',
+    alignItems: "center",
+    justifyContent: "flex-start",
+    width: "100%",
+    height: "fit-content",
+    border: "1px solid",
+    borderRadius: "4px",
+    borderColor: theme.vars.palette.border?.default,
+    background: theme.vars.palette.background.default,
+    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
+      minHeight: "auto",
+      height: "auto",
+      gridTemplateColumns: "1fr auto",
+      gridTemplateAreas: `"input-sort  actions-sort"
+                          "applied-sorts applied-sorts"`
+    },
+    "&:focus-within": {
+      borderColor: !ownerState.isValid ? theme.vars.palette.error.main : theme.vars.palette.primary.active
+    },
+    ...ownerState.isValid === false ? {
+      borderColor: theme.vars.palette.error.main
+    } : {}
+  }),
+  /**
+   * TODO: Documentar
+   */
+  inputSort: ({ theme }) => ({
+    gridArea: "input-sort",
+    display: "flex",
+    flexDirection: "row",
+    gap: "8px",
+    padding: "4px 6px 4px 4px",
+    height: "100%",
+    maxWidth: "135px",
+    width: "100%",
+    alignItems: "center",
+    borderTopLeftRadius: "4px",
+    borderBottomLeftRadius: "4px",
+    borderRight: "1px solid",
+    borderColor: theme.vars.palette.border?.default,
+    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
+      height: "32px",
+      width: "100%",
+      maxWidth: "100%",
+      borderRight: "none"
+    },
+    [theme.breakpoints.down("sm")]: {
+      height: "44px",
+      justifyContent: "center"
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  inputSortInput: ({ theme }) => ({
+    ...theme.typography.body,
+    background: theme.vars.palette.background.default,
+    color: theme.vars.palette.text.secondary,
+    border: "1px solid",
+    borderColor: "transparent",
+    padding: "4px 8px",
+    width: "100%",
+    height: "100%",
+    "&::placeholder": {
+      color: theme.vars.palette.text.secondary
+    },
+    "&:focus-visible": {
+      color: theme.vars.palette.text.secondary,
+      border: "1px solid",
+      borderColor: theme.vars.palette.primary.opacity,
+      background: theme.vars.palette.primary.opacity,
+      BorderRadius: "2px",
+      outline: "none!important"
+    },
+    "&:hover": {
+      borderColor: theme.vars.palette.primary?.toneOpacity,
+      background: theme.vars.palette.background?.hover
+    }
+  }),
+  inputSortIcon: {},
+  /**
+   * TODO: Documentar
+   */
+  appliedSorts: ({ theme }) => ({
+    gridArea: "applied-sorts",
+    width: "100%",
+    height: "fit-content",
+    paddingLeft: theme.spacing(1),
+    borderLeft: "none",
+    margin: "0px",
+    padding: "0px 4px",
+    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
+      height: "auto",
+      padding: "4px",
+      display: "flex",
+      borderTop: "1px solid ",
+      borderColor: theme.vars.palette.border?.secondary,
+      "&:has(div[class*=appliedSortInnerContainer]:empty), &:empty": {
+        display: "none"
+      }
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  appliedSortInnerContainer: ({ theme }) => ({
+    padding: "2px",
+    gap: "4px",
+    height: "fit-content",
+    display: "flex",
+    flexWrap: "nowrap",
+    width: "100%",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
+      height: "32px",
+      padding: 0,
+      margin: 0,
+      border: 0
+    },
+    [theme.breakpoints.down("sm")]: {
+      padding: 0,
+      height: "44px"
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  appliedSortChip: ({ theme }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "visible",
+    width: "auto",
+    height: "24px",
+    minHeight: theme.spacing(3),
+    paddingLeft: theme.spacing(1),
+    borderColor: alpha(`${theme.colorSchemes.finalTheme.palette.divider}`, 0.1),
+    border: "none",
+    borderRadius: "4px",
+    backgroundColor: theme.vars.palette.background?.surface,
+    color: theme.vars.palette.text.secondary,
+    ...theme.typography.body,
+    [theme.breakpoints.down("sm")]: {
+      height: "fit-content"
+    }
+  }),
+  appliedSortChipIcon: {},
+  /**
+   * TODO: Documentar
+   */
+  appliedSortChipInfo: ({ theme }) => ({
+    ...theme.typography.body2,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "auto",
+    height: "100%",
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    whiteSpace: "nowrap",
+    border: "none",
+    backgroundColor: "transparent"
+  }),
+  /**
+   * TODO: Documentar
+   */
+  appliedSortChipInfoFieldName: ({ theme }) => ({
+    ...theme.typography.subtitle2,
+    color: theme.vars.palette.text.secondary
+  }),
+  /**
+   * TODO: Documentar
+   */
+  appliedSortChipInfoOperator: ({ theme }) => ({
+    ...theme.typography.body2,
+    marginLeft: theme.spacing(1.5),
+    fontStyle: "italic",
+    color: theme.vars.palette.text.secondary
+  }),
+  /**
+   * TODO: Documentar
+   */
+  appliedSortChipInfoOperands: ({ theme }) => ({
+    ...theme.typography.body2,
+    marginLeft: theme.spacing(1.5),
+    color: theme.vars.palette.text.secondary
+  }),
+  appliedSortChipRemoveButton: {},
+  /**
+   * TODO: Documentar
+   */
+  actions: ({ theme }) => ({
+    gridArea: "actions-sort",
+    display: "flex",
+    flexDirection: "row",
+    gap: "8px",
+    padding: "4px",
+    height: "100%",
+    alignItems: "center",
+    borderTopRightRadius: "4px",
+    borderBottomRightRadius: "4px",
+    borderLeft: "1px solid",
+    borderColor: theme.vars.palette.border?.default
+  }),
+  actionsSkeletonButton: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "24px",
+    height: "24px"
+  },
+  actionsClearButton: {},
+  /**
+   * TODO: Documentar
+   */
+  actionsSubmitButton: ({ theme, ownerState }) => ({
+    ...ownerState.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.main}` } : {}
+  }),
+  /**
+   * TODO: Documentar
+   */
+  popoverMenu: ({ theme }) => ({
+    "& .MuiPaper-root": {
+      display: "flex",
+      flexDirection: "column",
+      padding: "8px !important",
+      gap: "4px",
+      borderRadius: "6px",
+      [theme.breakpoints.down("md")]: {
+        gap: "4px"
+      },
+      "& .M4LPopover-arrowStyle": {
+        display: "none"
+      }
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  popoverMenuItem: ({ theme }) => ({
+    paddingLeft: "4px",
+    paddingRight: "4px",
+    borderRadius: "4px",
+    "&:hover": {
+      ...theme.typography.body,
+      color: theme.vars.palette.primary?.hover,
+      background: theme.vars.palette.background?.surface,
+      borderRadius: "4px",
+      padding: "4px 12px 4px 8px"
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  popoverMenuItemLabel: ({ theme }) => ({
+    ...theme.typography.body,
+    color: theme.vars.palette.text.primary
+  }),
+  popoverMenuItemIcon: {},
+  /**
+   * TODO: Documentar
+   */
+  popoverSort: ({ theme }) => ({
+    width: "auto",
+    "& .MuiPaper-root": {
+      padding: "0 !important",
+      minWidth: "220px",
+      maxWidth: "100%",
+      minHeight: "auto",
+      boxShadow: theme.customShadows?.z3,
+      "& .M4LPopover-arrowStyle": {
+        display: "none"
+      },
+      "& .M4LRHFormProvider-root": {
+        gap: "0px",
+        width: "max-content",
+        minWidth: "220px",
+        maxWidth: "420px",
+        height: "fit-content"
+      }
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  popoverSortHeader: ({ theme }) => ({
+    backgroundColor: theme.vars.palette.background?.surface,
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "4px 4px 4px 8px",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px",
+    borderBottom: "0px",
+    height: "28px",
+    [theme.breakpoints.down("sm")]: {
+      height: "36px"
+    }
+  }),
+  popoverSortHeaderIcon: {},
+  /**
+   * TODO: Documentar
+   */
+  popoverSortHeaderTitle: ({ theme }) => ({
+    ...theme.typography.paragraphDens,
+    color: theme.vars.palette.text.primary
+  }),
+  /**
+   * TODO: Documentar
+   */
+  popoverSortContainerFields: ({ theme }) => ({
+    height: "fit-content",
+    "& > div": {
+      display: "flex",
+      height: "auto",
+      flexDirection: "column",
+      padding: "12px 12px 0 12px",
+      gap: "8px",
+      [theme.breakpoints.down("sm")]: {
+        padding: "16px 16px 0 16px",
+        gap: "12px"
+      }
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  popoverSortActions: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: "16px",
+    padding: "16px 12px 12px 12px !important",
+    [theme.breakpoints.down("sm")]: {
+      padding: "24px 16px 16px 16px !important"
+    },
+    "& > .M4LButton-root": {
+      height: "24px",
+      minHeight: "24px",
+      [theme.breakpoints.down("sm")]: {
+        height: "36px"
+      }
+    }
+  })
+};
+export {
+  dynamicSortStyles as d
+};

package/components/DynamicSort/constants.js

@@ -0,0 +1,16 @@
+const DYNAMIC_SORT_KEY_COMPONENT = "M4LDynamicSort";
+const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
+const ASSETS = {
+  refresh: "restart.svg",
+  sort: "sort.svg",
+  close: "close.svg",
+  list_bulleted: "list_bulleted.svg",
+  clean: "clean.svg"
+};
+const SORT_OPERATORS = ["asc", "desc"];
+export {
+  ASSETS_URL as A,
+  DYNAMIC_SORT_KEY_COMPONENT as D,
+  SORT_OPERATORS as S,
+  ASSETS as a
+};

package/components/DynamicSort/dictionary.js

@@ -0,0 +1,28 @@
+import { g as getCommonActionsDictionary } from "../CommonActions/dictionary.js";
+import { g as getRHFAutocompleteComponentsDictionary } from "../hook-form/RHFAutocomplete/dictionary.js";
+const DYNAMICSORT_DICTIONARY_ID = "dynamic_sort";
+function getDynamicSortComponentsDictionary() {
+  return [DYNAMICSORT_DICTIONARY_ID].concat(
+    getCommonActionsDictionary().concat(getRHFAutocompleteComponentsDictionary())
+  );
+}
+const DICCTIONARY = {
+  input_placeholder: "input_placeholder",
+  label_ascending: "Ascending",
+  label_descending: "Descending",
+  sort_tooltip_refresh: "sort_tooltip_refresh",
+  sort_tooltip_dirty: "sort_tooltip_dirty",
+  sort_tooltip_invalid: "sort_tooltip_invalid",
+  tooltip_clear_sort: "tooltip_clear_sort",
+  operator_asc: "operator_asc",
+  operator_desc: "operator_desc",
+  label_boolean_operand1: "label_boolean_operand1"
+};
+const getDynamicSortDictionary = (key) => {
+  return `${DYNAMICSORT_DICTIONARY_ID}.${key}`;
+};
+export {
+  DICCTIONARY as D,
+  getDynamicSortComponentsDictionary as a,
+  getDynamicSortDictionary as g
+};

package/components/DynamicSort/helpers/formatToInitialSorts.js

@@ -0,0 +1,12 @@
+const formatToInitialSorts = (appliedSorts) => {
+  return appliedSorts.map((appliedSort) => {
+    const output = {
+      name: appliedSort.field.name,
+      operator: appliedSort.operator ? "asc" : "desc"
+    };
+    return output;
+  });
+};
+export {
+  formatToInitialSorts as f
+};

package/components/DynamicSort/helpers/formatToRowSort.js

@@ -0,0 +1,10 @@
+const formatToRowSort = (appliedSorts) => {
+  const sortsApplied = appliedSorts.map((appliedSort) => ({
+    f: appliedSort.field.name,
+    o: appliedSort.operator
+  }));
+  return sortsApplied;
+};
+export {
+  formatToRowSort as f
+};