@m4l/components 9.1.88 → 9.1.90

package/@types/types.d.ts

@@ -141,10 +141,14 @@ import { RHFAutocompleteOwnerState, RHFAutocompleteSlotsType } from '../componen
 import { PropagateLoaderSpinnerOwnerState, PropagateLoaderSpinnerType } from '../components/extended/React-Spinners/PropagateLoaderSpinner/types';
 import { LinearProgressIndeterminateOwnerState, LinearProgressIndeterminateType } from '../components/LinearProgressIndeterminate/types';
 import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_extended/MenuDivider/types';
+import { NavLinkOwnerState, NavLinkSlotsType } from '../components/mui_extended/NavLink/types';
+
 import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form/RHFSelect/types';
 import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-form/RHFCheckbox/types';
+import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
 import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
 
+
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -202,7 +206,9 @@ declare module '@mui/material/styles' {
     M4LRHFTextFieldPassword: RHFTextFieldPasswordType;
     M4LLinearProgressIndeterminate: LinearProgressIndeterminateType;
     M4LMenuDivider: MenuDividerSlotsType;
+    M4LNavLink: NavLinkSlotsType;
     M4LRHFSelect: RHFSelectSlotsType;
+    M4LDateTimePicker: DateTimePickerSlotsType;
     M4LDivider: DividerSlotsType;
   }
 
@@ -262,9 +268,10 @@ declare module '@mui/material/styles' {
     M4LRHFTextFieldPassword: Partial<RHFTextFieldPasswordOwnerState>;
     M4LLinearProgressIndeterminate: Partial<LinearProgressIndeterminateOwnerState>;
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
+    M4LNavLink: Partial<NavLinkOwnerState>;
     M4LRHFSelect: Partial<RHFSelectOwnerState>;
+    M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
     M4LDivider: Partial<DividerOwnerState>;
-
   }
 
   interface Components {
@@ -538,12 +545,23 @@ declare module '@mui/material/styles' {
         styleOverrides?: ComponentsOverrides<Theme>['M4LMenuDivider'];
         variants?: ComponentsVariants['M4LMenuDivider'];
       };
+    M4LNavLink?: {
+        defaultProps?: ComponentsPropsList['M4LNavLink'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LNavLink'];
+        variants?: ComponentsVariants['M4LNavLink'];
+      };
 
     M4LRHFSelect?: {
         defaultProps?: ComponentsPropsList['M4LRHFSelect'];
         styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
         variants?: ComponentsVariants['M4LRHFSelect'];
     };
+
+    M4LDateTimePicker?: {
+      defaultProps?: ComponentsPropsList['M4LDateTimePicker'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDateTimePicker'];
+      variants?: ComponentsVariants['M4LDateTimePicker'];
+  };
     M4LDivider?: {
         defaultProps?: ComponentsPropsList['M4LDivider'];
         styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];

package/components/Chip/Chip.js

@@ -11,6 +11,7 @@ const Chip = forwardRef((props, ref) => {
     label,
     startIcon,
     color = "default",
+    externalColor,
     size = "small",
     variant = "contained",
     skeletonWidth = "100%",
@@ -29,7 +30,8 @@ const Chip = forwardRef((props, ref) => {
     chipSize: adjustedSize,
     variant,
     color,
-    opacity
+    opacity,
+    externalColor
   };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(

package/components/Chip/ChipStyles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../utils/getHeightSizeStyles.js";
 const chipStyles = {
   /**
    * Styles for the root element of the chip.
@@ -7,25 +8,30 @@ const chipStyles = {
    * @updatedUser Andrés Quintero - automatic
    */
   root: ({ theme, ownerState }) => {
-    const keyColor = ownerState.color || "defualt";
-    const keyColorOpacity = keyColor + "Opacity";
-    const keyColorConditionalOpacity = ownerState.opacity ? keyColorOpacity : keyColor;
-    const bgColor = ownerState.variant !== "outlined" ? theme.vars.palette.chips[keyColorConditionalOpacity].backgroundColor : "transparent";
-    const bgActive = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundActive;
-    const bgHover = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundHover;
-    const color = ownerState.variant === "contained" && !ownerState.opacity ? theme.vars.palette.chips[keyColorConditionalOpacity].contrastText : theme.vars.palette.chips[keyColorConditionalOpacity].semanticText;
+    const keyColor = ownerState.variant === "contained" ? ownerState.color + "Contained" : ownerState.color + "Outlined";
+    const finalPalette = ownerState.externalColor ? ownerState.externalColor : theme.vars.palette.chips[keyColor ?? "default"];
+    const color = ownerState.opacity ? finalPalette.color : finalPalette.colorTone;
+    const bgColor = ownerState.opacity ? finalPalette.backgroundColor : finalPalette.backgroundColorTone;
+    const bgHover = ownerState.opacity ? finalPalette.backgroundHover : finalPalette.backgroundHoverTone;
+    const bgActive = ownerState.opacity ? finalPalette.backgroundActive : finalPalette.backgroundActiveTone;
     return {
       display: "flex",
       alignItems: "center",
       padding: theme.vars.size.baseSpacings.sp1,
+      paddingRight: 0,
       borderRadius: theme.vars.size.borderRadius["r0-5"],
       width: "max-content",
       cursor: "pointer",
       color,
-      backgroundColor: bgColor,
+      backgroundColor: !(ownerState.variant === "outlined") ? bgColor : "transparent",
       "& .M4LIcon-icon": {
         backgroundColor: `${color} !important`
       },
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.chipSize || "medium",
+        "base"
+      ),
       "&:hover": {
         backgroundColor: bgHover
       },
@@ -37,15 +43,14 @@ const chipStyles = {
       },
       ...ownerState.variant === "outlined" && {
         border: `${theme.vars.size.borderStroke.container}`,
-        borderColor: color
+        borderColor: bgColor
       },
       "&:focus-visible": {
         boxShadow: "none",
-        outline: theme.vars.size.borderStroke.container,
-        outlineColor: theme.vars.palette.border.main,
-        outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+        outline: `${theme.vars.size.borderStroke.container} ${theme.vars.palette.border.main}`,
         backgroundColor: bgActive
-      }
+      },
+      variants: []
     };
   },
   /**
@@ -58,7 +63,7 @@ const chipStyles = {
   textChip: ({ theme }) => ({
     whiteSpace: "nowrap",
     paddingLeft: theme.vars.size.baseSpacings.sp1,
-    paddingRight: theme.vars.size.baseSpacings.sp1
+    paddingRight: theme.vars.size.baseSpacings.sp2
   }),
   /**
    * Styles for the chip icon element.

package/components/Chip/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { ChipColor, ComponentPalletColor, Sizes } from '@m4l/styles';
 import { Theme } from '@mui/material';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { EventHandler, ReactNode } from 'react';
@@ -39,7 +39,11 @@ export interface ChipProps {
      * Defines the color of the `Chip`.
      * @createdAt 2025-01-08 10:36:39 - automatic
      */
-    color?: Exclude<ComponentPalletColor, 'primary'>;
+    color?: Exclude<ComponentPalletColor, 'primary'> | 'florest' | 'disabled';
+    /**
+     * Alternative color for the `Chip`.
+     */
+    externalColor?: ChipColor;
     /**
      * Define el with of skeleton mode
      * @createdAt 2025-01-08 10:36:39 - automatic
@@ -75,9 +79,10 @@ export interface ChipProps {
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.
  */
-export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'color'> {
+export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'externalColor'> {
     opacity?: boolean;
     chipSize: ChipProps['size'];
+    color: Exclude<ComponentPalletColor, 'primary'> | 'florest' | 'disabled';
 }
 /**
  * Defines the types of Slots available for the `Chip`.

package/components/hook-form/RHFDateTime/RHFDateTime.d.ts

@@ -1,5 +1,9 @@
 import { RHFDateTimeProps } from './types';
 /**
  * TODO: Documentar
+ * @author DanielEscobar - automatic
+ * @createdAt 2025-01-27 14:53:37 - automatic
+ * @updatedAt 2025-01-28 12:16:07 - automatic
+ * @updatedUser DanielEscobar - automatic
  */
 export declare function RHFDateTime(props: RHFDateTimeProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFDateTime/RHFDateTime.js

@@ -1,79 +1,44 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useFormContext, Controller } from "react-hook-form";
-import { DateTimePicker } from "@mui/x-date-pickers";
-import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { S as SkeletonRHFDateTime } from "./subcomponents/Skeleton/index.js";
-import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
-import { useState, useEffect } from "react";
-import { u as useUtilityClasses } from "./classes/index.js";
 import clsx from "clsx";
-import { R as RHFDateTimeRoot } from "./styles.js";
-import { g as getNameRHFDateTimeDataTestId } from "./test/utils.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
-import { u as useFormFocus } from "../../../hooks/useFormFocus/index.js";
+import { useId } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import { useFormatter } from "@m4l/graphics";
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { D as DateTimePicker } from "../../mui_extended/DateTimePicker/DateTimePicker.js";
+import { R as RHFDateTimeRootStyled } from "./slots/RHFDateTimeSlots.js";
+import { R as RHF_DATE_TIME_KEY_COMPONENT } from "./constants.js";
+import { R as RHFDateTimeSlots } from "./slots/RHFDateTimeEnum.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { L as Label } from "../../Label/Label.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
-import { I as Icon } from "../../Icon/Icon.js";
 function RHFDateTime(props) {
   const {
     name: nameRHF,
     disabled,
-    size = "small",
+    size = "medium",
     variant,
-    skeletonWidth = "50%",
-    skeletonHeight = 14,
-    className,
     label,
     helperMessage,
     mandatory,
-    mandatoryMessage
+    mandatoryMessage,
+    className,
+    dataTestId
   } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const resourceIcon = () => {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/rhfdate/ended_at.svg`
-      }
-    );
-  };
-  const [currentVariant, setCurrentVariant] = useState(void 0);
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(void 0);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const isSkeleton = useModuleSkeleton();
+  const { control } = useFormContext();
+  const htmlForId = useId();
   const {
     dateFormatter: { datetimeFormat }
   } = useFormatter();
-  const isDesktop = useResponsiveDesktop();
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    disabled,
-    size: isDesktop ? size : "medium",
-    variant: currentVariant
-  };
-  const classes = useUtilityClasses(ownerState);
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const classes = getComponentClasses(RHF_DATE_TIME_KEY_COMPONENT, RHFDateTimeSlots);
   return /* @__PURE__ */ jsx(
-    RHFDateTimeRoot,
+    RHFDateTimeRootStyled,
     {
-      className: clsx(classes.root, className),
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameRHFDateTimeDataTestId("root") } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
+      className: clsx(className, classes.root),
+      ...getPropDataTestId(RHF_DATE_TIME_KEY_COMPONENT, RHFDateTimeSlots.root, dataTestId),
+      children: /* @__PURE__ */ jsx(
         Controller,
         {
           name: nameRHF,
@@ -83,7 +48,9 @@ function RHFDateTime(props) {
               label && /* @__PURE__ */ jsx(
                 Label,
                 {
-                  htmlFor: "",
+                  disabled,
+                  htmlFor: htmlForId,
+                  size: adjustedSize,
                   label,
                   mandatory,
                   mandatoryMessage,
@@ -93,41 +60,27 @@ function RHFDateTime(props) {
               /* @__PURE__ */ jsx(
                 DateTimePicker,
                 {
-                  sx: {
-                    "& .MuiTouchRipple-root": {
-                      display: "none"
-                    }
-                  },
+                  variant,
+                  size: adjustedSize,
+                  disabled,
                   inputRef: ref,
-                  ampm: true,
-                  value,
-                  onChange: (newValue) => {
-                    onChange(newValue);
-                  },
-                  slots: {
-                    openPickerIcon: resourceIcon
-                  },
                   slotProps: {
-                    textField: {
-                      onFocus: handlerFocus,
-                      onBlur: handlerOnBlur
+                    field: {
+                      format: datetimeFormat
                     },
-                    field: { format: datetimeFormat }
-                  }
+                    textField: {
+                      id: htmlForId
+                    }
+                  },
+                  value,
+                  onChange,
+                  error: !!error?.message
                 }
               ),
-              error?.message && /* @__PURE__ */ jsx(HelperError, { message: error?.message + "" })
+              error?.message && /* @__PURE__ */ jsx(HelperError, { size: adjustedSize, htmlFor: htmlForId, message: error?.message + "" })
             ] });
           }
         }
-      ) : /* @__PURE__ */ jsx(
-        SkeletonRHFDateTime,
-        {
-          skeletonWidth,
-          skeletonHeight,
-          className: classes,
-          label
-        }
       )
     }
   );

package/components/hook-form/RHFDateTime/RHFDateTime.styles.d.ts

@@ -0,0 +1,2 @@
+import { RHFDateTimeStyles } from './types';
+export declare const rhfDateTimeStyles: RHFDateTimeStyles;

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

@@ -0,0 +1,17 @@
+const rhfDateTimeStyles = {
+  /**
+   * estilos root
+   * @author DanielEscobar - automatic
+   * @createdAt 2025-01-27 11:56:49 - automatic
+   * @updatedAt 2025-01-27 11:56:50 - automatic
+   * @updatedUser DanielEscobar - automatic
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  })
+};
+export {
+  rhfDateTimeStyles as r
+};

package/components/hook-form/RHFDateTime/constants.d.ts

@@ -0,0 +1 @@
+export declare const RHF_DATE_TIME_KEY_COMPONENT = "M4LRHFDateTime";

package/components/hook-form/RHFDateTime/constants.js

@@ -0,0 +1,4 @@
+const RHF_DATE_TIME_KEY_COMPONENT = "M4LRHFDateTime";
+export {
+  RHF_DATE_TIME_KEY_COMPONENT as R
+};

package/components/hook-form/RHFDateTime/slots/RHFDateTimeEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum RHFDateTimeSlots {
+    root = "root"
+}

package/components/hook-form/RHFDateTime/slots/RHFDateTimeEnum.js

@@ -0,0 +1,7 @@
+var RHFDateTimeSlots = /* @__PURE__ */ ((RHFDateTimeSlots2) => {
+  RHFDateTimeSlots2["root"] = "root";
+  return RHFDateTimeSlots2;
+})(RHFDateTimeSlots || {});
+export {
+  RHFDateTimeSlots as R
+};

package/components/hook-form/RHFDateTime/slots/RHFDateTimeSlots.d.ts

@@ -0,0 +1 @@
+export declare const RHFDateTimeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/hook-form/RHFDateTime/slots/RHFDateTimeSlots.js

@@ -0,0 +1,9 @@
+import { styled } from "@mui/material";
+import { R as RHF_DATE_TIME_KEY_COMPONENT } from "../constants.js";
+import { r as rhfDateTimeStyles } from "../RHFDateTime.styles.js";
+const RHFDateTimeRootStyled = styled("div", {
+  name: RHF_DATE_TIME_KEY_COMPONENT
+})(rhfDateTimeStyles.root);
+export {
+  RHFDateTimeRootStyled as R
+};

package/components/hook-form/RHFDateTime/tests/RHFDateTime.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/hook-form/RHFDateTime/types.d.ts

@@ -1,20 +1,21 @@
+import { Sizes } from '@m4l/styles';
+import { TextFieldVariants } from '../../../components/mui_extended/TextField/types';
 import { LabelProps } from '../../Label/types';
+import { M4LOverridesStyleRules } from '../../../../src/@types/augmentations';
+import { Theme } from '@mui/material';
+import { RHFDateTimeSlots } from './slots/RHFDateTimeEnum';
+import { RHF_DATE_TIME_KEY_COMPONENT } from './constants';
 export interface RHFDateTimeProps extends Omit<LabelProps, 'label'> {
-    skeletonWidth?: string | number;
-    skeletonHeight?: string | number;
     name: string;
-    variant?: RHFDateTimeVariants;
-    size?: SizeType;
+    variant?: TextFieldVariants;
+    size?: Extract<Sizes, 'small' | 'medium'>;
     disabled?: boolean;
     className?: string;
     label?: string;
     helperMessage?: string;
+    /**
+     * dataTestId
+     */
+    dataTestId?: string;
 }
-type SizeType = 'small' | 'medium';
-export type RHFDateTimeVariants = 'info' | 'success' | 'warning' | undefined;
-export interface OwnerState extends Pick<RHFDateTimeProps, 'size' | 'disabled'> {
-    isFocus: boolean;
-    isTabSelected: boolean;
-    variant?: RHFDateTimeVariants | 'error';
-}
-export {};
+export type RHFDateTimeStyles = M4LOverridesStyleRules<keyof typeof RHFDateTimeSlots, typeof RHF_DATE_TIME_KEY_COMPONENT, Theme>;

package/components/index.d.ts

@@ -28,7 +28,7 @@ export * from './maps';
 export * from './modal';
 export * from './LoadingError';
 export * from './MFLoader';
-export { NavLink } from './NavLink';
+export { NavLink } from './mui_extended/NavLink';
 export * from './NoItemSelected';
 export * from './NoItemSelected/dictionary';
 export * from './ObjectLogs';

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

@@ -58,11 +58,7 @@ const autocompleteSyles = {
    * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  chip: ({ theme }) => ({
-    "& .M4LIconClass-root": {
-      backgroundColor: theme.vars.palette.chips.default.semanticText
-    }
-  }),
+  chip: {},
   /**
    * Styles for the text field component.
    * @author SebastianM - automatic

package/components/mui_extended/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,33 @@
+import { DateTimePickerProps } from './types';
+/**
+ * DataTimePicker es un refactor del componente de material UI.
+ * @author DanielEscobar - automatic
+ * @createdAt 2025-01-27 14:53:37 - automatic
+ * @updatedAt 2025-01-28 13:53:42 - automatic
+ * @updatedUser DanielEscobar - automatic
+ *
+ *  ```tsx *
+ * const ExampleComponent = () => {
+ *   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+ *
+ *   const handleDateChange = (date: Date | null) => {
+ *     setSelectedDate(date);
+ *   };
+ *
+ *   return (
+ *       <DateTimePicker
+ *         size="medium"
+ *         error={false}
+ *         disabled={false}
+ *         variant="outlined"
+ *         ampm={true}
+ *         value={selectedDate}
+ *         onChange={handleDateChange}
+ *       />
+ *   );
+ * };
+ *
+ * export default ExampleComponent;
+ * ```
+ */
+export declare const DateTimePicker: (props: DateTimePickerProps<Date>) => import("react/jsx-runtime").JSX.Element;