@m4l/components 9.2.52 → 9.2.53

package/components/hook-form/RHFTextField/RHFTextField.styles.js

@@ -18,9 +18,7 @@ const rhfTextFieldStyles = {
   /**
    * Estilos personalizados para el componente Skeleton.
    */
-  helperErrorStyled: {},
-  skeletonTextFieldRoot: {},
-  wrapperSkeletonRHFTextField: {}
+  helperErrorStyled: {}
 };
 export {
   rhfTextFieldStyles as r

package/components/hook-form/RHFTextFieldPassword/slots/RHFTextFieldPasswordSlots.js

@@ -2,9 +2,9 @@ import { styled } from "@mui/material";
 import { R as RHFTextFieldPasswordSlots } from "./RHFTextFieldPasswordEnum.js";
 import { R as RHF_TEXT_FIELD_PASSWORD_KEY_COMPONENT } from "../constanst.js";
 import { r as rhfTextFieldPasswordStyles } from "../RHFTextFieldPassword.styles.js";
+import { L as Label } from "../../../Label/Label.js";
 import { T as TextField } from "../../../mui_extended/TextField/TextField.js";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
-import { L as Label } from "../../../Label/Label.js";
 const RHFTextFieldPasswordRoot = styled("div", {
   name: RHF_TEXT_FIELD_PASSWORD_KEY_COMPONENT,
   slot: RHFTextFieldPasswordSlots.root

package/components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js

@@ -3,7 +3,7 @@ import { useFormContext, Controller } from "react-hook-form";
 import { U as UploadSingleFile } from "./subcomponents/UploadSingleFile/index.js";
 import { R as RHFUploadSingleFileRootStyled, L as LabelStyled, H as HelperErrorStyled } from "./slots/RHFUploadSingleFileSlots.js";
 import clsx from "clsx";
-import { R as RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT, D as DEFAULT_MAX_FILE_SIZE } from "./constants.js";
+import { D as DEFAULT_MAX_FILE_SIZE, R as RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT } from "./constants.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { R as RHFUploadSingleFileSlots } from "./slots/RHFUploadSingleFileEnum.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";

package/components/hook-form/RHFormContext/classes/index.js

@@ -1,4 +1,4 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { c as componentName } from "./constants.js";
 generateUtilityClasses(

package/components/hook-form/RHFormContext/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import clsx from "clsx";
-import { useForm, FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { F as FormProviderRoot } from "./styles.js";
 import { R as RHFormProviderUtilityClasses } from "./classes/index.js";

package/components/mui_extended/Accordion/Accordion.js

@@ -3,7 +3,7 @@ import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
 import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { P as PATH_EXPANDED_ICON, A as ACCORDION_KEY } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { A as AccordionRootStyled, a as AccordionSummaryStyled, I as IconExpandedStyled, b as IconLabelStyled, L as LabelStyled, c as AccordionDetailsStyled } from "./slots/AccordionSlots.js";
+import { A as AccordionRootStyled, a as AccordionSummaryStyled, I as IconLabelStyled, L as LabelStyled, b as IconExpandedStyled, c as AccordionDetailsStyled } from "./slots/AccordionSlots.js";
 import { forwardRef } from "react";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const Accordion = forwardRef((props, ref) => {

package/components/mui_extended/Accordion/slots/AccordionSlots.js

@@ -31,9 +31,9 @@ const AccordionDetailsStyled = styled(AccordionDetails, {
 })(accordionStyles?.accordionDetails);
 export {
   AccordionRootStyled as A,
-  IconExpandedStyled as I,
+  IconLabelStyled as I,
   LabelStyled as L,
   AccordionSummaryStyled as a,
-  IconLabelStyled as b,
+  IconExpandedStyled as b,
   AccordionDetailsStyled as c
 };

package/components/mui_extended/Autocomplete/Autocomplete.d.ts

@@ -1,2 +1,9 @@
 import { AutocompleteProps } from './types';
+/**
+ * Autocomplete refactorizado con slots M4L.
+ * Tener en cuenta que cuando es multiple y se abre el dropdown, y el value no está dentro de lasl  opciones.
+ * MUI va a genera el siguiente warning (Y es normal que suceda, no es necesario darle solución):
+ *     MUI: The value provided to Autocomplete is invalid.
+ *     None of the options match with `{"y":y,"x":"xxx"}`. etc.
+ */
 export declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps<unknown, boolean | undefined> & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -1,18 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { forwardRef, useState, useCallback, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { forwardRef, useMemo } from "react";
 import { r as renderOption } from "./renderOptions/index.js";
+import { u as useValuesAndHandlers } from "./hooks/useValuesAndHandlers.js";
+import { u as useStartAdornments } from "./hooks/useStartAdornments.js";
+import { u as useEndAdornments } from "./hooks/useEndAdornments.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { C as ChipStyled, I as ImageStyled, A as AdormentsStyled, a as CircularProgressStyled, b as IconButtonStyled, S as SkeletonAutocompleteStyled, c as AutocompleteRootStyled, P as PopperComponentStyled, R as RenderInputStyled } from "./slots/AutocompleteSlots.js";
+import { S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled, R as RenderInputStyled, P as PopperComponentStyled } from "./slots/AutocompleteSlots.js";
 import { T as Typography } from "../Typography/Typography.js";
 const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
   const {
-    getOptionLabel,
-    isOptionEqualToValue,
     options,
     disabled,
-    onOpen,
-    onClose,
     loading,
     variant = "outlined",
     size = "medium",
@@ -22,203 +21,52 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     // Diferencia
     refresh,
     error = false,
-    onChange,
-    value
+    htmlFor
   } = props;
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const [open, setOpen] = useState(false);
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const [selectedValue, setSelectedValue] = useState(
-    value || (multiple ? [] : null)
-  );
-  const isOptionEqualToValueLocal = useCallback(
-    (option, val) => {
-      if (val === null || val === void 0) {
-        return false;
-      }
-      return isOptionEqualToValue(option, val);
-    },
-    [isOptionEqualToValue]
-  );
-  useEffect(() => {
-    if (!multiple && value) {
-      setInputValue(getOptionLabel(value));
-    } else if (multiple && Array.isArray(value)) {
-      setInputValue("");
-    } else {
-      setInputValue("");
-    }
-    if (multiple) {
-      if (Array.isArray(value)) {
-        setSelectedValue(value.filter((option) => options.some((opt) => isOptionEqualToValueLocal(opt, option))));
-      } else {
-        setSelectedValue([]);
-      }
-    } else {
-      if (value) {
-        const option = options.find((opt) => isOptionEqualToValueLocal(opt, value));
-        setSelectedValue(option || null);
-      } else {
-        setSelectedValue(null);
-      }
-    }
-  }, [value, multiple, getOptionLabel, options, isOptionEqualToValueLocal]);
-  const handleDelete = useCallback((optionToDelete) => {
-    if (Array.isArray(selectedValue)) {
-      const updatedValue = selectedValue.filter(
-        (val) => !isOptionEqualToValueLocal(val, optionToDelete)
-      );
-      setSelectedValue(updatedValue);
-      onChange?.(
-        {},
-        updatedValue,
-        "removeOption"
-      );
-    }
-  }, [selectedValue, isOptionEqualToValueLocal, onChange]);
-  const handleRefresh = useCallback(() => {
-    refresh?.();
-    setOpen(true);
-  }, [refresh]);
-  const handleChange = (event, newSelectedValue, reason) => {
-    const updatedValue = multiple ? Array.isArray(newSelectedValue) ? newSelectedValue : [] : newSelectedValue;
-    setSelectedValue(updatedValue);
-    setInputValue(
-      !multiple && updatedValue ? getOptionLabel(updatedValue) : ""
-    );
-    onChange?.(event, updatedValue, reason);
-  };
-  const handleInputChange = (_event, newValue, reason) => {
-    setInputValue(newValue);
-    if (reason === "input" && onChangeFilterParmsLocal) {
-      onChangeFilterParmsLocal(newValue, reason);
-    }
-  };
-  const onCloseLocal = (event, reason) => {
-    setOpen(false);
-    if (onClose) {
-      onClose(event, reason);
-    }
-  };
-  const onOpenLocal = useCallback((event) => {
-    setOpen((currentState) => !currentState);
-    if (onOpen) {
-      onOpen(event);
-    }
-  }, [onOpen]);
-  const getOptionLabelLocal = useCallback(
-    (option) => {
-      if (typeof option === "string") {
-        return option;
-      }
-      if (option === null || option === void 0) {
-        return "";
-      }
-      return getOptionLabel(option);
-    },
-    [getOptionLabel]
-  );
-  const getOptionUrlImageLocal = useCallback((option) => {
-    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
-      return "";
-    }
-    return getOptionUrlImage(option);
-  }, [getOptionUrlImage]);
+  const {
+    open,
+    selectedValue,
+    inputValue,
+    isOptionEqualToValueLocal,
+    handleDelete,
+    handleRefresh,
+    handleChange,
+    handleInputChange,
+    onCloseLocal,
+    onOpenLocal,
+    getOptionLabelLocal,
+    checkKeyDown,
+    scrollPositionOptionsRef
+  } = useValuesAndHandlers(props);
   const ownerState = useMemo(() => ({
     size: adjustedSize,
     variant,
     disabled,
-    multiple: Boolean(multiple)
-  }), [adjustedSize, disabled, multiple, variant]);
-  const [inputValue, setInputValue] = useState("");
-  useEffect(() => {
-    if (!open && value === null && inputValue !== "") {
-      setInputValue("");
-    }
-    if (!open && value !== null && options && options.length === 0) {
-      onChangeFilterParmsLocal?.(
-        getOptionLabelLocal(Array.isArray(value) ? value[0] : value),
-        "reset"
-      );
-    }
-  }, [
-    value,
-    open,
-    inputValue,
-    onChangeFilterParmsLocal,
+    multiple: Boolean(multiple),
+    error
+  }), [adjustedSize, disabled, error, multiple, variant]);
+  const startAdornments = useStartAdornments({
+    selectedValue,
+    multiple,
+    adjustedSize,
     getOptionLabelLocal,
-    options
-  ]);
-  const checkKeyDown = (e) => {
-    if (e.code === "Enter") {
-      e.preventDefault();
-    }
-  };
-  const selectedOption = options.find((option) => {
-    return isOptionEqualToValueLocal(option, selectedValue);
+    ownerState,
+    handleDelete,
+    disabled
+  });
+  const endAdornments = useEndAdornments({
+    loading,
+    adjustedSize,
+    ownerState,
+    refresh,
+    handleRefresh,
+    disabled,
+    onOpenLocal
   });
-  const adornments = useMemo(() => {
-    if (disabled) {
-      return null;
-    }
-    const returnValue = {};
-    if (Array.isArray(selectedValue) && multiple) {
-      returnValue.startAdornment = selectedValue.map((option, index) => /* @__PURE__ */ jsx(
-        ChipStyled,
-        {
-          size: adjustedSize,
-          label: getOptionLabelLocal(option),
-          opacity: true,
-          onDeleted: () => handleDelete(option),
-          ownerState: { ...ownerState }
-        },
-        index
-      ));
-    } else {
-      if (getOptionUrlImage && selectedOption) {
-        returnValue.startAdornment = /* @__PURE__ */ jsx(
-          ImageStyled,
-          {
-            ownerState: { ...ownerState },
-            src: getOptionUrlImageLocal(selectedOption),
-            alt: getOptionLabelLocal(selectedOption)
-          }
-        );
-      }
-    }
-    returnValue.endAdornment = /* @__PURE__ */ jsxs(AdormentsStyled, { ownerState: {}, children: [
-      loading ? /* @__PURE__ */ jsx(
-        CircularProgressStyled,
-        {
-          ownerState: { ...ownerState },
-          size: adjustedSize
-        }
-      ) : refresh ? /* @__PURE__ */ jsx(
-        IconButtonStyled,
-        {
-          ownerState: { ...ownerState },
-          icon: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg`,
-          onClick: handleRefresh,
-          disabled,
-          size: adjustedSize
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(
-        IconButtonStyled,
-        {
-          ownerState: { ...ownerState },
-          icon: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
-          onClick: (event) => onOpenLocal(event),
-          disabled,
-          size: adjustedSize
-        }
-      )
-    ] });
-    return returnValue;
-  }, [selectedValue, multiple, loading, adjustedSize, getOptionLabelLocal, ownerState, handleDelete, getOptionUrlImage, selectedOption, getOptionUrlImageLocal, refresh, host_static_assets, environment_assets, handleRefresh, disabled, onOpenLocal]);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
       SkeletonAutocompleteStyled,
@@ -275,6 +123,20 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
           size
         });
       },
+      ListboxProps: {
+        //Esto para no perder el scroll de la lista de opciones, cuando es multiple, ya que MUI no lo guarda
+        onScroll: (event) => {
+          scrollPositionOptionsRef.current = event.currentTarget.scrollTop;
+        },
+        /**
+         * Ref para guardar el scroll de la lista de opciones
+         */
+        ref: (listboxNode) => {
+          if (listboxNode) {
+            listboxNode.scrollTop = scrollPositionOptionsRef.current;
+          }
+        }
+      },
       renderInput: (params) => {
         const { InputLabelProps, inputProps, InputProps, ...renderInputOhers } = params;
         const { className: _classNoCount, ...otherInputProps } = InputProps;
@@ -288,13 +150,14 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
               ...InputLabelProps,
               shrink: true
             },
-            inputProps: { ...otherinputProps },
+            inputProps: { ...otherinputProps, id: htmlFor },
             error,
             ...renderInputOhers,
             autoComplete: "off",
             InputProps: {
               ...otherInputProps,
-              ...adornments
+              startAdornment: startAdornments,
+              endAdornment: endAdornments
             },
             SelectProps: { native: true },
             size: adjustedSize,

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -45,26 +45,37 @@ const autocompleteSyles = {
   /**
    * Styles for the chip component.
    */
-  chip: {},
+  chip: ({ theme, ownerState }) => ({
+    ...ownerState.disabled && {
+      background: theme.vars.palette.chips.disabled.contained.backgroundColor,
+      color: theme.vars.palette.text.disabled,
+      "&& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.text.disabled} !important`
+      }
+    }
+  }),
   /**
    * Styles for the text field component.
    */
-  textField: ({ theme }) => ({
-    // position: 'relative',
-    height: "auto !important",
-    position: "relative",
-    "& .MuiInputBase-root": {
-      padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp12} ${theme.vars.size.baseSpacings.sp1}  0!important`,
-      gap: theme.vars.size.baseSpacings.sp1,
-      flexWrap: "wrap",
-      "& > input": {
-        width: "100%",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        overflow: "hidden!important"
+  textField: ({ theme }) => {
+    return {
+      height: "auto !important",
+      position: "relative",
+      "& .MuiInputBase-root": {
+        padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp12} ${theme.vars.size.baseSpacings.sp1}  0!important`,
+        gap: theme.vars.size.baseSpacings.sp1,
+        flexWrap: "wrap",
+        paddingLeft: `${theme.vars.size.baseSpacings.sp1} !important`,
+        // borderColor: `${ ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.secondary} !important`,
+        "& > input": {
+          width: "100%",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          overflow: "hidden!important"
+        }
       }
-    }
-  }),
+    };
+  },
   /**
    * Styles for the popper component.
    */

package/components/mui_extended/Autocomplete/hooks/useEndAdornments.d.ts

@@ -0,0 +1,14 @@
+import { AutocompleteOwnerState } from '../types';
+export type UseAdornmentsProps = {
+    loading?: boolean;
+    adjustedSize: 'small' | 'medium';
+    ownerState: AutocompleteOwnerState;
+    refresh?: () => void;
+    handleRefresh: () => void;
+    disabled?: boolean;
+    onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+/**
+ * Hook para el componente Autocomplete local
+ */
+export declare function useEndAdornments(props: UseAdornmentsProps): import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Autocomplete/hooks/useEndAdornments.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { i as icons } from "../icons.js";
+import { useEnvironment } from "@m4l/core";
+import { a as AdormentsStyled, C as CircularProgressStyled, I as IconButtonStyled } from "../slots/AutocompleteSlots.js";
+function useEndAdornments(props) {
+  const {
+    loading,
+    adjustedSize,
+    ownerState,
+    refresh,
+    handleRefresh,
+    disabled,
+    onOpenLocal
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsxs(AdormentsStyled, { ownerState: {}, children: [
+    loading ? /* @__PURE__ */ jsx(
+      CircularProgressStyled,
+      {
+        ownerState: { ...ownerState },
+        size: adjustedSize
+      }
+    ) : refresh ? /* @__PURE__ */ jsx(
+      IconButtonStyled,
+      {
+        ownerState: { ...ownerState },
+        icon: `${host_static_assets}/${environment_assets}/${icons.refresh}`,
+        onClick: handleRefresh,
+        disabled,
+        size: adjustedSize
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      IconButtonStyled,
+      {
+        ownerState: { ...ownerState },
+        icon: `${host_static_assets}/${environment_assets}/${icons.chevronDown}`,
+        onClick: (event) => onOpenLocal(event),
+        disabled,
+        size: adjustedSize
+      }
+    )
+  ] });
+}
+export {
+  useEndAdornments as u
+};

package/components/mui_extended/Autocomplete/hooks/useStartAdornments.d.ts

@@ -0,0 +1,21 @@
+import { AutocompleteOwnerState } from '../types';
+export type UseAdornmentsProps<T> = {
+    selectedValue: T | T[] | null;
+    multiple?: boolean;
+    loading?: boolean;
+    adjustedSize: 'small' | 'medium';
+    getOptionLabelLocal: (option: T) => string;
+    ownerState: AutocompleteOwnerState;
+    handleDelete: (option: T) => void;
+    getOptionUrlImage?: (option: T) => string;
+    selectedOption?: T;
+    getOptionUrlImageLocal: (option: T) => string;
+    refresh?: () => void;
+    handleRefresh: () => void;
+    disabled?: boolean;
+    onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+/**
+ * Hook para el componente Autocomplete local
+ */
+export declare function useStartAdornments<T>(props: UseAdornmentsProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/components/mui_extended/Autocomplete/hooks/useStartAdornments.js

@@ -0,0 +1,31 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { b as ChipStyled } from "../slots/AutocompleteSlots.js";
+function useStartAdornments(props) {
+  const {
+    selectedValue,
+    multiple,
+    adjustedSize,
+    getOptionLabelLocal,
+    ownerState,
+    handleDelete,
+    disabled
+  } = props;
+  if (!(Array.isArray(selectedValue) && multiple)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: selectedValue.map((option, index) => /* @__PURE__ */ jsx(
+    ChipStyled,
+    {
+      size: adjustedSize,
+      label: getOptionLabelLocal(option),
+      opacity: true,
+      onDeleted: () => handleDelete(option),
+      disabledDeleteButton: disabled,
+      ownerState: { ...ownerState }
+    },
+    `${option}-${index}`
+  )) });
+}
+export {
+  useStartAdornments as u
+};

package/components/mui_extended/Autocomplete/hooks/useValuesAndHandlers.d.ts

@@ -0,0 +1,23 @@
+import { AutocompleteChangeReason, AutocompleteCloseReason } from '@mui/material';
+import { KeyboardEvent } from 'react';
+import { AutocompleteProps } from '../types';
+/**
+ * Hook para el componente Autocomplete local, proporciona los valores y los handlers para el componente Autocomplete.
+ */
+export declare function useValuesAndHandlers<T, Multiple extends boolean | undefined>(props: AutocompleteProps<T, Multiple>): {
+    open: boolean;
+    inputValue: string;
+    selectedValue: T | T[] | null;
+    selectedOption: T | undefined;
+    isOptionEqualToValueLocal: (option: unknown, val: unknown) => boolean;
+    handleDelete: (optionToDelete: T) => void;
+    handleRefresh: () => void;
+    handleChange: (event: React.SyntheticEvent<Element, Event>, newSelectedValue: unknown, reason: AutocompleteChangeReason) => void;
+    handleInputChange: (_event: React.SyntheticEvent, newValue: string, reason: string) => void;
+    onCloseLocal: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
+    onOpenLocal: (event: React.SyntheticEvent) => void;
+    getOptionLabelLocal: (option: unknown) => string;
+    getOptionUrlImageLocal: (option: T | null) => string;
+    checkKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+    scrollPositionOptionsRef: import('react').MutableRefObject<number>;
+};