@m4l/components 9.1.87 → 9.1.89

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/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;

package/components/mui_extended/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,154 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useMemo, useCallback } from "react";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { useIsMobile } from "@m4l/graphics";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { P as PopperStyled, a as PickersCalendarHeaderStyled, I as IconButtonStyled, b as PickersDayStyled, c as PaperStyled, S as SkeletonStyled, M as MobileDateTimePickerRootStyled, D as DesktopDateTimePickerRootStyled } from "./slots/DateTimePickerSlots.js";
+import { d as date, c as chevron_right, a as chevron_left, b as chevron_down } from "./icons.js";
+import { D as DateTimePickerEnum } from "./slots/DateTimePickerEnum.js";
+import { D as DATE_TIME_PICKER_KEY_COMPONENT } from "./constants.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { I as IconButton } from "../IconButton/IconButton.js";
+const DateTimePicker = (props) => {
+  const {
+    size = "medium",
+    error = false,
+    disabled = false,
+    className,
+    dataTestId,
+    variant,
+    ampm = true,
+    value,
+    onChange,
+    ...others
+  } = props;
+  const isMobile = useIsMobile();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const ownerState = useMemo(() => ({
+    size: adjustedSize,
+    error,
+    variant,
+    disabled
+  }), [adjustedSize, disabled, error, variant]);
+  const openPickerButton = useCallback((args) => {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...args,
+        icon: `${host_static_assets}/${environment_assets}/${date}`,
+        size: adjustedSize,
+        disabled
+      }
+    );
+  }, [adjustedSize, disabled, environment_assets, host_static_assets]);
+  const popper = useCallback((args) => {
+    return /* @__PURE__ */ jsx(PopperStyled, { ...args, ownerState, ...getPropDataTestId(DATE_TIME_PICKER_KEY_COMPONENT, DateTimePickerEnum.popper, dataTestId) });
+  }, [ownerState]);
+  const calendarHeader = useCallback((args) => {
+    return /* @__PURE__ */ jsx(PickersCalendarHeaderStyled, { ...args, ownerState, ...getPropDataTestId(DATE_TIME_PICKER_KEY_COMPONENT, DateTimePickerEnum.pickersCalendarHeader, dataTestId) });
+  }, [ownerState]);
+  const nextIconButton = useCallback((args) => {
+    return /* @__PURE__ */ jsx(
+      IconButtonStyled,
+      {
+        ...args,
+        ownerState,
+        size: adjustedSize,
+        disabled,
+        icon: `${host_static_assets}/${environment_assets}/${chevron_right}`
+      }
+    );
+  }, [adjustedSize, disabled, environment_assets, host_static_assets, ownerState]);
+  const previousIconButton = useCallback((args) => {
+    return /* @__PURE__ */ jsx(
+      IconButtonStyled,
+      {
+        ...args,
+        ownerState,
+        size: adjustedSize,
+        disabled,
+        icon: `${host_static_assets}/${environment_assets}/${chevron_left}`
+      }
+    );
+  }, [adjustedSize, disabled, environment_assets, host_static_assets, ownerState]);
+  const switchViewButton = useCallback((args) => {
+    return /* @__PURE__ */ jsx(
+      IconButtonStyled,
+      {
+        ...args,
+        ownerState,
+        size: adjustedSize,
+        disabled,
+        icon: `${host_static_assets}/${environment_assets}/${chevron_down}`
+      }
+    );
+  }, [adjustedSize, disabled, environment_assets, host_static_assets, ownerState]);
+  const day = useCallback((args) => {
+    return /* @__PURE__ */ jsx(PickersDayStyled, { ...args, disableRipple: true, ownerState, ...getPropDataTestId(DATE_TIME_PICKER_KEY_COMPONENT, DateTimePickerEnum.pickersDay, dataTestId) });
+  }, [ownerState]);
+  const mobilePaper = useCallback((args) => {
+    return /* @__PURE__ */ jsx(PaperStyled, { ...args, ownerState, ...getPropDataTestId(DATE_TIME_PICKER_KEY_COMPONENT, DateTimePickerEnum.paper, dataTestId) });
+  }, [ownerState]);
+  const classes = getComponentClasses(DATE_TIME_PICKER_KEY_COMPONENT, DateTimePickerEnum);
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonStyled, { ownerState, ...getPropDataTestId(DATE_TIME_PICKER_KEY_COMPONENT, DateTimePickerEnum.skeleton, dataTestId) });
+  }
+  return isMobile ? /* @__PURE__ */ jsx(
+    MobileDateTimePickerRootStyled,
+    {
+      ownerState,
+      ampm,
+      disabled,
+      value,
+      onChange,
+      slots: {
+        calendarHeader,
+        nextIconButton,
+        previousIconButton,
+        switchViewButton,
+        day,
+        mobilePaper
+      },
+      slotProps: {
+        textField: {
+          className: clsx(className, classes.rootMobile),
+          "data-testid": getPropDataTestId(DATE_TIME_PICKER_KEY_COMPONENT, DateTimePickerEnum.rootMobile, dataTestId)["data-testid"]
+        }
+      },
+      ...others
+    }
+  ) : /* @__PURE__ */ jsx(
+    DesktopDateTimePickerRootStyled,
+    {
+      ownerState,
+      ampm,
+      disabled,
+      value,
+      onChange,
+      slots: {
+        openPickerButton,
+        popper,
+        calendarHeader,
+        nextIconButton,
+        previousIconButton,
+        switchViewButton,
+        day
+      },
+      slotProps: {
+        textField: {
+          className: clsx(className, classes.rootDesktop),
+          "data-testid": getPropDataTestId(DATE_TIME_PICKER_KEY_COMPONENT, DateTimePickerEnum.rootDesktop, dataTestId)["data-testid"]
+        }
+      },
+      ...others
+    }
+  );
+};
+export {
+  DateTimePicker as D
+};

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

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