@lotics/ui 1.11.0 → 1.12.0

package/src/text_input_field.tsx

@@ -12,6 +12,7 @@ import { ShortcutBadge } from "./shortcut_badge";
 import { fontFamilyRegular, getInputLineHeight, getInputTextStyle } from "./text_utils";
 import { useScreenSize } from "./use_screen_size";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
+import { useFormField } from "./form_field";
 import type { ShortcutDescriptor } from "./keyboard";
 
 interface TextInputFieldProps extends RNTextInputProps {
@@ -25,6 +26,13 @@ interface TextInputFieldProps extends RNTextInputProps {
   autoGrow?: boolean;
   /** Keyboard shortcut badge shown in the right slot when the input is empty. */
   shortcut?: string | ShortcutDescriptor;
+  /** Accessible name for the clear button. Default: "Clear". Pass a translated string from the consumer. */
+  clearLabel?: string;
+  // DOM-only ARIA attrs not declared on React Native's TextInputProps. They
+  // are forwarded verbatim to the underlying web input.
+  "aria-controls"?: string;
+  "aria-activedescendant"?: string;
+  "aria-autocomplete"?: "none" | "inline" | "list" | "both";
 }
 
 export function TextInputField(props: TextInputFieldProps) {
@@ -40,12 +48,29 @@ export function TextInputField(props: TextInputFieldProps) {
     disabled,
     autoGrow,
     shortcut,
+    clearLabel = "Clear",
     ref,
+    "aria-controls": ariaControls,
+    "aria-activedescendant": ariaActivedescendant,
+    "aria-autocomplete": ariaAutocomplete,
     ...inputProps
   } = props;
 
+  // Forwarded to the DOM input on RN Web. RN's TextInput type does not declare
+  // these attrs, but react-native-web passes unknown props through to the
+  // element, which is the correct behavior for combobox patterns.
+  const webAriaAttrs: Record<string, unknown> = {};
+  if (ariaControls !== undefined) webAriaAttrs["aria-controls"] = ariaControls;
+  if (ariaActivedescendant !== undefined) webAriaAttrs["aria-activedescendant"] = ariaActivedescendant;
+  if (ariaAutocomplete !== undefined) webAriaAttrs["aria-autocomplete"] = ariaAutocomplete;
+
   const { small } = useScreenSize();
   const lineHeight = getInputLineHeight(small);
+  const binding = useFormField();
+
+  // Describedby chains description and error so both are read. We join them
+  // explicitly here because React Native Web does not flatten array attrs.
+  const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
 
   const minHeight =
     numberOfLines && numberOfLines > 1
@@ -90,11 +115,16 @@ export function TextInputField(props: TextInputFieldProps) {
       )}
       <RNTextInput
         {...inputProps}
+        {...webAriaAttrs}
         ref={mergedRef}
         value={value}
         onChangeText={handleChangeText}
         onFocus={inputProps.onFocus}
         onBlur={inputProps.onBlur}
+        nativeID={binding?.inputId ?? inputProps.nativeID}
+        accessibilityLabelledBy={binding?.labelId ?? inputProps.accessibilityLabelledBy}
+        aria-describedby={describedBy}
+        aria-invalid={binding?.invalid || undefined}
         style={[
           styles.input,
           getInputTextStyle(),
@@ -115,6 +145,7 @@ export function TextInputField(props: TextInputFieldProps) {
       {!!clearable && !!value ? (
         <IconButton
           icon="x"
+          tooltip={clearLabel}
           onPress={() => {
             onChangeText?.("");
             onClear?.();

package/src/tooltip.tsx

@@ -190,17 +190,27 @@ export function useTooltip(options?: string | UseTooltipOptions) {
   const side = typeof options === "string" ? "top" : (options?.side ?? "top");
   const offset = typeof options === "string" ? undefined : options?.offset;
 
-  const onMouseEnter = useCallback(
-    (e: React.MouseEvent | { currentTarget: HTMLElement }) => {
+  const showFor = useCallback(
+    (target: unknown) => {
       if (!text || !context) return;
-      const target = e.currentTarget as HTMLElement;
-      if (!target) return;
+      // Tooltips are a web-only UI. `typeof` guards the native platforms where
+      // `HTMLElement` does not exist as a global, then `instanceof` narrows
+      // without an unchecked cast.
+      if (typeof HTMLElement === "undefined") return;
+      if (!(target instanceof HTMLElement)) return;
       const rect = target.getBoundingClientRect();
       context.show(text, rect, side, offset);
     },
     [text, context, side, offset],
   );
 
+  const onMouseEnter = useCallback(
+    (e: { currentTarget: unknown }) => {
+      showFor(e.currentTarget);
+    },
+    [showFor],
+  );
+
   const onMouseLeave = useCallback(() => {
     if (!context) return;
     context.hide();
@@ -211,15 +221,42 @@ export function useTooltip(options?: string | UseTooltipOptions) {
     context.hide();
   }, [context]);
 
-  // If no text or no provider, return empty object
+  // Keyboard focus must reveal the same label as hover. `:focus-visible` CSS
+  // handles the visual ring; we tie tooltip visibility to real focus so
+  // screen-reader-off keyboard users still see names.
+  //
+  // Typed as `unknown` because these handlers spread onto both
+  // `react-native-web`'s `Pressable` (expects `NativeSyntheticEvent<TargetedEvent>`)
+  // and regular DOM elements (expect `React.FocusEvent`). At runtime on web,
+  // both shapes expose `currentTarget` as an `HTMLElement`, which is all we read.
+  const onFocus = useCallback(
+    (e: { currentTarget: unknown }) => {
+      showFor(e.currentTarget);
+    },
+    [showFor],
+  );
+
+  const onBlur = useCallback(() => {
+    if (!context) return;
+    context.hide();
+  }, [context]);
+
   if (!text || !context) {
-    return {};
+    return {
+      onMouseEnter: undefined,
+      onMouseLeave: undefined,
+      onMouseDown: undefined,
+      onFocus: undefined,
+      onBlur: undefined,
+    };
   }
 
   return {
     onMouseEnter,
     onMouseLeave,
     onMouseDown,
+    onFocus,
+    onBlur,
   };
 }
 

package/src/use_pointer_drag.ts

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
+
+const DRAG_THRESHOLD = 4; // px the pointer must travel before a press becomes a drag
+
+/** Live state of an in-progress drag — the pointer delta from where it started. */
+export interface DragLive {
+  id: string;
+  dx: number;
+  dy: number;
+}
+
+export interface PointerDragApi {
+  /** Non-null only while a drag is active (past the threshold). Consumers render
+   *  live feedback (translate / resize) from `dx`/`dy`. */
+  live: DragLive | null;
+  /** Ref for a draggable element — attaches a pointerdown listener tagged with
+   *  `id` and sets the web-only `cursor` + `touch-action: none` on the node (so
+   *  touch-drag doesn't scroll). Stable per id+cursor, so it doesn't thrash
+   *  listeners across renders. */
+  bind: (id: string, cursor?: string) => (node: unknown) => void;
+}
+
+/**
+ * Self-contained pointer-event drag for time-axis primitives (calendar event
+ * chips, gantt bar handles). Mirrors the kanban's proven approach — pointerdown
+ * on the element, a movement threshold to distinguish taps, then window-level
+ * pointermove/up — but with no floating clone and no column/card coupling. On
+ * release, `onDrop` receives the final client pointer position plus the total
+ * delta; the consumer maps that to a date. Web-only (RN has no pointer events);
+ * on native it's an inert no-op so taps/press handlers still work.
+ */
+export function usePointerDrag(
+  onDrop: (id: string, pointer: { x: number; y: number }, delta: { dx: number; dy: number }) => void,
+): PointerDragApi {
+  const [live, setLive] = useState<DragLive | null>(null);
+  const press = useRef<{ id: string; x: number; y: number; active: boolean } | null>(null);
+  const onDropRef = useRef(onDrop);
+  onDropRef.current = onDrop;
+
+  // Per-id DOM node + its pointerdown handler, so we can detach on unmount/rebind.
+  const bound = useRef<Map<string, { el: HTMLElement; handler: (e: PointerEvent) => void }>>(new Map());
+  const refCache = useRef<Map<string, (node: unknown) => void>>(new Map());
+
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+    const move = (e: PointerEvent) => {
+      const p = press.current;
+      if (!p) return;
+      const dx = e.clientX - p.x;
+      const dy = e.clientY - p.y;
+      if (!p.active && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      p.active = true;
+      e.preventDefault();
+      setLive({ id: p.id, dx, dy });
+    };
+    const up = (e: PointerEvent) => {
+      const p = press.current;
+      press.current = null;
+      setLive(null);
+      if (p?.active) {
+        onDropRef.current(p.id, { x: e.clientX, y: e.clientY }, { dx: e.clientX - p.x, dy: e.clientY - p.y });
+      }
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, []);
+
+  const bind = useCallback((id: string, cursor = "grab") => {
+    const key = `${id}:${cursor}`;
+    const cached = refCache.current.get(key);
+    if (cached) return cached;
+    const cb = (node: unknown) => {
+      const el = node as HTMLElement | null;
+      const prev = bound.current.get(id);
+      if (prev && prev.el !== el) {
+        prev.el.removeEventListener("pointerdown", prev.handler);
+        bound.current.delete(id);
+      }
+      if (!el || Platform.OS !== "web") return;
+      if (bound.current.has(id)) return;
+      el.style.touchAction = "none";
+      el.style.cursor = cursor;
+      const handler = (e: PointerEvent) => {
+        press.current = { id, x: e.clientX, y: e.clientY, active: false };
+      };
+      el.addEventListener("pointerdown", handler);
+      bound.current.set(id, { el, handler });
+    };
+    refCache.current.set(key, cb);
+    return cb;
+  }, []);
+
+  return { live, bind };
+}