@m4l/components 9.3.18 → 9.3.19-BE093025-beta.1

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -23,7 +23,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     error = false,
     htmlFor,
     readOnly = false,
-    placeholder
+    placeholder,
+    startAdornment
   } = props;
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
@@ -50,8 +51,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     disabled,
     multiple: Boolean(multiple),
     error,
-    readOnly
-  }), [adjustedSize, disabled, error, multiple, variant, readOnly]);
+    readOnly,
+    startAdornment: !!startAdornment
+  }), [adjustedSize, disabled, error, multiple, variant, readOnly, startAdornment]);
   const startAdornments = useStartAdornments({
     selectedValue,
     multiple,
@@ -59,7 +61,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     getOptionLabelLocal,
     ownerState,
     handleDelete,
-    disabled
+    disabled,
+    startAdornment
   });
   const endAdornments = useEndAdornments({
     loading,

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

@@ -70,17 +70,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} 0px!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",
@@ -149,7 +154,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/useStartAdornments.d.ts

@@ -1,4 +1,5 @@
-import { AutocompleteOwnerState } from '../types';
+import { default as React } from 'react';
+import { AutocompleteOwnerState, AutocompleteProps } from '../types';
 export type UseAdornmentsProps<T> = {
     selectedValue: T | T[] | null;
     multiple?: boolean;
@@ -14,6 +15,7 @@ export type UseAdornmentsProps<T> = {
     handleRefresh: () => void;
     disabled?: boolean;
     onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    startAdornment: AutocompleteProps<unknown, true>['startAdornment'];
 };
 /**
  * Hook para el componente Autocomplete local

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

@@ -1,5 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled } from "../slots/AutocompleteSlots.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled, W as WrapperStartAdornmentStyled } from "../slots/AutocompleteSlots.js";
 function useStartAdornments(props) {
   const {
     selectedValue,
@@ -8,23 +9,44 @@ function useStartAdornments(props) {
     getOptionLabelLocal,
     ownerState,
     handleDelete,
-    disabled
+    disabled,
+    startAdornment
   } = props;
-  if (!(Array.isArray(selectedValue) && multiple)) {
-    return null;
+  const startAdornmentClone = startAdornment ? React.cloneElement(startAdornment, {
+    size: adjustedSize
+  }) : null;
+  const internalAdornments = useMemo(() => {
+    if (!(Array.isArray(selectedValue) && multiple)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => /* @__PURE__ */ jsx(
+      ChipStyled,
+      {
+        size: adjustedSize,
+        label: getOptionLabelLocal(option),
+        opacity: true,
+        onDeleted: () => handleDelete(option),
+        disabledDeleteButton: disabled,
+        ownerState: { ...ownerState }
+      },
+      `${option}-${index}`
+    )) }) });
+  }, [
+    selectedValue,
+    multiple,
+    adjustedSize,
+    getOptionLabelLocal,
+    handleDelete,
+    disabled,
+    ownerState
+  ]);
+  if (startAdornmentClone && internalAdornments) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { children: startAdornmentClone }),
+      internalAdornments
+    ] });
   }
-  return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => /* @__PURE__ */ jsx(
-    ChipStyled,
-    {
-      size: adjustedSize,
-      label: getOptionLabelLocal(option),
-      opacity: true,
-      onDeleted: () => handleDelete(option),
-      disabledDeleteButton: disabled,
-      ownerState: { ...ownerState }
-    },
-    `${option}-${index}`
-  )) }) });
+  return startAdornment ? /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { children: startAdornmentClone }) : internalAdornments;
 }
 export {
   useStartAdornments as u

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

@@ -27,9 +27,12 @@ function useValuesAndHandlers(props) {
       return;
     }
     const newValue = value || (multiple ? [] : null);
+    if (deepEqual(selectedValue, newValue)) {
+      return;
+    }
     refValue.current = newValue;
     setSelectedValue(newValue);
-  }, [multiple, value]);
+  }, [multiple, value, selectedValue]);
   const isOptionEqualToValueLocal = useCallback(
     (option, val) => {
       if (val === null || val === void 0) {
@@ -122,11 +125,15 @@ function useValuesAndHandlers(props) {
   useEffect(() => {
     if (readOnly && value !== null && value !== void 0 && !multiple) {
       const displayValue = getOptionLabelLocal(value);
-      setInputValue(displayValue);
+      if (inputValue !== displayValue) {
+        setInputValue(displayValue);
+      }
     } else if (readOnly && multiple) {
-      setInputValue("");
+      if (inputValue !== "") {
+        setInputValue("");
+      }
     }
-  }, [readOnly, value, getOptionLabelLocal, multiple]);
+  }, [readOnly, value, getOptionLabelLocal, multiple, inputValue]);
   useEffect(() => {
     if (open === false && value === null && inputValue !== "") {
       setInputValue("");

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

@@ -13,5 +13,6 @@ export declare enum AutocompleteSlots {
     image = "image",
     renderInputText = "renderInputText",
     containerMultipleValues = "containerMultipleValues",
-    containerWrapper = "containerWrapper"
+    containerWrapper = "containerWrapper",
+    wrapperStartAdornment = "wrapperStartAdornment"
 }

package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.js

@@ -14,6 +14,7 @@ var AutocompleteSlots = /* @__PURE__ */ ((AutocompleteSlots2) => {
   AutocompleteSlots2["renderInputText"] = "renderInputText";
   AutocompleteSlots2["containerMultipleValues"] = "containerMultipleValues";
   AutocompleteSlots2["containerWrapper"] = "containerWrapper";
+  AutocompleteSlots2["wrapperStartAdornment"] = "wrapperStartAdornment";
   return AutocompleteSlots2;
 })(AutocompleteSlots || {});
 export {

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

@@ -39,6 +39,9 @@ export declare const RenderInputTextStyled: import('@emotion/styled').StyledComp
 export declare const AdormentsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const WrapperStartAdornmentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ContainerMultipleValuesStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.js

@@ -64,6 +64,10 @@ const AdormentsStyled = styled("div", {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.adorments
 })(autocompleteSyles?.adorments);
+const WrapperStartAdornmentStyled = styled("div", {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.wrapperStartAdornment
+})(autocompleteSyles?.wrapperStartAdornment);
 const ContainerMultipleValuesStyled = styled("div", {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.containerMultipleValues
@@ -79,6 +83,7 @@ export {
   PopperComponentStyled as P,
   RenderInputStyled as R,
   SkeletonAutocompleteStyled as S,
+  WrapperStartAdornmentStyled as W,
   AdormentsStyled as a,
   ContainerMultipleValuesStyled as b,
   ContainerWrapperStyled as c,

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

@@ -1,6 +1,6 @@
 import { AutocompleteChangeReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme } from '@mui/material';
 import { Sizes } from '@m4l/styles';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactElement } from 'react';
 import { TextFieldProps } from '../TextField/types';
 import { AUTOCOMPLETE_KEY_COMPONENT } from './constants';
 import { AutocompleteSlots } from './slots';
@@ -75,6 +75,10 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
      * "htmlFor" attribute for the autocomplete field.
      */
     htmlFor?: string;
+    /**
+     * Icono o adorno que se muestra al inicio del autocomplete.
+     */
+    startAdornment?: ReactElement;
 }
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.
@@ -84,6 +88,7 @@ export interface AutocompleteOwnerState extends Pick<BaseAutocompleteProps, 'siz
     disabled?: boolean;
     multiple?: boolean;
     readOnly?: boolean;
+    startAdornment?: boolean;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.

package/components/mui_extended/CheckBox/CheckBox.js

@@ -64,6 +64,7 @@ const CheckBox = forwardRef((props, ref) => {
         ownerState: { ...ownerState },
         size: adjustedSize,
         disabled,
+        ellipsis: true,
         children: inlineText
       }
     )

package/components/mui_extended/CheckBox/CheckBox.styles.js

@@ -14,7 +14,7 @@ const checkBoxStyles = {
       overflow: "visible",
       boxSizing: "border-box",
       gap: theme.vars.size.baseSpacings.sp1,
-      width: "fit-content"
+      width: "100%"
     };
   },
   /**

package/components/mui_extended/Tooltip/Tooltip.styles.js

@@ -8,6 +8,7 @@ const tooltipStyles = {
    * Estilos del texto del componente Tooltip
    */
   text: ({ theme, ownerState }) => ({
+    color: theme.vars.palette.text.contrastText,
     ...getTypographyStyles(
       theme.generalSettings.isMobile,
       ownerState?.size || "medium",
@@ -18,14 +19,18 @@ const tooltipStyles = {
    * Estilos del componente Tooltip
    */
   tooltip: ({ theme }) => ({
-    background: theme.vars.palette.background.default,
+    background: theme.vars.palette.background.contrastDefault,
     padding: theme.vars.size.baseSpacings.sp2,
     borderRadius: theme.vars.size.borderRadius.r1,
     boxShadow: theme.vars.customShadows.z3,
     ".MuiTooltip-arrow": {
       "&::before": {
-        backgroundColor: theme.vars.palette.background.default,
-        borderRadius: theme.vars.size.borderRadius["r0-5"]
+        backgroundColor: theme.vars.palette.background.contrastDefault,
+        borderRadius: theme.vars.size.borderRadius["r1"],
+        width: theme.vars.size.baseSpacings.sp3,
+        height: theme.vars.size.baseSpacings.sp3,
+        border: "unset",
+        margin: "unset"
       }
     }
   })

package/components/mui_extended/Typography/types.d.ts

@@ -3,6 +3,7 @@ import { Sizes, TypographyVariants } from '@m4l/styles';
 import { TypographySlots } from './slots/typographyEnum';
 import { TYPOGRAPHY_KEY_COMPONENT } from './constants';
 import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { DeepKeyOf } from 'src/utils/types';
 /**
  * Define los colores de tipografía disponibles para el componente.
  */
@@ -23,7 +24,7 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     /**
      * Opción de color usada para pintar el componente.
      */
-    color?: TypographyColors;
+    color?: DeepKeyOf<Theme['vars']['palette']> | string;
     /**
      * Opciones de tamaño del componente.
      */

package/components/mui_extended/Typography/typography.styles.js

@@ -1,3 +1,4 @@
+import { getPropertyByString } from "@m4l/core";
 import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
 const typographyStyles = {
@@ -8,7 +9,9 @@ const typographyStyles = {
   root: ({ ownerState, theme }) => ({
     margin: 0,
     cursor: "default",
-    fontFamily: ownerState?.fontFamily || "Inter",
+    ...ownerState?.fontFamily && ownerState?.fontFamily !== "Inter" && {
+      fontFamily: ownerState?.fontFamily
+    },
     "&.M4lclassCssSpecificity": {
       // Estilos generales 🌐
       // skeleton spacing when multiple rows 🦴
@@ -17,17 +20,11 @@ const typographyStyles = {
         flexDirection: "column"
       },
       // Override de estilos generales de MUI 🚫
-      // color text.primary 🎨
-      ...ownerState?.color === "text.primary" && {
-        color: theme.vars.palette.text.primary
-      },
-      // color text.secondary 🎨
-      ...ownerState?.color === "text.secondary" && {
-        color: theme.vars.palette.text.secondary
-      },
       // color text.disabled 🎨
-      ...(ownerState?.disabled || ownerState?.color === "text.disabled") && {
+      ...ownerState?.disabled || ownerState?.color === "text.disabled" ? {
         color: theme.vars.palette.text.disabled
+      } : {
+        color: getPropertyByString(theme.vars.palette, ownerState?.color || "text.primary", "text.primary")
       },
       ...getTypographyStyles(
         theme.generalSettings.isMobile,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.18",
+  "version": "9.3.19-BE093025-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "^7.0.0",
-    "@m4l/styles": "^7.0.0",
+    "@m4l/graphics": "7.1.5-BE093025-beta.1",
+    "@m4l/styles": "7.1.34-BE093025-beta.1",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
     "@mui/x-date-pickers": "6.20.2",