@evinvest/uikit 0.17.0 → 0.17.1

package/README.md

@@ -188,8 +188,10 @@ measuring needs host-only `web-sys`). Known gaps:
   at day granularity (days outside render `disabled` + `data-disabled="true"`);
   `disabled` freezes the whole grid and the nav the same way; the nav buttons
   take label overrides. TS-only `locale` renders the caption and weekday headers through
-  `Intl` (Monday-first); Rust has no `Intl`, so its captions stay English. Rust
-  does manual date math; TS uses the built-in `Date`.
+  `Intl` (Monday-first): `weekday: "short"`, falling back to `"narrow"` for a
+  locale whose short form contains whitespace (vi's "Thứ 2" → "T2", he's
+  "יום ב׳" → "ב׳") as long as narrow still yields seven distinct labels. Rust has no `Intl`, so its captions
+  stay English. Rust does manual date math; TS uses the built-in `Date`.
 - **date-time-picker:** the kit's own bricks only — an outline trigger, a
   `Popover` with the `Calendar` and two numeric 24-hour hours/minutes fields (no
   native `datetime-local` / `time` input, so the browser's locale popup never

package/dist/index.js

@@ -234,9 +234,19 @@ function useFloating(opts) {
 
 // src/primitives/focus-scope.tsx
 import * as React6 from "react";
-var FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "[tabindex]"
+].map((sel) => `${sel}:not([tabindex="-1"])`).join(",");
+function focusCandidates(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE));
+}
 function focusable(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+  return focusCandidates(root).filter(
     (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement
   );
 }
@@ -6970,7 +6980,7 @@ var CALENDAR_NAV = "flex items-center justify-between gap-1 w-full px-1";
 var CALENDAR_CAPTION = "text-sm font-medium select-none";
 var CALENDAR_GRID = "w-full border-collapse mt-4";
 var CALENDAR_WEEKDAY_ROW = "flex";
-var CALENDAR_WEEKDAY = "text-ink-soft rounded-md w-9 shrink-0 font-normal text-[0.8rem] select-none";
+var CALENDAR_WEEKDAY = "text-ink-soft rounded-md w-9 shrink-0 font-normal text-[0.8rem] select-none whitespace-nowrap";
 var CALENDAR_WEEK = "flex w-full mt-2";
 var CALENDAR_DAY_EMPTY = "relative size-9 shrink-0 p-0 select-none";
 var CALENDAR_DAY_CELL = "relative size-9 shrink-0 p-0 text-center select-none";
@@ -7033,13 +7043,19 @@ function outOfRange(day, min, max) {
   return !!min && t < startOfDay(min).getTime() || !!max && t > startOfDay(max).getTime();
 }
 var MONDAY = new Date(2024, 0, 1);
-function localisedWeekdays(locale) {
-  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+function formatWeekdays(locale, weekday) {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday });
   return Array.from(
     { length: 7 },
     (_, i) => fmt.format(new Date(MONDAY.getFullYear(), MONDAY.getMonth(), MONDAY.getDate() + i))
   );
 }
+function localisedWeekdays(locale) {
+  const short = formatWeekdays(locale, "short");
+  if (!short.some((label) => /\s/.test(label))) return short;
+  const narrow = formatWeekdays(locale, "narrow");
+  return new Set(narrow).size === narrow.length ? narrow : short;
+}
 function Calendar({
   selected,
   onSelect,
@@ -7289,6 +7305,7 @@ function DateTimePicker({
   });
   const rootRef = React67.useRef(null);
   const hoursRef = React67.useRef(null);
+  const focusTrigger = () => rootRef.current?.querySelector("[data-slot=date-time-picker-trigger]")?.focus();
   React67.useEffect(() => {
     if (!isOpen) return;
     hoursRef.current?.focus();
@@ -7296,9 +7313,7 @@ function DateTimePicker({
       const active = document.activeElement;
       const content = hoursRef.current?.closest("[data-slot=date-time-picker-content]");
       const lost = !active || active === document.body || !!content?.contains(active);
-      if (lost) {
-        rootRef.current?.querySelector("[data-slot=date-time-picker-trigger]")?.focus();
-      }
+      if (lost) focusTrigger();
     };
   }, [isOpen]);
   const emit = (next) => setValue(clampMoment(atMinute(next), min, max));
@@ -7330,6 +7345,15 @@ function DateTimePicker({
     setValue(null);
     setOpen(false);
   };
+  const onContentKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    const items = focusCandidates(e.currentTarget);
+    const edge = e.shiftKey ? items[0] : items[items.length - 1];
+    if (!edge || e.target !== edge) return;
+    e.preventDefault();
+    setOpen(false);
+    focusTrigger();
+  };
   const onContentBlur = (e) => {
     const next = e.relatedTarget;
     if (!(next instanceof Node)) return;
@@ -7383,6 +7407,7 @@ function DateTimePicker({
         "aria-label": labels.dialog ?? "Choose date and time",
         align,
         onBlur: onContentBlur,
+        onKeyDown: onContentKeyDown,
         className: DATE_TIME_PICKER_CONTENT,
         children: [
           /* @__PURE__ */ jsx57(