@m4l/components 9.1.88 → 9.1.90

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;