@povio/ui 0.0.6 → 0.0.8

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

@@ -1,248 +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 { 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,
-    todayIcon,
-    hideLabel = ui.input.hideLabel,
-    variant = ui.input.variant,
-    as = ui.input.as,
-    size = ui.input.size,
-    isClearable = ui.input.isClearable,
-    ...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
-  });
-  useEffect(() => {
-    if (isTimeOptional && !dialogState.timeValue) {
-      dialogState.setTimeValue(new Time(0, 0));
-    }
-  }, [isTimeOptional, dialogState]);
-  const state = useDatePickerState({
-    ...rest,
-    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 },
-    state,
-    datePickerRef
-  );
-  const { calendarProps } = useDatePicker({ ...rest, label }, 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__ */ 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
-          }
-        ),
-        !disableDropdown && /* @__PURE__ */ jsx(
-          DateTimeDialog,
-          {
-            footer: /* @__PURE__ */ jsx(
-              DateTimeDialogFooter,
-              {
-                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,224 +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 { 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,
-    variant = ui.input.variant,
-    as = ui.input.as,
-    size = ui.input.size,
-    hideLabel = ui.input.hideLabel,
-    isClearable = ui.input.isClearable,
-    ...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 skipOnChangeRef = useRef(false);
-  const initialDateEmitRef = useRef(true);
-  const { locale } = useLocale();
-  const dialogState = useTimeFieldState({
-    ...rest,
-    defaultValue: value || rest.defaultValue,
-    locale
-  });
-  const state = useTimeFieldState({
-    ...rest,
-    isDisabled,
-    value,
-    onChange: (val) => {
-      if (!skipOnChangeRef.current) {
-        onChange?.(val);
-      }
-    },
-    locale
-  });
-  useEffect(() => {
-    if (initialDateEmitRef.current) {
-      initialDateEmitRef.current = false;
-      return;
-    }
-    if (state.timeValue) {
-      onChange?.(state.timeValue);
-    }
-  }, [rest.date]);
-  useEffect(() => {
-    if (dialogState.timeValue || !state.value) {
-      return;
-    }
-    state.segments.forEach((segment) => {
-      if (segment.isEditable && segment.value != null) {
-        dialogState.setSegment(segment.type, segment.value);
-      }
-    });
-  }, [state.value]);
-  const timeFieldRef = useRef(null);
-  const { labelProps, fieldProps } = useTimeField({ ...rest, label }, state, timeFieldRef);
-  const headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  const onApply = () => {
-    if (!state.timeValue) {
-      skipOnChangeRef.current = true;
-      dialogState.segments.forEach((segment) => {
-        if (segment.isEditable && segment.value != null) {
-          state.setSegment(segment.type, segment.value);
-        }
-      });
-      skipOnChangeRef.current = false;
-    }
-    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__ */ 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
-          }
-        ),
-        !disableDropdown && /* @__PURE__ */ jsx(
-          DateTimeDialog,
-          {
-            footer: /* @__PURE__ */ jsx(
-              DateTimeDialogFooter,
-              {
-                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
-};