{sheet && , host, ); }; PSA.Popover = Popover; // ---------- PSA.Select: WAI-ARIA select-only combobox ---------- const Avatar = ({ option, size }) => { const [broken, setBroken] = useState(false); useEffect(() => setBroken(false), [option.avatarUrl]); if (broken) return ; return

setBroken(true)} />; }; const Select = ({ value, onChange, options = [], placeholder = "Επιλέξτε…", disabled = false, id, labelId, ariaLabel, describedBy, invalid = false, sheetTitle, size = "md", className, renderValue, renderOption, emptyText = "Δεν υπάρχουν επιλογές.", action, restoreFocus = true, }) => { const uid = useUid("pk-sel"); const tid = id || uid; const listId = `${tid}-list`; const optId = (i) => `${tid}-opt-${i}`; const mode = PSA.usePickerMode(); const [open, setOpen] = useState(false); const [active, setActiveState] = useState(-1); const [nav, setNav] = useState("keyboard"); const triggerRef = useRef(null); const listRef = useRef(null); const panelRef = useRef(null); const buffer = useRef(""); const timer = useRef(null); const prevFocus = useRef(null); const warned = useRef(false); const scrolledFor = useRef(null); const selIndex = options.findIndex((o) => o.value === value); const selected = selIndex >= 0 ? options[selIndex] : null; const count = options.length + (action ? 1 : 0); const last = count - 1; const setActive = (i, how) => { setActiveState(i); if (how) setNav(how); }; useEffect(() => { if (value != null && !selected && !warned.current) { warned.current = true; console.warn(`[admin] PSA.Select #${tid}: no option has the value ${JSON.stringify(value)}`); } }); const openIndex = () => { if (!count) return -1; if (selIndex >= 0) return selIndex; const first = options.findIndex((o) => !o.disabled); return first >= 0 ? first : 0; }; const clearTypeahead = () => { clearTimeout(timer.current); buffer.current = ""; }; const openAt = (i, how) => { setActive(i, how); setOpen(true); }; const close = () => { clearTypeahead(); setOpen(false); }; useEffect(() => () => clearTimeout(timer.current), []); // With restoreFocus false the consumer moves focus; if it did not, focus goes back to where it // was before the trigger was pressed, never left sitting on the trigger. const settleFocus = () => { const t = triggerRef.current; if (!t) return; if (restoreFocus !== false) { t.focus({ preventScroll: true }); return; } if (document.activeElement !== t && !(listRef.current && listRef.current.contains(document.activeElement))) return; const p = prevFocus.current; if (p && p !== t && p.isConnected && p !== document.body) p.focus({ preventScroll: true }); else t.blur(); }; const runAction = () => { close(); settleFocus(); requestAnimationFrame(() => { if (action && action.onAction) action.onAction(); }); }; const commit = (i) => { const o = options[i]; if (!o || o.disabled) return false; if (o.value !== value && onChange) onChange(o.value, o); return true; }; const choose = (i) => { if (action && i === options.length) { runAction(); return; } const o = options[i]; if (!o || o.disabled) return; close(); commit(i); settleFocus(); }; const onType = (ch, from) => { if (!options.length) return; clearTimeout(timer.current); buffer.current += ch; timer.current = setTimeout(() => { buffer.current = ""; }, 500); const q = PSA.foldText(buffer.current); if (!q) return; const same = [...q].every((c) => c === q[0]); const needle = same ? q[0] : q; const start = same || buffer.current.length === 1 ? from + 1 : Math.max(from, 0); for (let k = 0; k < options.length; k++) { const i = (((start + k) % options.length) + options.length) % options.length; if (PSA.foldText(options[i].label).startsWith(needle)) { setActive(i, "keyboard"); return; } } }; const printable = (e) => e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey; const onOpenKey = (e) => { const k = e.key; const handled = () => { e.preventDefault(); setNav("keyboard"); }; if (k === "Escape") { e.preventDefault(); e.stopPropagation(); close(); if (mode === "sheet") triggerRef.current && triggerRef.current.focus({ preventScroll: true }); return; } if (k === "Tab") { if (mode === "sheet") return; // the panel traps it if (active >= 0 && active < options.length && !options[active].disabled) commit(active); close(); return; } if (k === "ArrowUp" && e.altKey) { handled(); choose(active); return; } if (k === "ArrowDown") { handled(); setActive(Math.min(active + 1, last)); return; } if (k === "ArrowUp") { handled(); setActive(Math.max(active - 1, 0)); return; } if (k === "Home") { handled(); setActive(0); return; } if (k === "End") { handled(); setActive(last); return; } if (k === "PageDown") { handled(); setActive(Math.min(active + 10, last)); return; } if (k === "PageUp") { handled(); setActive(Math.max(active - 10, 0)); return; } if (k === "Enter") { handled(); choose(active); return; } if (k === " ") { handled(); if (buffer.current) onType(" ", active); else choose(active); return; } if (printable(e)) { handled(); onType(k, active); } }; const onTriggerKeyDown = (e) => { if (open) { if (mode === "anchored") onOpenKey(e); return; } const k = e.key; if (k === "ArrowDown" || k === "Enter" || k === " ") { e.preventDefault(); prevFocus.current = null; openAt(openIndex(), "keyboard"); return; } if (k === "ArrowUp" || k === "Home") { e.preventDefault(); prevFocus.current = null; openAt(count ? 0 : -1, "keyboard"); return; } if (k === "End") { e.preventDefault(); prevFocus.current = null; openAt(last, "keyboard"); return; } if (printable(e)) { e.preventDefault(); prevFocus.current = null; const from = openIndex(); openAt(from, "keyboard"); onType(k, from); } }; const onTriggerBlur = () => { if (open && mode === "anchored") close(); }; const toggle = () => { if (open) { close(); return; } openAt(openIndex(), "pointer"); }; const onPanelKeyDown = (e) => { if (mode !== "sheet") return; if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); close(); triggerRef.current && triggerRef.current.focus({ preventScroll: true }); return; } PSA.trapTab(e, panelRef.current); }; const onDismiss = (reason) => { const inside = !!(panelRef.current && panelRef.current.contains(document.activeElement)); close(); if (mode === "sheet" || reason === "anchor-hidden") focusAfterDismiss(reason, triggerRef.current, inside); }; // On open: centre the active option; a sheet takes DOM focus into its listbox. useLayoutEffect(() => { if (!open) { scrolledFor.current = null; return; } const list = listRef.current; if (!list) return; if (mode === "sheet" && document.activeElement !== list) list.focus({ preventScroll: true }); const el = active >= 0 ? document.getElementById(optId(active)) : null; if (scrolledFor.current === null) { scrolledFor.current = active; if (el) list.scrollTop = el.offsetTop - (list.clientHeight - el.offsetHeight) / 2; return; } if (!el || scrolledFor.current === active) return; scrolledFor.current = active; const top = el.offsetTop, bottom = top + el.offsetHeight; if (top < list.scrollTop) list.scrollTop = top - 4; else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight + 4; }, [open, active, mode]); // `data-nav` on the panel decides whether the active row shows the keyboard ring. useLayoutEffect(() => { if (open && panelRef.current) panelRef.current.dataset.nav = nav; }, [open, nav, mode]); // The mode can change under an open list (a phone rotating): focus follows the model. const lastMode = useRef(mode); useEffect(() => { if (lastMode.current === mode) return; lastMode.current = mode; if (open && mode === "anchored" && triggerRef.current) triggerRef.current.focus({ preventScroll: true }); }, [mode, open]); const triggerClass = `pk-trigger${size === "sm" ? " pk-trigger--sm" : ""}${invalid ? " is-invalid" : ""}${selected ? "" : " is-placeholder"}${className ? ` ${className}` : ""}`; return ( <> {open && ( )} ); }; PSA.Select = Select; // ---------- calendar (internal): WAI-ARIA date picker dialog grid ---------- const monthOf = (k) => k.slice(0, 7); const monthOutFor = (yy, i, minKey, maxKey) => { const mk = `${yy}-${pad2(i + 1)}`; return !!((minKey && mk < monthOf(minKey)) || (maxKey && mk > monthOf(maxKey))); }; const prevOffFor = (view, k, yy, minKey) => { if (!minKey) return false; if (view === "days") { const { y, m } = parseKey(k); return addDays(key(y, m, 1), -1) < minKey; } return `${yy - 1}-12` < monthOf(minKey); }; const nextOffFor = (view, k, yy, maxKey) => { if (!maxKey) return false; if (view === "days") { const { y, m } = parseKey(k); return addDays(key(y, m, daysInMonth(y, m)), 1) > maxKey; } return `${yy + 1}-01` > monthOf(maxKey); }; const CalendarPanel = ({ selectedKey, rangeStart, rangeEnd, initialFocusKey, minKey, maxKey, isDisabled, todayKey, onPick, apiRef }) => { const titleId = useUid("pk-cal-title"); const clamp = (k) => athens.clampKey(k, minKey, maxKey); const [view, setView] = useState("days"); const [focusKey, setFocusKey] = useState(() => clamp(initialFocusKey && parseKey(initialFocusKey) ? initialFocusKey : todayKey)); const [yearShown, setYearShown] = useState(() => parseKey(focusKey || todayKey).y); const [monthFocus, setMonthFocus] = useState(0); const [liveText, setLiveText] = useState(""); const rootRef = useRef(null); const pending = useRef(null); const { y, m } = parseKey(focusKey); const monthYear = athens.fmt.monthYear(y, m); const blocked = (k) => !!((minKey && k < minKey) || (maxKey && k > maxKey) || (isDisabled && isDisabled(k))); const rows = useMemo(() => { const g = monthGrid(y, m); return Array.from({ length: 6 }, (_, r) => g.slice(r * 7, r * 7 + 7)); }, [y, m]); const monthOut = (i) => monthOutFor(yearShown, i, minKey, maxKey); const prevDisabled = prevOffFor(view, focusKey, yearShown, minKey); const nextDisabled = nextOffFor(view, focusKey, yearShown, maxKey); // Focus follows keyboard moves; buttons that move the month keep their own focus. useLayoutEffect(() => { const p = pending.current; if (!p || !rootRef.current) return; pending.current = null; const root = rootRef.current; const el = p === "cell" ? root.querySelector(`td[data-date="${focusKey}"]`) : p === "month" ? root.querySelector(`.pk-month[data-i="${monthFocus}"]`) : root.querySelector(".pk-cal__title"); if (el) el.focus({ preventScroll: true }); }); // Initial focus after the layer is shown (a passive effect runs after the popover's layout effect). useEffect(() => { const el = rootRef.current && rootRef.current.querySelector(`td[data-date="${focusKey}"]`); if (el) el.focus({ preventScroll: true }); }, []); const seenMonth = useRef(monthYear); useEffect(() => { if (seenMonth.current !== monthYear) { seenMonth.current = monthYear; setLiveText(monthYear); } }, [monthYear]); const seenYear = useRef(yearShown); useEffect(() => { if (seenYear.current !== yearShown) { seenYear.current = yearShown; if (view === "months") setLiveText(String(yearShown)); } }, [yearShown, view]); // A draft that moves day on its own (a time bump past midnight) takes the grid with it. const seenSel = useRef(selectedKey); useEffect(() => { if (seenSel.current === selectedKey) return; seenSel.current = selectedKey; if (selectedKey && parseKey(selectedKey) && selectedKey !== focusKey) setFocusKey(clamp(selectedKey)); }, [selectedKey]); useLayoutEffect(() => { if (!apiRef) return; apiRef.current = { view, backToDays: () => { pending.current = "title"; setView("days"); } }; }); const moveTo = (k) => { const next = clamp(k); if (next === focusKey) return; pending.current = "cell"; setFocusKey(next); }; const onGridKeyDown = (e) => { let next; switch (e.key) { case "ArrowRight": next = addDays(focusKey, 1); break; case "ArrowLeft": next = addDays(focusKey, -1); break; case "ArrowDown": next = addDays(focusKey, 7); break; case "ArrowUp": next = addDays(focusKey, -7); break; case "Home": next = addDays(focusKey, -weekday(focusKey)); break; case "End": next = addDays(focusKey, 6 - weekday(focusKey)); break; case "PageDown": next = addMonths(focusKey, e.shiftKey ? 12 : 1); break; case "PageUp": next = addMonths(focusKey, e.shiftKey ? -12 : -1); break; case "Enter": case " ": if (e.metaKey || e.ctrlKey) return; e.preventDefault(); if (!blocked(focusKey)) onPick(focusKey, { via: "keyboard" }); return; default: return; } e.preventDefault(); moveTo(next); }; // A click focuses the cell (tabindex -1), so the roving focus follows it; a blocked day in view // takes focus but is never picked. A day from another month switches the grid and keeps focus. const pickPointer = (k) => { const sameMonth = monthOf(k) === monthOf(focusKey); if (blocked(k)) { if (sameMonth && k !== focusKey) setFocusKey(k); return; } if (k !== focusKey) { if (!sameMonth) pending.current = "cell"; setFocusKey(k); } onPick(k, { via: "pointer" }); }; const nearestEnabled = (yy, from) => { for (let dist = 0; dist < 12; dist++) { for (const i of [from - dist, from + dist]) if (i >= 0 && i < 12 && !monthOutFor(yy, i, minKey, maxKey)) return i; } return from; }; const changeYear = (dir) => { const ny = yearShown + dir; if (dir < 0 ? prevOffFor("months", focusKey, yearShown, minKey) : nextOffFor("months", focusKey, yearShown, maxKey)) return false; setYearShown(ny); setMonthFocus((mf) => nearestEnabled(ny, mf)); return true; }; const prev = () => { if (view === "days") { const nk = clamp(addMonths(focusKey, -1)); if (prevOffFor("days", nk, yearShown, minKey)) pending.current = "title"; setFocusKey(nk); } else if (changeYear(-1) && prevOffFor("months", focusKey, yearShown - 1, minKey)) { pending.current = "title"; } }; const next = () => { if (view === "days") { const nk = clamp(addMonths(focusKey, 1)); if (nextOffFor("days", nk, yearShown, maxKey)) pending.current = "title"; setFocusKey(nk); } else if (changeYear(1) && nextOffFor("months", focusKey, yearShown + 1, maxKey)) { pending.current = "title"; } }; const toggleView = () => { if (view === "months") { setView("days"); return; } const sel = selectedKey && parseKey(selectedKey); const from = sel && sel.y === y ? sel.m - 1 : m - 1; setYearShown(y); setMonthFocus(nearestEnabled(y, from)); pending.current = "month"; setView("months"); }; const chooseMonth = (i) => { if (monthOut(i)) return; const d = parseKey(focusKey).d; pending.current = "cell"; setFocusKey(clamp(key(yearShown, i + 1, Math.min(d, daysInMonth(yearShown, i + 1))))); setView("days"); }; const onMonthsKeyDown = (e) => { const enabled = (i) => i >= 0 && i < 12 && !monthOut(i); const walk = (dir) => { for (let i = monthFocus + dir; i >= 0 && i < 12; i += dir) if (enabled(i)) return i; return monthFocus; }; let to = null; switch (e.key) { case "ArrowRight": to = walk(1); break; case "ArrowLeft": to = walk(-1); break; case "ArrowDown": to = enabled(monthFocus + 3) ? monthFocus + 3 : monthFocus; break; case "ArrowUp": to = enabled(monthFocus - 3) ? monthFocus - 3 : monthFocus; break; case "Home": to = [...Array(12).keys()].find(enabled); break; case "End": to = [...Array(12).keys()].reverse().find(enabled); break; case "PageUp": case "PageDown": e.preventDefault(); if (changeYear(e.key === "PageUp" ? -1 : 1)) pending.current = "month"; return; case "Enter": case " ": e.preventDefault(); chooseMonth(monthFocus); return; case "Escape": e.preventDefault(); e.stopPropagation(); pending.current = "title"; setView("days"); return; default: return; } e.preventDefault(); if (to == null) return; pending.current = "month"; setMonthFocus(to); if (to === monthFocus && rootRef.current) { const el = rootRef.current.querySelector(`.pk-month[data-i="${to}"]`); if (el) el.focus({ preventScroll: true }); } }; const todayMonth = todayKey ? monthOf(todayKey) : ""; const selMonth = selectedKey ? monthOf(selectedKey) : ""; return (

{liveText}

{view === "days" ? ( {athens.fmt.weekdays.map((w) => )}{rows.map((week, r) => ( {week.map((k) => ( ))} ))}

{w.short}
= rangeStart && k <= (rangeEnd \|\| rangeStart)) ? "true" : undefined} aria-current={k === todayKey ? "date" : undefined} aria-disabled={blocked(k) ? "true" : undefined} aria-label={athens.fmt.fullDate(k)} className={`pk-day${rangeStart && k > rangeStart && k < rangeEnd ? " is-in-range" : ""}${monthOf(k) === monthOf(focusKey) ? "" : " is-outside"}`} onClick={() => pickPointer(k)}>

) : (

{Array.from({ length: 12 }, (_, i) => { const mk = `${yearShown}-${pad2(i + 1)}`; return ( ); })}

)}

); }; // ---------- PSA.DatePicker ---------- const DatePicker = ({ value, onChange, min, max, isDateDisabled, placeholder = "Επιλέξτε ημερομηνία", disabled = false, id, labelId, ariaLabel, describedBy, invalid = false, sheetTitle, clearable = false, }) => { const uid = useUid("pk-date"); const tid = id || uid; const panelId = `${tid}-panel`; const mode = PSA.usePickerMode(); const [open, setOpen] = useState(false); const triggerRef = useRef(null); const panelRef = useRef(null); const calApi = useRef(null); const todayKey = athens.todayKey(); const current = value && parseKey(value) ? value : null; const valueText = current ? athens.fmt.fullDate(current) : placeholder; const focusTrigger = () => { if (triggerRef.current) triggerRef.current.focus({ preventScroll: true }); }; const commit = (k) => { if (k !== value && onChange) onChange(k); setOpen(false); focusTrigger(); }; const todayBlocked = !!((min && todayKey < min) || (max && todayKey > max) || (isDateDisabled && isDateDisabled(todayKey))); const onPanelKeyDown = (e) => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); const api = calApi.current; if (api && api.view === "months") api.backToDays(); else { setOpen(false); focusTrigger(); } return; } PSA.trapTab(e, panelRef.current); }; const onDismiss = (reason) => { const inside = !!(panelRef.current && panelRef.current.contains(document.activeElement)); setOpen(false); focusAfterDismiss(reason, triggerRef.current, inside); }; return ( <> {open && ( commit(k)} /> {(clearable || !todayBlocked) && (

{clearable && } {!todayBlocked && }

)} )} ); }; PSA.DatePicker = DatePicker; // Two date selections form one inclusive range; dismissal cancels a partial selection. PSA.DateRangePicker = ({ from, to, onChange, id, ariaLabel = "Διάστημα αλλαγών" }) => { const mode = PSA.usePickerMode(); const [open, setOpen] = useState(false); const [start, setStart] = useState(null); const triggerRef = useRef(null), panelRef = useRef(null), calApi = useRef(null); const panelId = `${id}-panel`; const text = from && to ? `${athens.fmt.shortDate(from)} – ${athens.fmt.shortDate(to)}` : "Όλες οι ημερομηνίες"; const close = () => { setOpen(false); triggerRef.current?.focus({ preventScroll: true }); }; const pick = k => { if (!start) { setStart(k); return; } onChange(k < start ? { from: k, to: start } : { from: start, to: k }); close(); }; return <> {open && { setOpen(false); focusAfterDismiss(reason, triggerRef.current, !!panelRef.current?.contains(document.activeElement)); }} onPanelKeyDown={e => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); if (calApi.current?.view === "months") calApi.current.backToDays(); else close(); } else PSA.trapTab(e, panelRef.current); }}>

{start ? `Από ${athens.fmt.shortDate(start)} · Επιλέξτε την τελευταία ημέρα` : "Επιλέξτε την πρώτη και την τελευταία ημέρα"}

} ; }; // ---------- time segment (internal): APG spinbutton on a text input ---------- const TimeSegment = ({ kind, n, step, inputRef, nextRef, invalid, errorId, onSet, onApply, onCancel }) => { const max = kind === "h" ? 23 : 59; const buf = useRef(null); const bufTimer = useRef(null); const hold = useRef({ t: 0, i: 0 }); const clearBuf = () => { buf.current = null; clearTimeout(bufTimer.current); }; const keepBuf = (d) => { buf.current = d; clearTimeout(bufTimer.current); bufTimer.current = setTimeout(() => { buf.current = null; }, 1500); }; const up = (v) => { if (kind === "h") return (v + 1) % 24; const x = (Math.floor(v / step) + 1) * step; return x >= 60 ? 0 : x; }; const down = (v) => { if (kind === "h") return (v + 23) % 24; const x = Math.ceil(v / step) * step - step; return x < 0 ? 60 - step : x; }; const focusNext = () => { if (nextRef && nextRef.current) nextRef.current.focus({ preventScroll: true }); }; const feed = (ch) => { if (ch === ":" || ch === ".") { if (kind === "h") { clearBuf(); focusNext(); } return; } if (!/^\d$/.test(ch)) return; const d = Number(ch); if (kind === "h") { if (buf.current == null) { onSet(d); if (d > 2) { clearBuf(); focusNext(); } else keepBuf(d); } else { const both = buf.current * 10 + d; clearBuf(); if (both <= 23) { onSet(both); focusNext(); } else feed(ch); } } else if (buf.current == null) { onSet(d); if (d > 5) clearBuf(); else keepBuf(d); } else { const both = buf.current * 10 + d; clearBuf(); onSet(both); } }; const feedRef = useRef(feed); feedRef.current = feed; const onSetRef = useRef(onSet); onSetRef.current = onSet; // Digits arrive through beforeinput, so every keyboard and IME types the same way. useEffect(() => { const el = inputRef.current; if (!el) return undefined; const onBefore = (e) => { const t = e.inputType || ""; if (t.startsWith("insert")) { e.preventDefault(); for (const ch of String(e.data || "")) feedRef.current(ch); } else if (t.startsWith("delete")) { e.preventDefault(); buf.current = null; onSetRef.current(0); } }; const onInput = () => { const digits = el.value.replace(/\D/g, "").slice(-2); if (digits) onSetRef.current(Math.min(max, Number(digits))); }; el.addEventListener("beforeinput", onBefore); el.addEventListener("input", onInput); return () => { el.removeEventListener("beforeinput", onBefore); el.removeEventListener("input", onInput); }; }, [kind]); useLayoutEffect(() => { const el = inputRef.current; if (el && document.activeElement === el) { try { el.setSelectionRange(0, 2); } catch (e) {} } }, [n]); const stopHold = () => { clearTimeout(hold.current.t); clearInterval(hold.current.i); hold.current = { t: 0, i: 0 }; }; useEffect(() => () => { stopHold(); clearTimeout(bufTimer.current); }, []); const onKeyDown = (e) => { const k = e.key; const set = (v) => { e.preventDefault(); clearBuf(); onSet(v); }; if (k === "ArrowUp") set(up); else if (k === "ArrowDown") set(down); else if (k === "PageUp") set((v) => (kind === "h" ? (v + 6) % 24 : (v + 15) % 60)); else if (k === "PageDown") set((v) => (kind === "h" ? (v + 18) % 24 : (v + 45) % 60)); else if (k === "Home") set(0); else if (k === "End") set(kind === "h" ? 23 : 60 - step); else if (k === "Enter") { e.preventDefault(); e.stopPropagation(); clearBuf(); onApply(); } else if (k === "Escape") { e.preventDefault(); e.stopPropagation(); clearBuf(); onCancel(); } }; const holdToRepeat = (dir) => ({ onPointerDown: (e) => { if (e.pointerType === "mouse" && e.button !== 0) return; e.preventDefault(); stopHold(); clearBuf(); onSet(dir > 0 ? up : down); hold.current.t = setTimeout(() => { hold.current.i = setInterval(() => onSetRef.current(dir > 0 ? up : down), 100); }, 400); }, onPointerUp: stopHold, onPointerCancel: stopHold, onPointerLeave: stopHold, onMouseDown: (e) => e.preventDefault(), // Activation without a pointer (assistive technology) still steps once. onClick: (e) => { if (e.detail === 0) onSet(dir > 0 ? up : down); }, }); const label = kind === "h" ? "Ώρες" : "Λεπτά"; return (

{}} onFocus={(e) => { try { e.target.setSelectionRange(0, 2); } catch (err) {} }} onBlur={clearBuf} onKeyDown={onKeyDown} />

); }; // ---------- PSA.DateTimePicker ---------- // Shows and edits Greek time; hands back epoch ms. Nothing reaches onChange before Εφαρμογή. const DateTimePicker = ({ value, onChange, min, max, minuteStep = 5, defaultTime = { h: 9, min: 0 }, placeholder = "Επιλέξτε ημερομηνία και ώρα", disabled = false, id, labelId, ariaLabel, describedBy, invalid = false, sheetTitle, }) => { const uid = useUid("pk-dt"); const tid = id || uid; const panelId = `${tid}-panel`; const step = Math.max(1, Math.min(30, Math.round(Number(minuteStep)) || 5)); const mode = PSA.usePickerMode(); const [open, setOpen] = useState(false); const [nowTick, setNowTick] = useState(() => Date.now()); const [draft, setDraft] = useState(null); const [bumpNote, setBumpNote] = useState(null); const triggerRef = useRef(null); const panelRef = useRef(null); const calApi = useRef(null); const hoursRef = useRef(null); const minutesRef = useRef(null); const floorAt = (now) => (min === "now" ? now : typeof min === "number" && Number.isFinite(min) ? min : null); const minMs = floorAt(nowTick); const maxMs = typeof max === "number" && Number.isFinite(max) ? max : null; const hasValue = typeof value === "number" && Number.isFinite(value); const zoneMismatch = !athens.deviceMatches(); const msOf = (d) => toMs({ ...parseKey(d.key), h: d.h, min: d.min }); const bump = (d, floor) => { if (floor == null || d.key !== dateKey(floor) || msOf(d).ms > floor) return { draft: d, note: null }; const p = parts(athens.ceilToStep(floor + 60000, step)); return { draft: { key: key(p.y, p.m, p.d), h: p.h, min: p.min }, note: `Η ώρα άλλαξε σε ${pad2(p.h)}:${pad2(p.min)}, την πρώτη διαθέσιμη.` }; }; useEffect(() => { if (!open || min !== "now") return undefined; const t = setInterval(() => setNowTick(Date.now()), 30000); return () => clearInterval(t); }, [open, min]); const focusTrigger = () => { if (triggerRef.current) triggerRef.current.focus({ preventScroll: true }); }; const openPicker = () => { const now = Date.now(); const floor = floorAt(now); setNowTick(now); let d, note = null; if (hasValue) { const p = parts(value); d = { key: key(p.y, p.m, p.d), h: p.h, min: p.min }; } else { const b = bump({ key: dateKey(Math.max(now, floor == null ? now : floor)), h: defaultTime.h, min: defaultTime.min }, floor); d = b.draft; note = b.note; } setDraft(d); setBumpNote(note); setOpen(true); }; const close = () => setOpen(false); const cancel = () => { close(); focusTrigger(); }; const r = draft ? msOf(draft) : null; let error = null; if (r && minMs != null && r.ms <= minMs) error = `Αυτή η ώρα έχει ήδη περάσει. Διαλέξτε από τις ${athens.fmt.time(athens.ceilToStep(minMs + 60000, step))} και μετά.`; else if (r && maxMs != null && r.ms > maxMs) error = "Η ημερομηνία είναι εκτός των επιτρεπτών ορίων."; const dstNote = r && r.shifted ? `Εκείνη τη μέρα η ώρα αλλάζει και η ${pad2(draft.h)}:${pad2(draft.min)} δεν υπάρχει· θα οριστεί ${athens.fmt.time(r.ms)}.` : null; const note = dstNote || bumpNote; const apply = () => { if (!draft) return; const now = Date.now(); const floor = floorAt(now); if (min === "now") setNowTick(now); const res = msOf(draft); if ((floor != null && res.ms <= floor) || (maxMs != null && res.ms > maxMs)) return; close(); if (onChange) onChange(res.ms); focusTrigger(); }; const setField = (field, v) => { setDraft((d) => (d ? { ...d, [field]: typeof v === "function" ? v(d[field]) : v } : d)); setBumpNote(null); }; const pickDay = (k, { via }) => { const b = bump({ ...draft, key: k }, minMs); setDraft(b.draft); setBumpNote(b.note); if (via === "keyboard" && hoursRef.current) hoursRef.current.focus({ preventScroll: true }); }; const onPanelKeyDown = (e) => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); const api = calApi.current; if (api && api.view === "months") api.backToDays(); else cancel(); return; } if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); apply(); return; } PSA.trapTab(e, panelRef.current); }; const onDismiss = (reason) => { const inside = !!(panelRef.current && panelRef.current.contains(document.activeElement)); close(); focusAfterDismiss(reason, triggerRef.current, inside); }; const valueText = hasValue ? `${athens.fmt.fullDate(dateKey(value))}, ${athens.fmt.time(value)}` : placeholder; const zoneId = `${tid}-zone`; const described = [describedBy, zoneMismatch ? zoneId : null].filter(Boolean).join(" ") || undefined; const errorId = `${panelId}-error`; return ( <> {open && draft && (

Ώραώρα Ελλάδας

setField("h", v)} onApply={apply} onCancel={cancel} /> setField("min", v)} onApply={apply} onCancel={cancel} />

{athens.fmt.fullDate(draft.key)}, {pad2(draft.h)}:{pad2(draft.min)}

{note &&

{note}

} {error &&

{error}

} {zoneMismatch &&

Η συσκευή σας είναι σε άλλη ζώνη ώρας· οι ώρες εδώ είναι ώρα Ελλάδας.

}

)} ); }; PSA.DateTimePicker = DateTimePicker; })();