npm - @lotics/ui - Versions diffs - 11.8.0 → 11.8.1 - Mend

@lotics/ui 11.8.0 → 11.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/docs/data_entry.md +6 -3
package/package.json +1 -1
package/src/inline_date_picker.tsx +13 -2
package/src/inline_edit.tsx +15 -2
package/src/inline_focus.test.ts +11 -1
package/src/inline_focus.ts +12 -0

package/docs/data_entry.md CHANGED Viewed

@@ -39,9 +39,12 @@ input-swap editor — `InlineTextInput`, `InlineNumberInput`, `InlineTimePicker`
 `InlineDatePicker` — opens edit mode immediately with the input focused; commit-on-blur then
 makes Tab itself the commit, so the chain is type → Tab → type with the next editor already
 open. Pointer focus never auto-opens (mousedown records "pointer" modality before focus fires
-— `interaction_modality.ts`), so the click path is exactly what it always was. When an editor
-closes while its input still holds focus (Enter/Escape), it returns focus to its resting view
-— never `<body>` — so the next Tab continues from the field.
+— `interaction_modality.ts`), so the click path is exactly what it always was. When a
+**keyboard** close (Enter/Escape) leaves focus on `<body>`, the editor returns focus to its
+resting view so the next Tab continues from the field. A **pointer** close (click ✓/✕, or
+click away onto non-focusable space) does NOT restore — a mouse user has no next Tab to
+preserve, and a bare `.focus()` would scroll the target into view, jerking the page (the
+restore is gated on modality via `shouldRestoreFocusOnClose`).
 **Typed dates.** `InlineDatePicker`'s keyboard mode is the kit's segmented `DateField`: type
 the date in the locale's own field order (dd/MM/yyyy where the locale says so — pass

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "11.8.0",
+  "version": "11.8.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/inline_date_picker.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import { ActivityIndicator } from "./activity_indicator";
 import { type InlineEditBackground, InlineEditView } from "./inline_edit";
 import { useLoticsLocale } from "./locale";
 import { getInteractionModality } from "./interaction_modality";
-import { shouldOpenOnFocus } from "./inline_focus";
+import { shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
 export interface InlineDatePickerProps {
   /** ISO date (`2026-05-22`) or datetime (`2026-05-22T14:30`). */
@@ -196,8 +196,19 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
   // from the top of the page. Return focus to the resting view, arming the
   // suppression window so the restore doesn't re-open the session. A Tab-away
   // blur-commit leaves focus on the next field, so this never steals it back.
+  //
+  // Gate on KEYBOARD modality (see InlineEditFrame): the restore serves keyboard
+  // Tab-order only. A pointer close (click the calendar button, or click away)
+  // also lands on <body>, but restoring focus there jumps the scroll (a bare
+  // `.focus()` scrolls the target into view, often to the top). Skip for pointer.
   useEffect(() => {
-    if (wasEditing.current && !editing && typeof document !== "undefined" && document.activeElement === document.body) {
+    if (
+      wasEditing.current &&
+      !editing &&
+      typeof document !== "undefined" &&
+      document.activeElement === document.body &&
+      shouldRestoreFocusOnClose(getInteractionModality())
+    ) {
       suppressedAt.current = Date.now();
       anchorRef.current?.focus();
     }

package/src/inline_edit.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import { colors } from "./colors";
 import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { getInteractionModality } from "./interaction_modality";
-import { shouldOpenOnFocus } from "./inline_focus";
+import { shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
 /** The kit's standard control height (TextInputField, NumberInput, Picker, …).
  *  The view box matches it — same height, padding, and a 1px transparent border
@@ -241,8 +241,21 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
   // arming the suppression window so the programmatic focus doesn't re-open the
   // editor it just closed. A Tab-away blur-commit leaves focus on the next field
   // (not <body>), so this never steals focus back.
+  //
+  // Gate on KEYBOARD modality: this restore exists solely for keyboard Tab-order
+  // continuity. A POINTER close (click ✓/✕, or click away onto non-focusable
+  // space) also drops focus to <body>, but restoring it there both steals focus
+  // from a mouse user AND — because a bare `.focus()` scrolls the target into
+  // view — jumps the scroll position (often to the top of the page). A mouse
+  // user has no "next Tab" to preserve, so skip the restore for pointer closes.
   useEffect(() => {
-    if (wasEditing.current && !editing && typeof document !== "undefined" && document.activeElement === document.body) {
+    if (
+      wasEditing.current &&
+      !editing &&
+      typeof document !== "undefined" &&
+      document.activeElement === document.body &&
+      shouldRestoreFocusOnClose(getInteractionModality())
+    ) {
       suppressedAt.current = Date.now();
       viewRef.current?.focus();
     }

package/src/inline_focus.test.ts CHANGED Viewed

@@ -1,7 +1,17 @@
 // @vitest-environment jsdom
 import { describe, it, expect } from "vitest";
 import { ensureModalityListeners, getInteractionModality } from "./interaction_modality";
-import { FOCUS_OPEN_SUPPRESS_MS, shouldOpenOnFocus } from "./inline_focus";
+import { FOCUS_OPEN_SUPPRESS_MS, shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
+describe("shouldRestoreFocusOnClose — no scroll jump on a pointer close", () => {
+  it("restores focus on a keyboard close (Enter/Escape) — preserves Tab order", () => {
+    expect(shouldRestoreFocusOnClose("keyboard")).toBe(true);
+  });
+  it("does NOT restore on a pointer close (click ✓/✕ or click away) — a bare focus() would scroll the page", () => {
+    expect(shouldRestoreFocusOnClose("pointer")).toBe(false);
+  });
+});
 describe("shouldOpenOnFocus — the inline keyboard-entry gate", () => {
   it("keyboard focus opens the editor", () => {

package/src/inline_focus.ts CHANGED Viewed

@@ -38,3 +38,15 @@ export function shouldOpenOnFocus(
   if (modality !== "keyboard") return false;
   return suppressedAt === null || now - suppressedAt >= FOCUS_OPEN_SUPPRESS_MS;
 }
+/**
+ * When an inline editor closes and focus has dropped to `<body>`, should it
+ * restore focus to its resting view? ONLY for a keyboard close — the restore
+ * exists solely to preserve Tab order. A POINTER close (click ✓/✕, or click
+ * away onto non-focusable space) must NOT restore: a bare `.focus()` scrolls
+ * the target into view, jumping the scroll position (often to the top), and a
+ * mouse user has no "next Tab" to preserve.
+ */
+export function shouldRestoreFocusOnClose(modality: InteractionModality): boolean {
+  return modality === "keyboard";
+}