panelui-native 0.88.2 → 0.90.0

package/src/components/selection-mode/index.tsx

@@ -134,7 +134,7 @@ const selectionVariants = tv({
     header: 'h-14 flex-row items-center gap-3 border-b border-border px-4',
     title: 'flex-1 text-center text-base font-semibold text-foreground',
     close: 'h-10 w-10 items-center justify-center rounded-full bg-muted',
-    group: 'overflow-hidden rounded-2xl bg-card',
+    group: 'overflow-hidden rounded-2xl',
     ring: 'rounded-full border-2 border-transparent p-0.5',
     bar: 'flex-row items-stretch',
     action: 'flex-1 items-center justify-center gap-1.5 px-2 py-3',
@@ -162,6 +162,23 @@ const selectionVariants = tv({
     disabled: {
       true: { action: 'opacity-[0.44]' },
     },
+    /**
+     * The group's surface, which depends on what is behind it.
+     *
+     * `card` is a step *down* from the background on a screen, which is what a
+     * grouped list wants there. A sheet is already `popover`, and popover sits
+     * above card in every dark theme — so the same card inside a sheet is
+     * darker than the sheet around it and reads as a hole rather than a raised
+     * set of rows.
+     *
+     * `muted` is an alpha tint, so it steps up from whatever it is drawn on and
+     * is correct against either. It is only used in the sheet because the
+     * screen's card is right where it is.
+     */
+    surface: {
+      screen: { group: 'bg-card' },
+      sheet: { group: 'bg-muted' },
+    },
     /**
      * Flush to the bottom edge, or lifted off it.
      *
@@ -177,6 +194,7 @@ const selectionVariants = tv({
   },
   defaultVariants: {
     placement: 'bar',
+    surface: 'screen',
   },
 });
 
@@ -665,7 +683,10 @@ function SelectionModeGroup({
   ...props
 }: SelectionModeGroupProps) {
   const items = Children.toArray(children).filter(Boolean);
-  const slots = selectionVariants({});
+  // A sheet's own surface already sits above a card's, so which fill the group
+  // takes depends on where it is. Every other part reads the context too.
+  const { sheet } = useSelectionMode();
+  const slots = selectionVariants({ surface: sheet ? 'sheet' : 'screen' });
 
   /**
    * The caption, and the wrapper that carries it. A group with no `label` is
@@ -1133,7 +1154,13 @@ function SelectionModeSheet({
          * screen but in the wrong branch of the tree.
          */}
         <SelectionModeContext.Provider value={context}>
-          <BottomSheet.Header>
+          {/*
+           * `pe-0` gives the trailing edge back. `BottomSheet.Header` reserves
+           * room there for the close button, and this sheet draws none — left
+           * alone, the reserved 48 points push the centred title off the middle
+           * of the sheet and hold "All" that far in from the corner.
+           */}
+          <BottomSheet.Header className="pe-0">
             {/* The sheet already draws the rule and the padding. */}
             <SelectionModeHeader
               title={title}

package/src/hooks/index.ts

@@ -37,6 +37,7 @@ export {
 } from './use-skeleton-handoff';
 export {
   useScrollSections,
+  type ScrollSectionsPosition,
   type UseScrollSectionsOptions,
   type UseScrollSectionsResult,
 } from './use-scroll-sections';

package/src/hooks/use-scroll-sections.ts

@@ -23,6 +23,11 @@
  *
  * <SectionRail value={sections.active} onValueChange={sections.scrollTo}>…</SectionRail>
  * ```
+ *
+ * It also publishes the scroll position itself, as `scroll`, so a component
+ * that wants a percentage as well as a section name does not need a second
+ * scroll listener to get one. The three values are everything a fraction is
+ * made of, and they come out of the event this hook is already handling.
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type {
@@ -31,6 +36,7 @@ import type {
   NativeSyntheticEvent,
   ScrollView,
 } from 'react-native';
+import { useSharedValue, type SharedValue } from 'react-native-reanimated';
 
 export interface UseScrollSectionsOptions {
   /** Section ids, in the order they appear down the page. */
@@ -46,15 +52,39 @@ export interface UseScrollSectionsOptions {
   scrollPadding?: number;
 }
 
+/**
+ * Where the scroller is, as shared values.
+ *
+ * Written from the scroll handler on the JavaScript thread, which is where the
+ * section tracking already runs — so they arrive at `scrollEventThrottle`
+ * rather than every frame, and anything reading them should ease towards the
+ * value rather than jumping to it.
+ */
+export interface ScrollSectionsPosition {
+  /** Distance scrolled, in points. */
+  offset: SharedValue<number>;
+  /** Height of the visible area. */
+  viewport: SharedValue<number>;
+  /** Total height of the content. */
+  content: SharedValue<number>;
+}
+
 export interface UseScrollSectionsResult {
   /** Attach to the ScrollView, so `scrollTo` has something to drive. */
   ref: React.RefObject<ScrollView | null>;
   /** The section being read. */
   active: string | undefined;
+  /**
+   * The scroll position, for anything that needs how far through the page the
+   * reader is rather than which part of it they are in.
+   */
+  scroll: ScrollSectionsPosition;
   /** Spread onto the ScrollView. */
   scrollProps: {
     onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onMomentumScrollEnd: () => void;
+    onLayout: (event: LayoutChangeEvent) => void;
+    onContentSizeChange: (width: number, height: number) => void;
     scrollEventThrottle: number;
   };
   /** `onLayout` for a section's wrapper: `onLayout={measure(id)}`. */
@@ -81,6 +111,10 @@ export function useScrollSections({
   const settle = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [active, setActive] = useState<string | undefined>(ids[0]);
 
+  const scrollOffset = useSharedValue(0);
+  const viewport = useSharedValue(0);
+  const content = useSharedValue(0);
+
   // Read inside the scroll handler, which must not be re-created on every
   // render — a new handler each frame would defeat the throttle.
   const idsRef = useRef(ids);
@@ -107,10 +141,24 @@ export function useScrollSections({
 
   const onScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+
+      /*
+       * The position is published before the jump guard, not after it.
+       *
+       * A jump is still travel: the page really is moving under the reader, and
+       * a progress indicator that froze for the length of the animation would
+       * be reporting something that is not true. What the guard protects is the
+       * *section*, which the reader chose and which should not flicker through
+       * every heading the scroll passes on the way there.
+       */
+      scrollOffset.value = contentOffset.y;
+      viewport.value = layoutMeasurement.height;
+      content.value = contentSize.height;
+
       // Mid-jump, the position is the animation's and not the reader's.
       if (jumpingTo.current !== null) return;
 
-      const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
       const list = idsRef.current;
       if (!list.length) return;
 
@@ -129,7 +177,27 @@ export function useScrollSections({
       }
       setActive(current);
     },
-    [offset, endThreshold]
+    [offset, endThreshold, scrollOffset, viewport, content]
+  );
+
+  /*
+   * Seeded at layout as well as on scroll, so a page that has not been touched
+   * yet still reports a viewport and a content height. Without these the
+   * fraction is zero over zero until the first scroll event, and anything
+   * drawing it starts by being wrong rather than by being empty.
+   */
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      viewport.value = event.nativeEvent.layout.height;
+    },
+    [viewport]
+  );
+
+  const onContentSizeChange = useCallback(
+    (_width: number, height: number) => {
+      content.value = height;
+    },
+    [content]
   );
 
   const scrollTo = useCallback(
@@ -168,9 +236,20 @@ export function useScrollSections({
   );
 
   const scrollProps = useMemo(
-    () => ({ onScroll, onMomentumScrollEnd, scrollEventThrottle: 16 }),
-    [onScroll, onMomentumScrollEnd]
+    () => ({
+      onScroll,
+      onMomentumScrollEnd,
+      onLayout,
+      onContentSizeChange,
+      scrollEventThrottle: 16,
+    }),
+    [onScroll, onMomentumScrollEnd, onLayout, onContentSizeChange]
+  );
+
+  const scroll = useMemo<ScrollSectionsPosition>(
+    () => ({ offset: scrollOffset, viewport, content }),
+    [scrollOffset, viewport, content]
   );
 
-  return { ref, active, scrollProps, measure, scrollTo };
+  return { ref, active, scroll, scrollProps, measure, scrollTo };
 }

package/src/index.ts

@@ -386,6 +386,14 @@ export {
   type SectionRailPlacement,
   type SectionRailAlign,
 } from './components/section-rail';
+export {
+  SectionProgress,
+  type SectionProgressProps,
+  type SectionProgressItemProps,
+  type SectionProgressPlacement,
+  type SectionProgressColor,
+  type SectionProgressScroll,
+} from './components/section-progress';
 export {
   Tabs,
   type TabsProps,