@m4l/components 9.2.51 → 9.2.53

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, R as RenderInputStyled, P as PopperComponentStyled } 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>;
+};

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

@@ -0,0 +1,135 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+function useValuesAndHandlers(props) {
+  const {
+    getOptionLabel,
+    isOptionEqualToValue,
+    options,
+    onOpen,
+    onClose,
+    onChangeFilterParmsLocal,
+    multiple,
+    getOptionUrlImage,
+    // Diferencia
+    refresh,
+    onChange,
+    value
+  } = props;
+  const [open, setOpen] = useState(false);
+  const scrollPositionOptionsRef = useRef(0);
+  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]
+  );
+  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) => {
+    let updatedValue = multiple ? Array.isArray(newSelectedValue) ? newSelectedValue : [] : newSelectedValue;
+    if (multiple && Array.isArray(updatedValue)) {
+      updatedValue = updatedValue?.filter((option) => options.some((opt) => isOptionEqualToValueLocal(opt, option)));
+    }
+    setSelectedValue(updatedValue);
+    onChange?.(event, updatedValue, reason);
+  };
+  const handleInputChange = (_event, newValue, reason) => {
+    setInputValue(newValue);
+    if (onChangeFilterParmsLocal && reason === "input") {
+      onChangeFilterParmsLocal(newValue, reason);
+    }
+  };
+  const onCloseLocal = (event, reason) => {
+    let mustClose = true;
+    if (!(reason !== "selectOption" && reason !== "removeOption")) {
+      if (multiple) {
+        mustClose = false;
+      }
+    }
+    if (mustClose) {
+      scrollPositionOptionsRef.current = 0;
+      setOpen(false);
+      if (onClose) {
+        onClose(event, reason);
+      }
+    }
+  };
+  const onOpenLocal = useCallback((event) => {
+    setOpen(true);
+    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 [inputValue, setInputValue] = useState("");
+  useEffect(() => {
+    if (open === false && value === null && inputValue !== "") {
+      setInputValue("");
+    }
+  }, [value, open, inputValue]);
+  const checkKeyDown = (e) => {
+    if (e.code === "Enter") {
+      e.preventDefault();
+    }
+  };
+  const selectedOption = options.find((option) => {
+    return isOptionEqualToValueLocal(option, selectedValue);
+  });
+  return {
+    open,
+    inputValue,
+    selectedValue,
+    selectedOption,
+    isOptionEqualToValueLocal,
+    handleDelete,
+    handleRefresh,
+    handleChange,
+    handleInputChange,
+    onCloseLocal,
+    onOpenLocal,
+    getOptionLabelLocal,
+    getOptionUrlImageLocal,
+    checkKeyDown,
+    scrollPositionOptionsRef
+  };
+}
+export {
+  useValuesAndHandlers as u
+};

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

@@ -0,0 +1,4 @@
+export declare const icons: {
+    refresh: string;
+    chevronDown: string;
+};

package/components/mui_extended/Autocomplete/icons.js

@@ -0,0 +1,7 @@
+const icons = {
+  refresh: "frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg",
+  chevronDown: "frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg"
+};
+export {
+  icons as i
+};

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

@@ -5,11 +5,16 @@ import { Sizes } from '@m4l/styles';
  * It supports rendering options with `startAd` and `endIcon`.
  * @param color - The color for the MenuItem.
  */
-export declare function renderOption<T>(optionProps: HTMLAttributes<HTMLLIElement>, option: T & {
+type OptionType<T> = T & {
     label: string;
     selected?: boolean;
     disabled?: boolean;
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
     size: Extract<Sizes, 'small' | 'medium'>;
-}): import("react/jsx-runtime").JSX.Element;
+};
+/**
+ * Render option for Autocomplete.
+ */
+export declare const renderOption: <T>(optionProps: HTMLAttributes<HTMLLIElement>, option: OptionType<T>) => import("react/jsx-runtime").JSX.Element;
+export {};