panelui-native 0.68.0 → 0.73.0

package/src/index.ts

@@ -416,6 +416,14 @@ export {
   type ChipVariant,
   type ChipSize,
 } from './components/chip';
+export {
+  Collapsible,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+  type CollapsibleIndicatorProps,
+  type CollapsibleContentProps,
+  type CollapsibleVariant,
+} from './components/collapsible';
 export {
   ColorPicker,
   type ColorPickerProps,
@@ -514,6 +522,7 @@ export {
   type NumberInputProps,
 } from './components/number-input';
 export { OtpInput, type OtpInputProps } from './components/otp-input';
+export { SearchBar, type SearchBarProps } from './components/search-bar';
 export {
   Panelside,
   usePanelside,
@@ -728,6 +737,11 @@ export {
   type MarkerIconProps,
   type MarkerContentProps,
 } from './components/marker';
+export {
+  Marquee,
+  type MarqueeProps,
+  type MarqueeDirection,
+} from './components/marquee';
 export {
   Menu,
   type MenuProps,
@@ -1055,6 +1069,7 @@ export {
   type TimelineStatProps,
   type TimelineVariant,
   type TimelineTone,
+  type TimelineOrientation,
 } from './components/timeline';
 export {
   Toast,

package/src/primitives/focus-restoration-store.ts

@@ -0,0 +1,70 @@
+interface FocusDocument {
+  activeElement?: FocusTarget | null;
+  body?: FocusTarget | null;
+  documentElement?: FocusTarget | null;
+}
+
+interface FocusTarget {
+  disabled?: boolean;
+  isConnected?: boolean;
+  focus: (options?: { preventScroll?: boolean }) => void;
+  getAttribute?: (name: string) => string | null;
+}
+
+type RestoreFocus = () => boolean;
+
+interface FocusOwner {
+  owner: string;
+  released: boolean;
+  restore: RestoreFocus;
+}
+
+/** Restores nested overlays in last-opened order, even when parents close first. */
+export class FocusRestorationStore {
+  private owners: FocusOwner[] = [];
+
+  acquire(owner: string, restore: RestoreFocus): (() => void) {
+    const entry = { owner, released: false, restore };
+    this.owners.push(entry);
+
+    return () => {
+      if (entry.released) return;
+      entry.released = true;
+      this.restoreReleasedOwners();
+    };
+  }
+
+  private restoreReleasedOwners() {
+    const candidates: RestoreFocus[] = [];
+    while (this.owners.at(-1)?.released) {
+      const entry = this.owners.pop();
+      if (entry) candidates.push(entry.restore);
+    }
+    candidates.some((restore) => restore());
+  }
+}
+
+/** Captures the current browser focus without evaluating DOM APIs on native. */
+export function captureFocusRestore(
+  document = (globalThis as { document?: FocusDocument }).document
+): RestoreFocus {
+  const target = document?.activeElement;
+  if (!target || target === document?.body || target === document?.documentElement) {
+    return () => false;
+  }
+
+  return () => {
+    if (target.isConnected === false || target.disabled) return false;
+    if (target.getAttribute?.('aria-disabled') === 'true') return false;
+    try {
+      target.focus({ preventScroll: true });
+    } catch {
+      try {
+        target.focus();
+      } catch {
+        return false;
+      }
+    }
+    return document?.activeElement === target;
+  };
+}

package/src/primitives/portal.tsx

@@ -8,6 +8,7 @@ import {
   type ReactNode,
 } from 'react';
 import { ModalIsolationStore } from './modal-isolation-store';
+import { captureFocusRestore, FocusRestorationStore } from './focus-restoration-store';
 
 type PortalMap = ReadonlyMap<string, ReactNode>;
 
@@ -41,16 +42,21 @@ class PortalStore {
 
 const PortalContext = createContext<PortalStore | null>(null);
 const ModalIsolationContext = createContext<ModalIsolationStore | null>(null);
+const FocusRestorationContext = createContext<FocusRestorationStore | null>(null);
 
 export function PortalProvider({ children }: { children: ReactNode }) {
   const portalStoreRef = useRef<PortalStore | null>(null);
   const modalStoreRef = useRef<ModalIsolationStore | null>(null);
+  const focusStoreRef = useRef<FocusRestorationStore | null>(null);
   portalStoreRef.current ??= new PortalStore();
   modalStoreRef.current ??= new ModalIsolationStore();
+  focusStoreRef.current ??= new FocusRestorationStore();
   return (
     <PortalContext.Provider value={portalStoreRef.current}>
       <ModalIsolationContext.Provider value={modalStoreRef.current}>
-        {children}
+        <FocusRestorationContext.Provider value={focusStoreRef.current}>
+          {children}
+        </FocusRestorationContext.Provider>
       </ModalIsolationContext.Provider>
     </PortalContext.Provider>
   );
@@ -80,9 +86,27 @@ export function Portal({ children }: { children: ReactNode }) {
 /** A portal that owns modal focus until it unmounts. */
 export function ModalPortal({ children }: { children: ReactNode }) {
   const store = useModalIsolationStore('ModalPortal');
+  const focusStore = useFocusRestorationStore('ModalPortal');
   const owner = useId();
 
-  useEffect(() => store.acquire(owner), [owner, store]);
+  useEffect(() => {
+    const releaseIsolation = store.acquire(owner);
+    const releaseFocus = focusStore.acquire(owner, captureFocusRestore());
+    return () => {
+      releaseIsolation();
+      releaseFocus();
+    };
+  }, [focusStore, owner, store]);
+
+  return <Portal>{children}</Portal>;
+}
+
+/** A non-isolating portal that returns browser focus to what opened it. */
+export function FocusRestorePortal({ children }: { children: ReactNode }) {
+  const store = useFocusRestorationStore('FocusRestorePortal');
+  const owner = useId();
+
+  useEffect(() => store.acquire(owner, captureFocusRestore()), [owner, store]);
 
   return <Portal>{children}</Portal>;
 }
@@ -101,6 +125,14 @@ function useModalIsolationStore(component: string): ModalIsolationStore {
   return store;
 }
 
+function useFocusRestorationStore(component: string): FocusRestorationStore {
+  const store = useContext(FocusRestorationContext);
+  if (!store) {
+    throw new Error(`${component} must be used within a <PanelUIProvider>`);
+  }
+  return store;
+}
+
 /** Mount point for portaled content. PanelUIProvider renders one automatically. */
 export function PortalHost() {
   const store = usePortalStore('PortalHost');

package/src/utils/chart.ts

@@ -264,6 +264,50 @@ export function yOf(value: number, plot: Plot, min: number, max: number): number
   return plot.top + plot.height - ((value - min) / span) * plot.height;
 }
 
+/**
+ * Widens a domain out to round numbers.
+ *
+ * An axis derived from the data ends wherever the data happened to end, so it
+ * gets labelled 34,650 — a number that is true and that nobody was looking for.
+ * Rounding the ends out to a step of 1, 2 or 5 times a power of ten gives the
+ * axis labels somebody can actually read a value off, and it can only ever add
+ * room, never crop.
+ *
+ * Zero survives: any step divides it, so a baseline pinned there stays there.
+ */
+export function niceDomain(
+  min: number,
+  max: number,
+  ticks = 5
+): [number, number] {
+  if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) {
+    return [min, max];
+  }
+
+  const rough = (max - min) / Math.max(1, ticks);
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const error = rough / magnitude;
+
+  /*
+   * 1, 2, 5 or 10 times the magnitude — the steps a reader can divide in their
+   * head. The thresholds are geometric means rather than the steps themselves,
+   * so each candidate wins over the span it is genuinely closest to. Rounding at
+   * the steps instead pushes anything above 5 up to a full decade, which turns a
+   * top of 31,500 into an axis ending at 40,000 and hands a quarter of the plot
+   * to empty space.
+   */
+  const step =
+    (error >= Math.sqrt(50)
+      ? 10
+      : error >= Math.sqrt(10)
+        ? 5
+        : error >= Math.sqrt(2)
+          ? 2
+          : 1) * magnitude;
+
+  return [Math.floor(min / step) * step, Math.ceil(max / step) * step];
+}
+
 /**
  * A value's x on a *measured* axis, with `min` at the left edge and `max` at
  * the right.
@@ -356,7 +400,16 @@ export function runsOf(
   min: number,
   max: number,
   /** Baselines to stack each point on top of, for a stacked area. */
-  baselines?: number[]
+  baselines?: number[],
+  /**
+   * Place points at band centres rather than spreading them edge to edge.
+   *
+   * A line drawn over columns has to agree with them about where a row sits,
+   * and a column owns a slice of the axis rather than a position on it. Spread
+   * evenly, the first point lands half a slice left of the bar it describes and
+   * every point after it is wrong by the same amount.
+   */
+  banded?: boolean
 ): ChartPoint[][] {
   'worklet';
   const runs: ChartPoint[][] = [];
@@ -370,7 +423,8 @@ export function runsOf(
       continue;
     }
     const stacked = value + (baselines?.[i] ?? 0);
-    run.push({ x: xOf(i, values.length, plot), y: yOf(stacked, plot, min, max) });
+    const x = banded ? bandOf(i, values.length, plot) : xOf(i, values.length, plot);
+    run.push({ x, y: yOf(stacked, plot, min, max) });
   }
   if (run.length) runs.push(run);
   return runs;
@@ -404,7 +458,9 @@ export function linePath(
   max: number,
   curve: ChartCurve,
   loading: boolean,
-  baselines?: number[]
+  baselines?: number[],
+  /** Place points at band centres, for a line drawn over columns. */
+  banded?: boolean
 ): string {
   'worklet';
   if (loading || plot.width <= 0) {
@@ -413,7 +469,7 @@ export function linePath(
     const y = plot.top + plot.height / 2;
     return `M${plot.left},${y} L${plot.left + plot.width},${y}`;
   }
-  return runsOf(values, plot, min, max, baselines)
+  return runsOf(values, plot, min, max, baselines, banded)
     .map((run) => segment(run, curve))
     .join(' ');
 }
@@ -433,13 +489,15 @@ export function areaPath(
   max: number,
   curve: ChartCurve,
   loading: boolean,
-  baselines?: number[]
+  baselines?: number[],
+  /** Place points at band centres, for an area drawn against columns. */
+  banded?: boolean
 ): string {
   'worklet';
   if (loading || plot.width <= 0) return '';
 
   const bottom = plot.top + plot.height;
-  const runs = runsOf(values, plot, min, max, baselines);
+  const runs = runsOf(values, plot, min, max, baselines, banded);
 
   if (!baselines) {
     return runs
@@ -460,7 +518,8 @@ export function areaPath(
     plot,
     min,
     max,
-    baselines
+    baselines,
+    banded
   );
 
   return runs