panelui-native 0.68.0 → 0.71.0

package/src/components/planner/planner-entries.ts

@@ -99,9 +99,13 @@ export function dayAccessibilityLabel<T extends PlannerDatedEntry>(
   if (entries.length === 0) return `${dateLabel}, nothing planned`;
 
   const named: string[] = [];
+  const seen = new Set<string>();
   for (const entry of entries) {
     const label = entry.category ? categoryLabels.get(entry.category) : undefined;
-    if (label && !named.includes(label)) named.push(label);
+    if (label && !seen.has(label)) {
+      seen.add(label);
+      named.push(label);
+    }
   }
 
   const count = `${entries.length} ${entries.length === 1 ? 'entry' : 'entries'}`;
@@ -120,18 +124,23 @@ export function dayAccessibilityLabel<T extends PlannerDatedEntry>(
  * with the week the month happens to start on.
  */
 export function summariseMonth<T extends PlannerDatedEntry>(
-  entries: readonly T[],
+  days: Map<number, T[]>,
+  grid: readonly (readonly Date[])[],
   categories: readonly { id: string; label: string }[],
   isInMonth: (date: Date) => boolean
 ): { total: number; categories: PlannerCountedCategory[] } {
   const counts = new Map<string, number>();
   let total = 0;
 
-  for (const entry of entries) {
-    if (!isInMonth(entry.date)) continue;
-    total += 1;
-    if (entry.category) {
-      counts.set(entry.category, (counts.get(entry.category) ?? 0) + 1);
+  for (const week of grid) {
+    for (const date of week) {
+      if (!isInMonth(date)) continue;
+      for (const entry of entriesOn(days, date)) {
+        total += 1;
+        if (entry.category) {
+          counts.set(entry.category, (counts.get(entry.category) ?? 0) + 1);
+        }
+      }
     }
   }
 

package/src/components/planner/planner-grid-navigation.ts

@@ -0,0 +1,45 @@
+export type PlannerGridNavigationKey =
+  | 'ArrowLeft'
+  | 'ArrowRight'
+  | 'ArrowUp'
+  | 'ArrowDown'
+  | 'Home'
+  | 'End';
+
+/** Returns the next visible cell for a bounded, row-major month grid. */
+export function plannerGridTarget(
+  key: string,
+  index: number,
+  count: number,
+  columns = 7
+): number | null {
+  if (!Number.isInteger(index) || index < 0 || index >= count || columns < 1) {
+    return null;
+  }
+
+  let target: number;
+  switch (key as PlannerGridNavigationKey) {
+    case 'ArrowLeft':
+      target = index - 1;
+      break;
+    case 'ArrowRight':
+      target = index + 1;
+      break;
+    case 'ArrowUp':
+      target = index - columns;
+      break;
+    case 'ArrowDown':
+      target = index + columns;
+      break;
+    case 'Home':
+      target = index - (index % columns);
+      break;
+    case 'End':
+      target = index + (columns - 1 - (index % columns));
+      break;
+    default:
+      return null;
+  }
+
+  return target >= 0 && target < count ? target : index;
+}

package/src/components/planner/planner-lifecycle.ts

@@ -0,0 +1,76 @@
+import { useCallback, useMemo, useState } from 'react';
+
+interface PlannerMonthLifecycleOptions {
+  month: Date | undefined;
+  defaultMonth: Date | undefined;
+  settleMonth: (month: Date) => Date;
+  onMonthChange: ((month: Date) => void) | undefined;
+}
+
+/** Keeps controlled requests separate from the month a parent has accepted. */
+export function usePlannerMonthLifecycle({
+  month: monthProp,
+  defaultMonth,
+  settleMonth,
+  onMonthChange,
+}: PlannerMonthLifecycleOptions): readonly [Date, (month: Date) => void] {
+  const [internalMonth, setInternalMonth] = useState(() =>
+    settleMonth(defaultMonth ?? new Date())
+  );
+  const isControlled = monthProp !== undefined;
+
+  /*
+   * Parents commonly create an equivalent Date on every render. Keying this
+   * derivation by its instant keeps the month object stable, so an unrelated
+   * parent render does not rebuild the grid and its month summary.
+   */
+  const controlledMonth = useMemo(
+    () =>
+      monthProp === undefined
+        ? undefined
+        : settleMonth(monthProp),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [monthProp?.getTime(), settleMonth]
+  );
+  const month = controlledMonth ?? internalMonth;
+
+  const setMonth = useCallback(
+    (next: Date) => {
+      const settled = settleMonth(next);
+      if (!isControlled) setInternalMonth(settled);
+      onMonthChange?.(settled);
+    },
+    [isControlled, onMonthChange, settleMonth]
+  );
+
+  return [month, setMonth] as const;
+}
+
+interface PlannerSelectionLifecycleOptions {
+  selected: Date | null | undefined;
+  defaultSelected: Date | null;
+  onSelectedChange: ((date: Date | null) => void) | undefined;
+}
+
+/** Commits locally only when selection is uncontrolled, but always reports a request. */
+export function usePlannerSelectionLifecycle({
+  selected: selectedProp,
+  defaultSelected,
+  onSelectedChange,
+}: PlannerSelectionLifecycleOptions): readonly [
+  Date | null,
+  (date: Date | null) => void,
+] {
+  const [internalSelected, setInternalSelected] = useState<Date | null>(defaultSelected);
+  const isControlled = selectedProp !== undefined;
+  const selected = isControlled ? selectedProp : internalSelected;
+  const select = useCallback(
+    (date: Date | null) => {
+      if (!isControlled) setInternalSelected(date);
+      onSelectedChange?.(date);
+    },
+    [isControlled, onSelectedChange]
+  );
+
+  return [selected, select] as const;
+}

package/src/components/popover/index.tsx

@@ -59,7 +59,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Portal } from '../../primitives/portal';
+import { FocusRestorePortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { useBackHandler } from '../../hooks/use-back-handler';
 import { BottomSheet } from '../bottom-sheet';
@@ -535,7 +535,7 @@ function PopoverContent({
   if (!open || !trigger) return null;
 
   return (
-    <Portal>
+    <FocusRestorePortal>
       {/* Portal content mounts under PortalHost, outside this provider's
           subtree — re-provide the context so Popover.Close and Popover.Arrow
           keep working. */}
@@ -609,7 +609,7 @@ function PopoverContent({
           </Animated.View>
         </View>
       </PopoverContext.Provider>
-    </Portal>
+    </FocusRestorePortal>
   );
 }
 

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,
@@ -728,6 +736,11 @@ export {
   type MarkerIconProps,
   type MarkerContentProps,
 } from './components/marker';
+export {
+  Marquee,
+  type MarqueeProps,
+  type MarqueeDirection,
+} from './components/marquee';
 export {
   Menu,
   type MenuProps,

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');