linear-react-components-ui 2.1.0-beta.1 → 2.1.0-beta.3

package/lib/inputs2/date/datefield/base.js

@@ -1,252 +1,636 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as compilerRuntimeExports } from "../../../_virtual/compiler-runtime.js";
 import React from "react";
 import _ from "../../../_virtual/lodash.js";
-import { useIMask } from "react-imask";
 import { createPortal } from "react-dom";
 import hooks from "../../../node_modules/moment/dist/moment.js";
 import Hint from "../../../hint/index.js";
 import { Tooltip } from "../../../tooltip/index.js";
 import { mergeRefs } from "../../../form2/helpers.js";
-import { Keys } from "../types.js";
-import { Root, Label, Container, Input } from "../base/index.js";
-import { TOKEN_PTBR_FORMAT, TOKEN_ISO_FORMAT, TOKEN_MASK, NAVIGATION_KEYS } from "../helpers.js";
+import { Label, Input, Container, Root } from "../base/index.js";
+import { useDateMask } from "../hooks/useDateMask.js";
+import { useDateCalendarState } from "../hooks/useDateCalendarState.js";
+import { TimeSelector } from "../timeselector.js";
+import { parseBoundary, isDayOutOfBounds, TOKEN_ISO_FORMAT, getDateFormats, clampDateToBounds, parseDateValue } from "../helpers.js";
+import { CalendarBox } from "../calendarbox.js";
 import { Triggers } from "./triggers.js";
-import { CalendarBox } from "./calendarbox.js";
 import { DateFieldContext } from "./context.js";
 import v1 from "../../../node_modules/uuid/dist/v1.js";
 const InputBase = React.forwardRef((props, ref) => {
+  const $ = compilerRuntimeExports.c(186);
+  let disabled;
+  let errors;
+  let label;
+  let max;
+  let min;
+  let onChange;
+  let placeholder;
+  let readOnly;
+  let rest;
+  let shouldCloseOnSelect;
+  let t0;
+  let t1;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t14;
+  let t15;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  let tooltip;
+  let tooltipPosition;
+  let tooltipWidth;
+  if ($[0] !== props) {
+    ({
+      label,
+      errors,
+      tooltip,
+      tooltipPosition,
+      tooltipWidth,
+      returnValueType: t0,
+      customClass: t1,
+      customClassLabel: t2,
+      customClassWrapper: t3,
+      customClassInputContainer: t4,
+      textAlign: t5,
+      labelUppercase: t6,
+      skeletonize: t7,
+      hintPosition: t8,
+      themePopover: t9,
+      popoverAlign: t10,
+      showCalendarButton: t11,
+      openCalendarOnFocus: t12,
+      undigitable: t13,
+      showClearDateButton: t14,
+      variant: t15,
+      placeholder,
+      shouldCloseOnSelect,
+      min,
+      max,
+      onChange,
+      readOnly,
+      disabled,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = disabled;
+    $[2] = errors;
+    $[3] = label;
+    $[4] = max;
+    $[5] = min;
+    $[6] = onChange;
+    $[7] = placeholder;
+    $[8] = readOnly;
+    $[9] = rest;
+    $[10] = shouldCloseOnSelect;
+    $[11] = t0;
+    $[12] = t1;
+    $[13] = t10;
+    $[14] = t11;
+    $[15] = t12;
+    $[16] = t13;
+    $[17] = t14;
+    $[18] = t15;
+    $[19] = t2;
+    $[20] = t3;
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t6;
+    $[24] = t7;
+    $[25] = t8;
+    $[26] = t9;
+    $[27] = tooltip;
+    $[28] = tooltipPosition;
+    $[29] = tooltipWidth;
+  } else {
+    disabled = $[1];
+    errors = $[2];
+    label = $[3];
+    max = $[4];
+    min = $[5];
+    onChange = $[6];
+    placeholder = $[7];
+    readOnly = $[8];
+    rest = $[9];
+    shouldCloseOnSelect = $[10];
+    t0 = $[11];
+    t1 = $[12];
+    t10 = $[13];
+    t11 = $[14];
+    t12 = $[15];
+    t13 = $[16];
+    t14 = $[17];
+    t15 = $[18];
+    t2 = $[19];
+    t3 = $[20];
+    t4 = $[21];
+    t5 = $[22];
+    t6 = $[23];
+    t7 = $[24];
+    t8 = $[25];
+    t9 = $[26];
+    tooltip = $[27];
+    tooltipPosition = $[28];
+    tooltipWidth = $[29];
+  }
+  const returnValueType = t0 === void 0 ? "default" : t0;
+  const customClass = t1 === void 0 ? "" : t1;
+  const customClassLabel = t2 === void 0 ? "" : t2;
+  const customClassWrapper = t3 === void 0 ? "" : t3;
+  const customClassInputContainer = t4 === void 0 ? "" : t4;
+  const textAlign = t5 === void 0 ? "left" : t5;
+  const labelUppercase = t6 === void 0 ? false : t6;
+  const skeletonize = t7 === void 0 ? false : t7;
+  const hintPosition = t8 === void 0 ? "below" : t8;
+  const themePopover = t9 === void 0 ? "light" : t9;
+  const popoverAlign = t10 === void 0 ? "left" : t10;
+  const showCalendarButton = t11 === void 0 ? true : t11;
+  const openCalendarOnFocus = t12 === void 0 ? true : t12;
+  const undigitable = t13 === void 0 ? false : t13;
+  const showClearDateButton = t14 === void 0 ? true : t14;
+  const variant = t15 === void 0 ? "date" : t15;
+  const isDateTime = variant === "datetime";
   const {
-    label,
-    errors,
-    tooltip,
-    tooltipPosition,
-    tooltipWidth,
-    shouldCloseOnSelect = true,
-    returnValueType = "default",
-    customClass = "",
-    customClassLabel = "",
-    customClassWrapper = "",
-    customClassInputContainer = "",
-    textAlign = "left",
-    labelUppercase = false,
-    skeletonize = false,
-    hintPosition = "below",
-    themePopover = "light",
-    popoverAlign = "left",
-    showCalendarButton = true,
-    openCalendarOnFocus = true,
-    undigitable = false,
-    showClearDateButton = true,
-    placeholder = TOKEN_PTBR_FORMAT,
-    readOnly,
-    disabled,
-    ...rest
-  } = props;
-  const [calendarBoxOpen, setCalendarBoxOpen] = React.useState(false);
-  const [activeDescendant, setActiveDescendant] = React.useState(hooks().format(TOKEN_ISO_FORMAT));
+    isoFormat,
+    ptbrFormat,
+    digits
+  } = getDateFormats(variant);
+  const shouldCloseCalendarOnSelect = shouldCloseOnSelect ?? !isDateTime;
+  const inputPlaceholder = placeholder ?? ptbrFormat;
+  let t16;
+  if ($[30] !== min) {
+    t16 = parseBoundary(min);
+    $[30] = min;
+    $[31] = t16;
+  } else {
+    t16 = $[31];
+  }
+  const minDate = t16;
+  let t17;
+  if ($[32] !== max) {
+    t17 = parseBoundary(max);
+    $[32] = max;
+    $[33] = t17;
+  } else {
+    t17 = $[33];
+  }
+  const maxDate = t17;
+  const hasBounds = Boolean(minDate || maxDate);
   const [selectedDate, setSelectedDate] = React.useState(null);
-  const [calendarDisplayDate, setCalendarDisplayDate] = React.useState(selectedDate ?? hooks());
-  const calendarRef = React.useRef(null);
   const inputRootRef = React.useRef(null);
   const dateInputRef = React.useRef(null);
-  const dateContainerRef = React.useRef(null);
+  const calendarState = useDateCalendarState({
+    inputRef: dateInputRef,
+    min: minDate,
+    max: maxDate,
+    onPressEnter: (descendant) => handleSelectDay(hooks(_.toString(descendant), TOKEN_ISO_FORMAT))
+  });
   const {
-    setValue: setMaskValue,
+    calendarBoxOpen,
+    activeDescendant,
+    calendarDisplayDate,
+    calendarRef,
+    dateContainerRef,
+    handleNextMonth,
+    handlePreviousMonth,
+    handleSetCalendarBoxOpen,
+    handleChangeActiveDescendant,
+    handleChangeCalendarDisplayDate,
+    handleKeyDownNavigation
+  } = calendarState;
+  const {
+    maskedValue,
     unmaskedValue,
-    value: maskedValue
-  } = useIMask({
-    mask: TOKEN_MASK,
-    lazy: false,
-    placeholderChar: "_"
-  }, {
-    ref: dateInputRef,
-    defaultValue: selectedDate?.format(TOKEN_PTBR_FORMAT),
-    onComplete: (value) => {
-      const date = hooks(value, TOKEN_PTBR_FORMAT);
-      if (date.isValid()) {
-        handleUpdateDateState(date);
-      }
-    }
+    setMaskValue,
+    handleOnPaste,
+    handleOnBeforeInput,
+    handleOnKeyDownCapture
+  } = useDateMask({
+    inputRef: dateInputRef,
+    variant,
+    defaultValue: selectedDate?.format(ptbrFormat),
+    undigitable,
+    readOnly,
+    onCommit: (date) => handleUpdateDateState(date),
+    onPaste: props.onPaste,
+    onBeforeInput: props.onBeforeInput
   });
-  const inputId = React.useMemo(() => props.id || props.name || v1(), [props.id, props.name]);
-  const hasLabel = !_.isEmpty(props?.label);
+  let t18;
+  if ($[34] !== props.id || $[35] !== props.name) {
+    t18 = props.id || props.name || v1();
+    $[34] = props.id;
+    $[35] = props.name;
+    $[36] = t18;
+  } else {
+    t18 = $[36];
+  }
+  const inputId = t18;
+  let t19;
+  if ($[37] !== props.label) {
+    t19 = _.isEmpty(props?.label);
+    $[37] = props.label;
+    $[38] = t19;
+  } else {
+    t19 = $[38];
+  }
+  const hasLabel = !t19;
   const hasHintMessages = Boolean(props.hint?.length);
   const hasValidationErrors = Boolean(errors?.length);
-  const hasValidDateSelected = !_.isEmpty(props?.value);
-  const handleUpdateDateState = React.useCallback((date_0) => {
-    const nonIsoDateFormat = date_0.format(TOKEN_ISO_FORMAT);
+  let t20;
+  if ($[39] !== props.value) {
+    t20 = _.isEmpty(props?.value);
+    $[39] = props.value;
+    $[40] = t20;
+  } else {
+    t20 = $[40];
+  }
+  const hasValidDateSelected = !t20;
+  const handleUpdateDateState = (date_0) => {
+    const nonIsoDateFormat = date_0.format(isoFormat);
     const isoDateFormat = date_0.toISOString();
     setSelectedDate(date_0.clone());
-    setCalendarDisplayDate(date_0.clone());
-    props.onChange?.({
+    handleChangeActiveDescendant(date_0.format(TOKEN_ISO_FORMAT));
+    handleChangeCalendarDisplayDate(date_0.clone());
+    onChange?.({
       target: {
         name: props.name,
         value: returnValueType === "default" ? nonIsoDateFormat : isoDateFormat
       }
     });
-    if (shouldCloseOnSelect) handleCloseCalendar();
-  }, [selectedDate, props.name, props.onChange, shouldCloseOnSelect]);
-  const handleOpenCalendar = React.useCallback(() => setCalendarBoxOpen(true), []);
-  const handleCloseCalendar = React.useCallback(() => setCalendarBoxOpen(false), []);
-  const handleNextMonth = React.useCallback(() => setCalendarDisplayDate((prevDisplayDate) => prevDisplayDate.clone().add(1, "month")), []);
-  const handlePreviousMonth = React.useCallback(() => setCalendarDisplayDate((prevDisplayDate_0) => prevDisplayDate_0.clone().subtract(1, "month")), []);
-  const handleChangeCalendarBoxState = React.useCallback(() => {
-    setCalendarBoxOpen((prevState) => {
-      if (dateInputRef.current !== document.activeElement) {
-        dateInputRef?.current?.focus?.();
+    if (shouldCloseCalendarOnSelect) {
+      handleSetCalendarBoxOpen(false);
+    }
+  };
+  let t21;
+  if ($[41] !== handleSetCalendarBoxOpen || $[42] !== onChange || $[43] !== props.name || $[44] !== setMaskValue || $[45] !== setSelectedDate) {
+    t21 = () => {
+      onChange?.({
+        target: {
+          name: props.name,
+          value: ""
+        }
+      });
+      setSelectedDate(null);
+      setMaskValue("");
+      handleSetCalendarBoxOpen(false);
+    };
+    $[41] = handleSetCalendarBoxOpen;
+    $[42] = onChange;
+    $[43] = props.name;
+    $[44] = setMaskValue;
+    $[45] = setSelectedDate;
+    $[46] = t21;
+  } else {
+    t21 = $[46];
+  }
+  const handleOnClickClearSelectedDate = t21;
+  let t22;
+  if ($[47] !== digits || $[48] !== handleChangeActiveDescendant || $[49] !== handleChangeCalendarDisplayDate || $[50] !== handleSetCalendarBoxOpen || $[51] !== props || $[52] !== ptbrFormat || $[53] !== selectedDate || $[54] !== setMaskValue || $[55] !== unmaskedValue || $[56] !== variant) {
+    t22 = (event) => {
+      props?.onBlur?.(event);
+      handleSetCalendarBoxOpen(false);
+      handleChangeActiveDescendant((selectedDate ?? hooks()).format(TOKEN_ISO_FORMAT));
+      handleChangeCalendarDisplayDate(selectedDate ?? hooks());
+      if (_.size(unmaskedValue) !== digits) {
+        const date_1 = parseDateValue(props?.value, variant);
+        if (date_1.isValid()) {
+          setMaskValue(date_1.format(ptbrFormat));
+        }
       }
-      return !prevState;
-    });
-  }, []);
-  const handleNavigateWithDays = React.useCallback((offset) => {
-    setCalendarDisplayDate((prevDisplayDate_1) => {
-      const daySelected = prevDisplayDate_1.clone().add(offset, "day");
-      setActiveDescendant(daySelected.format(TOKEN_ISO_FORMAT));
-      return daySelected;
-    });
-  }, []);
-  const handleNavigateWithWeeks = React.useCallback((when) => {
-    setCalendarDisplayDate((prevDisplayDate_2) => {
-      let daySelected_0 = prevDisplayDate_2;
-      if (when === "end") daySelected_0 = prevDisplayDate_2.clone().endOf("week");
-      if (when === "start") daySelected_0 = prevDisplayDate_2.clone().startOf("week");
-      setActiveDescendant(daySelected_0.format(TOKEN_ISO_FORMAT));
-      return daySelected_0;
-    });
-  }, []);
-  const handleOnClickClearSelectedDate = React.useCallback(() => {
-    props.onChange?.({
-      target: {
-        name: props.name,
-        value: ""
+    };
+    $[47] = digits;
+    $[48] = handleChangeActiveDescendant;
+    $[49] = handleChangeCalendarDisplayDate;
+    $[50] = handleSetCalendarBoxOpen;
+    $[51] = props;
+    $[52] = ptbrFormat;
+    $[53] = selectedDate;
+    $[54] = setMaskValue;
+    $[55] = unmaskedValue;
+    $[56] = variant;
+    $[57] = t22;
+  } else {
+    t22 = $[57];
+  }
+  const handleOnBlur = t22;
+  let t23;
+  if ($[58] !== handleChangeActiveDescendant || $[59] !== handleChangeCalendarDisplayDate || $[60] !== handleSetCalendarBoxOpen || $[61] !== openCalendarOnFocus || $[62] !== props || $[63] !== readOnly || $[64] !== selectedDate) {
+    t23 = (event_0) => {
+      props?.onFocus?.(event_0);
+      handleChangeActiveDescendant((selectedDate ?? hooks()).format(TOKEN_ISO_FORMAT));
+      handleChangeCalendarDisplayDate(selectedDate ?? hooks());
+      if (!readOnly && openCalendarOnFocus) {
+        handleSetCalendarBoxOpen(true);
       }
-    });
-    setSelectedDate(null);
-    setMaskValue("");
-    handleCloseCalendar();
-  }, [props.onChange]);
-  const handleOnBlur = (event) => {
-    props?.onBlur?.(event);
-    handleCloseCalendar();
-    setActiveDescendant((selectedDate ?? hooks()).format(TOKEN_ISO_FORMAT));
-    setCalendarDisplayDate(selectedDate ?? hooks());
-    if (_.size(unmaskedValue) !== 8) {
-      const date_1 = hooks(_.toString(props?.value), TOKEN_ISO_FORMAT);
-      if (date_1.isValid()) {
-        setMaskValue(date_1.format("DD/MM/YYYY"));
+    };
+    $[58] = handleChangeActiveDescendant;
+    $[59] = handleChangeCalendarDisplayDate;
+    $[60] = handleSetCalendarBoxOpen;
+    $[61] = openCalendarOnFocus;
+    $[62] = props;
+    $[63] = readOnly;
+    $[64] = selectedDate;
+    $[65] = t23;
+  } else {
+    t23 = $[65];
+  }
+  const handleOnFocus = t23;
+  let t24;
+  if ($[66] !== handleKeyDownNavigation || $[67] !== props) {
+    t24 = (event_1) => {
+      props?.onKeyDown?.(event_1);
+      handleKeyDownNavigation(event_1);
+    };
+    $[66] = handleKeyDownNavigation;
+    $[67] = props;
+    $[68] = t24;
+  } else {
+    t24 = $[68];
+  }
+  const handleOnKeyDown = t24;
+  let t25;
+  if ($[69] !== handleUpdateDateState || $[70] !== selectedDate) {
+    t25 = (hour, minute) => {
+      if (!selectedDate) {
+        return;
       }
-    }
-  };
-  const handleOnFocus = (event_0) => {
-    props?.onFocus?.(event_0);
-    setActiveDescendant((selectedDate ?? hooks()).format(TOKEN_ISO_FORMAT));
-    setCalendarDisplayDate(selectedDate ?? hooks());
-    if (!readOnly && openCalendarOnFocus) {
-      handleOpenCalendar();
-    }
-  };
-  const handleOnPaste = (event_1) => {
-    if (undigitable) {
-      event_1.preventDefault();
-    } else {
-      props.onPaste?.(event_1);
-    }
+      handleUpdateDateState(selectedDate.clone().hour(hour).minute(minute).second(0));
+    };
+    $[69] = handleUpdateDateState;
+    $[70] = selectedDate;
+    $[71] = t25;
+  } else {
+    t25 = $[71];
+  }
+  const handleSelectTime = t25;
+  const handleSelectDay = (day) => {
+    const dayWithTime = isDateTime && selectedDate ? day.clone().hour(selectedDate.hour()).minute(selectedDate.minute()) : day;
+    handleUpdateDateState(clampDateToBounds(dayWithTime, minDate, maxDate));
   };
-  const handleOnBeforeInput = (event_2) => {
-    if (undigitable) {
-      event_2.preventDefault();
-    } else {
-      props.onBeforeInput?.(event_2);
-    }
-  };
-  const handleOnKeyDown = (event_3) => {
-    props?.onKeyDown?.(event_3);
-    if (calendarBoxOpen && event_3.key && !event_3.shiftKey && !event_3.altKey && NAVIGATION_KEYS.includes(event_3.key)) {
-      event_3.preventDefault();
-      switch (event_3.key) {
-        case Keys.arrowLeft:
-          handleNavigateWithDays(-1);
-          break;
-        case Keys.arrowRight:
-          handleNavigateWithDays(1);
-          break;
-        case Keys.arrowUp:
-          handleNavigateWithDays(-7);
-          break;
-        case Keys.arrowDown:
-          handleNavigateWithDays(7);
-          break;
-        case Keys.pageUp:
-          handleNextMonth();
-          break;
-        case Keys.pageDown:
-          handlePreviousMonth();
-          break;
-        case Keys.home:
-          handleNavigateWithWeeks("start");
-          break;
-        case Keys.end:
-          handleNavigateWithWeeks("end");
-          break;
-        case Keys.escape:
-          handleCloseCalendar();
-          break;
-        case Keys.enter:
-          handleUpdateDateState(hooks(_.toString(activeDescendant), TOKEN_ISO_FORMAT));
-          break;
+  let t26;
+  if ($[72] !== props.value || $[73] !== ptbrFormat || $[74] !== setMaskValue || $[75] !== setSelectedDate || $[76] !== variant) {
+    t26 = () => {
+      const date_2 = parseDateValue(props?.value ?? null, variant);
+      setSelectedDate(date_2.isValid() ? date_2 : null);
+      setMaskValue(date_2.format(ptbrFormat));
+    };
+    $[72] = props.value;
+    $[73] = ptbrFormat;
+    $[74] = setMaskValue;
+    $[75] = setSelectedDate;
+    $[76] = variant;
+    $[77] = t26;
+  } else {
+    t26 = $[77];
+  }
+  const t27 = props?.value;
+  let t28;
+  if ($[78] !== t27) {
+    t28 = [t27];
+    $[78] = t27;
+    $[79] = t28;
+  } else {
+    t28 = $[79];
+  }
+  React.useEffect(t26, t28);
+  const t29 = Boolean(readOnly);
+  const t30 = Boolean(disabled);
+  let t31;
+  if ($[80] !== calendarState || $[81] !== handleOnClickClearSelectedDate || $[82] !== handleUpdateDateState || $[83] !== hasValidDateSelected || $[84] !== inputId || $[85] !== label || $[86] !== maskedValue || $[87] !== selectedDate || $[88] !== showCalendarButton || $[89] !== showClearDateButton || $[90] !== skeletonize || $[91] !== t29 || $[92] !== t30 || $[93] !== unmaskedValue) {
+    t31 = {
+      ...calendarState,
+      label,
+      inputFieldId: inputId,
+      isReadOnly: t29,
+      isDisabled: t30,
+      skeletonize,
+      showCalendarButton,
+      hasValidDateSelected,
+      dateInputRef,
+      selectedDate,
+      unmaskedValue,
+      maskedValue,
+      showClearDateButton,
+      handleOnClickClearSelectedDate,
+      handleSelectDate: handleUpdateDateState
+    };
+    $[80] = calendarState;
+    $[81] = handleOnClickClearSelectedDate;
+    $[82] = handleUpdateDateState;
+    $[83] = hasValidDateSelected;
+    $[84] = inputId;
+    $[85] = label;
+    $[86] = maskedValue;
+    $[87] = selectedDate;
+    $[88] = showCalendarButton;
+    $[89] = showClearDateButton;
+    $[90] = skeletonize;
+    $[91] = t29;
+    $[92] = t30;
+    $[93] = unmaskedValue;
+    $[94] = t31;
+  } else {
+    t31 = $[94];
+  }
+  const contextValues = t31;
+  let t32;
+  if ($[95] !== customClassLabel || $[96] !== disabled || $[97] !== hasHintMessages || $[98] !== hasLabel || $[99] !== hintPosition || $[100] !== inputId || $[101] !== label || $[102] !== labelUppercase || $[103] !== popoverAlign || $[104] !== props.hint || $[105] !== props.required || $[106] !== readOnly || $[107] !== skeletonize || $[108] !== themePopover) {
+    t32 = hasLabel && /* @__PURE__ */ jsx(Label, { "data-testid": "test-date-field-label", label, inputId, hint: props?.hint, isDisabled: disabled, isReadOnly: readOnly, skeletonize, required: props?.required, hintPosition, themePopover, popoverAlign, labelUppercase, hasHintMessages, customClassLabel });
+    $[95] = customClassLabel;
+    $[96] = disabled;
+    $[97] = hasHintMessages;
+    $[98] = hasLabel;
+    $[99] = hintPosition;
+    $[100] = inputId;
+    $[101] = label;
+    $[102] = labelUppercase;
+    $[103] = popoverAlign;
+    $[104] = props.hint;
+    $[105] = props.required;
+    $[106] = readOnly;
+    $[107] = skeletonize;
+    $[108] = themePopover;
+    $[109] = t32;
+  } else {
+    t32 = $[109];
+  }
+  let t33;
+  if ($[110] !== ref) {
+    t33 = mergeRefs(ref, dateInputRef);
+    $[110] = ref;
+    $[111] = t33;
+  } else {
+    t33 = $[111];
+  }
+  const t34 = props?.name;
+  const t35 = !readOnly && !skeletonize ? 0 : -1;
+  let t36;
+  if ($[112] !== activeDescendant || $[113] !== calendarBoxOpen || $[114] !== customClass || $[115] !== disabled || $[116] !== handleOnBeforeInput || $[117] !== handleOnBlur || $[118] !== handleOnFocus || $[119] !== handleOnKeyDown || $[120] !== handleOnKeyDownCapture || $[121] !== handleOnPaste || $[122] !== hasValidationErrors || $[123] !== inputId || $[124] !== inputPlaceholder || $[125] !== maskedValue || $[126] !== readOnly || $[127] !== rest || $[128] !== skeletonize || $[129] !== t33 || $[130] !== t34 || $[131] !== t35 || $[132] !== textAlign || $[133] !== undigitable) {
+    t36 = /* @__PURE__ */ jsx(Input, { ...rest, ref: t33, id: inputId, name: t34, value: maskedValue, readOnly, disabled, customClass, tabIndex: t35, placeholder: inputPlaceholder, "aria-activedescendant": activeDescendant, "aria-expanded": calendarBoxOpen, "aria-controls": inputId, "aria-labelledby": inputId, "data-state-is-period-input": false, "data-testid": "test-date-field-input", "data-state-error": hasValidationErrors, "data-state-read-only": readOnly, "data-state-text-align": textAlign, "data-state-undigitable": undigitable, "data-state-skeletonize": skeletonize, onBlur: handleOnBlur, onFocus: handleOnFocus, onPaste: handleOnPaste, onKeyDown: handleOnKeyDown, onKeyDownCapture: handleOnKeyDownCapture, onBeforeInput: handleOnBeforeInput });
+    $[112] = activeDescendant;
+    $[113] = calendarBoxOpen;
+    $[114] = customClass;
+    $[115] = disabled;
+    $[116] = handleOnBeforeInput;
+    $[117] = handleOnBlur;
+    $[118] = handleOnFocus;
+    $[119] = handleOnKeyDown;
+    $[120] = handleOnKeyDownCapture;
+    $[121] = handleOnPaste;
+    $[122] = hasValidationErrors;
+    $[123] = inputId;
+    $[124] = inputPlaceholder;
+    $[125] = maskedValue;
+    $[126] = readOnly;
+    $[127] = rest;
+    $[128] = skeletonize;
+    $[129] = t33;
+    $[130] = t34;
+    $[131] = t35;
+    $[132] = textAlign;
+    $[133] = undigitable;
+    $[134] = t36;
+  } else {
+    t36 = $[134];
+  }
+  let t37;
+  if ($[135] === Symbol.for("react.memo_cache_sentinel")) {
+    t37 = /* @__PURE__ */ jsx(Triggers, {});
+    $[135] = t37;
+  } else {
+    t37 = $[135];
+  }
+  let t38;
+  if ($[136] !== customClassInputContainer || $[137] !== dateContainerRef || $[138] !== skeletonize || $[139] !== t36) {
+    t38 = /* @__PURE__ */ jsxs(Container, { ref: dateContainerRef, skeletonize, customClassInputContainer, children: [
+      t36,
+      t37
+    ] });
+    $[136] = customClassInputContainer;
+    $[137] = dateContainerRef;
+    $[138] = skeletonize;
+    $[139] = t36;
+    $[140] = t38;
+  } else {
+    t38 = $[140];
+  }
+  let t39;
+  if ($[141] !== activeDescendant || $[142] !== calendarBoxOpen || $[143] !== calendarDisplayDate || $[144] !== calendarRef || $[145] !== dateContainerRef || $[146] !== handleNextMonth || $[147] !== handlePreviousMonth || $[148] !== handleSelectDay || $[149] !== handleSelectTime || $[150] !== hasBounds || $[151] !== inputId || $[152] !== isDateTime || $[153] !== maxDate || $[154] !== minDate || $[155] !== selectedDate) {
+    t39 = calendarBoxOpen && createPortal(/* @__PURE__ */ jsx(CalendarBox, { ref: calendarRef, testIdPrefix: "test-date-field", headerId: inputId, calendarBoxOpen, activeDescendant, calendarDisplayDate, containerRef: dateContainerRef, onNextMonth: handleNextMonth, onPreviousMonth: handlePreviousMonth, getDayState: (day_0) => ({
+      isSelected: selectedDate ? day_0.isSame(selectedDate, "day") : false,
+      ...hasBounds && {
+        isDisabled: isDayOutOfBounds(day_0, minDate, maxDate)
       }
-    }
-  };
-  React.useEffect(() => {
-    const currentValue = props?.value ?? null;
-    const date_2 = hooks(_.toString(currentValue), TOKEN_ISO_FORMAT);
-    setSelectedDate(date_2.isValid() ? date_2 : null);
-    setMaskValue(date_2.format(TOKEN_PTBR_FORMAT));
-  }, [props?.value]);
-  const contextValues = {
-    label,
-    inputFieldId: inputId,
-    activeDescendant,
-    calendarBoxOpen,
-    isReadOnly: Boolean(readOnly),
-    isDisabled: Boolean(disabled),
-    skeletonize,
-    showCalendarButton,
-    hasValidDateSelected,
-    dateInputRef,
-    dateContainerRef,
-    handleOpenCalendar,
-    handleCloseCalendar,
-    handleNextMonth,
-    handlePreviousMonth,
-    handleSelectDate: handleUpdateDateState,
-    selectedDate,
-    unmaskedValue,
-    maskedValue,
-    showClearDateButton,
-    handleChangeCalendarBoxState,
-    handleOnClickClearSelectedDate,
-    calendarDisplayDate,
-    calendarRef
-  };
-  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsx(DateFieldContext.Provider, { value: contextValues, children: /* @__PURE__ */ jsxs(Root, { ref: inputRootRef, "data-testid": "test-date-field-root", customClassWrapper, hasValidationErrors, children: [
-      hasLabel && /* @__PURE__ */ jsx(Label, { "data-testid": "test-date-field-label", label, inputId, hint: props?.hint, isDisabled: disabled, isReadOnly: readOnly, skeletonize, required: props?.required, hintPosition, themePopover, popoverAlign, labelUppercase, hasHintMessages, customClassLabel }),
-      /* @__PURE__ */ jsxs(Container, { ref: dateContainerRef, skeletonize, customClassInputContainer, children: [
-        /* @__PURE__ */ jsx(Input, { ...rest, ref: mergeRefs(ref, dateInputRef), id: inputId, name: props?.name, value: maskedValue, readOnly, disabled, customClass, tabIndex: !readOnly && !skeletonize ? 0 : -1, placeholder, "aria-activedescendant": activeDescendant, "aria-expanded": calendarBoxOpen, "aria-controls": inputId, "aria-labelledby": inputId, "data-state-is-period-input": false, "data-testid": "test-date-field-input", "data-state-error": hasValidationErrors, "data-state-read-only": readOnly, "data-state-text-align": textAlign, "data-state-undigitable": undigitable, "data-state-skeletonize": skeletonize, onBlur: handleOnBlur, onFocus: handleOnFocus, onPaste: handleOnPaste, onKeyDown: handleOnKeyDown, onBeforeInput: handleOnBeforeInput }),
-        /* @__PURE__ */ jsx(Triggers, {})
-      ] }),
-      calendarBoxOpen && createPortal(/* @__PURE__ */ jsx(CalendarBox, { ref: calendarRef }), document.body),
-      hintPosition === "below" && /* @__PURE__ */ jsx(Hint, { customClass: "hint", description: props.hint, disabled, skeletonize, visible: hasHintMessages }),
-      hasValidationErrors && /* @__PURE__ */ jsx("span", { "data-testid": "test-date-field-list-errors", className: "error", "data-state-skeletonize": skeletonize, "aria-describedby": String(props.name).concat("-errors"), children: errors?.map((error, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        error,
-        " "
-      ] }, `${index + 1}-${error}`)) })
-    ] }) }),
-    /* @__PURE__ */ jsx(Tooltip, { targetRef: inputRootRef, text: tooltip, width: tooltipWidth, position: tooltipPosition })
-  ] });
+    }), onSelectDay: handleSelectDay, children: isDateTime && /* @__PURE__ */ jsx(TimeSelector, { value: selectedDate, onSelectTime: handleSelectTime, min: minDate, max: maxDate, testIdPrefix: "test-date-field" }) }), document.body);
+    $[141] = activeDescendant;
+    $[142] = calendarBoxOpen;
+    $[143] = calendarDisplayDate;
+    $[144] = calendarRef;
+    $[145] = dateContainerRef;
+    $[146] = handleNextMonth;
+    $[147] = handlePreviousMonth;
+    $[148] = handleSelectDay;
+    $[149] = handleSelectTime;
+    $[150] = hasBounds;
+    $[151] = inputId;
+    $[152] = isDateTime;
+    $[153] = maxDate;
+    $[154] = minDate;
+    $[155] = selectedDate;
+    $[156] = t39;
+  } else {
+    t39 = $[156];
+  }
+  let t40;
+  if ($[157] !== disabled || $[158] !== hasHintMessages || $[159] !== hintPosition || $[160] !== props.hint || $[161] !== skeletonize) {
+    t40 = hintPosition === "below" && /* @__PURE__ */ jsx(Hint, { customClass: "hint", description: props.hint, disabled, skeletonize, visible: hasHintMessages });
+    $[157] = disabled;
+    $[158] = hasHintMessages;
+    $[159] = hintPosition;
+    $[160] = props.hint;
+    $[161] = skeletonize;
+    $[162] = t40;
+  } else {
+    t40 = $[162];
+  }
+  let t41;
+  if ($[163] !== errors || $[164] !== hasValidationErrors || $[165] !== props.name || $[166] !== skeletonize) {
+    t41 = hasValidationErrors && /* @__PURE__ */ jsx("span", { "data-testid": "test-date-field-list-errors", className: "error", "data-state-skeletonize": skeletonize, "aria-describedby": String(props.name).concat("-errors"), children: errors?.map(_temp) });
+    $[163] = errors;
+    $[164] = hasValidationErrors;
+    $[165] = props.name;
+    $[166] = skeletonize;
+    $[167] = t41;
+  } else {
+    t41 = $[167];
+  }
+  let t42;
+  if ($[168] !== customClassWrapper || $[169] !== hasValidationErrors || $[170] !== t32 || $[171] !== t38 || $[172] !== t39 || $[173] !== t40 || $[174] !== t41) {
+    t42 = /* @__PURE__ */ jsxs(Root, { ref: inputRootRef, "data-testid": "test-date-field-root", customClassWrapper, hasValidationErrors, children: [
+      t32,
+      t38,
+      t39,
+      t40,
+      t41
+    ] });
+    $[168] = customClassWrapper;
+    $[169] = hasValidationErrors;
+    $[170] = t32;
+    $[171] = t38;
+    $[172] = t39;
+    $[173] = t40;
+    $[174] = t41;
+    $[175] = t42;
+  } else {
+    t42 = $[175];
+  }
+  let t43;
+  if ($[176] !== contextValues || $[177] !== t42) {
+    t43 = /* @__PURE__ */ jsx(DateFieldContext.Provider, { value: contextValues, children: t42 });
+    $[176] = contextValues;
+    $[177] = t42;
+    $[178] = t43;
+  } else {
+    t43 = $[178];
+  }
+  let t44;
+  if ($[179] !== tooltip || $[180] !== tooltipPosition || $[181] !== tooltipWidth) {
+    t44 = /* @__PURE__ */ jsx(Tooltip, { targetRef: inputRootRef, text: tooltip, width: tooltipWidth, position: tooltipPosition });
+    $[179] = tooltip;
+    $[180] = tooltipPosition;
+    $[181] = tooltipWidth;
+    $[182] = t44;
+  } else {
+    t44 = $[182];
+  }
+  let t45;
+  if ($[183] !== t43 || $[184] !== t44) {
+    t45 = /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      t43,
+      t44
+    ] });
+    $[183] = t43;
+    $[184] = t44;
+    $[185] = t45;
+  } else {
+    t45 = $[185];
+  }
+  return t45;
 });
 InputBase.displayName = "DateFieldInputBase";
+function _temp(error, index) {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    error,
+    " "
+  ] }, `${index + 1}-${error}`);
+}
 export {
   InputBase
 };