@povio/ui 2.1.14 → 2.1.16

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -1,265 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Time, today, getLocalTimeZone, createCalendar, CalendarDateTime, now } from "@internationalized/date";
-import { mergeRefs } from "@react-aria/utils";
-import { useEffect, useRef } from "react";
-import { useDatePicker, useLocale } from "react-aria";
-import { Controller } from "react-hook-form";
-import { useDatePickerState, useCalendarState } from "react-stately";
-import { Calendar } from "../shared/Calendar.js";
-import { DatePickerInput } from "../shared/DatePickerInput.js";
-import { DateTimeDialog } from "../shared/DateTimeDialog.js";
-import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
-import { FormField } from "../../FormField/FormField.js";
-import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
-const PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
-const DateTimePickerBase = (props) => {
-  const ui = UIConfig.useConfig();
-  const {
-    ref,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    error,
-    onChange,
-    value,
-    disableDropdown,
-    isTimeOptional,
-    placeholder,
-    hideLabel = ui.input.hideLabel,
-    variant = ui.input.variant,
-    as = ui.input.as,
-    size = ui.input.size,
-    isClearable = ui.input.isClearable,
-    todayIcon = ui.dateInput.todayIcon,
-    shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros,
-    disableManualEntry = ui.dateInput.disableManualEntry,
-    ...rest
-  } = props;
-  const formFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  const dialogState = useDatePickerState({
-    ...rest,
-    defaultValue: value || rest.defaultValue,
-    shouldCloseOnSelect: false,
-    granularity: "minute",
-    hideTimeZone: true,
-    shouldForceLeadingZeros
-  });
-  useEffect(() => {
-    if (isTimeOptional && !dialogState.timeValue) {
-      dialogState.setTimeValue(new Time(0, 0));
-    }
-  }, [isTimeOptional, dialogState]);
-  const state = useDatePickerState({
-    ...rest,
-    shouldForceLeadingZeros,
-    value,
-    onChange: (val) => {
-      onChange?.(val);
-      dialogState.setValue(val);
-      calendarState.setFocusedDate(val || today(getLocalTimeZone()));
-    },
-    shouldCloseOnSelect: false,
-    granularity: "minute",
-    hideTimeZone: true
-  });
-  const datePickerRef = useRef(null);
-  const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker(
-    { ...rest, label, granularity: "minute", hideTimeZone: true, shouldForceLeadingZeros },
-    state,
-    datePickerRef
-  );
-  const { calendarProps } = useDatePicker({ ...rest, label, shouldForceLeadingZeros }, dialogState, datePickerRef);
-  const { locale } = useLocale();
-  const calendarState = useCalendarState({
-    ...calendarProps,
-    locale,
-    createCalendar
-  });
-  const headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  const onApply = () => {
-    state.setValue(dialogState.value);
-    state.toggle();
-  };
-  const onTodayPress = () => {
-    dialogState.setValue(now(getLocalTimeZone()));
-    calendarState.setFocusedDate(today(getLocalTimeZone()));
-  };
-  const onOpenChange = (isOpen) => {
-    state.toggle();
-    calendarState.setFocusedDate(state.value || today(getLocalTimeZone()));
-    if (!isOpen) {
-      dialogState.setValue(state.value);
-    }
-  };
-  const onInputBlur = (e) => {
-    if (!isTimeOptional) {
-      return;
-    }
-    const textValue = e.currentTarget.textContent;
-    const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue);
-    if (dateTimeValue) {
-      state.setValue(dateTimeValue);
-      dialogState.setValue(dateTimeValue);
-      dialogState.setTimeValue(new Time(0, 0));
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    TooltipWrapper,
-    {
-      as,
-      error,
-      children: /* @__PURE__ */ jsxs(
-        FormField,
-        {
-          ...formFieldProps,
-          as,
-          labelProps,
-          className: "relative inline-flex w-full flex-col text-left",
-          children: [
-            /* @__PURE__ */ jsx(
-              DatePickerInput,
-              {
-                ref: mergeRefs(ref, datePickerRef),
-                as,
-                groupProps,
-                fieldProps: {
-                  ...fieldProps,
-                  placeholderValue: PLACEHOLDER_VALUE,
-                  onBlur: (e) => {
-                    fieldProps.onBlur?.(e);
-                    onInputBlur(e);
-                  }
-                },
-                buttonProps,
-                isDisabled,
-                isInvalid: !!error,
-                disableDropdown,
-                variant,
-                size,
-                isDateTime: true,
-                isClearable,
-                headerProps,
-                todayIcon,
-                disableManualEntry,
-                placeholder,
-                onOpenDropdown: () => state.toggle()
-              }
-            ),
-            (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(
-              DateTimeDialog,
-              {
-                footer: /* @__PURE__ */ jsx(
-                  DateTimeDialogFooter,
-                  {
-                    isDisabled,
-                    isValid: !dialogState.isInvalid && !!dialogState.value,
-                    onTodayPress,
-                    onApply
-                  }
-                ),
-                label,
-                triggerRef: datePickerRef,
-                dialogProps,
-                isOpen: state.isOpen,
-                onOpenChange,
-                children: /* @__PURE__ */ jsx(
-                  Calendar,
-                  {
-                    state: calendarState,
-                    calendarProps,
-                    includesTime: true,
-                    datePickerState: dialogState,
-                    onApply
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-const DateTimePicker = ({
-  fullIso = true,
-  ...props
-}) => {
-  const formatDateValue = (dateValue) => {
-    if (dateValue === null) {
-      return null;
-    }
-    if (fullIso) {
-      return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
-    }
-    return DateTimeUtils.fromDateValueToISO(dateValue);
-  };
-  const parseDateValue = (isoString) => {
-    if (isoString == null) {
-      return isoString;
-    }
-    return DateTimeUtils.fromISOtoZonedDateTime(isoString);
-  };
-  if ("formControl" in props && props.formControl) {
-    const { formControl, ref, ...innerProps } = props;
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        control: formControl.control,
-        name: formControl.name,
-        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
-          DateTimePickerBase,
-          {
-            ...innerProps,
-            ref: mergeRefs(ref, field.ref),
-            value: parseDateValue(field.value),
-            onChange: (value) => field.onChange(formatDateValue(value)),
-            onBlur: field.onBlur,
-            isDisabled: field.disabled || props.isDisabled,
-            error: props.error ?? error?.message
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    DateTimePickerBase,
-    {
-      ...props,
-      value: parseDateValue(props.value),
-      onChange: (value) => props.onChange?.(formatDateValue(value))
-    }
-  );
-};
-export {
-  DateTimePicker
-};

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -1,217 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { toTime, now, getLocalTimeZone } from "@internationalized/date";
-import { mergeRefs } from "@react-aria/utils";
-import { DateTime } from "luxon";
-import { useState, useRef, useEffect } from "react";
-import { useLocale, useTimeField } from "react-aria";
-import { Controller } from "react-hook-form";
-import { useTimeFieldState } from "react-stately";
-import { DateTimeDialog } from "../shared/DateTimeDialog.js";
-import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
-import { TimePickerForm } from "../shared/TimePickerForm.js";
-import { TimePickerInput } from "../shared/TimePickerInput.js";
-import { FormField } from "../../FormField/FormField.js";
-import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
-const TimePickerBase = (props) => {
-  const ui = UIConfig.useConfig();
-  const {
-    ref,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    error,
-    onChange,
-    value,
-    disableDropdown,
-    placeholder,
-    variant = ui.input.variant,
-    as = ui.input.as,
-    size = ui.input.size,
-    hideLabel = ui.input.hideLabel,
-    isClearable = ui.input.isClearable,
-    disableManualEntry = ui.dateInput.disableManualEntry,
-    ...rest
-  } = props;
-  const formFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  const [isOpen, setIsOpen] = useState(false);
-  const initialDateEmitRef = useRef(true);
-  const { locale } = useLocale();
-  const dialogState = useTimeFieldState({
-    ...rest,
-    defaultValue: value || rest.defaultValue,
-    locale
-  });
-  const state = useTimeFieldState({
-    ...rest,
-    isDisabled,
-    value,
-    onChange,
-    locale
-  });
-  useEffect(() => {
-    if (initialDateEmitRef.current) {
-      initialDateEmitRef.current = false;
-      return;
-    }
-    if (state.timeValue) {
-      onChange?.(state.timeValue);
-    }
-  }, [rest.date]);
-  const timeFieldRef = useRef(null);
-  const { labelProps, fieldProps } = useTimeField(
-    { ...rest, label, isReadOnly: disableManualEntry },
-    state,
-    timeFieldRef
-  );
-  const headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  const onApply = () => {
-    state.setValue(dialogState.value);
-    setIsOpen(false);
-  };
-  const onOpenChange = (open) => {
-    setIsOpen(open);
-    if (!isOpen) {
-      dialogState.setValue(state.value);
-    }
-  };
-  const onOpen = () => {
-    dialogState.setValue(state.value);
-    setIsOpen(true);
-  };
-  return /* @__PURE__ */ jsx(
-    TooltipWrapper,
-    {
-      as,
-      error,
-      children: /* @__PURE__ */ jsxs(
-        FormField,
-        {
-          ...formFieldProps,
-          as,
-          labelProps,
-          className: "relative inline-flex w-full flex-col text-left",
-          children: [
-            /* @__PURE__ */ jsx(
-              TimePickerInput,
-              {
-                ref: mergeRefs(ref, timeFieldRef),
-                as,
-                fieldProps,
-                state,
-                onPress: onOpen,
-                isDisabled,
-                isInvalid: !!error,
-                disableDropdown,
-                variant,
-                size,
-                isClearable,
-                headerProps,
-                disableManualEntry,
-                placeholder
-              }
-            ),
-            (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(
-              DateTimeDialog,
-              {
-                footer: /* @__PURE__ */ jsx(
-                  DateTimeDialogFooter,
-                  {
-                    isDisabled,
-                    onApply,
-                    isValid: !dialogState.isInvalid && !!dialogState.value
-                  }
-                ),
-                label,
-                triggerRef: timeFieldRef,
-                isOpen,
-                onOpenChange,
-                children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-const TimePicker = (props) => {
-  const formatTimeValue = (timeValue) => {
-    if (timeValue === null) {
-      return null;
-    }
-    const parsedDate = props.date ? DateTime.fromISO(props.date).toJSDate() : void 0;
-    const dateValue = parsedDate ? DateTimeUtils.fromLocalToZonedDateTime(parsedDate) : now(getLocalTimeZone());
-    const dateTimeValue = dateValue.set(timeValue);
-    return DateTimeUtils.fromDateValueToISO(dateTimeValue);
-  };
-  const parseTimeValue = (isoString) => {
-    if (isoString == null) {
-      return isoString;
-    }
-    const zonedDateTime = DateTimeUtils.fromISOtoZonedDateTime(isoString);
-    return toTime(zonedDateTime);
-  };
-  if ("formControl" in props && props.formControl) {
-    const { formControl, ref, ...innerProps } = props;
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        control: formControl.control,
-        name: formControl.name,
-        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
-          TimePickerBase,
-          {
-            ...innerProps,
-            ref: mergeRefs(ref, field.ref),
-            value: parseTimeValue(field.value),
-            onChange: (value) => field.onChange(formatTimeValue(value)),
-            onBlur: field.onBlur,
-            isDisabled: field.disabled || props.isDisabled,
-            error: props.error ?? error?.message
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    TimePickerBase,
-    {
-      ...props,
-      value: parseTimeValue(props.value),
-      onChange: (value) => props.onChange?.(formatTimeValue(value))
-    }
-  );
-};
-export {
-  TimePicker
-};

package/dist/components/inputs/DateTime/shared/Calendar.js

@@ -1,85 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useCalendar } from "@react-aria/calendar";
-import { clsx } from "clsx";
-import { useState } from "react";
-import { CalendarGrid } from "./CalendarGrid.js";
-import { CalendarHeader } from "./CalendarHeader.js";
-import { MonthPicker } from "./MonthPicker.js";
-import { TimePickerForm } from "./TimePickerForm.js";
-import { YearPicker } from "./YearPicker.js";
-const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }) => {
-  const [toggleState, setToggleState] = useState(null);
-  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
-  const handleDateChange = () => {
-    if (includesTime && !datePickerState.value) {
-      setToggleState("time");
-    } else {
-      onApply();
-    }
-  };
-  const getContent = () => {
-    if (!toggleState) {
-      return /* @__PURE__ */ jsx(
-        CalendarGrid,
-        {
-          state: props.state,
-          onApply: handleDateChange
-        }
-      );
-    }
-    if (toggleState === "month") {
-      return /* @__PURE__ */ jsx(
-        MonthPicker,
-        {
-          state: props.state,
-          onSelectionChange: () => setToggleState(null)
-        }
-      );
-    }
-    if (toggleState === "year") {
-      return /* @__PURE__ */ jsx(
-        YearPicker,
-        {
-          state: props.state,
-          onSelectionChange: () => setToggleState(null)
-        }
-      );
-    }
-    if (toggleState === "time" && includesTime) {
-      return /* @__PURE__ */ jsx("div", { className: "flex h-72 w-80 items-center justify-center", children: /* @__PURE__ */ jsx(TimePickerForm, { datePickerState }) });
-    }
-    return null;
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...calendarProps,
-      className: clsx("flex min-h-0 w-full flex-col items-center", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          CalendarHeader,
-          {
-            calendarState: props.state,
-            datePickerState,
-            prevButtonProps,
-            nextButtonProps,
-            includesTime,
-            hourCycle,
-            toggleState,
-            setToggleState
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx("flex min-h-0 w-full flex-1 flex-col items-center", toggleState !== "year" && "pb-8 md:pb-0"),
-            children: getContent()
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  Calendar
-};