linear-react-components-ui 2.1.0-beta.5 → 2.2.0-beta.0

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

@@ -1,729 +1,252 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { c as compilerRuntimeExports } from "../../../_virtual/compiler-runtime.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 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 { 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, getTimeSelection, isDayOutOfBounds, TOKEN_ISO_FORMAT, getDateFormats, clampDateToBounds, formatPartialDateTime, completePartialDateTime, parseDateValue, resolveAssumedTime } from "../helpers.js";
-import { CalendarBox } from "../calendarbox.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 { 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(209);
-  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 {
-    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);
+    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));
   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 calendarState = useDateCalendarState({
-    inputRef: dateInputRef,
-    min: minDate,
-    max: maxDate,
-    onPressEnter: (descendant) => handleSelectDay(hooks(_.toString(descendant), TOKEN_ISO_FORMAT))
-  });
+  const dateContainerRef = React.useRef(null);
   const {
-    calendarBoxOpen,
-    activeDescendant,
-    calendarDisplayDate,
-    calendarRef,
-    dateContainerRef,
-    handleNextMonth,
-    handlePreviousMonth,
-    handleSetCalendarBoxOpen,
-    handleChangeActiveDescendant,
-    handleChangeCalendarDisplayDate,
-    handleKeyDownNavigation
-  } = calendarState;
-  const {
-    maskedValue,
+    setValue: setMaskValue,
     unmaskedValue,
-    setMaskValue,
-    handleOnPaste,
-    handleOnBeforeInput,
-    handleOnKeyDownCapture
-  } = useDateMask({
-    inputRef: dateInputRef,
-    variant,
-    defaultValue: selectedDate?.format(ptbrFormat),
-    undigitable,
-    readOnly,
-    onCommit: (date) => handleUpdateDateState(date),
-    onPaste: props.onPaste,
-    onBeforeInput: props.onBeforeInput
+    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);
+      }
+    }
   });
-  let t18;
-  if ($[34] !== unmaskedValue || $[35] !== variant) {
-    t18 = getTimeSelection(unmaskedValue, variant);
-    $[34] = unmaskedValue;
-    $[35] = variant;
-    $[36] = t18;
-  } else {
-    t18 = $[36];
-  }
-  const timeSelection = t18;
-  let t19;
-  if ($[37] !== props.id || $[38] !== props.name) {
-    t19 = props.id || props.name || v1();
-    $[37] = props.id;
-    $[38] = props.name;
-    $[39] = t19;
-  } else {
-    t19 = $[39];
-  }
-  const inputId = t19;
-  let t20;
-  if ($[40] !== props.label) {
-    t20 = _.isEmpty(props?.label);
-    $[40] = props.label;
-    $[41] = t20;
-  } else {
-    t20 = $[41];
-  }
-  const hasLabel = !t20;
+  const inputId = React.useMemo(() => props.id || props.name || v1(), [props.id, props.name]);
+  const hasLabel = !_.isEmpty(props?.label);
   const hasHintMessages = Boolean(props.hint?.length);
   const hasValidationErrors = Boolean(errors?.length);
-  let t21;
-  if ($[42] !== props.value) {
-    t21 = _.isEmpty(props?.value);
-    $[42] = props.value;
-    $[43] = t21;
-  } else {
-    t21 = $[43];
-  }
-  const hasValidDateSelected = !t21;
-  const handleUpdateDateState = (date_0) => {
-    const nonIsoDateFormat = date_0.format(isoFormat);
+  const hasValidDateSelected = !_.isEmpty(props?.value);
+  const handleUpdateDateState = React.useCallback((date_0) => {
+    const nonIsoDateFormat = date_0.format(TOKEN_ISO_FORMAT);
     const isoDateFormat = date_0.toISOString();
     setSelectedDate(date_0.clone());
-    handleChangeActiveDescendant(date_0.format(TOKEN_ISO_FORMAT));
-    handleChangeCalendarDisplayDate(date_0.clone());
-    onChange?.({
+    setCalendarDisplayDate(date_0.clone());
+    props.onChange?.({
       target: {
         name: props.name,
         value: returnValueType === "default" ? nonIsoDateFormat : isoDateFormat
       }
     });
-    if (shouldCloseCalendarOnSelect) {
-      handleSetCalendarBoxOpen(false);
-    }
-  };
-  let t22;
-  if ($[44] !== handleChangeActiveDescendant || $[45] !== handleChangeCalendarDisplayDate || $[46] !== handleSetCalendarBoxOpen || $[47] !== setMaskValue || $[48] !== setSelectedDate || $[49] !== shouldCloseCalendarOnSelect) {
-    t22 = (date_1, hour, minute) => {
-      setSelectedDate(date_1.clone());
-      setMaskValue(formatPartialDateTime(date_1, hour, minute));
-      handleChangeActiveDescendant(date_1.format(TOKEN_ISO_FORMAT));
-      handleChangeCalendarDisplayDate(date_1.clone());
-      if (shouldCloseCalendarOnSelect) {
-        handleSetCalendarBoxOpen(false);
-      }
-    };
-    $[44] = handleChangeActiveDescendant;
-    $[45] = handleChangeCalendarDisplayDate;
-    $[46] = handleSetCalendarBoxOpen;
-    $[47] = setMaskValue;
-    $[48] = setSelectedDate;
-    $[49] = shouldCloseCalendarOnSelect;
-    $[50] = t22;
-  } else {
-    t22 = $[50];
-  }
-  const handleUpdateDraftState = t22;
-  let t23;
-  if ($[51] !== handleSetCalendarBoxOpen || $[52] !== onChange || $[53] !== props.name || $[54] !== setMaskValue || $[55] !== setSelectedDate) {
-    t23 = () => {
-      onChange?.({
-        target: {
-          name: props.name,
-          value: ""
-        }
-      });
-      setSelectedDate(null);
-      setMaskValue("");
-      handleSetCalendarBoxOpen(false);
-    };
-    $[51] = handleSetCalendarBoxOpen;
-    $[52] = onChange;
-    $[53] = props.name;
-    $[54] = setMaskValue;
-    $[55] = setSelectedDate;
-    $[56] = t23;
-  } else {
-    t23 = $[56];
-  }
-  const handleOnClickClearSelectedDate = t23;
-  let t24;
-  if ($[57] !== digits || $[58] !== handleChangeActiveDescendant || $[59] !== handleChangeCalendarDisplayDate || $[60] !== handleSetCalendarBoxOpen || $[61] !== handleUpdateDateState || $[62] !== maxDate || $[63] !== minDate || $[64] !== props || $[65] !== ptbrFormat || $[66] !== selectedDate || $[67] !== setMaskValue || $[68] !== unmaskedValue || $[69] !== variant) {
-    t24 = (event) => {
-      props?.onBlur?.(event);
-      handleSetCalendarBoxOpen(false);
-      handleChangeActiveDescendant((selectedDate ?? hooks()).format(TOKEN_ISO_FORMAT));
-      handleChangeCalendarDisplayDate(selectedDate ?? hooks());
-      const completedDate = completePartialDateTime({
-        unmaskedValue,
-        variant,
-        min: minDate,
-        max: maxDate
-      });
-      if (completedDate) {
-        setMaskValue(completedDate.format(ptbrFormat));
-        handleUpdateDateState(completedDate);
-        return;
-      }
-      if (_.size(unmaskedValue) !== digits) {
-        const date_2 = parseDateValue(props?.value, variant);
-        if (date_2.isValid()) {
-          setMaskValue(date_2.format(ptbrFormat));
-        }
+    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?.();
       }
-    };
-    $[57] = digits;
-    $[58] = handleChangeActiveDescendant;
-    $[59] = handleChangeCalendarDisplayDate;
-    $[60] = handleSetCalendarBoxOpen;
-    $[61] = handleUpdateDateState;
-    $[62] = maxDate;
-    $[63] = minDate;
-    $[64] = props;
-    $[65] = ptbrFormat;
-    $[66] = selectedDate;
-    $[67] = setMaskValue;
-    $[68] = unmaskedValue;
-    $[69] = variant;
-    $[70] = t24;
-  } else {
-    t24 = $[70];
-  }
-  const handleOnBlur = t24;
-  let t25;
-  if ($[71] !== handleChangeActiveDescendant || $[72] !== handleChangeCalendarDisplayDate || $[73] !== handleSetCalendarBoxOpen || $[74] !== openCalendarOnFocus || $[75] !== props || $[76] !== readOnly || $[77] !== selectedDate) {
-    t25 = (event_0) => {
-      props?.onFocus?.(event_0);
-      handleChangeActiveDescendant((selectedDate ?? hooks()).format(TOKEN_ISO_FORMAT));
-      handleChangeCalendarDisplayDate(selectedDate ?? hooks());
-      if (!readOnly && openCalendarOnFocus) {
-        handleSetCalendarBoxOpen(true);
-      }
-    };
-    $[71] = handleChangeActiveDescendant;
-    $[72] = handleChangeCalendarDisplayDate;
-    $[73] = handleSetCalendarBoxOpen;
-    $[74] = openCalendarOnFocus;
-    $[75] = props;
-    $[76] = readOnly;
-    $[77] = selectedDate;
-    $[78] = t25;
-  } else {
-    t25 = $[78];
-  }
-  const handleOnFocus = t25;
-  let t26;
-  if ($[79] !== handleKeyDownNavigation || $[80] !== props) {
-    t26 = (event_1) => {
-      props?.onKeyDown?.(event_1);
-      handleKeyDownNavigation(event_1);
-    };
-    $[79] = handleKeyDownNavigation;
-    $[80] = props;
-    $[81] = t26;
-  } else {
-    t26 = $[81];
-  }
-  const handleOnKeyDown = t26;
-  let t27;
-  if ($[82] !== handleUpdateDateState || $[83] !== handleUpdateDraftState || $[84] !== selectedDate || $[85] !== timeSelection) {
-    t27 = (hour_0) => {
-      if (!selectedDate) {
-        return;
-      }
-      const {
-        minute: minute_0
-      } = timeSelection;
-      if (_.isNull(minute_0)) {
-        handleUpdateDraftState(selectedDate.clone().hour(hour_0), hour_0, null);
-        return;
+      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: ""
       }
-      handleUpdateDateState(selectedDate.clone().hour(hour_0).minute(minute_0).second(0));
-    };
-    $[82] = handleUpdateDateState;
-    $[83] = handleUpdateDraftState;
-    $[84] = selectedDate;
-    $[85] = timeSelection;
-    $[86] = t27;
-  } else {
-    t27 = $[86];
-  }
-  const handleSelectHour = t27;
-  let t28;
-  if ($[87] !== handleUpdateDateState || $[88] !== maxDate || $[89] !== minDate || $[90] !== selectedDate || $[91] !== timeSelection) {
-    t28 = (minute_1) => {
-      if (!selectedDate) {
-        return;
+    });
+    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"));
       }
-      const {
-        hour: hour_1
-      } = timeSelection;
-      handleUpdateDateState(_.isNull(hour_1) ? resolveAssumedTime({
-        date: selectedDate,
-        hour: null,
-        minute: minute_1,
-        min: minDate,
-        max: maxDate
-      }) : selectedDate.clone().hour(hour_1).minute(minute_1).second(0));
-    };
-    $[87] = handleUpdateDateState;
-    $[88] = maxDate;
-    $[89] = minDate;
-    $[90] = selectedDate;
-    $[91] = timeSelection;
-    $[92] = t28;
-  } else {
-    t28 = $[92];
-  }
-  const handleSelectMinute = t28;
-  const handleSelectDay = (day) => {
-    const {
-      hour: hour_2,
-      minute: minute_2,
-      isComplete
-    } = timeSelection;
-    if (isDateTime && !isComplete) {
-      handleUpdateDraftState(day.clone().hour(hour_2 ?? 0).minute(minute_2 ?? 0), hour_2, minute_2);
-      return;
     }
-    const dayWithTime = isDateTime && selectedDate ? day.clone().hour(selectedDate.hour()).minute(selectedDate.minute()) : day;
-    handleUpdateDateState(clampDateToBounds(dayWithTime, minDate, maxDate));
   };
-  let t29;
-  if ($[93] !== props.value || $[94] !== ptbrFormat || $[95] !== setMaskValue || $[96] !== setSelectedDate || $[97] !== variant) {
-    t29 = () => {
-      const date_3 = parseDateValue(props?.value ?? null, variant);
-      setSelectedDate(date_3.isValid() ? date_3 : null);
-      setMaskValue(date_3.format(ptbrFormat));
-    };
-    $[93] = props.value;
-    $[94] = ptbrFormat;
-    $[95] = setMaskValue;
-    $[96] = setSelectedDate;
-    $[97] = variant;
-    $[98] = t29;
-  } else {
-    t29 = $[98];
-  }
-  const t30 = props?.value;
-  let t31;
-  if ($[99] !== t30) {
-    t31 = [t30];
-    $[99] = t30;
-    $[100] = t31;
-  } else {
-    t31 = $[100];
-  }
-  React.useEffect(t29, t31);
-  const t32 = Boolean(readOnly);
-  const t33 = Boolean(disabled);
-  let t34;
-  if ($[101] !== calendarState || $[102] !== handleOnClickClearSelectedDate || $[103] !== handleUpdateDateState || $[104] !== hasValidDateSelected || $[105] !== inputId || $[106] !== label || $[107] !== maskedValue || $[108] !== selectedDate || $[109] !== showCalendarButton || $[110] !== showClearDateButton || $[111] !== skeletonize || $[112] !== t32 || $[113] !== t33 || $[114] !== unmaskedValue) {
-    t34 = {
-      ...calendarState,
-      label,
-      inputFieldId: inputId,
-      isReadOnly: t32,
-      isDisabled: t33,
-      skeletonize,
-      showCalendarButton,
-      hasValidDateSelected,
-      dateInputRef,
-      selectedDate,
-      unmaskedValue,
-      maskedValue,
-      showClearDateButton,
-      handleOnClickClearSelectedDate,
-      handleSelectDate: handleUpdateDateState
-    };
-    $[101] = calendarState;
-    $[102] = handleOnClickClearSelectedDate;
-    $[103] = handleUpdateDateState;
-    $[104] = hasValidDateSelected;
-    $[105] = inputId;
-    $[106] = label;
-    $[107] = maskedValue;
-    $[108] = selectedDate;
-    $[109] = showCalendarButton;
-    $[110] = showClearDateButton;
-    $[111] = skeletonize;
-    $[112] = t32;
-    $[113] = t33;
-    $[114] = unmaskedValue;
-    $[115] = t34;
-  } else {
-    t34 = $[115];
-  }
-  const contextValues = t34;
-  let t35;
-  if ($[116] !== customClassLabel || $[117] !== disabled || $[118] !== hasHintMessages || $[119] !== hasLabel || $[120] !== hintPosition || $[121] !== inputId || $[122] !== label || $[123] !== labelUppercase || $[124] !== popoverAlign || $[125] !== props.hint || $[126] !== props.required || $[127] !== readOnly || $[128] !== skeletonize || $[129] !== themePopover) {
-    t35 = 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 });
-    $[116] = customClassLabel;
-    $[117] = disabled;
-    $[118] = hasHintMessages;
-    $[119] = hasLabel;
-    $[120] = hintPosition;
-    $[121] = inputId;
-    $[122] = label;
-    $[123] = labelUppercase;
-    $[124] = popoverAlign;
-    $[125] = props.hint;
-    $[126] = props.required;
-    $[127] = readOnly;
-    $[128] = skeletonize;
-    $[129] = themePopover;
-    $[130] = t35;
-  } else {
-    t35 = $[130];
-  }
-  let t36;
-  if ($[131] !== ref) {
-    t36 = mergeRefs(ref, dateInputRef);
-    $[131] = ref;
-    $[132] = t36;
-  } else {
-    t36 = $[132];
-  }
-  const t37 = props?.name;
-  const t38 = !readOnly && !skeletonize ? 0 : -1;
-  let t39;
-  if ($[133] !== activeDescendant || $[134] !== calendarBoxOpen || $[135] !== customClass || $[136] !== disabled || $[137] !== handleOnBeforeInput || $[138] !== handleOnBlur || $[139] !== handleOnFocus || $[140] !== handleOnKeyDown || $[141] !== handleOnKeyDownCapture || $[142] !== handleOnPaste || $[143] !== hasValidationErrors || $[144] !== inputId || $[145] !== inputPlaceholder || $[146] !== maskedValue || $[147] !== readOnly || $[148] !== rest || $[149] !== skeletonize || $[150] !== t36 || $[151] !== t37 || $[152] !== t38 || $[153] !== textAlign || $[154] !== undigitable) {
-    t39 = /* @__PURE__ */ jsx(Input, { ...rest, ref: t36, id: inputId, name: t37, value: maskedValue, readOnly, disabled, customClass, tabIndex: t38, 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 });
-    $[133] = activeDescendant;
-    $[134] = calendarBoxOpen;
-    $[135] = customClass;
-    $[136] = disabled;
-    $[137] = handleOnBeforeInput;
-    $[138] = handleOnBlur;
-    $[139] = handleOnFocus;
-    $[140] = handleOnKeyDown;
-    $[141] = handleOnKeyDownCapture;
-    $[142] = handleOnPaste;
-    $[143] = hasValidationErrors;
-    $[144] = inputId;
-    $[145] = inputPlaceholder;
-    $[146] = maskedValue;
-    $[147] = readOnly;
-    $[148] = rest;
-    $[149] = skeletonize;
-    $[150] = t36;
-    $[151] = t37;
-    $[152] = t38;
-    $[153] = textAlign;
-    $[154] = undigitable;
-    $[155] = t39;
-  } else {
-    t39 = $[155];
-  }
-  let t40;
-  if ($[156] === Symbol.for("react.memo_cache_sentinel")) {
-    t40 = /* @__PURE__ */ jsx(Triggers, {});
-    $[156] = t40;
-  } else {
-    t40 = $[156];
-  }
-  let t41;
-  if ($[157] !== customClassInputContainer || $[158] !== dateContainerRef || $[159] !== skeletonize || $[160] !== t39) {
-    t41 = /* @__PURE__ */ jsxs(Container, { ref: dateContainerRef, skeletonize, customClassInputContainer, children: [
-      t39,
-      t40
-    ] });
-    $[157] = customClassInputContainer;
-    $[158] = dateContainerRef;
-    $[159] = skeletonize;
-    $[160] = t39;
-    $[161] = t41;
-  } else {
-    t41 = $[161];
-  }
-  let t42;
-  if ($[162] !== activeDescendant || $[163] !== calendarBoxOpen || $[164] !== calendarDisplayDate || $[165] !== calendarRef || $[166] !== dateContainerRef || $[167] !== handleNextMonth || $[168] !== handlePreviousMonth || $[169] !== handleSelectDay || $[170] !== handleSelectHour || $[171] !== handleSelectMinute || $[172] !== hasBounds || $[173] !== inputId || $[174] !== isDateTime || $[175] !== maxDate || $[176] !== minDate || $[177] !== selectedDate || $[178] !== timeSelection) {
-    t42 = 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)
+  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);
+    }
+  };
+  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;
       }
-    }), onSelectDay: handleSelectDay, children: isDateTime && /* @__PURE__ */ jsx(TimeSelector, { value: selectedDate, selectedHour: timeSelection.hour, selectedMinute: timeSelection.minute, onSelectHour: handleSelectHour, onSelectMinute: handleSelectMinute, min: minDate, max: maxDate, testIdPrefix: "test-date-field" }) }), document.body);
-    $[162] = activeDescendant;
-    $[163] = calendarBoxOpen;
-    $[164] = calendarDisplayDate;
-    $[165] = calendarRef;
-    $[166] = dateContainerRef;
-    $[167] = handleNextMonth;
-    $[168] = handlePreviousMonth;
-    $[169] = handleSelectDay;
-    $[170] = handleSelectHour;
-    $[171] = handleSelectMinute;
-    $[172] = hasBounds;
-    $[173] = inputId;
-    $[174] = isDateTime;
-    $[175] = maxDate;
-    $[176] = minDate;
-    $[177] = selectedDate;
-    $[178] = timeSelection;
-    $[179] = t42;
-  } else {
-    t42 = $[179];
-  }
-  let t43;
-  if ($[180] !== disabled || $[181] !== hasHintMessages || $[182] !== hintPosition || $[183] !== props.hint || $[184] !== skeletonize) {
-    t43 = hintPosition === "below" && /* @__PURE__ */ jsx(Hint, { customClass: "hint", description: props.hint, disabled, skeletonize, visible: hasHintMessages });
-    $[180] = disabled;
-    $[181] = hasHintMessages;
-    $[182] = hintPosition;
-    $[183] = props.hint;
-    $[184] = skeletonize;
-    $[185] = t43;
-  } else {
-    t43 = $[185];
-  }
-  let t44;
-  if ($[186] !== errors || $[187] !== hasValidationErrors || $[188] !== props.name || $[189] !== skeletonize) {
-    t44 = 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) });
-    $[186] = errors;
-    $[187] = hasValidationErrors;
-    $[188] = props.name;
-    $[189] = skeletonize;
-    $[190] = t44;
-  } else {
-    t44 = $[190];
-  }
-  let t45;
-  if ($[191] !== customClassWrapper || $[192] !== hasValidationErrors || $[193] !== t35 || $[194] !== t41 || $[195] !== t42 || $[196] !== t43 || $[197] !== t44) {
-    t45 = /* @__PURE__ */ jsxs(Root, { ref: inputRootRef, "data-testid": "test-date-field-root", customClassWrapper, hasValidationErrors, children: [
-      t35,
-      t41,
-      t42,
-      t43,
-      t44
-    ] });
-    $[191] = customClassWrapper;
-    $[192] = hasValidationErrors;
-    $[193] = t35;
-    $[194] = t41;
-    $[195] = t42;
-    $[196] = t43;
-    $[197] = t44;
-    $[198] = t45;
-  } else {
-    t45 = $[198];
-  }
-  let t46;
-  if ($[199] !== contextValues || $[200] !== t45) {
-    t46 = /* @__PURE__ */ jsx(DateFieldContext.Provider, { value: contextValues, children: t45 });
-    $[199] = contextValues;
-    $[200] = t45;
-    $[201] = t46;
-  } else {
-    t46 = $[201];
-  }
-  let t47;
-  if ($[202] !== tooltip || $[203] !== tooltipPosition || $[204] !== tooltipWidth) {
-    t47 = /* @__PURE__ */ jsx(Tooltip, { targetRef: inputRootRef, text: tooltip, width: tooltipWidth, position: tooltipPosition });
-    $[202] = tooltip;
-    $[203] = tooltipPosition;
-    $[204] = tooltipWidth;
-    $[205] = t47;
-  } else {
-    t47 = $[205];
-  }
-  let t48;
-  if ($[206] !== t46 || $[207] !== t47) {
-    t48 = /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      t46,
-      t47
-    ] });
-    $[206] = t46;
-    $[207] = t47;
-    $[208] = t48;
-  } else {
-    t48 = $[208];
-  }
-  return t48;
+    }
+  };
+  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 })
+  ] });
 });
 InputBase.displayName = "DateFieldInputBase";
-function _temp(error, index) {
-  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    error,
-    " "
-  ] }, `${index + 1}-${error}`);
-}
 export {
   InputBase
 };