nexus-shared 1.1.21 → 3.0.0

package/dist/Components/Inputs/TimePanel.js

@@ -0,0 +1,288 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { toDevanagariDigits } from "../../Helpers/DateHelpers.js";
+import { formatTime, getMeridiemNames, isSecondsInRange, isTwelveHourFormat, listTimeSlots, normalizeTimeStep, nowIsoTime, SECONDS_PER_DAY, secondsToIsoTime, timeToSeconds, toIsoTime, } from "../../Helpers/TimeHelpers.js";
+import { Button } from "../Documents/Button.js";
+const PAGE = 5;
+const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
+const COLUMN_LABELS = { hour: "Hours", minute: "Minutes", second: "Seconds", meridiem: "AM or PM" };
+/**
+ * The panel of a time picker: columns of hours, minutes, seconds, and AM/PM whose chosen items line up on the middle row, or
+ * a list of slots. Items outside `min` and `max`, off the `step`, or refused by `isTimeDisabled` are dimmed and cannot
+ * be picked. It holds no value of its own: the picker passes the value in and writes each pick to its box.
+ */
+export function TimePanel(props) {
+    const { value, onValueChange, onDone, view = "columns", format, script = "latin", seconds = false, min, max, isTimeDisabled, autoFocus = false, footer = true, className } = props;
+    const step = normalizeTimeStep(props.step);
+    const rootRef = useRef(null);
+    const scrolledRef = useRef(false);
+    const focusedRef = useRef(false);
+    const minIso = toIsoTime(min, true);
+    const maxIso = toIsoTime(max, true);
+    const from = minIso === null ? null : timeToSeconds(minIso);
+    const to = maxIso === null ? null : timeToSeconds(maxIso);
+    const devanagari = script === "devanagari";
+    const digits = (number) => (devanagari ? toDevanagariDigits(String(number).padStart(2, "0")) : String(number).padStart(2, "0"));
+    const allowed = (time) => isSecondsInRange(time, from, to) && time % step === 0 && !isTimeDisabled?.(secondsToIsoTime(time, seconds));
+    /** Whether any allowed time lies in a span of seconds, e.g. an hour. Stops at the first one. */
+    const anyAllowed = (start, end) => {
+        for (let time = Math.ceil(start / step) * step; time <= end; time += step)
+            if (allowed(time))
+                return true;
+        return false;
+    };
+    /** The first allowed time from a point, going forward through the day, or `null` when none is. */
+    const firstAllowedFrom = (start, end = start + SECONDS_PER_DAY - 1) => {
+        for (let time = Math.ceil(start / step) * step; time <= end; time += step) {
+            const inDay = time % SECONDS_PER_DAY;
+            if (allowed(inDay))
+                return inDay;
+        }
+        return null;
+    };
+    const selected = value === null ? null : timeToSeconds(value);
+    // An empty field shows the columns around the first time it allows, with nothing chosen.
+    const base = useMemo(() => selected ?? firstAllowedFrom(from ?? 0) ?? 0, [selected, from, to, step, isTimeDisabled, seconds]);
+    function pick(kind, itemValue) {
+        let hour = Math.floor(base / 3600);
+        let minute = Math.floor(base / 60) % 60;
+        let second = seconds ? base % 60 : 0;
+        let start;
+        let end;
+        if (kind === "hour") {
+            hour = itemValue;
+            [start, end] = [hour * 3600, hour * 3600 + 3599];
+        }
+        else if (kind === "minute") {
+            minute = itemValue;
+            [start, end] = [hour * 3600 + minute * 60, hour * 3600 + minute * 60 + 59];
+        }
+        else if (kind === "second") {
+            second = itemValue;
+            start = end = hour * 3600 + minute * 60 + second;
+        }
+        else {
+            hour = (hour % 12) + itemValue * 12;
+            [start, end] = [itemValue * 43200, itemValue * 43200 + 43199];
+        }
+        let time = hour * 3600 + minute * 60 + second;
+        // The part just picked stays; smaller parts move to the first time it allows, e.g. 09:45 → 10 o'clock → 10:00 when 10:45 is past `max`.
+        if (!allowed(time))
+            time = firstAllowedFrom(start, end) ?? time;
+        if (time !== selected)
+            onValueChange(secondsToIsoTime(time, seconds));
+    }
+    // Columns
+    const twelveHour = isTwelveHourFormat(format);
+    const half = Math.floor(base / 43200);
+    const baseHour = Math.floor(base / 3600);
+    const baseMinute = Math.floor(base / 60) % 60;
+    const hourInterval = step % 3600 === 0 ? gcd(step / 3600, 24) : 1;
+    const minuteInterval = step % 60 === 0 ? gcd(step / 60, 60) : 1;
+    const secondInterval = gcd(step, 60);
+    const isChosen = selected !== null;
+    const columns = useMemo(() => {
+        if (view !== "columns")
+            return [];
+        const hours = [];
+        const hourStart = twelveHour ? half * 12 : 0;
+        for (let hour = hourStart; hour < hourStart + (twelveHour ? 12 : 24); hour++) {
+            if (hour % hourInterval !== 0)
+                continue;
+            hours.push({
+                value: hour,
+                label: digits(twelveHour ? hour % 12 || 12 : hour),
+                selected: isChosen && hour === baseHour,
+                disabled: !anyAllowed(hour * 3600, hour * 3600 + 3599),
+            });
+        }
+        const minutes = [];
+        for (let minute = 0; minute < 60; minute += minuteInterval) {
+            const start = baseHour * 3600 + minute * 60;
+            minutes.push({
+                value: minute,
+                label: digits(minute),
+                selected: isChosen && minute === baseMinute,
+                disabled: seconds ? !anyAllowed(start, start + 59) : !allowed(start),
+            });
+        }
+        const result = [
+            { kind: "hour", items: hours },
+            { kind: "minute", items: minutes },
+        ];
+        if (seconds) {
+            const items = [];
+            for (let second = 0; second < 60; second += secondInterval) {
+                items.push({ value: second, label: digits(second), selected: isChosen && second === base % 60, disabled: !allowed(baseHour * 3600 + baseMinute * 60 + second) });
+            }
+            result.push({ kind: "second", items });
+        }
+        if (twelveHour) {
+            result.push({
+                kind: "meridiem",
+                items: getMeridiemNames(script).map((label, index) => ({
+                    value: index,
+                    label,
+                    selected: isChosen && index === half,
+                    disabled: !anyAllowed(index * 43200, index * 43200 + 43199),
+                })),
+            });
+        }
+        return result;
+    }, [view, base, isChosen, twelveHour, seconds, script, step, from, to, isTimeDisabled]);
+    // List
+    const slotStep = step >= 300 ? step : 1800;
+    const slots = useMemo(() => {
+        if (view !== "list")
+            return [];
+        return listTimeSlots(slotStep, minIso, maxIso).map(iso => {
+            const time = timeToSeconds(iso);
+            return { value: time, iso, label: formatTime(iso, { format, script }), disabled: !(time % step === 0 && !isTimeDisabled?.(secondsToIsoTime(time, seconds))) };
+        });
+    }, [view, slotStep, minIso, maxIso, format, script, step, isTimeDisabled, seconds]);
+    // The list's slot to scroll to and focus first: the chosen one, the one just before the chosen time, or the first free one.
+    const listAnchor = useMemo(() => {
+        if (view !== "list" || slots.length === 0)
+            return null;
+        if (selected !== null) {
+            const exact = slots.find(slot => slot.value === selected);
+            if (exact)
+                return exact.value;
+            const before = slots.filter(slot => slot.value <= selected).at(-1);
+            if (before)
+                return before.value;
+        }
+        return (slots.find(slot => !slot.disabled) ?? slots[0]).value;
+    }, [view, slots, selected]);
+    // Chosen items scroll to the middle row of their column, so they line up across columns with their neighbours above
+    // and below; the list centers its slot the same way. At once when the panel opens, smoothly after that, unless the
+    // user asked for reduced motion. (Columns are positioned, so an item's offsetTop is measured from the column.)
+    // With `autoFocus`, focus then moves in once.
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const align = () => {
+            const smooth = scrolledRef.current && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+            for (const column of root.querySelectorAll("[data-column]")) {
+                const target = column.querySelector(view === "list" ? "[data-anchor]" : '[aria-selected="true"]');
+                if (!target)
+                    continue;
+                const top = target.offsetTop - (column.clientHeight - target.offsetHeight) / 2;
+                if (Math.abs(column.scrollTop - top) > 1)
+                    column.scrollTo({ top, behavior: smooth ? "smooth" : "instant" });
+            }
+            scrolledRef.current = true;
+            if (autoFocus && !focusedRef.current) {
+                focusedRef.current = true;
+                root.querySelector('[role="option"][tabindex="0"]')?.focus({ preventScroll: true });
+            }
+        };
+        if (root.getClientRects().length > 0) {
+            align();
+            return;
+        }
+        // On the first render the popover around the panel is still hidden (the picker shows it after this effect), and a
+        // hidden element can neither scroll nor take focus. The next frame comes before the first paint.
+        const frame = requestAnimationFrame(align);
+        return () => cancelAnimationFrame(frame);
+    });
+    function onColumnKeyDown(event, kind, items) {
+        const target = event.target.closest("[data-value]");
+        if (!target)
+            return;
+        const index = items.findIndex(item => String(item.value) === target.dataset.value);
+        const enabled = (from, direction) => {
+            for (let i = from; i >= 0 && i < items.length; i += direction)
+                if (!items[i].disabled)
+                    return i;
+            return -1;
+        };
+        let next = -1;
+        switch (event.key) {
+            case "ArrowDown":
+                next = enabled(index + 1, 1);
+                break;
+            case "ArrowUp":
+                next = enabled(index - 1, -1);
+                break;
+            case "PageDown":
+                next = enabled(Math.min(index + PAGE, items.length - 1), 1);
+                if (next < 0)
+                    next = enabled(items.length - 1, -1);
+                break;
+            case "PageUp":
+                next = enabled(Math.max(index - PAGE, 0), -1);
+                if (next < 0)
+                    next = enabled(0, 1);
+                break;
+            case "Home":
+                next = enabled(0, 1);
+                break;
+            case "End":
+                next = enabled(items.length - 1, -1);
+                break;
+            case "ArrowLeft":
+            case "ArrowRight": {
+                if (kind === "slot")
+                    return;
+                event.preventDefault();
+                const all = [...(rootRef.current?.querySelectorAll("[data-column]") ?? [])];
+                const column = all[all.indexOf(target.closest("[data-column]")) + (event.key === "ArrowRight" ? 1 : -1)];
+                column?.querySelector('[tabindex="0"]')?.focus({ preventScroll: true });
+                return;
+            }
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (kind === "slot") {
+                    const slot = items[index];
+                    if (slot && !slot.disabled)
+                        choose(slot.value);
+                }
+                else {
+                    if (event.key === " " && index >= 0 && !items[index].disabled)
+                        pick(kind, items[index].value);
+                    else
+                        onDone();
+                }
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (next < 0 || next === index)
+            return;
+        const item = items[next];
+        // Moving within a column keeps its items, so the element to focus is already there.
+        const element = target.parentElement?.querySelector(`[data-value="${item.value}"]`);
+        element?.focus({ preventScroll: true });
+        if (kind === "slot") {
+            // The list moves focus only; Enter or a click picks.
+            element?.scrollIntoView({ block: "nearest" });
+        }
+        else {
+            // A column is a spin button: the value follows focus, and the column scrolls it to the chosen row.
+            pick(kind, item.value);
+        }
+    }
+    function choose(time) {
+        if (time !== selected)
+            onValueChange(secondsToIsoTime(time, seconds));
+        onDone();
+    }
+    const now = useMemo(() => {
+        const time = Math.floor(timeToSeconds(nowIsoTime(true)) / step) * step;
+        return allowed(time) ? time : null;
+        // Read when the panel renders; a panel stays open for seconds, not hours.
+    }, [step, from, to, isTimeDisabled, seconds]);
+    if (view === "list") {
+        return (_jsx("div", { ref: rootRef, className: cx("nx-time", "nx-time--list", className), lang: devanagari ? "ne" : undefined, children: _jsxs("div", { role: "listbox", "aria-label": "Times", "data-column": "slot", className: "nx-time__list", tabIndex: -1, onKeyDown: event => onColumnKeyDown(event, "slot", slots), children: [slots.map(slot => (_jsx("div", { role: "option", "data-value": slot.value, "data-anchor": slot.value === listAnchor || undefined, "aria-selected": slot.value === selected, "aria-disabled": slot.disabled || undefined, tabIndex: slot.value === listAnchor ? 0 : -1, className: "nx-time__item nx-time__slot", onClick: () => !slot.disabled && choose(slot.value), children: slot.label }, slot.value))), slots.length === 0 && _jsx("div", { className: "nx-time__empty", children: "No times available" })] }) }));
+    }
+    return (_jsxs("div", { ref: rootRef, className: cx("nx-time", className), lang: devanagari ? "ne" : undefined, children: [_jsx("div", { className: "nx-time__columns", children: columns.map(({ kind, items }) => {
+                    const reachable = items.find(item => item.selected && !item.disabled) ?? items.find(item => !item.disabled) ?? items[0];
+                    return (_jsx("div", { role: "listbox", "aria-label": COLUMN_LABELS[kind], "data-column": kind, className: cx("nx-time__column", kind === "meridiem" && "nx-time__column--meridiem"), tabIndex: -1, onKeyDown: event => onColumnKeyDown(event, kind, items), children: items.map((item, index) => (_jsx("div", { role: "option", "data-value": item.value, "aria-selected": item.selected, "aria-disabled": item.disabled || undefined, tabIndex: item === reachable ? 0 : -1, className: "nx-time__item", onClick: () => !item.disabled && pick(kind, item.value), children: item.label }, kind === "hour" ? index : item.value))) }, kind));
+                }) }), footer && (_jsxs("div", { className: "nx-time__foot", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: now === null, onClick: () => now !== null && choose(now), children: "Now" }), _jsx(Button, { size: "sm", variant: "primary", onClick: onDone, children: "Done" })] }))] }));
+}

package/dist/Components/Inputs/TimePicker.d.ts

@@ -0,0 +1,54 @@
+import { type ChangeEvent, type ComponentPropsWithRef, type ReactNode } from "react";
+import type { DateScript, TimeInput, TimeRules } from "../../Interfaces/DateInterfaces.ts";
+import type { InputDesign, ValidateOn } from "../../Interfaces/InputInterfaces.ts";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+import { type TimePanelView } from "./TimePanel.tsx";
+type NativeInputProps = Omit<ComponentPropsWithRef<"input">, "type" | "size" | "value" | "defaultValue" | "min" | "max" | "step" | "prefix" | "pattern" | "minLength" | "maxLength" | "children" | keyof TimeRules>;
+export interface TimePickerProps extends NativeInputProps, TimeRules {
+    label?: ReactNode;
+    /** Help text under the box. */
+    hint?: ReactNode;
+    /** An error from outside, such as a server message. Shown before the field's own message. */
+    error?: string | null;
+    /** Default `standard`. */
+    design?: InputDesign;
+    /** Default `md`. */
+    size?: Size;
+    /** Decorative icon at the start. The clock button is always at the end. */
+    icon?: ReactNode;
+    /** Text before the value inside the box. */
+    prefix?: ReactNode;
+    /** How the time is written: `hh:mm A` (02:30 PM), `HH:mm` (14:30), ... Seconds are added when `step` needs them. Default: the user's setting. */
+    format?: string;
+    /** `devanagari` writes Nepali digits and पूर्वाह्न/अपराह्न. Default: Devanagari when the user's settings show Nepali dates in Devanagari. */
+    script?: DateScript;
+    /** `columns` (default): hours, minutes, and AM/PM, for any time. `list`: a slot every `step` (30 minutes for steps under 5), for bookings. */
+    view?: TimePanelView;
+    /** Times that cannot be picked, such as booked slots. Receives the ISO time. */
+    isTimeDisabled?: (iso: string) => boolean;
+    /** Shows a clear button while there is a value. Default true. */
+    clearable?: boolean;
+    /** What a read-only field says when someone tries to change it. Default "Read-only: this time cannot be changed." */
+    readOnlyMessage?: string;
+    /** Name used in messages, e.g. "Arrival is required." Default: the label, when it is text. */
+    fieldName?: string;
+    /** When the field shows its own message. Default `blur`; submitting a form always shows it. */
+    validateOn?: ValidateOn;
+    /** The time as an ISO string ("14:30"), or `null` for empty. A `Date` or an ISO date-time is accepted and read as its local time. */
+    value?: TimeInput;
+    defaultValue?: TimeInput;
+    /** After each change: the ISO time ("HH:mm", or "HH:mm:ss" when `step` has seconds), or `null` when the box is empty or holds text that is not a time. */
+    onValueChange?: (value: string | null, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Class of the outer field. `inputClassName` goes on the input. */
+    className?: string;
+    inputClassName?: string;
+}
+/**
+ * A time input: type a time on either clock ("2:30 pm", "1430"), or pick one from the panel that opens under the box.
+ * Written in the user's time format, 12- or 24-hour, and always held as an ISO time with no date and no zone, which a
+ * form sends through a hidden input with the field's `name`. Uncontrolled by default, so typing re-renders nothing.
+ *
+ * @example <TimePicker name="arrival" label="Arrival" min="12:00" max="22:00" step={1800} view="list" />
+ */
+export declare function TimePicker(props: TimePickerProps): import("react").JSX.Element;
+export {};

package/dist/Components/Inputs/TimePicker.js

@@ -0,0 +1,240 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconClock, iconX, InlineIcon } from "nexus-icons";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { usesDevanagari } from "../../Helpers/DateHelpers.js";
+import { useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { formatTime, normalizeTimeStep, parseTimeText, timeFormatWithSeconds, toIsoTime } from "../../Helpers/TimeHelpers.js";
+import { DEFAULT_FIELD_NAME, validateTime } from "../../Helpers/ValidationHelpers.js";
+import { Field, hasContent } from "./Field.js";
+import { setInputValue, useInputField } from "./InputField.js";
+import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+import { TimePanel } from "./TimePanel.js";
+/**
+ * A time input: type a time on either clock ("2:30 pm", "1430"), or pick one from the panel that opens under the box.
+ * Written in the user's time format, 12- or 24-hour, and always held as an ISO time with no date and no zone, which a
+ * form sends through a hidden input with the field's `name`. Uncontrolled by default, so typing re-renders nothing.
+ *
+ * @example <TimePicker name="arrival" label="Arrival" min="12:00" max="22:00" step={1800} view="list" />
+ */
+export function TimePicker(props) {
+    const { label, hint, error, design = "standard", size = "md", icon, prefix, view = "columns", clearable = true, fieldName, readOnlyMessage = "Read-only: this time cannot be changed.", validateOn, value, defaultValue, onValueChange, isTimeDisabled, className, inputClassName, style, required, min, max, step, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const preferences = useDatePreferences();
+    const script = props.script ?? (usesDevanagari(preferences.calendar, preferences.script) ? "devanagari" : "latin");
+    const seconds = normalizeTimeStep(step) % 60 !== 0;
+    const format = timeFormatWithSeconds(props.format ?? preferences.timeFormat, seconds);
+    const editable = !disabled && !readOnly;
+    const initial = toIsoTime(value !== undefined ? value : defaultValue, seconds);
+    const text = (iso) => formatTime(iso, { format, script });
+    const messageName = fieldName ?? (typeof label === "string" ? label : DEFAULT_FIELD_NAME);
+    const valueRef = useRef(initial);
+    const editedRef = useRef(false);
+    const hiddenRef = useRef(null);
+    const panelRef = useRef(null);
+    const focusPanelRef = useRef(false);
+    const [open, setOpen] = useState(false);
+    // Re-renders the panel's selection while it is open; typing with it closed re-renders nothing.
+    const [panelValue, setPanelValue] = useState(initial);
+    const rules = {
+        required,
+        min,
+        max,
+        step,
+        validate: iso => (iso && isTimeDisabled?.(iso) ? `${messageName} cannot be ${text(iso)}.` : validate?.(iso)),
+    };
+    const field = useInputField({
+        ...props,
+        onChange: event => {
+            const input = event.currentTarget;
+            const iso = input.value.trim() ? parseTimeText(input.value, { seconds }) : null;
+            const changed = iso !== valueRef.current;
+            editedRef.current = true;
+            valueRef.current = iso;
+            sync(iso);
+            if (open)
+                setPanelValue(iso);
+            onChange?.(event);
+            if (changed)
+                onValueChange?.(iso, event);
+        },
+    }, {
+        // Text that is not a time is checked as itself, so the message says what to type.
+        check: (input, messageName) => validateTime(valueRef.current ?? (input.value.trim() ? input.value : null), rules, messageName, text),
+        checkKeys: [value, required, min, max, step, validate, isTimeDisabled, format, script],
+        onReset: input => {
+            // Back to the time the field started with, written in the current format.
+            editedRef.current = false;
+            valueRef.current = initial;
+            input.value = text(initial);
+            sync(initial);
+        },
+    });
+    // A read-only box has no panel: a lock, and a note when someone tries to open or change it, say why.
+    const readOnlyNotice = useReadOnlyNotice(Boolean(readOnly) && !disabled, field.elementRef, readOnlyMessage, { keys: ["ArrowDown"] });
+    /** Writes what depends on the value straight to the DOM: the hidden input a form sends. */
+    function sync(iso) {
+        if (hiddenRef.current)
+            hiddenRef.current.value = iso ?? "";
+    }
+    // A controlled value that differs from the box replaces its text. So does a default value that arrives after
+    // mount (from an API, say), as long as the user has not typed anything yet.
+    useLayoutEffect(() => {
+        const input = field.elementRef.current;
+        if (!input || (value === undefined && editedRef.current) || initial === valueRef.current)
+            return;
+        valueRef.current = initial;
+        input.value = text(initial);
+        sync(initial);
+        setPanelValue(initial);
+    }, [initial]);
+    // A new format or script rewrites the same time.
+    useLayoutEffect(() => {
+        const input = field.elementRef.current;
+        if (input && valueRef.current)
+            input.value = text(valueRef.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [format, script]);
+    // React sets a hidden input's default value again on every render, and for a hidden input that is its value.
+    // After each render, before paint, the hidden input takes the box's time back.
+    useLayoutEffect(() => {
+        sync(valueRef.current);
+    });
+    // The panel is a manual popover under the box (above it when there is no room), shown once its content has rendered.
+    // It closes only through this component (Esc, Enter, Done, a pick in the list, focus or a press elsewhere), so the
+    // state always matches the screen: a click right after Esc opens it again, and a click on the box keeps it open.
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
+        const box = field.elementRef.current?.closest(".nx-field__box");
+        if (!open || !panel || !box)
+            return;
+        if (!isPopoverOpen(panel))
+            panel.showPopover();
+        // No arrow: the panel opens flush under the box and is read as the field's own list.
+        const place = () => placeUnderAnchor(panel, box.getBoundingClientRect(), { arrow: false });
+        place();
+        const stopFollowing = followAnchor(place);
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (!panel.contains(target) && !box.contains(target))
+                closePanel();
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+            stopFollowing();
+            document.removeEventListener("pointerdown", onPointerDown, true);
+            if (isPopoverOpen(panel))
+                panel.hidePopover();
+        };
+    }, [open]);
+    function openPanel(focusPanel) {
+        if (!editable)
+            return;
+        // The box is the control: it keeps focus while the panel is open, so Esc and Enter reach it.
+        field.elementRef.current?.focus();
+        focusPanelRef.current = focusPanel;
+        // Shown before its content renders, so the panel can scroll its columns and take focus as it mounts. Nothing is
+        // painted in between: the render that fills it runs before the frame.
+        const panel = panelRef.current;
+        if (panel && !isPopoverOpen(panel))
+            panel.showPopover();
+        setPanelValue(valueRef.current);
+        setOpen(true);
+    }
+    /** Closes the panel. With `returnFocus`, focus that was inside the panel goes back to the box (Esc, Enter, Done). */
+    function closePanel(returnFocus = false) {
+        const panel = panelRef.current;
+        const focusInPanel = Boolean(panel?.contains(document.activeElement));
+        // Blur, a press elsewhere, and Done may all close it; hiding happens once.
+        if (isPopoverOpen(panel))
+            panel.hidePopover();
+        setOpen(false);
+        if (returnFocus && focusInPanel)
+            field.elementRef.current?.focus();
+    }
+    function select(iso) {
+        const input = field.elementRef.current;
+        if (!input)
+            return;
+        setInputValue(input, text(iso));
+        field.touch();
+    }
+    function clear() {
+        const input = field.elementRef.current;
+        if (!input)
+            return;
+        setInputValue(input, "");
+        input.focus();
+    }
+    function handleKeyDown(event) {
+        const { key } = event;
+        readOnlyNotice.onKeyDown(event);
+        if (editable && key === "ArrowDown") {
+            event.preventDefault();
+            if (open)
+                panelRef.current?.querySelector('[role="option"][tabindex="0"]')?.focus({ preventScroll: true });
+            else
+                openPanel(true);
+        }
+        else if (key === "Escape" && open) {
+            // Closes the panel only: the page (a dialog, say) does not see this Esc.
+            event.preventDefault();
+            event.stopPropagation();
+            closePanel();
+        }
+        else if (clearable && editable && key === "Escape" && event.currentTarget.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            clear();
+        }
+        else if (key === "Enter" && open) {
+            event.preventDefault();
+            closePanel();
+        }
+        else if (key === "Tab" && open) {
+            // Tab moves on to the next field, not into the panel; ↓ is the way in.
+            closePanel();
+        }
+        onKeyDown?.(event);
+    }
+    function handleClick(event) {
+        if (!open)
+            openPanel(false);
+        readOnlyNotice.onClick(event);
+        onClick?.(event);
+    }
+    function handleBlur(event) {
+        // Typed text takes the canonical form once it is a time.
+        const input = event.currentTarget;
+        if (valueRef.current && input.value !== text(valueRef.current))
+            input.value = text(valueRef.current);
+        // Focus moving anywhere but the panel closes it.
+        if (open && !(event.relatedTarget instanceof Node && panelRef.current?.contains(event.relatedTarget)))
+            closePanel();
+        readOnlyNotice.hide();
+        field.controlProps.onBlur(event);
+    }
+    // Focus leaving the panel for anything but the box (Tab past Done, a click elsewhere) closes it.
+    function handlePanelBlur(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && (event.currentTarget.contains(next) || next === field.elementRef.current))
+            return;
+        closePanel();
+    }
+    function handlePanelKeyDown(event) {
+        if (event.key !== "Escape")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        closePanel(true);
+    }
+    const showClear = clearable && editable;
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, icon: icon, prefix: prefix, actions: _jsxs(_Fragment, { children: [showClear && (_jsx("button", { type: "button", className: "nx-field__action nx-field__action--clear", tabIndex: -1, "aria-label": "Clear", title: "Clear", onMouseDown: event => event.preventDefault(), onClick: clear, children: _jsx(InlineIcon, { icon: iconX }) })), readOnlyNotice.lock, !readOnly && (_jsx("button", { type: "button", className: "nx-field__action nx-field__action--clock", tabIndex: -1, "aria-label": "Choose a time", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? `${field.controlId}-times` : undefined, title: "Choose a time", disabled: disabled, onMouseDown: event => event.preventDefault(), onClick: () => (open ? closePanel() : openPanel(false)), children: _jsx(InlineIcon, { icon: iconClock }) }))] }), disabled: disabled, readOnly: readOnly, raiseLabel: Boolean(placeholder) || hasContent(prefix), className: cx("nx-field--time", className), style: style, children: [_jsx("input", { autoComplete: "off", spellCheck: false, ...inputProps, ...field.controlProps, type: "text", name: undefined, form: form, lang: script === "devanagari" ? "ne" : undefined, defaultValue: text(initial), className: cx("nx-field__control", "nx-field__control--time", inputClassName), placeholder: placeholder || " ", disabled: disabled, readOnly: readOnly, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onClick: handleClick }), name && _jsx("input", { ref: hiddenRef, type: "hidden", name: name, form: form, disabled: disabled, defaultValue: initial ?? "" })] }), readOnlyNotice.notice, !readOnly && (_jsx("div", { ref: panelRef, id: `${field.controlId}-times`, popover: "manual", role: "dialog", "aria-label": "Choose a time", className: cx("nx-popover", "nx-time-popover"), onKeyDown: handlePanelKeyDown, onBlur: handlePanelBlur, 
+                // The box keeps focus while items, buttons, and the space between them are clicked. A press on a column
+                // itself is left alone, so its scroll bar can be dragged; the column takes focus, inside the panel.
+                onMouseDown: event => {
+                    if (!event.target.matches("[data-column]"))
+                        event.preventDefault();
+                }, children: open && (_jsx(TimePanel, { view: view, value: panelValue, onValueChange: select, onDone: () => closePanel(true), format: format, script: script, seconds: seconds, step: step, min: min, max: max, isTimeDisabled: isTimeDisabled, autoFocus: focusPanelRef.current })) }))] }));
+}