@bigbinary/neeto-atoms 1.1.9 → 1.1.11

package/dist/{DatePicker-DUx9Qggg.js → DatePicker-DYsyV9BJ.js}

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useId, useCallback, useMemo } from 'react';
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useId, useCallback, useMemo } from 'react';
 import { Calendar as Calendar$1 } from './primitives/Calendar.js';
 import { PopoverAnchor, Popover, PopoverTrigger, PopoverContent } from './primitives/Popover.js';
 import { c as cn } from './utils-BJnb9o5c.js';
-import { t as to12Hour, a as to24Hour, p as padNumber, d as timeValueEquals, C as Clock, u as useControlledOpen, q as isFixedWidthFormat, r as buildRangeMaskTemplate, h as buildMaskTemplate, e as useOutsideClickClose, j as useCursorRestore, m as applyMask, s as dateToTimeValue } from './utils-Ca3DmOrC.js';
+import { t as to12Hour, p as padNumber, a as to24Hour, d as timeValueEquals, C as Clock, u as useControlledOpen, q as isFixedWidthFormat, r as buildRangeMaskTemplate, h as buildMaskTemplate, e as useOutsideClickClose, j as useCursorRestore, m as applyMask, s as dateToTimeValue } from './utils-Ca3DmOrC.js';
 import pureDayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { dayjs } from '@bigbinary/neeto-commons-frontend/utils';
@@ -493,172 +493,56 @@ const DatePickerTrigger = forwardRef(
 );
 DatePickerTrigger.displayName = "DatePickerTrigger";
 
-const SEGMENT_KEYS = ["hour", "minute", "period"];
-const EMPTY_SEGMENT = { text: "", done: false, auto: false };
-const segment = (text, done, auto = false) => ({
-  text,
-  done,
-  auto
-});
-const clampIndex = (index) => Math.max(0, Math.min(2, index));
-const withSegment = (state, key, value) => ({ ...state, [key]: value });
-const snapMinute = (minutes, step = 1) => padNumber(Math.min(60 - step, Math.round(Number(minutes) / step) * step));
-const emptySegmentedTime = () => ({
-  hour: EMPTY_SEGMENT,
-  minute: EMPTY_SEGMENT,
-  period: EMPTY_SEGMENT,
-  active: 0
+const MINUTES_IN_DAY = 24 * 60;
+const snapMinute = (minutes, step = 1) => Math.min(60 - step, Math.round(minutes / step) * step);
+const snapTimeValue = (value, step = 1) => ({
+  hours: value.hours,
+  minutes: snapMinute(value.minutes, step),
+  seconds: 0
 });
-const segmentedTimeFromValue = (value, step = 1) => {
-  const { hour12, period } = to12Hour(value.hours);
-  return {
-    hour: segment(String(hour12), true),
-    minute: segment(snapMinute(value.minutes, step), true),
-    period: segment(period, true),
-    active: 0
-  };
-};
-const isSegmentedTimeEmpty = (state) => SEGMENT_KEYS.every((key) => state[key].text === "");
-const getSegmentedTimeError = (state) => {
-  if (isSegmentedTimeEmpty(state)) return "timeRequired";
-  if (!state.hour.text) return "hourRequired";
-  if (!state.minute.text) return "minuteRequired";
-  if (!state.period.text) return "periodRequired";
-  return null;
-};
-const segmentedTimeToValue = (state) => {
-  if (getSegmentedTimeError(state)) return null;
-  return {
-    hours: to24Hour(Number(state.hour.text), state.period.text),
-    minutes: Number(state.minute.text),
-    seconds: 0
-  };
-};
-const finishSegment = (state, key, step) => {
-  const { text } = state[key];
-  if (!text) return state;
-  if (key === "hour" && text === "0") {
-    return withSegment(state, "hour", EMPTY_SEGMENT);
-  }
-  if (key === "minute" && text.length === 1) {
-    return withSegment(
-      state,
-      "minute",
-      segment(snapMinute(text, step), true, true)
-    );
-  }
-  return withSegment(state, key, { ...state[key], done: true });
+const toMinutes = (value) => value.hours * 60 + value.minutes;
+const fromMinutes = (minutes) => {
+  const clamped = Math.max(0, Math.min(MINUTES_IN_DAY - 1, minutes));
+  return { hours: Math.floor(clamped / 60), minutes: clamped % 60, seconds: 0 };
 };
-const finishActiveSegment = (state, step = 1) => finishSegment(state, SEGMENT_KEYS[state.active], step);
-const focusSegment = (state, index, step = 1) => {
-  const next = clampIndex(index);
-  const finished = next > state.active ? finishActiveSegment(state, step) : state;
-  return { ...finished, active: next };
-};
-const focusFirstEmptySegment = (state) => {
-  const index = SEGMENT_KEYS.findIndex((key) => !state[key].text);
-  return { ...state, active: index === -1 ? 2 : index };
-};
-const nextSegment = (state, step = 1) => state[SEGMENT_KEYS[state.active]].text ? focusSegment(state, state.active + 1, step) : state;
-const previousSegment = (state) => focusSegment(state, state.active - 1);
-const typeDigit = (state, digit, step = 1) => {
-  const advance = (next, index) => focusSegment(next, index, step);
-  const key = SEGMENT_KEYS[state.active];
-  if (key === "period") return state;
-  const current = state[key];
-  const text = current.done ? "" : current.text;
-  if (key === "hour") {
-    if (text === "") {
-      if (digit === "0" || digit === "1") {
-        return withSegment(state, "hour", segment(digit, false));
-      }
-      return advance(withSegment(state, "hour", segment(digit, true)), 1);
-    }
-    if (text === "1") {
-      if ("012".includes(digit)) {
-        return advance(
-          withSegment(state, "hour", segment(`1${digit}`, true)),
-          1
-        );
-      }
-      const moved = advance(withSegment(state, "hour", segment("1", true)), 1);
-      return typeDigit(moved, digit, step);
-    }
-    if (digit === "0") return state;
-    return advance(withSegment(state, "hour", segment(digit, true)), 1);
-  }
-  if (text === "") {
-    if (digit >= "6") {
-      return advance(
-        withSegment(
-          state,
-          "minute",
-          segment(snapMinute(digit, step), true, true)
-        ),
-        2
-      );
-    }
-    return withSegment(state, "minute", segment(digit, false));
-  }
-  return advance(
-    withSegment(state, "minute", segment(snapMinute(text + digit, step), true)),
-    2
-  );
+const lastMinuteOfDay = (step = 1) => 23 * 60 + Math.floor(59 / step) * step;
+const formatTimeText = (value) => {
+  const { hour12, period } = to12Hour(value.hours);
+  return `${hour12}:${padNumber(value.minutes)} ${period}`;
 };
-const typePeriod = (state, letter, step = 1) => withSegment(
-  focusSegment(state, 2, step),
-  "period",
-  segment(letter === "a" ? "AM" : "PM", true)
-);
-const togglePeriod = (state) => withSegment(
-  state,
-  "period",
-  segment(state.period.text === "AM" ? "PM" : "AM", true)
-);
-const stepSegment = (state, direction, step = 1) => {
-  const key = SEGMENT_KEYS[state.active];
-  if (key === "hour") {
-    const hour = Number(state.hour.text) || (direction > 0 ? 0 : 1);
-    const next = (hour - 1 + direction + 12) % 12 + 1;
-    return withSegment(state, "hour", segment(String(next), true));
-  }
-  if (key === "minute") {
-    const minute = state.minute.text === "" ? direction > 0 ? -step : 0 : Number(state.minute.text);
-    const stepped = direction > 0 ? Math.floor(minute / step) * step + step : Math.ceil(minute / step) * step - step;
-    return withSegment(
-      state,
-      "minute",
-      segment(padNumber((stepped + 60) % 60), true)
-    );
+const parseTimeText = (text, step = 1) => {
+  const normalized = text.toLowerCase().trim().replace(/(\d)\s+(?=\d)/g, "$1:").replace(/\s+/g, "").replace(/([ap])\.?m?\.?$/, "$1");
+  if (!normalized) return null;
+  const match = normalized.match(/^(\d{1,4})(?:[:.](\d{0,2}))?([ap])?$/);
+  if (!match) return "invalid";
+  const [, digits, minuteText, period] = match;
+  let hourText = digits;
+  let minutes = 0;
+  if (minuteText !== void 0) {
+    if (digits.length > 2) return "invalid";
+    minutes = Number(minuteText.padEnd(2, "0"));
+  } else if (digits.length === 4) {
+    hourText = digits.slice(0, 2);
+    minutes = Number(digits.slice(2));
+  } else if (digits.length === 3) {
+    const isTwoDigitHour = /^1[0-2][0-5]$/.test(digits);
+    hourText = isTwoDigitHour ? digits.slice(0, 2) : digits.slice(0, 1);
+    minutes = isTwoDigitHour ? Number(digits[2]) * 10 : Number(digits.slice(1));
   }
-  return togglePeriod(state);
-};
-const backspace = (state) => {
-  const moveBack = state[SEGMENT_KEYS[state.active]].text === "" && state.active > 0;
-  const active = moveBack ? clampIndex(state.active - 1) : state.active;
-  const key = SEGMENT_KEYS[active];
-  const current = state[key];
-  const text = key === "period" || current.auto ? "" : current.text.slice(0, -1);
-  return { ...withSegment(state, key, segment(text, false)), active };
-};
-const parsePastedTime = (text, step = 1) => {
-  const match = text.trim().toLowerCase().match(/^(\d{1,2}):?(\d{2})?\s*([ap])?\.?m?\.?$/);
-  if (!match) return null;
-  let hours = Number(match[1]);
-  const minutes = Number(match[2] ?? 0);
-  const period = match[3];
-  if (minutes > 59) return null;
+  let hours = Number(hourText);
+  if (minutes > 59) return "invalid";
   if (period) {
-    if (hours < 1 || hours > 12) return null;
-    hours = hours % 12 + (period === "p" ? 12 : 0);
+    if (hours < 1 || hours > 12) return "invalid";
+    hours = to24Hour(hours, period === "a" ? "AM" : "PM");
   } else if (hours > 23) {
-    return null;
+    return "invalid";
   }
-  return { hours, minutes: Number(snapMinute(minutes, step)), seconds: 0 };
+  return snapTimeValue({ hours, minutes}, step);
 };
+const getTimeTextError = (parsed) => parsed === null ? "timeRequired" : null;
 
-const PLACEHOLDERS = ["hh", "mm", "--"];
-const SegmentedTimeInput = forwardRef(
+const FALLBACK_TIME = { hours: 12, minutes: 0, seconds: 0 };
+const TimeInput = forwardRef(
   ({
     value,
     minuteStep,
@@ -672,153 +556,98 @@ const SegmentedTimeInput = forwardRef(
     "data-testid": dataTestId = "datepicker-time-input"
   }, ref) => {
     const { t } = useTranslation();
-    const fieldRef = useRef(null);
     const step = minuteStep ?? 1;
-    const [time, setTime] = useState(
-      () => segmentedTimeFromValue(value, step)
-    );
+    const inputRef = useRef(null);
+    const isPointerFocusRef = useRef(false);
     const lastEmittedRef = useRef(value);
+    const [text, setText] = useState(
+      () => formatTimeText(snapTimeValue(value, step))
+    );
+    const emit = (next) => {
+      if (timeValueEquals(next, lastEmittedRef.current)) return;
+      lastEmittedRef.current = next;
+      onChange(next);
+    };
     useEffect(() => {
       if (timeValueEquals(value, lastEmittedRef.current)) return;
       lastEmittedRef.current = value;
-      setTime(segmentedTimeFromValue(value, step));
+      setText(formatTimeText(value));
+      onErrorChange(null);
     }, [value]);
-    const error = getSegmentedTimeError(time);
     useEffect(() => {
-      onErrorChange(error);
-    }, [error, onErrorChange]);
-    useEffect(() => {
-      const snapped = segmentedTimeToValue(time);
-      if (snapped && !timeValueEquals(snapped, value)) {
-        lastEmittedRef.current = snapped;
-        onChange(snapped);
-      }
+      const snapped = snapTimeValue(value, step);
+      if (!timeValueEquals(snapped, value)) emit(snapped);
     }, []);
+    const focusAndSelect = () => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    };
     useEffect(() => {
-      if (autoFocus) fieldRef.current?.focus();
+      if (autoFocus) focusAndSelect();
     }, [autoFocus]);
-    useImperativeHandle(ref, () => ({
-      focusHour: () => {
-        fieldRef.current?.focus();
-        setTime((current) => ({ ...current, active: 0 }));
-      }
-    }));
-    const update = (next) => {
-      setTime(next);
-      const nextValue = segmentedTimeToValue(next);
-      if (!nextValue || timeValueEquals(nextValue, lastEmittedRef.current)) {
-        return;
-      }
-      lastEmittedRef.current = nextValue;
-      onChange(nextValue);
+    useImperativeHandle(ref, () => ({ focus: focusAndSelect }));
+    const handleChange = (event) => {
+      const nextText = event.target.value;
+      setText(nextText);
+      const parsed = parseTimeText(nextText, step);
+      onErrorChange(getTimeTextError(parsed));
+      if (parsed !== null && parsed !== "invalid") emit(parsed);
     };
-    const consume = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
+    const tidy = () => {
+      const parsed = parseTimeText(text, step);
+      if (parsed === null) return;
+      const next = parsed === "invalid" ? FALLBACK_TIME : parsed;
+      setText(formatTimeText(next));
+      onErrorChange(null);
+      emit(next);
     };
     const handleKeyDown = (event) => {
-      const { key } = event;
-      if (key === "Tab") {
-        if (!event.shiftKey || time.active !== 2) return;
-        consume(event);
-        update(togglePeriod(time));
-        return;
-      }
-      if ((event.metaKey || event.ctrlKey) && key === "Backspace") {
-        consume(event);
-        update(emptySegmentedTime());
-        return;
-      }
-      if (event.metaKey || event.ctrlKey || event.altKey) return;
-      let next = null;
-      if (/^[0-9]$/.test(key)) next = typeDigit(time, key, step);
-      else if (/^[ap]$/i.test(key)) {
-        next = typePeriod(time, key.toLowerCase(), step);
-      } else if (/^m$/i.test(key))
-        next = time;
-      else if (key === ":" || key === " " || key === "ArrowRight") {
-        next = nextSegment(time, step);
-      } else if (key === "ArrowLeft") next = previousSegment(time);
-      else if (key === "ArrowUp") next = stepSegment(time, 1, step);
-      else if (key === "ArrowDown") next = stepSegment(time, -1, step);
-      else if (key === "Backspace" || key === "Delete") next = backspace(time);
-      if (!next) return;
-      consume(event);
-      update(next);
-    };
-    const handlePaste = (event) => {
+      if (event.key !== "Enter") return;
       event.preventDefault();
-      const pasted = parsePastedTime(event.clipboardData.getData("text"), step);
-      if (pasted)
-        update({ ...segmentedTimeFromValue(pasted, step), active: 2 });
-    };
-    const handleMouseDown = (event) => {
-      if (disabled) return;
-      const segmentEl = event.target.closest(
-        "[data-segment]"
-      );
-      if (segmentEl) {
-        event.preventDefault();
-        fieldRef.current?.focus();
-        update(focusSegment(time, Number(segmentEl.dataset.segment), step));
-        return;
-      }
-      update(focusFirstEmptySegment(time));
+      event.stopPropagation();
+      tidy();
     };
-    const segmentText = (index) => {
-      const { text, done } = time[SEGMENT_KEYS[index]];
-      if (!text) return PLACEHOLDERS[index];
-      return index < 2 && !done ? `${text}_` : text;
+    const handleFocus = () => {
+      if (!isPointerFocusRef.current) inputRef.current?.select();
+      isPointerFocusRef.current = false;
     };
     return /* @__PURE__ */ jsx(
-      "div",
+      "input",
       {
-        ref: fieldRef,
-        role: "group",
-        tabIndex: disabled ? -1 : 0,
-        "aria-label": ariaLabel ?? t("neetoatoms.datePicker.timeField", "Time"),
+        ref: inputRef,
         "aria-describedby": ariaDescribedBy,
         "aria-invalid": invalid || void 0,
-        "aria-disabled": disabled || void 0,
+        "aria-label": ariaLabel ?? t("neetoatoms.datePicker.timeField", "Time"),
+        autoComplete: "off",
         "data-testid": dataTestId,
+        disabled,
+        placeholder: t("neetoatoms.datePicker.timePlaceholder", "Time"),
+        spellCheck: false,
+        type: "text",
+        value: text,
         className: cn(
-          "group/time flex h-9 w-full cursor-text items-center rounded-md border border-input bg-transparent px-3 text-sm tabular-nums outline-none select-none",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm tabular-nums outline-none placeholder:text-muted-foreground",
           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
           invalid && "border-destructive",
-          disabled && "pointer-events-none cursor-not-allowed opacity-50"
+          disabled && "cursor-not-allowed opacity-50"
         ),
-        onBlur: () => update(finishActiveSegment(time, step)),
+        onBlur: tidy,
+        onChange: handleChange,
+        onFocus: handleFocus,
         onKeyDown: handleKeyDown,
-        onMouseDown: handleMouseDown,
-        onPaste: handlePaste,
-        children: SEGMENT_KEYS.map((key, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-          index === 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-0.5 text-muted-foreground", children: ":" }),
-          index === 2 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-1" }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "data-segment": index,
-              "data-testid": `datepicker-time-${key}`,
-              className: cn(
-                "min-w-[2ch] px-0.5 text-center whitespace-pre",
-                !time[key].text && "text-muted-foreground",
-                index === time.active && "group-focus/time:shadow-[inset_0_-1.5px_0_var(--color-muted-foreground)]"
-              ),
-              children: segmentText(index)
-            }
-          )
-        ] }, key))
+        onMouseDown: () => {
+          if (document.activeElement !== inputRef.current) {
+            isPointerFocusRef.current = true;
+          }
+        }
       }
     );
   }
 );
-SegmentedTimeInput.displayName = "SegmentedTimeInput";
+TimeInput.displayName = "TimeInput";
 
 const ERROR_DEFAULTS = {
-  timeRequired: "Enter a time, or turn off Add time.",
-  hourRequired: "Enter an hour.",
-  minuteRequired: "Enter minutes.",
-  periodRequired: "Type a or p for AM or PM."
+  timeRequired: "Enter a time, or turn off Add time."
 };
 const stepExamples = (step) => {
   const pad = (minutes) => `1:${String(minutes).padStart(2, "0")}`;
@@ -889,7 +718,7 @@ const TimeSection = ({
     ] }),
     isTimeOn && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
       /* @__PURE__ */ jsx(
-        SegmentedTimeInput,
+        TimeInput,
         {
           "aria-describedby": [showHint ? hintId : null, errorMessage ? errorId : null].filter(Boolean).join(" ") || void 0,
           autoFocus: focusOnMount,
@@ -1038,6 +867,7 @@ const RangeCalendar = ({
   }
 ) });
 
+const SAME_DAY_END_GAP = 30;
 const ENDPOINT_LABELS = {
   from: "Start",
   to: "End"
@@ -1083,12 +913,21 @@ const RangeTimeSection = ({
     [handleErrorChange]
   );
   const showHint = (minuteStep ?? 1) > 1;
+  const handleFromChange = (value) => {
+    onFromChange(value);
+    if (!isEndOnStartDay) return;
+    const step = minuteStep ?? 1;
+    const gap = Math.ceil(SAME_DAY_END_GAP / step) * step;
+    onToChange(
+      fromMinutes(Math.min(toMinutes(value) + gap, lastMinuteOfDay(step)))
+    );
+  };
   const endpoints = [
     {
       endpoint: "from",
       dateLabel: fromDateLabel,
       value: fromValue,
-      onChange: onFromChange,
+      onChange: handleFromChange,
       onFieldErrorChange: handleFromErrorChange
     },
     {
@@ -1136,7 +975,7 @@ const RangeTimeSection = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            SegmentedTimeInput,
+            TimeInput,
             {
               "aria-describedby": [
                 showHint ? hintId : null,
@@ -1880,7 +1719,7 @@ const DatePicker = forwardRef(
     const handleRangeCalendarKeyDown = (e) => {
       if (e.key !== "Tab" || e.shiftKey || !draftRange) return;
       e.preventDefault();
-      fromTimeRef.current?.focusHour();
+      fromTimeRef.current?.focus();
     };
     const handleGridPickerSelect = (date) => {
       commitValue(date);
@@ -1960,7 +1799,8 @@ const DatePicker = forwardRef(
             PopoverContent,
             {
               id: popoverContentId,
-              className: "w-auto p-0",
+              className: "max-h-(--radix-popover-content-available-height) w-auto overflow-y-auto p-0",
+              collisionPadding: 8,
               align,
               side,
               onOpenAutoFocus: (e) => e.preventDefault(),
@@ -2107,4 +1947,4 @@ const DatePicker = forwardRef(
 DatePicker.displayName = "DatePicker";
 
 export { DatePicker as D };
-//# sourceMappingURL=DatePicker-DUx9Qggg.js.map
+//# sourceMappingURL=DatePicker-DYsyV9BJ.js.map