@lotics/ui 23.2.0 → 24.0.2

package/src/text_link.tsx

@@ -1,39 +1,49 @@
 import { Text, type TextProps } from "./text";
 import { Icon, type IconName } from "./icon";
+import { colors } from "./colors";
 import { getTextColor } from "./text_utils";
 
 export interface TextLinkProps extends TextProps {
   /** Optional leading icon. */
   icon?: IconName;
   /** A URL — renders a real anchor (`<a href>` on web; middle-click / open-in-new-tab
-   *  work). For in-app routing, wrap `TextLink` or use `onPress`. */
+   *  work). For in-app routing, wrap `TextLink` in your own pressable. */
   href?: string;
-  /** An in-app action. With NEITHER `href` nor `onPress`, `TextLink` is just
-   *  underlined text you wrap in your own pressable (e.g. a table cell). */
-  onPress?: () => void;
 }
 
 /**
- * Underlined text that is OPTIONALLY a link (`href` → a web anchor) or an action
- * (`onPress` → pressable); with neither it's plain underlined text you drop inside
- * your own pressable (a table cell, a custom row). Colour comes from `color` (it
- * inherits every `Text` prop) — the neutral, configurable counterpart to `Link`,
- * which is fixed blue + `role="link"` for the "this opens somewhere else" signal.
+ * Underlined text that NAVIGATES — `href` renders a real anchor; with no `href`
+ * it is plain underlined text you drop inside your own pressable (a table cell, a
+ * custom row), or a MARKER that a value leads somewhere (a record reference).
+ * Colour comes from `color` (it inherits every `Text` prop) — the neutral,
+ * configurable counterpart to `Link`, which is fixed blue + `role="link"` for the
+ * "this opens somewhere else" signal.
+ *
+ * It does NOT act. An `onPress` here used to resolve to `role="button"`, so one
+ * export was three components — a link, a button, and a passive marker — behind
+ * one name, inside `OptionList`, `FilterChip` and others. That mode is
+ * `TextButton` now — also underlined, since that is what marks a surface-less
+ * control interactive, but in ZINC: blue is reserved for navigation, so the ink is
+ * what says whether a press moves you or acts. Pick by what the press DOES.
  */
 export function TextLink(props: TextLinkProps) {
-  const { icon, href, onPress, children, color, style, ...textProps } = props;
-  const interactive = href != null || onPress != null;
+  const { icon, href, children, color, style, ...textProps } = props;
   return (
     <Text
       decoration="underline"
       weight="medium"
       color={color}
       href={href}
-      onPress={onPress}
-      accessibilityRole={href != null ? "link" : onPress != null ? "button" : undefined}
+      accessibilityRole={href != null ? "link" : undefined}
       style={[
         icon ? { display: "flex", flexDirection: "row", alignItems: "center", gap: 4 } : null,
-        interactive ? { cursor: "pointer" } : null,
+        // Blue only when it actually NAVIGATES. An `href` is a destination, so it
+        // takes the navigation ink (`color` still overrides). Without one this is
+        // underlined text you wrap yourself, or a MARKER on a value that leads
+        // somewhere — the record's customer field is one, and pressing it opens a
+        // PEEK, so blue there would promise a trip it never takes.
+        href != null && color == null ? { color: colors.blue[600] } : null,
+        href != null ? { cursor: "pointer" } : null,
         style,
       ]}
       {...textProps}

package/src/use_section_nav.ts

@@ -14,6 +14,14 @@ export interface SectionNavHandle<K extends string> {
   onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
 }
 
+/**
+ * How close to the content's end still counts as "at the end". Fractional
+ * scroll offsets (zoom, hi-dpi, momentum) land a pixel or two short of the
+ * exact bottom, and a strict equality would drop the rule on the frame that
+ * matters most — the one the reader stops on.
+ */
+const END_SLACK = 2;
+
 /**
  * Scroll-spy for a LONG record surface with a left outline rail: one scrolling
  * page whose sections register their offsets, a rail of `MenuButton`s that
@@ -39,6 +47,10 @@ export interface SectionNavHandle<K extends string> {
  * grid, a late-loading table) can never stale either. On native there is no
  * re-measure — content above should settle before precision matters
  * (`onLayout` won't refire on a pure position shift).
+ *
+ * The LAST key is active whenever the scroll reaches the end, regardless of
+ * offsets: a final section shorter than the viewport never scrolls its top past
+ * the trigger line, so without that rule the rail can never point at it.
  */
 export function useSectionNav<K extends string>(keys: readonly [K, ...K[]]): SectionNavHandle<K> {
   const scrollRef = useRef<ScrollView>(null);
@@ -93,13 +105,31 @@ export function useSectionNav<K extends string>(keys: readonly [K, ...K[]]): Sec
     scrollRef.current?.scrollTo({ y: Math.max(0, y - 12), animated: true });
   };
   const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const y = e.nativeEvent.contentOffset.y + 80;
+    const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+    const y = contentOffset.y + 80;
     const offsets = measure();
     let cur: K = keys[0];
     for (const k of keys) {
       const sy = offsets[k];
       if (sy != null && sy <= y) cur = k;
     }
+    // THE LAST SECTION IS OTHERWISE UNREACHABLE. A section opening within one
+    // viewport of the content's end can never scroll its top past the trigger
+    // line: at maximum scroll `y` is `contentHeight - viewportHeight + 80`,
+    // which is still ABOVE it, so the rule above pins the rail to the section
+    // before it and the reader watches the wrong item stay lit while they read.
+    // A trailing spacer would "fix" it by making every record end in blank
+    // space, which is paying in layout for an arithmetic problem.
+    //
+    // At the end of the scroll there is nothing left to disambiguate — the
+    // reader is as deep into the last section as the page permits — so the end
+    // of the scroll IS the last section. Guarded on both measurements being
+    // present: RN gives them on every scroll event, but a caller synthesising
+    // one cannot be assumed to, and without them "at the end" is unknowable.
+    if (layoutMeasurement != null && contentSize != null) {
+      const remaining = contentSize.height - (contentOffset.y + layoutMeasurement.height);
+      if (remaining <= END_SLACK) cur = keys[keys.length - 1];
+    }
     if (cur !== activeKey) setActiveKey(cur);
   };
   return { scrollRef, activeKey, register, jumpTo, onScroll };