@lotics/ui 46.1.0 → 46.3.0

package/src/text.tsx

@@ -162,6 +162,21 @@ export function Text(props: TextProps) {
         decoration && styles[decoration],
         tabular && styles.tabular,
         transform && styles[transform],
+        // A CLAMP THAT CANNOT SHRINK CANNOT CLAMP. `numberOfLines` says "cut this
+        // to fit", and on a flex row neither platform lets it: on web a clamped
+        // Text is `white-space: nowrap`, so its min-content width is the WHOLE
+        // string and `min-width: auto` floors it there; on native a `Text` is
+        // `flexShrink: 0` (unlike the web, where 1 is the CSS default), so it
+        // holds its full width outright. Either way two labelled values on one
+        // row lay out at intrinsic width and run off the frame — measured at
+        // x=790 in a 390px frame, with no page scroll to reach it.
+        //
+        // Both halves are needed because each fixes one platform, and both are
+        // NO-OPS unless the row actually overflows: flex-shrink only acts on
+        // negative free space. It sits before the caller's `style`, so a value
+        // that must never give way still says so — `flexShrink: 0` on the site
+        // that means it, which is how a figure keeps winning over its label.
+        numberOfLines != null && styles.clamped,
         style,
       ]}
       numberOfLines={numberOfLines}
@@ -259,6 +274,12 @@ const styles = StyleSheet.create({
     fontVariant: ["tabular-nums"],
   },
 
+  /** The pair a `numberOfLines` clamp needs to mean anything on a flex row. */
+  clamped: {
+    minWidth: 0,
+    flexShrink: 1,
+  },
+
   // Text transform styles
   uppercase: {
     textTransform: "uppercase",

package/src/tooltip.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { OVERLAY_Z_ABOVE } from "./overlay_layer";
 import { colors } from "./colors";
 import { Text } from "./text";
 
@@ -51,7 +52,7 @@ export function TooltipProvider({ children }: { children: React.ReactNode }) {
     container.style.width = "100%";
     container.style.height = "100%";
     container.style.pointerEvents = "none";
-    container.style.zIndex = "10000";
+    container.style.zIndex = String(OVERLAY_Z_ABOVE);
     document.body.appendChild(container);
 
     setPortalContainer(container);

package/src/use_change_set.ts

@@ -39,22 +39,52 @@ export interface ChangeSet<Id extends string = string> {
   settled: boolean;
 }
 
-export interface UseChangeSetOptions {
+export interface UseChangeSetOptions<Id extends string = string> {
   /**
    * What an untouched proposal counts as. Default `accepted`: the operator
    * drops the exceptions rather than approving each of eight identical lines,
    * which is the difference between a review and a second round of data entry.
    * Use `pending` when each change genuinely deserves its own verdict — and
    * gate the commit on `settled`.
+   *
+   * **A MAP when one set mixes kinds with different safe defaults** — filling a
+   * blank arrives `accepted` while overwriting a value a human already set
+   * arrives `rejected`, so the destructive half is opt-in. An id the map does
+   * not name arrives `accepted`. Deciding those rows by calling `reject()` from
+   * the result handler instead writes overrides the operator never made, and
+   * `undo` on such a row then returns it to `accepted` rather than to the safe
+   * default it was supposed to arrive at.
+   *
+   * A VALUE and not a predicate, so the default is a dependency like any other:
+   * `status` and the group arrays are derived from it together and change
+   * identity together when it changes. The caller closes over its own rows to
+   * build it (`useMemo` over the same rows it already has), which is what keeps
+   * this hook ignorant of what a proposal IS. A predicate written inline is a
+   * new function every render, so it can only be honoured by hiding it from the
+   * dependency lists — and a `status` that never changes identity is a `status`
+   * a memoizing screen reads once and then never again, which is the row
+   * rendering as kept while the commit bar counts it as dropped.
    */
-  initial?: ChangeDecision;
+  initial?: ChangeDecision | ReadonlyMap<Id, ChangeDecision>;
+}
+
+/** The default for one id: the whole set's decision, or the map's entry for it,
+ *  or `accepted` for an id nobody named. */
+function defaultFor<Id extends string>(
+  initial: ChangeDecision | ReadonlyMap<Id, ChangeDecision> | undefined,
+  id: Id,
+): ChangeDecision {
+  if (initial === undefined) return "accepted";
+  if (typeof initial === "string") return initial;
+  return initial.get(id) ?? "accepted";
 }
 
 export function useChangeSet<Id extends string = string>(
   ids: readonly Id[],
-  options?: UseChangeSetOptions,
+  options?: UseChangeSetOptions<Id>,
 ): ChangeSet<Id> {
-  const initial = options?.initial ?? "accepted";
+  const initial = options?.initial;
+
   const [overrides, setOverrides] = useState<ReadonlyMap<Id, ChangeDecision>>(new Map());
 
   const set = useCallback((id: Id, decision: ChangeDecision) => {
@@ -79,21 +109,40 @@ export function useChangeSet<Id extends string = string>(
     [ids],
   );
 
-  const status = useCallback((id: Id) => overrides.get(id) ?? initial, [overrides, initial]);
-
-  const groups = useMemo(() => {
+  // ONE derivation, feeding BOTH readers of the same fact.
+  //
+  // Deriving the groups and `status` separately is what split them: they read
+  // the same three inputs twice, and the moment one of those inputs was kept out
+  // of a dependency list the two answered differently — `status(id)` said
+  // "rejected" while `accepted`, `keptCount` and the commit still carried the
+  // row. One memo over the same deps cannot do that. There is nothing expensive
+  // here either way: it is one pass over ids, the same pass `status` used to
+  // make per call.
+  const derived = useMemo(() => {
+    const decisions = new Map<Id, ChangeDecision>();
     const accepted: Id[] = [];
     const rejected: Id[] = [];
     const pending: Id[] = [];
     for (const id of ids) {
-      const s = overrides.get(id) ?? initial;
-      if (s === "accepted") accepted.push(id);
-      else if (s === "rejected") rejected.push(id);
+      const decision = overrides.get(id) ?? defaultFor(initial, id);
+      decisions.set(id, decision);
+      if (decision === "accepted") accepted.push(id);
+      else if (decision === "rejected") rejected.push(id);
       else pending.push(id);
     }
-    return { accepted, rejected, pending };
+    return { decisions, accepted, rejected, pending };
   }, [ids, overrides, initial]);
 
+  // Reads the SAME map the groups were built from, so the two cannot disagree,
+  // and changes identity whenever an answer does — a screen that memoizes its
+  // rows on `status` re-runs when a decision moves. An id outside `ids` still
+  // answers (its own override, else the default): a row can leave the set while
+  // a handler still holds its id.
+  const status = useCallback(
+    (id: Id) => derived.decisions.get(id) ?? overrides.get(id) ?? defaultFor(initial, id),
+    [derived, overrides, initial],
+  );
+
   return useMemo(
     () => ({
       status,
@@ -103,13 +152,13 @@ export function useChangeSet<Id extends string = string>(
       acceptAll: () => all("accepted"),
       rejectAll: () => all("rejected"),
       reset: () => setOverrides(new Map()),
-      accepted: groups.accepted,
-      rejected: groups.rejected,
-      pending: groups.pending,
-      keptCount: groups.accepted.length,
+      accepted: derived.accepted,
+      rejected: derived.rejected,
+      pending: derived.pending,
+      keptCount: derived.accepted.length,
       total: ids.length,
-      settled: groups.pending.length === 0,
+      settled: derived.pending.length === 0,
     }),
-    [status, set, undo, all, groups, ids.length],
+    [status, set, undo, all, derived, ids.length],
   );
 }

package/src/use_scroll_seam.ts

@@ -0,0 +1,79 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+import type { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from "react-native";
+
+/** The three props a seam needs on the `ScrollView` it manages. Spread, so a
+ *  surface cannot wire half of it. */
+export interface ScrollSeam {
+  ref: React.RefObject<ScrollView | null>;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  scrollEventThrottle: number;
+}
+
+/**
+ * The identity of the content while nothing is swapped in.
+ *
+ * `scrollKey` is optional, and the natural call site — `scrollKey={openChild?.id}`,
+ * which is what the master-detail recipe prescribes — passes `undefined` for the
+ * MASTER leg. Reading that as "this surface opts out" broke exactly half of the
+ * seam: the forward leg worked (undefined → "child" is a change, so the child
+ * opened at 0) while the return leg restored nothing, because the master's
+ * offset had never been recorded under any key. The reader came back to the
+ * CHILD's offset inside the parent list — worse than either 0 or the remembered
+ * place.
+ *
+ * So an absent key is a KEY, not an opt-out. Opting out needs no signal of its
+ * own: a surface that never changes its key never scrolls, because the seam
+ * fires on the CHANGE and there is none.
+ */
+const ROOT_KEY = "\u0000root";
+
+/**
+ * REMEMBERED SCROLL OFFSETS ACROSS A CONTENT SWAP.
+ *
+ * A scroll container keeps its offset when its children change, because nothing
+ * tells it the content it was holding no longer exists. Swap a drawer's body for
+ * a child record and the new record opens part-way down itself, with its own
+ * heading off-screen above — invisible until the first list long enough to
+ * scroll, which is the same list that makes the swap worth having.
+ *
+ * The seam is the content's IDENTITY: while `scrollKey` holds, the container is
+ * left alone; when it changes, the outgoing key's offset is already recorded and
+ * the incoming one is restored — 0 for a key never seen, so a swap FORWARD opens
+ * at the top, and the remembered offset on the way BACK, so the reader keeps
+ * their place in the list they came from.
+ *
+ * That return leg is the whole reason this is not a React `key` on the scroll
+ * area. A key throws the container away and rebuilds it, which resets the child
+ * correctly and resets the PARENT just as thoroughly.
+ *
+ * No key CHANGE ⇒ no scrolling: a surface that does not swap content behaves
+ * exactly as it did before, whether it names its content or not. An ABSENT key
+ * is the root content's identity (see {@link ROOT_KEY}), not a request to skip
+ * the seam — which is what `scrollKey={openChild?.id}` needs on the leg where
+ * no child is open.
+ */
+export function useScrollSeam(scrollKey: string | undefined): ScrollSeam {
+  const key = scrollKey ?? ROOT_KEY;
+  const ref = useRef<ScrollView | null>(null);
+  const offsets = useRef(new Map<string, number>());
+  // Which key the live offset belongs to. Read by `onScroll`, which fires long
+  // after the render that changed the prop.
+  const liveKey = useRef(key);
+
+  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    offsets.current.set(liveKey.current, event.nativeEvent.contentOffset.y);
+  }, []);
+
+  useLayoutEffect(() => {
+    const previous = liveKey.current;
+    liveKey.current = key;
+    // On mount `previous` IS the key, so nothing is scrolled — a fresh container
+    // is already at the top and moving it would be a visible jump on open.
+    if (previous === key) return;
+    ref.current?.scrollTo({ y: offsets.current.get(key) ?? 0, animated: false });
+  }, [key]);
+
+  // Native emits one scroll event per gesture without this, so the offset the
+  // seam remembers would be wherever the finger first landed.
+  return { ref, onScroll, scrollEventThrottle: 16 };
+}

package/src/line_chart_labels.ts

@@ -1,32 +0,0 @@
-/**
- * Which of a line chart's x positions get a printed label.
- *
- * A label is roughly `minLabelWidth` wide, so only so many fit across the
- * track; the rest are thinned out. The rule that matters is WHERE the thinning
- * is anchored: stepping forwards from the first point and then forcing the last
- * one in collides whenever the series length minus one is not a multiple of the
- * step — the newest label lands a few pixels from the one before it while every
- * other pair is a full step apart. Anchoring on the LAST point makes the spacing
- * uniform by construction, and the last point is the one a reader looks up
- * first. The first point is then kept only when it clears the same distance.
- */
-export function lineChartLabelIndices(
-  count: number,
-  chartWidth: number,
-  minLabelWidth = 50,
-): number[] {
-  if (count <= 0 || chartWidth <= 0) return [];
-  if (count === 1) return [0];
-
-  const last = count - 1;
-  const maxLabels = Math.max(2, Math.floor(chartWidth / minLabelWidth));
-  const step = Math.max(1, Math.ceil(count / maxLabels));
-
-  const kept: number[] = [];
-  for (let i = last; i >= 0; i -= step) kept.unshift(i);
-
-  const firstKept = kept[0] ?? 0;
-  if (firstKept > 0 && (firstKept / last) * chartWidth >= minLabelWidth) kept.unshift(0);
-
-  return kept;
-}