@m4l/components 9.1.130 → 9.1.132

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

@@ -1,181 +1,6 @@
-import { GetLabelType } from '@m4l/core';
 import { WritableDraft } from 'immer/dist/internal';
-import { SortField, SortFieldApplied, SortToEditApply, InitialSortApplied, OwnerState } from '../types';
+import { DynamicSortStateWithActions, InitialStoreProps } from './type';
 export type OpenFor = 'add' | 'edit';
-export interface PopoverSortDataBase {
-    /**
-     *  "openFor" motivo de apertura del popup
-     */
-    openFor: OpenFor;
-    /**
-     *  "fnAnchorEl" Anchor para ubicar el popup y se pone como función debido a que Immer no soporta un draft de Element
-     */
-    fnAnchorEl: () => Element;
-}
-export interface PopoverSortDataAdd extends PopoverSortDataBase {
-    openFor: 'add';
-    /**
-     *  "field" Campo por el cual se va a filtrar
-     */
-    field: SortField;
-}
-export interface PopoverSortDataEdit extends PopoverSortDataBase {
-    openFor: 'edit';
-    /**
-     *  "filter" sort que se va a editar
-     */
-    sort: SortFieldApplied;
-}
-/**
- *
- * Tipo usado para cuado se va agregar o modificar un sort
- */
-export type PopoverSortData = PopoverSortDataAdd | PopoverSortDataEdit;
-/**
- * Estados que se actulizan por fuera del store, a través de hooks
- */
-export type ExternalOwnerState = Pick<OwnerState, 'isMobile' | 'isSkeleton'>;
-/**
- * Interface que define el estado del componente
- */
-export interface DynamicSortState {
-    /**
-     *  "fields" Campos por los que se puede filtrar
-     */
-    fields: Array<SortField>;
-    /**
-     *  "ownerState" estado a nivel de clases del componente
-     */
-    ownerState: OwnerState;
-    /**
-     *  "automatic" Configura si el sort se ejecuta automaticamente cuando se agrega o se modifica un sort
-     */
-    automatic: boolean;
-    /**
-     *  Funcion que retorna el elemento (InputSort) desde donde se desprende el listado de campos
-     *               Si no está definida, el menú de campos no se muestra
-     * @returns
-     */
-    fnAnchorEl?: () => Element;
-    /**
-     *  "inputData" texto en el InputSort
-     */
-    inputData: string;
-    /**
-     * Campos disponibles para filtrar
-     */
-    availableFields: Array<SortField>;
-    /**
-     *  "applyedFilters" sorts aplicados actualmente
-     */
-    appliedSorts: Array<SortFieldApplied>;
-    /**
-     *  "countOnChangeSortsApplyed" Cantidad de veces que el sort se ha aplicado, sirve para suscribirse y aplicar el sort.
-     *  Esto se debe hacer porque no se puede lanzar un handler que modifica valores, durante una renderización.
-     */
-    countOnChangeSortsApplyed: number;
-    /** popoverFilterData: para emerger el popuup de modificación campos  */
-    popoverSortData?: PopoverSortData;
-    getLabel: GetLabelType;
-    /**
-     *  dataTestId:
-     *  Esta propiedad sirve para generar identificadores únicos.
-     */
-    dataTestId: string;
-}
-export interface DynamicSortStateWithActions extends DynamicSortState {
-    actions: {
-        /**
-         * inicializa el estado del componente con los sorts que provienen desde afuera
-         * @param initialSortApplyed sorts iniciales
-         */
-        init: (initialSortApplyed: Array<InitialSortApplied>) => void;
-        /**
-         * Objetiene el Campo dado el nombre
-         * @param name
-         * @returns Field o undefined si no se encuentra
-         */
-        getFieldByName: (name: string) => SortField;
-        /**
-         * remueve un sort si existe, y dispara el trigger de onChangeSorts
-         * @param id //identificador unico de un sort
-         */
-        removeSort: (id: number) => void;
-        /**
-         *
-         * @param anchorEl Elemento de donde va emerger el popup
-         * @param field Campo por el cual se va filtrar
-         * @returns
-         */
-        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
-         * @param sortToEdit sort a editar
-         * @returns
-         */
-        showPopoverSortForEdit: (anchorEl: Element, sortToEdit: SortFieldApplied) => void;
-        /**
-         * Oculta la ventana de edición
-         * @param stayInEditon determina si continua en edicióin
-         */
-        hidePopoverSort: (stayInEditon: boolean) => void;
-        /**
-         * Limpia todos los sorts aplicados menos los fixed
-         */
-        clearSorts: VoidFunction;
-        /**
-         * llama al fireOnChangeSorts proporcionado en los props del componente
-         */
-        fireOnChangeSorts: VoidFunction;
-        /**
-         * Función encargada de encontrar un Id par un nuevo sort
-         * @returns Id de sort
-         */
-        getNewId: () => number;
-        /**
-         * Agrega un sort setedo y correcto a los sorts aplicados (applyedFilters)
-         * @param newSort Sort a agregar
-         * @returns
-         */
-        addSort: (newSort: SortFieldApplied) => void;
-        /**
-         * Modifica un sort que se encuentra en applyedFilters
-         * @param sortToEdit sort a editar
-         * @returns
-         */
-        updateSort: (sortToEdit: SortToEditApply) => void;
-        /**
-         * Modifica el texto que se visuliza en el InputSort
-         * @param text texto en el input
-         * @returns
-         */
-        setInputData: (inputData: string) => void;
-        /**
-         * Modifica el estado de edición del componente
-         * @param newInEdition Estado de edición
-         * @returns
-         */
-        setInEdition: (newInEdition: boolean) => void;
-        /**
-         * Modifica los estados que se actualizan externamente al Store
-         * @param newIsMobile
-         * @returns
-         */
-        setExternalState: (newExternalState: ExternalOwnerState) => void;
-        /**
-         * Establece la función de apertura del menuu de campos
-         * @param anchorEl
-         * @returns
-         */
-        openPopoverMenuFields: (anchorEl: Element) => void;
-        /**
-         * Limpia la función de apertura del menu de campos (por el valor anchorEl = undefined)
-         */
-        closePopoverMenuFields: (newInEdition?: boolean) => void;
-    };
-}
-type InitialStoreProps = Pick<DynamicSortState, 'automatic' | 'fields' | 'getLabel' | 'ownerState' | 'dataTestId'>;
 /**
  *  Crea el store de zustand para el componente DynamicSort
  * @param initProps Variables iniciales que necesita store para poder inicializarlo
@@ -191,4 +16,3 @@ export declare const createAreaStore: (initProps: InitialStoreProps) => Omit<Omi
     } | undefined): void;
 };
 export type DynamicSortStore = ReturnType<typeof createAreaStore>;
-export {};

package/components/DynamicSort/store/DynamicSortStore.js

@@ -66,7 +66,7 @@ const createAreaStore = (initProps) => {
             });
           },
           /**
-           * TODO: Documentar
+           * Funcion para obtener un Field a través del nombre
            */
           getFieldByName: (name) => {
             const field = get().fields.find((f) => {
@@ -215,6 +215,15 @@ const createAreaStore = (initProps) => {
               state.fnAnchorEl = void 0;
               state.ownerState.inEdition = newInEdition || false;
             });
+          },
+          /**
+           * actualiza el tamaño del componente
+           */
+          setSize: (newSize) => {
+            set((state) => {
+              state.size = newSize;
+              state.ownerState.size = newSize;
+            });
           }
         }
       })),

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

@@ -0,0 +1,186 @@
+import { GetLabelType } from '@m4l/core';
+import { Sizes } from '@m4l/styles';
+import { SortField, SortFieldApplied, SortToEditApply, InitialSortApplied, OwnerState } from '../types';
+export type OpenFor = 'add' | 'edit';
+export interface PopoverSortDataBase {
+    /**
+     *  "openFor" motivo de apertura del popup
+     */
+    openFor: OpenFor;
+    /**
+     *  "fnAnchorEl" Anchor para ubicar el popup y se pone como función debido a que Immer no soporta un draft de Element
+     */
+    fnAnchorEl: () => Element;
+}
+export interface PopoverSortDataAdd extends PopoverSortDataBase {
+    openFor: 'add';
+    /**
+     *  "field" Campo por el cual se va a filtrar
+     */
+    field: SortField;
+}
+export interface PopoverSortDataEdit extends PopoverSortDataBase {
+    openFor: 'edit';
+    /**
+     *  "filter" sort que se va a editar
+     */
+    sort: SortFieldApplied;
+}
+/**
+ *
+ * Tipo usado para cuado se va agregar o modificar un sort
+ */
+export type PopoverSortData = PopoverSortDataAdd | PopoverSortDataEdit;
+/**
+ * Estados que se actulizan por fuera del store, a través de hooks
+ */
+export type ExternalOwnerState = Pick<OwnerState, 'isMobile' | 'isSkeleton'>;
+/**
+ * Interface que define el estado del componente
+ */
+export interface DynamicSortState {
+    /**
+     *  "fields" Campos por los que se puede filtrar
+     */
+    fields: Array<SortField>;
+    /**
+     *  "ownerState" estado a nivel de clases del componente
+     */
+    ownerState: OwnerState;
+    /**
+     *  "automatic" Configura si el sort se ejecuta automaticamente cuando se agrega o se modifica un sort
+     */
+    automatic: boolean;
+    /**
+     *  Funcion que retorna el elemento (InputSort) desde donde se desprende el listado de campos
+     *               Si no está definida, el menú de campos no se muestra
+     * @returns
+     */
+    fnAnchorEl?: () => Element;
+    /**
+     *  "inputData" texto en el InputSort
+     */
+    inputData: string;
+    /**
+     * Campos disponibles para filtrar
+     */
+    availableFields: Array<SortField>;
+    /**
+     *  "applyedFilters" sorts aplicados actualmente
+     */
+    appliedSorts: Array<SortFieldApplied>;
+    /**
+     *  "countOnChangeSortsApplyed" Cantidad de veces que el sort se ha aplicado, sirve para suscribirse y aplicar el sort.
+     *  Esto se debe hacer porque no se puede lanzar un handler que modifica valores, durante una renderización.
+     */
+    countOnChangeSortsApplyed: number;
+    /** popoverFilterData: para emerger el popuup de modificación campos  */
+    popoverSortData?: PopoverSortData;
+    getLabel: GetLabelType;
+    /**
+     *  dataTestId:
+     *  Esta propiedad sirve para generar identificadores únicos.
+     */
+    dataTestId: string;
+    /**
+     * size: tamaño del componente
+     */
+    size: Extract<Sizes, 'small' | 'medium'>;
+}
+export interface DynamicSortStateWithActions extends DynamicSortState {
+    actions: {
+        /**
+         * inicializa el estado del componente con los sorts que provienen desde afuera
+         * @param initialSortApplyed sorts iniciales
+         */
+        init: (initialSortApplyed: Array<InitialSortApplied>) => void;
+        /**
+         * Objetiene el Campo dado el nombre
+         * @param name
+         * @returns Field o undefined si no se encuentra
+         */
+        getFieldByName: (name: string) => SortField;
+        /**
+         * remueve un sort si existe, y dispara el trigger de onChangeSorts
+         * @param id //identificador unico de un sort
+         */
+        removeSort: (id: number) => void;
+        /**
+         *
+         * @param anchorEl Elemento de donde va emerger el popup
+         * @param field Campo por el cual se va filtrar
+         * @returns
+         */
+        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
+         * @param sortToEdit sort a editar
+         * @returns
+         */
+        showPopoverSortForEdit: (anchorEl: Element, sortToEdit: SortFieldApplied) => void;
+        /**
+         * Oculta la ventana de edición
+         * @param stayInEditon determina si continua en edicióin
+         */
+        hidePopoverSort: (stayInEditon: boolean) => void;
+        /**
+         * Limpia todos los sorts aplicados menos los fixed
+         */
+        clearSorts: VoidFunction;
+        /**
+         * llama al fireOnChangeSorts proporcionado en los props del componente
+         */
+        fireOnChangeSorts: VoidFunction;
+        /**
+         * Función encargada de encontrar un Id par un nuevo sort
+         * @returns Id de sort
+         */
+        getNewId: () => number;
+        /**
+         * Agrega un sort setedo y correcto a los sorts aplicados (applyedFilters)
+         * @param newSort Sort a agregar
+         * @returns
+         */
+        addSort: (newSort: SortFieldApplied) => void;
+        /**
+         * Modifica un sort que se encuentra en applyedFilters
+         * @param sortToEdit sort a editar
+         * @returns
+         */
+        updateSort: (sortToEdit: SortToEditApply) => void;
+        /**
+         * Modifica el texto que se visuliza en el InputSort
+         * @param text texto en el input
+         * @returns
+         */
+        setInputData: (inputData: string) => void;
+        /**
+         * Modifica el estado de edición del componente
+         * @param newInEdition Estado de edición
+         * @returns
+         */
+        setInEdition: (newInEdition: boolean) => void;
+        /**
+         * Modifica los estados que se actualizan externamente al Store
+         * @param newIsMobile
+         * @returns
+         */
+        setExternalState: (newExternalState: ExternalOwnerState) => void;
+        /**
+         * Establece la función de apertura del menuu de campos
+         * @param anchorEl
+         * @returns
+         */
+        openPopoverMenuFields: (anchorEl: Element) => void;
+        /**
+         * Limpia la función de apertura del menu de campos (por el valor anchorEl = undefined)
+         */
+        closePopoverMenuFields: (newInEdition?: boolean) => void;
+        /**
+         * actualiza el tamaño del componente
+         */
+        setSize: (size: Extract<Sizes, 'small' | 'medium'>) => void;
+    };
+}
+export type InitialStoreProps = Pick<DynamicSortState, 'automatic' | 'fields' | 'getLabel' | 'ownerState' | 'dataTestId' | 'size'>;

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

@@ -1,5 +1,5 @@
-import { DynamicSortStateWithActions } from './DynamicSortStore';
+import { DynamicSortStateWithActions } from './type';
 /**
- * TODO: Documentar
+ * Hook que permite acceder al store de DynamicSort
  */
 export declare function useDynamicSortStore<T>(selector: (state: DynamicSortStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;

package/components/DynamicSort/subcomponents/AppliedSortChip/AppliedSortChip.d.ts

@@ -1,6 +1,6 @@
 import { SortFieldApplied } from '../../types';
 /**
- * TODO: Documentar
+ * AppliedSortChip es un componente que muestra un chip con el campo y el tipo de ordenamiento aplicado.
  */
 declare function AppliedSortChip(props: SortFieldApplied): import("react/jsx-runtime").JSX.Element;
 export default AppliedSortChip;

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

@@ -1,26 +1,24 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 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";
+import { A as AppliedSortChipStyled } 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: {}
-      }
-    )
-  ] });
+  const { onEditSort, onDelete, iconFieldUrl, labels, iconSort } = useAppliedSortChip(props);
+  const { size } = useDynamicSortBase();
+  return /* @__PURE__ */ jsx(
+    AppliedSortChipStyled,
+    {
+      variant: "containedOpacity",
+      ownerState: {},
+      onClick: onEditSort,
+      startIcon: iconFieldUrl,
+      label: labels.labelField,
+      endIcon: iconSort,
+      size,
+      onDeleted: fixed ? void 0 : onDelete
+    }
+  );
 }
 export {
   AppliedSortChip as A

package/components/DynamicSort/subcomponents/AppliedSortChip/useAppliedSortChip.d.ts

@@ -1,13 +1,13 @@
 import { MouseEvent } from 'react';
 import { SortFieldApplied } from '../../types';
 /**
- * TODO: Documentar
+ * Hook que permite obtener los datos necesarios para mostrar un chip de sort aplicado
  */
 declare function useAppliedSortChip(sort: SortFieldApplied): {
     onDelete: () => void;
     onEditSort: (event: MouseEvent<HTMLButtonElement>) => void;
-    removeIconUrl: string;
     iconFieldUrl: string;
     labels: import('../../types').DataTypeFilerLabels;
+    iconSort: string;
 };
 export default useAppliedSortChip;

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

@@ -2,8 +2,8 @@ import { useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useFormatter } from "@m4l/graphics";
 import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+import { a as ascending, d as descending } from "../../icons.js";
 import { f as fieldFactory } from "../FieldTypes/fieldFactory.js";
-import { A as ASSETS_URL, a as ASSETS } from "../../constants.js";
 function useAppliedSortChip(sort) {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
@@ -11,7 +11,7 @@ function useAppliedSortChip(sort) {
   const { hidePopoverSort, removeSort, showPopoverSortForEdit } = useDynamicSortStore(
     (state) => state.actions
   );
-  const removeIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${ASSETS.close}`;
+  const iconSort = sort.operator === "asc" ? `${host_static_assets}/${environment_assets}/${ascending}` : `${host_static_assets}/${environment_assets}/${descending}`;
   const labels = useMemo(() => {
     return fieldFactory(sort.field.type).getLabels(sort, getLabel, formatters, sort.field);
   }, [sort, getLabel]);
@@ -27,9 +27,9 @@ function useAppliedSortChip(sort) {
   return {
     onDelete,
     onEditSort,
-    removeIconUrl,
     iconFieldUrl: sort.field?.urlIcon,
-    labels
+    labels,
+    iconSort
   };
 }
 export {

package/components/DynamicSort/subcomponents/AppliedSorts/AppliedSorts.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * AppliedSorts component es un componente que muestra los chips de los sorts aplicados
  * @author Diego Betancur - automatic
  * @createdAt 2025-02-10 11:27:50 - automatic
  * @updatedAt 2025-02-10 11:27:50 - automatic

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

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

package/components/DynamicSort/subcomponents/AppliedSorts/useAppliedSorts.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * Hook que permite obtener los datos necesarios para mostrar los sorts aplicados
  */
 declare function useAppliedSorts(): {
     appliedSortsSorted: import('../..').SortFieldApply[];

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * DynamicSortBase es un componente base que contiene los subcomponentes InputSort, AppliedSorts, SortActions y PopoverSort.
  */
 declare function DynamicSortBase(): import("react/jsx-runtime").JSX.Element;
 export default DynamicSortBase;

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useDynamicSortBase } from "./useDynamicSortBase.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
+import { u as useDynamicSortBase } from "./useDynamicSortBase.js";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/DynamicSortSlots.js";
 import { D as DynamicSortSlots } from "../../slots/SlotsEnum.js";
 import { I as InputSort } from "../InputSort/InputSort.js";
@@ -13,12 +14,12 @@ function DynamicSortBase() {
     RootStyled,
     {
       ownerState: { ...ownerState },
-      ...getPropDataTestId(dataTestId, DynamicSortSlots.root),
+      ...getPropDataTestId(DYNAMIC_SORT_KEY_COMPONENT, DynamicSortSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(
         InnerContainerStyled,
         {
           ownerState: { ...ownerState },
-          ...getPropDataTestId(dataTestId, DynamicSortSlots.innerContainer),
+          ...getPropDataTestId(DYNAMIC_SORT_KEY_COMPONENT, DynamicSortSlots.innerContainer, dataTestId),
           children: [
             /* @__PURE__ */ jsx(InputSort, {}),
             /* @__PURE__ */ jsx(AppliedSorts, {}),

package/components/DynamicSort/subcomponents/DynamicSortBase/useDynamicSortBase.d.ts

@@ -1,7 +1,8 @@
 /**
- * TODO: Documentar
+ * Hook que permite obtener los datos necesarios para mostrar los sorts aplicados
  */
 export default function useDynamicSortBase(): {
     ownerState: import('../../types').OwnerState;
     dataTestId: string;
+    size: "small" | "medium";
 };

package/components/DynamicSort/subcomponents/DynamicSortBase/useDynamicSortBase.js

@@ -2,7 +2,8 @@ import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
 function useDynamicSortBase() {
   const ownerState = useDynamicSortStore((state) => state.ownerState);
   const dataTestId = useDynamicSortStore((state) => state.dataTestId);
-  return { ownerState, dataTestId };
+  const size = useDynamicSortStore((state) => state.size);
+  return { ownerState, dataTestId, size };
 }
 export {
   useDynamicSortBase as u

package/components/DynamicSort/subcomponents/FieldTypes/DataTypeComponent.d.ts

@@ -1,7 +1,7 @@
 import { FormSortFieldApplied } from '../../types';
 import { FormStatusLoad } from '../../../../contexts';
 /**
- * TODO: Documentar
+ * Componente que renderiza el tipo de dato seleccionado
  */
 declare function DataTypeComponent(props: {
     formSort: FormSortFieldApplied;

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.d.ts

@@ -4,32 +4,32 @@ import { IFieldType, YupSchema } from '../FieldTypeInterface';
 import { DataTypeFilerLabels, SortField, SortFieldApplied, SortValue, FormSortValueString, InitialSortApplied } from '../../../types';
 import { StringSort } from './index';
 /**
- * TODO: Documentar
+ * Clase que implementa los métodos necesarios para el tipo de campo string
  */
 export declare class StringSortHelpers implements IFieldType<FormSortValueString> {
     getComponent(): typeof StringSort;
     /**
-     * TODO: Documentar
+     * getDefaulSort obtiene el valor por defecto de un campo de tipo string
      */
     getDefaultSort(field: SortField, fixed: boolean): SortFieldApplied;
     /**
-     * TODO: Documentar
+     * getSortFromFormValue obtiene el valor de un campo de tipo string
      */
     getSortFromFormValue(formSortValue: FormSortValueString): SortValue;
     /**
-     * TODO: Documentar
+     * getFormValue obtiene el valor de un campo de tipo string
      */
-    getFormValue(field: SortField, getLabel: GetLabelType, sortValue?: SortValue): FormSortValueString;
+    getFormValue(field: SortField, _getLabel: GetLabelType, sortValue?: SortValue): FormSortValueString;
     /**
-     * TODO: Documentar
+     * getLabels obtiene las etiquetas de un campo de tipo string
      */
     getLabels(Sort: SortFieldApplied, getLabel: GetLabelType, _formatters: Formatters, _field: SortField): DataTypeFilerLabels;
     /**
-     * TODO: Documentar
+     * getSchema obtiene el esquema de un campo de tipo string
      */
     getSchema(getLabel: GetLabelType): YupSchema;
     /**
-     * TODO: Documentar
+     * verifySort verifica si un campo de tipo string es válido
      */
     verifySort(Sort: InitialSortApplied, _field?: SortField): boolean;
 }