@oxy.so/bloom 4.1.0 → 4.3.0

package/lib/module/settings-modal/SettingsModal.js

@@ -1,14 +1,14 @@
 "use strict";
 
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { BackHandler, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
-import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+import { BackHandler, Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useAnimatedScrollHandler, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { RiArrowLeftSLine } from "../icons/remix/RiArrowLeftSLine.js";
 import { RiArrowRightSLine } from "../icons/remix/RiArrowRightSLine.js";
 import { RiCheckboxCircleFill } from "../icons/remix/RiCheckboxCircleFill.js";
+import { PageHeader } from "../page-header/index.js";
+import { ButtonGroup, ButtonGroupItem } from "../button-group/index.js";
 import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
-import { VerticalFade } from "./SettingsArt.js";
 import { Backdrop, OverlayRoot } from "../overlay/index.js";
 import { webDataSet } from "../styles/web-data.js";
 import { Text } from "../typography/index.js";
@@ -28,10 +28,8 @@ import { IS_WEB, useSettingsWebCss } from "./web-css.js";
  *             20px icon (icon/secondary) + 8 + body-medium label
  *             (selected: background/secondary/hover + text/primary;
  *             hover: background/secondary/hover @ 60%)
- *   content   title row px 32 pt 32 pb 12 (Storage 6), title-3-medium +
- *             24px round close (background/tertiary, hover tertiary/hover,
- *             16px glyph); the page scrolls under a 40px top fade that eases
- *             in (200ms) once it is scrolled; px 32 pb 32
+ *   content   one viewport with a sticky PageHeader and its scroll-linked edge;
+ *             content insets belong to the page body, never the viewport
  *   toast     "Saved" pill straddling the panel's bottom edge: 1px
  *             border/button, background/primary, py 4 pr 10 pl 6, gap 4,
  *             16px lime check + body-2-medium, shadow-dropdown. Rises 12px in,
@@ -51,7 +49,7 @@ import { IS_WEB, useSettingsWebCss } from "./web-css.js";
  * rank) and `Backdrop` (the pointer-events contract) — and takes Dialog's
  * `control` from `useDialogControl()`, so it is driven exactly like one.
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const PANEL_WIDTH = 871;
 const PANEL_HEIGHT = 614;
 const RAIL_WIDTH = 274;
@@ -97,11 +95,13 @@ export function SettingsModal({
   control,
   open: controlledOpen,
   onClose,
+  onBeforeLeave,
   groups,
   pages,
   page: controlledPage,
   defaultPage,
   onPageChange,
+  initialView = 'navigation',
   labels,
   testID
 }) {
@@ -125,7 +125,12 @@ export function SettingsModal({
   const insets = useSafeAreaInsets();
 
   // `compact` layout is two levels: the section list, then a page pushed over it.
-  const [compactPageOpen, setCompactPageOpen] = useState(false);
+  const [compactPageOpen, setCompactPageOpen] = useState(initialView === 'page');
+  const initialViewRef = useRef(initialView);
+  initialViewRef.current = initialView;
+  const beforeLeaveRef = useRef(onBeforeLeave);
+  beforeLeaveRef.current = onBeforeLeave;
+  const mayLeave = useCallback(reason => beforeLeaveRef.current?.(reason) !== false, []);
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   const isControlledRef = useRef(isControlled);
@@ -134,7 +139,7 @@ export function SettingsModal({
   defaultPageRef.current = defaultPage ?? firstPage(groups);
   const show = useCallback(() => {
     setInternalPage(defaultPageRef.current);
-    setCompactPageOpen(false);
+    setCompactPageOpen(initialViewRef.current === 'page');
     setMounted(true);
     setOpenCount(count => count + 1);
   }, []);
@@ -171,20 +176,25 @@ export function SettingsModal({
     if (controlledOpen) show();else hide();
   }, [isControlled, controlledOpen, show, hide]);
   const requestClose = useCallback(() => {
+    if (!mayLeave('close')) return false;
     if (isControlledRef.current) onCloseRef.current?.();else hide();
-  }, [hide]);
+    return true;
+  }, [hide, mayLeave]);
   useImperativeHandle(control?.ref, () => ({
     open: show,
     close: cb => {
-      hide();
-      if (cb) setTimeout(cb, UNMOUNT_MS);
+      if (requestClose() && cb) setTimeout(cb, UNMOUNT_MS);
     }
-  }), [show, hide]);
+  }), [show, requestClose]);
   const selectPage = useCallback(next => {
+    if (next !== currentPage && !mayLeave('page')) return;
     if (controlledPage === undefined) setInternalPage(next);
     setCompactPageOpen(true);
     onPageChange?.(next);
-  }, [controlledPage, onPageChange]);
+  }, [controlledPage, currentPage, onPageChange, mayLeave]);
+  const requestNavigation = useCallback(() => {
+    if (mayLeave('navigation')) setCompactPageOpen(false);
+  }, [mayLeave]);
 
   // Escape closes (web). On `window`, not `document`: a menu or popover opened
   // inside the modal handles Escape on `document` and stops propagation there,
@@ -209,11 +219,11 @@ export function SettingsModal({
     if (!mounted || IS_WEB || typeof BackHandler?.addEventListener !== 'function') return;
     const sub = BackHandler.addEventListener('hardwareBackPress', () => {
       // On a pushed page (compact), back returns to the section list first.
-      if (compactPageOpenRef.current) setCompactPageOpen(false);else requestClose();
+      if (compactPageOpenRef.current) requestNavigation();else requestClose();
       return true;
     });
     return () => sub.remove();
-  }, [mounted, requestClose]);
+  }, [mounted, requestClose, requestNavigation]);
 
   // ----- saved toast -------------------------------------------------------
   const [savedPhase, setSavedPhase] = useState('hidden');
@@ -323,32 +333,30 @@ export function SettingsModal({
                   backgroundColor: palette.full,
                   boxShadow: palette.shadowXs
                 }, ringVars(palette)],
-                children: layout === 'compact' ? compactPageOpen && pageConfig ? /*#__PURE__*/_jsxs(View, {
+                children: layout === 'compact' ? compactPageOpen && pageConfig ? /*#__PURE__*/_jsx(View, {
                   style: styles.content,
-                  children: [/*#__PURE__*/_jsx(CompactHeader, {
-                    title: pageConfig.title,
-                    onBack: () => setCompactPageOpen(false),
-                    backLabel: labels?.back ?? 'Back',
-                    closeLabel: closeLabel,
-                    onClose: requestClose,
-                    palette: palette,
-                    testID: testID
-                  }), /*#__PURE__*/_jsx(PageScroller, {
+                  children: /*#__PURE__*/_jsx(PageScroller, {
+                    header: {
+                      title: pageConfig.title,
+                      onBack: requestNavigation,
+                      backLabel: labels?.back ?? 'Back',
+                      closeLabel,
+                      onClose: requestClose
+                    },
                     palette: palette,
                     inset: CONTENT_INSET.compact,
                     insetTop: CONTENT_INSET.compact,
                     testID: testID,
                     children: pageConfig.content
-                  }, currentPage)]
-                }) : /*#__PURE__*/_jsxs(View, {
+                  }, currentPage)
+                }) : /*#__PURE__*/_jsx(View, {
                   style: styles.content,
-                  children: [/*#__PURE__*/_jsx(CompactHeader, {
-                    title: labels?.dialog ?? 'Settings',
-                    closeLabel: closeLabel,
-                    onClose: requestClose,
-                    palette: palette,
-                    testID: testID
-                  }), /*#__PURE__*/_jsx(SettingsRail, {
+                  children: /*#__PURE__*/_jsx(SettingsRail, {
+                    header: {
+                      title: labels?.dialog ?? 'Settings',
+                      closeLabel,
+                      onClose: requestClose
+                    },
                     groups: groups,
                     page: currentPage,
                     onSelect: selectPage,
@@ -356,7 +364,7 @@ export function SettingsModal({
                     label: labels?.nav ?? 'Settings sections',
                     layout: "compact",
                     testID: testID
-                  })]
+                  })
                 }) : /*#__PURE__*/_jsxs(_Fragment, {
                   children: [/*#__PURE__*/_jsx(SettingsRail, {
                     groups: groups,
@@ -366,35 +374,20 @@ export function SettingsModal({
                     label: labels?.nav ?? 'Settings sections',
                     layout: layout,
                     testID: testID
-                  }), /*#__PURE__*/_jsxs(View, {
+                  }), /*#__PURE__*/_jsx(View, {
                     style: styles.content,
-                    children: [/*#__PURE__*/_jsxs(View, {
-                      style: [styles.titleRow, {
-                        paddingLeft: CONTENT_INSET[layout],
-                        paddingRight: CONTENT_INSET[layout],
-                        paddingTop: CONTENT_INSET[layout],
-                        paddingBottom: pageConfig?.compactTitle ? 6 : 12
-                      }],
-                      testID: testID ? `${testID}-title-row` : undefined,
-                      children: [/*#__PURE__*/_jsx(Text, {
-                        variant: "title-3-medium",
-                        role: "heading",
-                        style: {
-                          color: palette.text
-                        },
-                        children: pageConfig?.title ?? ''
-                      }), /*#__PURE__*/_jsx(SettingsCloseButton, {
-                        label: closeLabel,
-                        onPress: requestClose,
-                        palette: palette,
-                        testID: testID ? `${testID}-close` : undefined
-                      })]
-                    }), /*#__PURE__*/_jsx(PageScroller, {
+                    children: /*#__PURE__*/_jsx(PageScroller, {
+                      header: {
+                        title: pageConfig?.title ?? '',
+                        closeLabel,
+                        onClose: requestClose
+                      },
                       palette: palette,
                       inset: CONTENT_INSET[layout],
+                      insetTop: pageConfig?.compactTitle ? 6 : 12,
                       testID: testID,
                       children: pageConfig?.content
-                    }, currentPage)]
+                    }, currentPage)
                   })]
                 })
               }), /*#__PURE__*/_jsx(SavedToast, {
@@ -423,6 +416,7 @@ function ringVars(palette) {
 // ---------------------------------------------------------------------------
 
 function SettingsRail({
+  header,
   groups,
   page,
   onSelect,
@@ -432,7 +426,11 @@ function SettingsRail({
   testID
 }) {
   const compact = layout === 'compact';
-  return /*#__PURE__*/_jsx(ScrollView, {
+  const scrollY = useSharedValue(0);
+  const onScroll = useAnimatedScrollHandler(event => {
+    scrollY.value = Math.max(0, event.contentOffset.y);
+  }, [scrollY]);
+  return /*#__PURE__*/_jsxs(Animated.ScrollView, {
     role: "navigation",
     "aria-label": label,
     style: [compact ? styles.railCompact : [styles.rail, {
@@ -441,31 +439,47 @@ function SettingsRail({
       backgroundColor: palette.secondary,
       borderRightColor: palette.separator
     }],
-    contentContainerStyle: [styles.railContent, compact ? styles.railContentCompact : null],
+    contentContainerStyle: header ? undefined : styles.railContent,
+    stickyHeaderIndices: header && !IS_WEB ? [0] : undefined,
+    onScroll: onScroll,
+    scrollEventThrottle: 16,
+    contentInsetAdjustmentBehavior: "never",
+    automaticallyAdjustContentInsets: false,
     showsVerticalScrollIndicator: false,
     testID: testID ? `${testID}-rail` : undefined,
-    children: groups.map(group => /*#__PURE__*/_jsxs(View, {
-      style: styles.group,
-      children: [/*#__PURE__*/_jsx(Text, {
-        variant: "body-medium",
-        style: [styles.groupLabel, {
-          color: palette.textSecondary
-        }],
-        children: group.label
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.groupRows,
-        children: group.items.map(item => /*#__PURE__*/_jsx(RailRow, {
-          item: item
-          // A list, not a selection, when the rows ARE the navigation.
-          ,
-          selected: !compact && item.page !== undefined && item.page === page,
-          showChevron: compact && item.page !== undefined,
-          onSelect: onSelect,
-          palette: palette,
-          testID: testID ? `${testID}-nav-${item.key}` : undefined
-        }, item.key))
-      })]
-    }, group.key ?? group.label))
+    children: [header ? /*#__PURE__*/_jsx(SettingsHeader, {
+      ...header,
+      palette: palette,
+      scrimColor: palette.secondary,
+      scrollY: scrollY,
+      testID: testID
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: header ? [styles.railContent, styles.railContentCompact] : {
+        gap: 20
+      },
+      children: groups.map(group => /*#__PURE__*/_jsxs(View, {
+        style: styles.group,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-medium",
+          style: [styles.groupLabel, {
+            color: palette.textSecondary
+          }],
+          children: group.label
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.groupRows,
+          children: group.items.map(item => /*#__PURE__*/_jsx(RailRow, {
+            item: item
+            // A list, not a selection, when the rows ARE the navigation.
+            ,
+            selected: !compact && item.page !== undefined && item.page === page,
+            showChevron: compact && item.page !== undefined,
+            onSelect: onSelect,
+            palette: palette,
+            testID: testID ? `${testID}-nav-${item.key}` : undefined
+          }, item.key))
+        })]
+      }, group.key ?? group.label))
+    })]
   });
 }
 function RailRow({
@@ -527,124 +541,78 @@ function RailRow({
 //  Close button, scroller, toast
 // ---------------------------------------------------------------------------
 
-function SettingsCloseButton({
-  label,
-  onPress,
-  palette,
-  testID
-}) {
-  const [hovered, setHovered] = useState(false);
-  return /*#__PURE__*/_jsx(Pressable, {
-    role: "button",
-    accessibilityLabel: label,
-    ...webDataSet({
-      bloomSettingsPress: ''
-    }),
-    onPress: onPress,
-    onHoverIn: () => setHovered(true),
-    onHoverOut: () => setHovered(false),
-    testID: testID,
-    style: [styles.close, {
-      backgroundColor: hovered ? palette.tertiaryHover : palette.tertiary
-    }],
-    children: /*#__PURE__*/_jsx(RiCloseLine, {
-      width: 16,
-      height: 16,
-      fill: palette.iconSecondary
-    })
-  });
-}
+/** Shared header on every layout; the modal already owns safe-area insets. */
 
-/**
- * The `compact` title bar: optional back chevron, the title, the close button —
- * 56px, the page's 16px inset, hairline under it.
- */
-function CompactHeader({
+function SettingsHeader({
   title,
   onBack,
   backLabel,
   closeLabel,
   onClose,
   palette,
+  scrollY,
+  scrimColor = palette.full,
   testID
 }) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.compactHeader, {
-      borderBottomColor: palette.separator
-    }],
-    testID: testID ? `${testID}-title-row` : undefined,
-    children: [onBack ? /*#__PURE__*/_jsx(Pressable, {
-      role: "button",
-      accessibilityLabel: backLabel,
-      ...webDataSet({
-        bloomSettingsPress: ''
-      }),
-      onPress: onBack,
-      hitSlop: 8,
-      testID: testID ? `${testID}-back` : undefined,
-      style: styles.compactBack,
-      children: /*#__PURE__*/_jsx(RiArrowLeftSLine, {
-        width: 24,
-        height: 24,
-        fill: palette.text
+  return /*#__PURE__*/_jsx(PageHeader, {
+    title: title,
+    headingLevel: 2,
+    onBack: onBack,
+    backLabel: backLabel,
+    safeArea: false,
+    sticky: IS_WEB,
+    placement: "inline",
+    scrim: "auto",
+    scrimColor: scrimColor,
+    scrollY: scrollY,
+    actions: /*#__PURE__*/_jsx(ButtonGroup, {
+      accessibilityLabel: closeLabel,
+      children: /*#__PURE__*/_jsx(ButtonGroupItem, {
+        iconOnly: true,
+        leadingIcon: RiCloseLine,
+        accessibilityLabel: closeLabel,
+        onPress: onClose,
+        testID: testID ? `${testID}-close` : undefined
       })
-    }) : null, /*#__PURE__*/_jsx(Text, {
-      variant: "headline-medium",
-      role: "heading",
-      numberOfLines: 1,
-      style: [styles.compactTitle, {
-        color: palette.text
-      }],
-      children: title
-    }), /*#__PURE__*/_jsx(SettingsCloseButton, {
-      label: closeLabel,
-      onPress: onClose,
-      palette: palette,
-      testID: testID ? `${testID}-close` : undefined
-    })]
+    }),
+    testID: testID ? `${testID}-header` : undefined
   });
 }
+
+/** Each page owns one full-height viewport, including its header. */
 function PageScroller({
   children,
+  header,
   palette,
   inset,
   insetTop = 0,
   testID
 }) {
-  const [scrolled, setScrolled] = useState(false);
-  const onScroll = useCallback(event => {
-    const next = event.nativeEvent.contentOffset.y > 0;
-    setScrolled(prev => prev === next ? prev : next);
-  }, []);
-  const fade = {
-    opacity: scrolled ? 1 : 0,
-    ...(IS_WEB ? {
-      transitionProperty: 'opacity',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-out'
-    } : null)
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.scrollHost,
-    children: [/*#__PURE__*/_jsx(ScrollView, {
-      style: styles.scroll,
-      contentContainerStyle: [styles.scrollContent, {
+  const scrollY = useSharedValue(0);
+  const onScroll = useAnimatedScrollHandler(event => {
+    scrollY.value = Math.max(0, event.contentOffset.y);
+  }, [scrollY]);
+  return /*#__PURE__*/_jsxs(Animated.ScrollView, {
+    style: styles.scroll,
+    stickyHeaderIndices: IS_WEB ? undefined : [0],
+    onScroll: onScroll,
+    scrollEventThrottle: 16,
+    contentInsetAdjustmentBehavior: "never",
+    automaticallyAdjustContentInsets: false,
+    testID: testID ? `${testID}-page` : undefined,
+    children: [/*#__PURE__*/_jsx(SettingsHeader, {
+      ...header,
+      palette: palette,
+      scrollY: scrollY,
+      testID: testID
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
         paddingLeft: inset,
         paddingRight: inset,
         paddingBottom: inset,
         paddingTop: insetTop
-      }],
-      onScroll: onScroll,
-      scrollEventThrottle: 16,
-      testID: testID ? `${testID}-page` : undefined,
+      },
       children: children
-    }), /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      style: [styles.fade, fade],
-      testID: testID ? `${testID}-fade` : undefined,
-      children: /*#__PURE__*/_jsx(VerticalFade, {
-        color: palette.primary
-      })
     })]
   });
 }
@@ -741,27 +709,6 @@ const styles = StyleSheet.create({
   railChevron: {
     marginLeft: 'auto'
   },
-  compactHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    height: 56,
-    paddingLeft: 16,
-    paddingRight: 16,
-    borderBottomWidth: 1
-  },
-  compactBack: {
-    width: 32,
-    height: 32,
-    marginLeft: -8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 9999
-  },
-  compactTitle: {
-    flex: 1,
-    minWidth: 0
-  },
   panel: {
     flexDirection: 'row',
     borderRadius: 24,
@@ -800,33 +747,9 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0
   },
-  titleRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  close: {
-    width: 24,
-    height: 24,
-    borderRadius: 9999,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  scrollHost: {
-    flex: 1,
-    minHeight: 0,
-    position: 'relative'
-  },
   scroll: {
-    flex: 1
-  },
-  scrollContent: {},
-  fade: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    height: 40
+    flex: 1,
+    minHeight: 0
   },
   toast: {
     position: 'absolute',