@m4l/components 9.1.130 → 9.1.131

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.js

@@ -7,7 +7,7 @@ class StringSortHelpers {
     return StringSort;
   }
   /**
-   * TODO: Documentar
+   * getDefaulSort obtiene el valor por defecto de un campo de tipo string
    */
   getDefaultSort(field, fixed) {
     const defaultOperator = field.defaultOperator;
@@ -25,31 +25,28 @@ class StringSortHelpers {
     return defaultSort;
   }
   /**
-   * TODO: Documentar
+   * getSortFromFormValue obtiene el valor de un campo de tipo string
    */
   getSortFromFormValue(formSortValue) {
-    const operator = formSortValue.formValueOperator.operator;
+    const operator = formSortValue.formValueOperator;
     return {
       fieldType: "string",
       operator
     };
   }
   /**
-   * TODO: Documentar
+   * getFormValue obtiene el valor de un campo de tipo string
    */
-  getFormValue(field, getLabel, sortValue) {
+  getFormValue(field, _getLabel, sortValue) {
     const sortValueOperator = sortValue ? sortValue : void 0;
     const operator = sortValueOperator ? sortValueOperator.operator : field.defaultOperator ?? "asc";
     return {
       fieldType: "string",
-      formValueOperator: {
-        operator,
-        name: getLabel(getDynamicSortDictionary(`operator_${operator}`))
-      }
+      formValueOperator: operator
     };
   }
   /**
-   * TODO: Documentar
+   * getLabels obtiene las etiquetas de un campo de tipo string
    */
   getLabels(Sort, getLabel, _formatters, _field) {
     const labelOperator = Sort.operator ? getLabel(getDynamicSortDictionary(`operator_${Sort.operator}`)) : "";
@@ -59,21 +56,21 @@ class StringSortHelpers {
     };
   }
   /**
-   * TODO: Documentar
+   * getSchema obtiene el esquema de un campo de tipo string
    */
   getSchema(getLabel) {
     return Yup.object({
-      formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_Sort.error_operator_required`))
+      formValueOperator: Yup.string().required(getLabel(`dynamic_Sort.error_operator_required`))
     });
   }
   /**
-   * TODO: Documentar
+   * verifySort verifica si un campo de tipo string es válido
    */
   verifySort(Sort, _field) {
     if (typeof Sort.operator !== "string") {
       return false;
     }
-    if (SORT_OPERATORS.findIndex((f) => f === Sort.name) === -1) {
+    if (SORT_OPERATORS.findIndex((f) => f === Sort.operator) === -1) {
       return false;
     }
     return typeof Sort.operator === "string";

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/index.js

@@ -1,32 +1,36 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { a as ascending, d as descending } from "../../../icons.js";
 import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../../dictionary.js";
-import { R as RHFAutocomplete } from "../../../../hook-form/RHFAutocomplete/RHFAutocomplete.js";
+import { u as useDynamicSortBase } from "../../DynamicSortBase/useDynamicSortBase.js";
+import { R as RHFSelect } from "../../../../hook-form/RHFSelect/RHFSelect.js";
+import { I as Icon } from "../../../../Icon/Icon.js";
 function StringSort() {
   const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { size } = useDynamicSortBase();
   const optionsYesNo = useMemo(
     () => [
       {
-        operator: "asc",
-        name: getLabel(getDynamicSortDictionary(`label_ascending`))
+        id: "asc",
+        label: getLabel(getDynamicSortDictionary(`label_ascending`)),
+        startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/${ascending}` })
       },
       {
-        operator: "desc",
-        name: getLabel(getDynamicSortDictionary(`label_descending`))
+        id: "desc",
+        label: getLabel(getDynamicSortDictionary(`label_descending`)),
+        startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/${descending}` })
       }
     ],
-    [getLabel]
+    [getLabel, host_static_assets, environment_assets]
   );
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-    RHFAutocomplete,
+    RHFSelect,
     {
+      size,
       name: "formValueOperator",
-      type: "text",
-      autoComplete: "off",
       options: optionsYesNo,
-      getOptionLabel: (option) => option.name,
-      isOptionEqualToValue: (option, value) => option.operator === value.operator,
       label: getLabel(getDynamicSortDictionary(DICCTIONARY.input_placeholder))
     }
   ) });

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

@@ -1,6 +1,6 @@
 import { FieldType } from '../../types';
 import { StringSortHelpers } from './StringSort/helpers';
 /**
- * TODO: Documentar
+ * Factory que retorna el helper correspondiente al tipo de campo
  */
 export declare function fieldFactory(type: FieldType): StringSortHelpers;

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

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * Componente encargado de mostrar el input de búsqueda y el menú de campos para ordenar
  */
 declare const InputSort: () => import("react/jsx-runtime").JSX.Element;
 export default InputSort;

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

@@ -1,7 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useInputSort } from "./useInputSort.js";
-import { I as InputFilterSkeleton } from "./InputSortSkeleton.js";
-import { h as InputSortStyled, i as InputSortIconStyled, j as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { c as InputSortStyled, d as InputSortIconStyled, e as InputSortInputSkeletonStyled, f as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
 import { P as PopoverMenuFields } from "../PopoverMenuFields/PopoverMenuFields.js";
 const InputSort = () => {
   const {
@@ -13,18 +13,16 @@ const InputSort = () => {
     sortFields,
     selectedFieldIndex
   } = useInputSort();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(InputSortStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(InputFilterSkeleton, {}) });
-  }
-  return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: {}, children: [
-    /* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, ownerState: {} }),
-    /* @__PURE__ */ jsx(
+  const { ownerState, size } = useDynamicSortBase();
+  return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: { ...ownerState }, children: [
+    /* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, size, ownerState: { ...ownerState } }),
+    isSkeleton ? /* @__PURE__ */ jsx(InputSortInputSkeletonStyled, { ownerState: { ...ownerState }, variant: "rounded" }) : /* @__PURE__ */ jsx(
       InputSortInputStyled,
       {
         type: "text",
         value: inputData,
         placeholder: inputPlaceHolder,
-        ownerState: {},
+        ownerState: { ...ownerState },
         ...inputHandlersProps
       }
     ),

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

@@ -1,9 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
-import { P as PopoverMenuStyled, k as PopoverMenuItemStyled, l as PopoverMenuItemIconStyled, m as PopoverMenuItemLabelStyled } from "../../slots/DynamicSortSlots.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { P as PopoverMenuStyled, g as PopoverMenuItemStyled, h as PopoverMenuItemIconStyled } from "../../slots/DynamicSortSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
   const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
+  const { size } = useDynamicSortBase();
   return /* @__PURE__ */ jsx(
     PopoverMenuStyled,
     {
@@ -16,17 +18,16 @@ function PopoverMenuFields(props) {
       onClose: handleClosePopover,
       anchorEl: fnAnchorEl?.(),
       ownerState: {},
-      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsxs(
+      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsx(
         PopoverMenuItemStyled,
         {
+          startIcon: /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { size, src: field.urlIcon, ownerState: {} }),
+          label: getItemLabel(field),
           dense: true,
+          size,
           selected: index === selectFieldIndex,
           onClick: (event) => handleOpenPopUpClickItem(event, field),
-          ownerState: {},
-          children: [
-            /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { src: field.urlIcon, ownerState: {} }),
-            /* @__PURE__ */ jsx(PopoverMenuItemLabelStyled, { ownerState: {}, children: getItemLabel(field) })
-          ]
+          ownerState: {}
         },
         `menu_action_${getItemLabel(field)}`
       ))

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as usePopoverSort } from "./usePopoverSort.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
-import { n as PopoverStyled, o as PopoverHeaderStyled, p as PopoverHeaderIconStyled, q as PopoverHeaderTitleStyled, r as PopoverContainerFieldsStyled, s as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
+import { u as usePopoverSort } from "./usePopoverSort.js";
+import { i as PopoverStyled, j as PopoverHeaderStyled, k as PopoverHeaderIconStyled, l as PopoverHeaderTitleStyled, m as PopoverContainerFieldsStyled, n as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
@@ -20,6 +21,7 @@ function PopoverSort() {
     statusLoad,
     canRender
   } = usePopoverSort();
+  const { size } = useDynamicSortBase();
   if (!canRender) {
     return null;
   }
@@ -45,13 +47,13 @@ function PopoverSort() {
           statusLoad,
           children: [
             /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
-              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
+              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, size, ownerState: {} }),
+              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", size, ownerState: {}, children: labelField })
             ] }),
             /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
             /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
-              /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
-              /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
+              /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose, skeletonWidth: "68px" }),
+              /* @__PURE__ */ jsx(ActionIntro, { size, skeletonWidth: "64px" })
             ] })
           ]
         }

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

@@ -1,11 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useSortActions } from "./useSortActions.js";
-import { S as SortActionsSkeleton } from "./SortActionsSkeleton.js";
 import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
-import { t as ActionsStyled, u as ActionsClearButtonStyled, v as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { o as ActionsStyled, p as ActionsClearButtonStyled, q as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
 function SortActions() {
   const {
-    isSkeleton,
     sortIconUrl,
     clearIconUrl,
     canShowRemoveAction,
@@ -14,14 +13,13 @@ function SortActions() {
     sortButtonDictionaryTooltip,
     ownerState
   } = useSortActions();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(ActionsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(SortActionsSkeleton, {}) });
-  }
+  const { size } = useDynamicSortBase();
   return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: {}, children: [
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {
-        src: clearIconUrl,
+        size,
+        icon: clearIconUrl,
         onClick: onClickClearSorts,
         dictionaryTooltipId: getDynamicSortDictionary(DICCTIONARY.tooltip_clear_sort),
         ownerState: {}
@@ -30,7 +28,8 @@ function SortActions() {
     /* @__PURE__ */ jsx(
       ActionsSubmitButtonStyled,
       {
-        src: sortIconUrl,
+        size,
+        icon: sortIconUrl,
         "aria-label": "settings",
         dictionaryTooltipId: sortButtonDictionaryTooltip,
         onClick: onClickSort,

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

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

package/components/DynamicSort/types.d.ts

@@ -1,5 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Sizes } from '@m4l/styles';
 import { Maybe } from '@m4l/core';
 import { DYNAMIC_SORT_KEY_COMPONENT } from './constants';
 import { DynamicSortSlots } from './slots';
@@ -85,11 +86,11 @@ export type FormOperand = FormOperandString;
  */
 export interface FormSortValueBase {
     fieldType: FieldType;
-    formValueOperator: FormOperator;
+    formValueOperator: StringOperator;
 }
 export interface FormSortValueString extends FormSortValueBase {
     fieldType: 'string';
-    formValueOperator: FormOperator<StringOperator>;
+    formValueOperator: StringOperator;
 }
 /**
  * Valor de un filtro sobrecargado para cada tipo de dato
@@ -129,6 +130,8 @@ export interface DynamicSortProps {
     onChangeSorts?: OnChangeSorts;
     /** Key único para necesario para las pruebas del componente. */
     dataTestId?: string;
+    /** Propiedad para las variantes de tamaño */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 /**
  * Interface que define la variables que se van a usar en clases del componente
@@ -158,6 +161,10 @@ export interface OwnerState {
      *  "isEmpty" Define si existen sorts aplicados
      */
     isEmpty: boolean;
+    /**
+     * Propiedad para las variantes de tamaño
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 export interface DynamicSortOwnerState extends DynamicSortProps, OwnerState {
 }

package/package.json

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

package/components/DynamicSort/DynamicSort.stories.d.ts

@@ -1,21 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { DynamicSort } from './DynamicSort';
-declare const meta: Meta<typeof DynamicSort>;
-export default meta;
-type Story = StoryObj<typeof DynamicSort>;
-/**
- * Base DynamicSort component
- */
-export declare const Base: Story;
-/**
- * DynamicSort in skeleton mode
- */
-export declare const WithSkeleton: Story;
-/**
- * DynamicFilter With fixed field
- */
-export declare const WithFixedField: Story;
-/**
- * DynamicFilter With props `automatic=true`
- */
-export declare const WithAutomatic: Story;

package/components/DynamicSort/subcomponents/InputSort/InputSortSkeleton.d.ts

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

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

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

package/components/DynamicSort/subcomponents/SortActions/SortActionsSkeleton.d.ts

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

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

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