@m4l/components 9.1.70 → 9.1.71

package/components/mui_extended/Select/slots/SelectSlots.js

@@ -1,37 +1,46 @@
 import { Select } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { S as SELECT_KEY_COMPONENT } from "../constants.js";
+import { a as SELECT_KEY_COMPONENT } from "../constants.js";
 import { s as selectStyles } from "../Select.styles.js";
 import { S as SelectSlots } from "./SelectEnum.js";
 import { I as IconButton } from "../../IconButton/IconButton.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { T as Typography } from "../../Typography/Typography.js";
+import { I as Icon } from "../../../Icon/Icon.js";
 import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 const SelectRootStyled = styled(Select, {
   name: SELECT_KEY_COMPONENT,
-  slot: SelectSlots.selectRoot
-})(selectStyles?.selectRoot);
-const IconButtonStyled = styled(IconButton, {
+  slot: SelectSlots.root
+})(selectStyles?.root);
+const AdormentStyled = styled(Icon, {
   name: SELECT_KEY_COMPONENT,
-  slot: SelectSlots.iconButton
-})(selectStyles?.iconButton);
-const MenuItemSelectStyled = styled(MenuItem, {
+  slot: SelectSlots.adorment
+})(selectStyles?.adorment);
+const MenuItemListStyled = styled(MenuItem, {
   name: SELECT_KEY_COMPONENT,
-  slot: SelectSlots.menuItemSelect
-})(selectStyles?.menuItemSelect);
+  slot: SelectSlots.menuItemList
+})(selectStyles?.menuItemList);
+const MenuItemNoOptionStyled = styled(MenuItem, {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.menuItemNoOptions
+})(selectStyles?.menuItemNoOptions);
 const SkeletonSelectStyled = styled(Skeleton, {
   name: SELECT_KEY_COMPONENT,
   slot: SelectSlots.skeletonSelect
 })(selectStyles?.skeletonSelect);
-const RenderOptionContainerStyled = styled("div", {
+const RenderValueContainerStyled = styled("div", {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.renderValueContainer
+})(selectStyles?.renderValueContainer);
+const ArrowDownStyled = styled(IconButton, {
   name: SELECT_KEY_COMPONENT,
-  slot: SelectSlots.renderOptionContainer
-})(selectStyles?.renderOptionContainer);
-styled("div", {
+  slot: SelectSlots.arrowDown
+})(selectStyles?.arrowDown);
+const RenderValueTypography = styled(Typography, {
   name: SELECT_KEY_COMPONENT,
-  slot: SelectSlots.menuOptions
-})(selectStyles?.menuOptions);
-const LabelOptionStyled = styled(Typography, {
+  slot: SelectSlots.renderValueTypography
+})(selectStyles?.renderValueTypography);
+styled(Typography, {
   name: SELECT_KEY_COMPONENT,
   slot: SelectSlots.labelOption
 })(selectStyles?.labelOption);
@@ -40,11 +49,13 @@ const LabelPlaceholerStyled = styled(Typography, {
   slot: SelectSlots.labelPlaceholer
 })(selectStyles?.labelPlaceholer);
 export {
-  IconButtonStyled as I,
+  ArrowDownStyled as A,
   LabelPlaceholerStyled as L,
-  MenuItemSelectStyled as M,
-  RenderOptionContainerStyled as R,
+  MenuItemListStyled as M,
+  RenderValueContainerStyled as R,
   SkeletonSelectStyled as S,
   SelectRootStyled as a,
-  LabelOptionStyled as b
+  MenuItemNoOptionStyled as b,
+  AdormentStyled as c,
+  RenderValueTypography as d
 };

package/components/mui_extended/Select/slots/index.js

@@ -0,0 +1 @@
+

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

@@ -1,9 +1,10 @@
-import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { Sizes } from '@m4l/styles';
 import { PaletteColor, Theme } from '@mui/material';
 import { SelectProps as MUISelectProps } from '@mui/material/Select';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { SELECT_KEY_COMPONENT } from './constants';
 import { SelectSlots } from './slots';
+import { M4LOverridesStyleRules } from 'src/@types/augmentations';
+import { default as React } from 'react';
 /**
  * Representa una opción dentro del Select.
  * id - Identificador único de la opción. Puede ser número o string.
@@ -11,52 +12,63 @@ import { SelectSlots } from './slots';
  * [icon] - (Opcional) URL del ícono asociado a la opción.
  * @createdAt 2024-10-22 10:30:26 - automatic
  */
-export type selectOption = {
-    id: string;
+export type selectOption<T = unknown> = {
+    id: T;
     label: string;
-    startAdornment?: string;
-    endAdornment?: string;
+    startAdornment?: React.ReactNode;
 };
 /**
  * Propiedades que acepta el componente `Select`, extendiendo las propiedades de Material-UI `SelectProps`.
- * [id] - Identificador opcional del componente.
- * [size] - Tamaño del Select, valores posibles: 'small', 'medium', etc.
- * [src] - Fuente opcional, si es aplicable.
- * options - Array de opciones que recibirá el Select.
- * value - Valor o valores seleccionados.
- * onChange - Función que se ejecuta al cambiar la selección.
- * [multiple] - Define si el Select es de selección múltiple.
- * [disabled] - Establece si el Select está deshabilitado.
- * [error] - Define si el Select está en estado de error.
- * [componentPaletteColor] - Personaliza el color del componente.
- * [color] - Define el color del Select.
- * variant - Variante del Select.
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 10:30:26 - automatic
  * @updatedAt 2025-01-03 11:42:15 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
-export interface SelectProps extends Omit<MUISelectProps, 'size' | 'onChange' | 'value' | 'error' | 'variant' | 'color'> {
-    id?: string;
+export interface SelectProps<T> extends Omit<MUISelectProps<T>, 'size' | 'onChange' | 'error' | 'variant' | 'color'> {
+    /**
+     * Lista de opciones para enseñar en el Select.
+     */
+    options: selectOption<T>[];
+    /**
+     * Tamaño del Select.
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
-    src?: string;
-    options: Array<selectOption>;
-    value: number | string | string[] | number[];
-    onChange: (options: selectOption | selectOption[]) => void;
+    /**
+     * procedimiento para ejecutarse cuando cabia la selección.
+     */
+    onChange?: (option: selectOption<T>) => void;
+    /**
+     * Define si el Select está deshabilitado.
+     */
     disabled?: boolean;
+    /**
+     * Define si el Select está en estado de error.
+     */
     error?: boolean;
+    /**
+     * Enseña un texto de guia en el Select.
+     */
     placeholder?: string;
-    color?: Extract<ComponentPalletColor, 'default'>;
-    variant: 'text' | 'outlined';
+    /**
+     * Variaciones de apariecia del Select.
+     */
+    variant?: 'text' | 'outlined';
+    /**
+     * Classes personalizadas.
+     */
     className?: string;
+    /**
+     * Identificador único del componente, para pruebas automatizadas.
+     */
+    dataTestId?: string;
 }
 /**
  * Propiedades internas que definen el estado del componente `Select`.
  * paletteColor - Color de la paleta aplicado al Select.
  */
-export interface SelectOwnerState extends Pick<SelectProps, 'classes' | 'size' | 'error' | 'color' | 'variant' | 'disabled'> {
-    dissabled?: boolean;
+export interface SelectOwnerState extends Pick<SelectProps<unknown>, 'classes' | 'size' | 'error' | 'variant' | 'disabled'> {
     paletteColor: PaletteColor;
+    disabled?: boolean;
 }
 /**
  * Define los tipos de slots disponibles en el Select.
@@ -65,4 +77,4 @@ export type SelectSlotsType = keyof typeof SelectSlots;
 /**
  * Estilos aplicables al componente Select.
  */
-export type SelectStyles = Partial<OverridesStyleRules<SelectSlotsType, typeof SELECT_KEY_COMPONENT, Theme>>;
+export type SelectStyles = M4LOverridesStyleRules<SelectSlotsType, typeof SELECT_KEY_COMPONENT, Theme>;

package/components/mui_extended/TextField/TextField.js

@@ -49,7 +49,7 @@ const TextField = forwardRef(function TextField2(props, ref) {
     {
       ref,
       ownerState: { ...ownerState },
-      className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES.variant, className),
+      className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES[variant], className),
       ...getPropDataTestId(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots.root, dataTestId),
       autoComplete,
       value,

package/package.json

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