@m4l/components 9.3.26 → 9.3.27-BE071125-beta.1

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -1,41 +1,30 @@
 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 { 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) {
+import { forwardRef } from "react";
+import { u as useAutocomplete } from "./hooks/useAutocomplete/useAutocomplete.js";
+import { S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled } from "./slots/AutocompleteSlots.js";
+import { P as PopperComponent } from "./subcomponents/PopperComponent/PopperComponent.js";
+import { N as NoOptionsText } from "./subcomponents/NoOptionsText/NoOptionsText.js";
+import { L as LoadingText } from "./subcomponents/LoadingText/LoadingText.js";
+function AutocompleteComponent(props, ref) {
   const {
     options,
     disabled,
     loading,
-    variant = "outlined",
-    size = "medium",
     onChangeFilterParmsLocal,
-    multiple,
-    getOptionUrlImage,
-    // Diferencia
-    refresh,
-    error = false,
-    htmlFor,
-    readOnly = false,
-    placeholder
+    multiple
   } = props;
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const { currentSize } = useComponentSize(size);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const {
+    // propiedades de useAutocomplete
+    ownerState,
+    isSkeleton,
+    currentSize,
+    memoizedRenderOption,
+    memoizedRenderInput,
+    // propiedades de useValuesAndHandlers
     open,
     selectedValue,
     inputValue,
     isOptionEqualToValueLocal,
-    handleDelete,
-    handleRefresh,
     handleChange,
     handleInputChange,
     onCloseLocal,
@@ -43,35 +32,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     getOptionLabelLocal,
     checkKeyDown,
     scrollPositionOptionsRef
-  } = useValuesAndHandlers(props);
-  const ownerState = useMemo(() => ({
-    size: adjustedSize,
-    variant,
-    disabled,
-    multiple: Boolean(multiple),
-    error,
-    readOnly
-  }), [adjustedSize, disabled, error, multiple, variant, readOnly]);
-  const startAdornments = useStartAdornments({
-    selectedValue,
-    multiple,
-    adjustedSize,
-    getOptionLabelLocal,
-    ownerState,
-    handleDelete,
-    disabled
-  });
-  const endAdornments = useEndAdornments({
-    loading,
-    adjustedSize,
-    ownerState,
-    refresh,
-    handleRefresh,
-    disabled,
-    onOpenLocal,
-    open,
-    readOnly
-  });
+  } = useAutocomplete(props);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
       SkeletonAutocompleteStyled,
@@ -86,25 +47,14 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       ownerState: { ...ownerState },
       multiple,
       onKeyDown: checkKeyDown,
-      size: adjustedSize,
+      size: currentSize,
       ref,
       forcePopupIcon: false,
       autoSelect: false,
       options,
       getOptionLabel: getOptionLabelLocal,
       clearOnBlur: false,
-      PopperComponent: (popperProps) => {
-        const { color: popperColor, ...otherPopperProps } = popperProps;
-        return /* @__PURE__ */ jsx(
-          PopperComponentStyled,
-          {
-            ...otherPopperProps,
-            size: adjustedSize,
-            placement: "bottom-start",
-            ownerState: { ...ownerState }
-          }
-        );
-      },
+      PopperComponent,
       isOptionEqualToValue: isOptionEqualToValueLocal,
       value: selectedValue,
       inputValue,
@@ -114,20 +64,11 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       onInputChange: handleInputChange,
       onChange: handleChange,
       loading,
-      loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }),
+      loadingText: /* @__PURE__ */ jsx(LoadingText, {}),
       disabled,
-      noOptionsText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }),
+      noOptionsText: /* @__PURE__ */ jsx(NoOptionsText, {}),
       filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
-      renderOption: (renderProps, option) => {
-        const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
-        return renderOption(renderProps, {
-          ...typeof option === "object" && option !== null ? option : {},
-          label: getOptionLabelLocal(option),
-          selected: isSelected,
-          disabled,
-          size
-        });
-      },
+      renderOption: memoizedRenderOption,
       ListboxProps: {
         //Esto para no perder el scroll de la lista de opciones, cuando es multiple, ya que MUI no lo guarda
         onScroll: (event) => {
@@ -142,40 +83,11 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
           }
         }
       },
-      renderInput: (params) => {
-        const { InputLabelProps, inputProps, InputProps, ...renderInputOhers } = params;
-        const { className: _classNoCount, ...otherInputProps } = InputProps;
-        const { className: _ClassNoCount2, ...otherinputProps } = inputProps;
-        return /* @__PURE__ */ jsx(
-          RenderInputStyled,
-          {
-            variant,
-            ownerState: { ...ownerState },
-            InputLabelProps: {
-              ...InputLabelProps,
-              shrink: true
-            },
-            inputProps: { ...otherinputProps, id: htmlFor },
-            error,
-            ...renderInputOhers,
-            autoComplete: "off",
-            InputProps: {
-              ...otherInputProps,
-              startAdornment: startAdornments,
-              endAdornment: endAdornments,
-              readOnly
-            },
-            SelectProps: { native: true },
-            size: adjustedSize,
-            fullWidth: true,
-            disabled,
-            placeholder
-          }
-        );
-      }
+      renderInput: memoizedRenderInput
     }
   );
-});
+}
+const Autocomplete = forwardRef(AutocompleteComponent);
 export {
   Autocomplete as A
 };

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

@@ -3,9 +3,13 @@ const autocompleteSyles = {
   /**
    * Styles for the root component.
    */
-  root: () => ({
+  root: ({ theme }) => ({
     width: "100%",
-    padding: 0
+    padding: 0,
+    "& .M4LImage-root": {
+      width: theme.vars.size.baseSpacings["sp3-5"],
+      height: theme.vars.size.baseSpacings["sp3-5"]
+    }
   }),
   /**
    * Styles for the icon button component.
@@ -70,17 +74,22 @@ const autocompleteSyles = {
   /**
    * Styles for the text field component.
    */
-  textField: ({ theme }) => {
+  textField: ({ theme, ownerState }) => {
+    const sp1 = theme?.vars?.size?.baseSpacings?.sp1 || "4px";
+    const sp5 = theme?.vars?.size?.baseSpacings?.sp5 || "16px";
+    const sp7 = theme?.vars?.size?.baseSpacings?.sp7 || "24px";
     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,
+      "&& .MuiInputBase-root": {
+        ...ownerState?.startAdornment ? {
+          padding: `${sp1} ${sp7} ${sp1} ${sp5}!important`
+        } : {
+          padding: `${sp1} ${sp7} ${sp1} ${sp1}!important`
+        },
+        gap: 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": {
+        "&& > input": {
           width: "100%",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
@@ -99,9 +108,11 @@ const autocompleteSyles = {
       minWidth: "100%",
       maxHeight: "200px",
       "& .MuiAutocomplete-listbox": {
+        display: "grid",
+        gridTemplateColumns: "auto",
         height: "100%",
         "& .M4LMenuItem-root ": {
-          width: "fit-content",
+          width: "100%",
           "& .M4LTypography-root": {
             width: "fit-content",
             overflow: "unset"
@@ -111,7 +122,7 @@ const autocompleteSyles = {
     }
   }),
   /**
-   * Styles for the popover component.
+   * styles for the circular progress component.
    */
   circularProgress: {},
   /**
@@ -149,7 +160,25 @@ const autocompleteSyles = {
     display: "flex",
     flexWrap: "wrap",
     gap: theme.vars.size.baseSpacings.sp1
-  })
+  }),
+  /**
+   * Styles for the wrapper start adornment component.
+   */
+  wrapperStartAdornment: ({ theme }) => {
+    const sp1 = theme?.vars?.size?.baseSpacings?.sp1 || "4px";
+    return {
+      width: "fit-content",
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: `0px ${sp1}`
+    };
+  }
 };
 export {
   autocompleteSyles as a

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

@@ -0,0 +1,26 @@
+import { AutocompleteOwnerState, AutocompleteProps } from '../../types';
+/**
+ * Hook para el componente Autocomplete local
+ */
+export declare function useAutocomplete<T, Multiple extends boolean | undefined>(props: AutocompleteProps<T, Multiple>): {
+    ownerState: AutocompleteOwnerState;
+    isSkeleton: boolean;
+    currentSize: "small" | "medium";
+    memoizedRenderOption: (renderProps: any, option: any) => import("react/jsx-runtime").JSX.Element;
+    memoizedRenderInput: (params: any) => import("react/jsx-runtime").JSX.Element;
+    open: boolean;
+    selectedValue: T | T[] | null;
+    inputValue: string;
+    isOptionEqualToValueLocal: (option: unknown, val: unknown) => boolean;
+    handleDelete: (optionToDelete: T) => void;
+    handleRefresh: () => void;
+    handleChange: (event: React.SyntheticEvent<Element, Event>, newSelectedValue: unknown, reason: import('@mui/material').AutocompleteChangeReason) => void;
+    handleInputChange: (_event: React.SyntheticEvent, newValue: string, reason: string) => void;
+    onCloseLocal: (event: React.SyntheticEvent, reason: import('@mui/material').AutocompleteCloseReason) => void;
+    onOpenLocal: (event: React.SyntheticEvent) => void;
+    getOptionLabelLocal: (option: unknown) => string;
+    checkKeyDown: (e: import('react').KeyboardEvent<HTMLDivElement>) => void;
+    scrollPositionOptionsRef: import('react').MutableRefObject<number>;
+    multipleChips: import("react/jsx-runtime").JSX.Element | null;
+    endAdornments: import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,166 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleSkeleton } from "@m4l/core";
+import { u as useValuesAndHandlers } from "../useValuesAndHandlers.js";
+import { useMemo, useCallback } from "react";
+import { u as useMultipleChips } from "../useMultipleChips.js";
+import { u as useEndAdornments } from "../useEndAdornments.js";
+import { r as renderOption } from "../../subcomponents/renderOptions/index.js";
+import { R as RenderInputStyled } from "../../slots/AutocompleteSlots.js";
+import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+function useAutocomplete(props) {
+  const {
+    size,
+    variant,
+    disabled,
+    multiple,
+    error,
+    readOnly,
+    startAdornment,
+    getOptionStartAdornment,
+    getOptionEndAdornment,
+    loading,
+    refresh,
+    placeholder,
+    htmlFor
+  } = props;
+  const {
+    open,
+    selectedValue,
+    inputValue,
+    isOptionEqualToValueLocal,
+    handleDelete,
+    handleRefresh,
+    handleChange,
+    handleInputChange,
+    onCloseLocal,
+    onOpenLocal,
+    getOptionLabelLocal,
+    checkKeyDown,
+    scrollPositionOptionsRef
+  } = useValuesAndHandlers(props);
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const hasStartAdornment = !!props.startAdornment;
+  const ownerState = useMemo(() => ({
+    size: currentSize,
+    variant,
+    disabled,
+    multiple: Boolean(multiple),
+    error,
+    readOnly,
+    startAdornment: hasStartAdornment
+  }), [currentSize, variant, disabled, multiple, error, readOnly, hasStartAdornment]);
+  const multipleChips = useMultipleChips({
+    selectedValue,
+    multiple,
+    adjustedSize: currentSize,
+    getOptionLabelLocal,
+    ownerState,
+    handleDelete,
+    disabled,
+    startAdornment,
+    getOptionStartAdornment,
+    getOptionEndAdornment
+  });
+  const endAdornments = useEndAdornments({
+    loading,
+    adjustedSize: currentSize,
+    ownerState,
+    refresh,
+    handleRefresh,
+    disabled,
+    onOpenLocal,
+    open,
+    readOnly
+  });
+  const memoizedRenderOption = useCallback((renderProps, option) => {
+    const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
+    return renderOption(renderProps, {
+      ...typeof option === "object" && option !== null ? option : {},
+      label: getOptionLabelLocal(option),
+      selected: isSelected,
+      disabled,
+      size
+    }, getOptionStartAdornment, getOptionEndAdornment);
+  }, [
+    multiple,
+    selectedValue,
+    isOptionEqualToValueLocal,
+    getOptionLabelLocal,
+    disabled,
+    size,
+    getOptionStartAdornment,
+    getOptionEndAdornment
+  ]);
+  const memoizedRenderInput = useCallback((params) => {
+    const { InputLabelProps, inputProps, InputProps, ...renderInputOhers } = params;
+    const { className: _classNoCount, ...otherInputProps } = InputProps;
+    const { className: _ClassNoCount2, ...otherinputProps } = inputProps;
+    return /* @__PURE__ */ jsx(
+      RenderInputStyled,
+      {
+        variant,
+        ownerState: { ...ownerState },
+        InputLabelProps: {
+          ...InputLabelProps,
+          shrink: true
+        },
+        inputProps: { ...otherinputProps, id: htmlFor },
+        error,
+        ...renderInputOhers,
+        autoComplete: "off",
+        InputProps: {
+          ...otherInputProps,
+          startAdornment: multipleChips,
+          endAdornment: endAdornments,
+          readOnly
+        },
+        SelectProps: { native: true },
+        size: currentSize,
+        fullWidth: true,
+        disabled,
+        placeholder
+      }
+    );
+  }, [
+    variant,
+    ownerState,
+    htmlFor,
+    error,
+    multipleChips,
+    endAdornments,
+    readOnly,
+    currentSize,
+    disabled,
+    placeholder
+  ]);
+  return {
+    // propiedades de useAutocomplete
+    ownerState,
+    isSkeleton,
+    currentSize,
+    memoizedRenderOption,
+    memoizedRenderInput,
+    // propiedades de useValuesAndHandlers
+    open,
+    selectedValue,
+    inputValue,
+    isOptionEqualToValueLocal,
+    handleDelete,
+    handleRefresh,
+    handleChange,
+    handleInputChange,
+    onCloseLocal,
+    onOpenLocal,
+    getOptionLabelLocal,
+    checkKeyDown,
+    scrollPositionOptionsRef,
+    // propiedades de useMultipleChips
+    multipleChips,
+    // propiedades de useEndAdornments
+    endAdornments
+  };
+}
+export {
+  useAutocomplete as u
+};

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

@@ -40,7 +40,8 @@ function useEndAdornments(props) {
         onClick: (event) => !readOnly ? onOpenLocal(event) : void 0,
         disabled,
         size: adjustedSize,
-        rotationAngle: open ? 180 : 0
+        rotationAngle: open ? 180 : 0,
+        "aria-label": "toggle Autocomplete"
       }
     )
   ] });

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

@@ -0,0 +1,17 @@
+import { AutocompleteOwnerState, AutocompleteProps } from '../types';
+export type UseAdornmentsProps<T, Multiple extends boolean | undefined = undefined> = {
+    selectedValue: T | T[] | null;
+    multiple?: boolean;
+    adjustedSize: 'small' | 'medium';
+    getOptionLabelLocal: (option: T) => string;
+    getOptionStartAdornment?: AutocompleteProps<T, Multiple>['getOptionStartAdornment'];
+    getOptionEndAdornment?: AutocompleteProps<T, Multiple>['getOptionEndAdornment'];
+    ownerState: AutocompleteOwnerState;
+    handleDelete: (option: T) => void;
+    disabled?: boolean;
+    startAdornment?: AutocompleteProps<unknown, true>['startAdornment'];
+};
+/**
+ * Hook para el componente Autocomplete local
+ */
+export declare function useMultipleChips<T, Multiple extends boolean | undefined = undefined>(props: UseAdornmentsProps<T, Multiple>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,108 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { r as renderAdornment } from "../subcomponents/RenderAdornment/RenderAdornment.js";
+import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled, W as WrapperStartAdornmentStyled } from "../slots/AutocompleteSlots.js";
+function useMultipleChips(props) {
+  const {
+    selectedValue,
+    multiple,
+    adjustedSize,
+    getOptionLabelLocal,
+    ownerState,
+    handleDelete,
+    disabled,
+    startAdornment,
+    getOptionStartAdornment,
+    getOptionEndAdornment
+  } = props;
+  const startAdornmentClone = useMemo(() => {
+    if (!startAdornment) {
+      return null;
+    }
+    try {
+      return React.cloneElement(startAdornment, {
+        size: adjustedSize
+      });
+    } catch (error) {
+      console.warn("Error cloning startAdornment:", error);
+      return null;
+    }
+  }, [startAdornment, adjustedSize]);
+  const memoizedIcons = useMemo(() => {
+    if (!Array.isArray(selectedValue) || !multiple || selectedValue.length === 0) {
+      return null;
+    }
+    const iconMap = /* @__PURE__ */ new Map();
+    selectedValue.forEach((option) => {
+      const optionKey = getOptionLabelLocal(option);
+      const startAdornmentResource = getOptionStartAdornment?.(option);
+      const endAdornmentResource = getOptionEndAdornment?.(option);
+      if (startAdornmentResource) {
+        iconMap.set(`${optionKey}-start`, renderAdornment(startAdornmentResource, adjustedSize));
+      }
+      if (endAdornmentResource) {
+        iconMap.set(`${optionKey}-end`, renderAdornment(endAdornmentResource, adjustedSize));
+      }
+    });
+    return iconMap;
+  }, [
+    selectedValue,
+    multiple,
+    getOptionLabelLocal,
+    getOptionStartAdornment,
+    getOptionEndAdornment,
+    adjustedSize
+  ]);
+  const internalAdornments = useMemo(() => {
+    if (!(Array.isArray(selectedValue) && multiple)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { role: "list", "aria-label": "Selected options", children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => {
+      const optionKey = getOptionLabelLocal(option);
+      return /* @__PURE__ */ jsx(
+        ChipStyled,
+        {
+          size: adjustedSize,
+          label: optionKey,
+          opacity: true,
+          onDeleted: () => handleDelete(option),
+          disabledDeleteButton: disabled,
+          ownerState: { ...ownerState },
+          startIcon: memoizedIcons?.get(`${optionKey}-start`),
+          endIcon: memoizedIcons?.get(`${optionKey}-end`)
+        },
+        `${optionKey}-${index}`
+      );
+    }) }) });
+  }, [
+    selectedValue,
+    multiple,
+    adjustedSize,
+    getOptionLabelLocal,
+    handleDelete,
+    disabled,
+    ownerState,
+    memoizedIcons
+  ]);
+  if (startAdornmentClone && internalAdornments) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone }),
+      internalAdornments
+    ] });
+  }
+  if (startAdornmentClone) {
+    return /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone });
+  }
+  if (!getOptionLabelLocal) {
+    console.error("useStartAdornments: getOptionLabelLocal is required");
+    return null;
+  }
+  if (!handleDelete) {
+    console.error("useStartAdornments: handleDelete is required");
+    return null;
+  }
+  return internalAdornments;
+}
+export {
+  useMultipleChips as u
+};

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

@@ -8,7 +8,6 @@ export declare function useValuesAndHandlers<T, Multiple extends boolean | undef
     open: boolean;
     inputValue: string;
     selectedValue: T | T[] | null;
-    selectedOption: T | undefined;
     isOptionEqualToValueLocal: (option: unknown, val: unknown) => boolean;
     handleDelete: (optionToDelete: T) => void;
     handleRefresh: () => void;
@@ -17,7 +16,6 @@ export declare function useValuesAndHandlers<T, Multiple extends boolean | undef
     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>;
 };