@oxy.so/bloom 4.1.0 → 4.3.0

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

@@ -8,14 +8,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _RiArrowLeftSLine = require("../icons/remix/RiArrowLeftSLine.js");
 var _RiArrowRightSLine = require("../icons/remix/RiArrowRightSLine.js");
 var _RiCheckboxCircleFill = require("../icons/remix/RiCheckboxCircleFill.js");
+var _index = require("../page-header/index.js");
+var _index2 = require("../button-group/index.js");
 var _RiCloseLine = require("../icons/remix/RiCloseLine.js");
-var _SettingsArt = require("./SettingsArt.js");
-var _index = require("../overlay/index.js");
+var _index3 = require("../overlay/index.js");
 var _webData = require("../styles/web-data.js");
-var _index2 = require("../typography/index.js");
+var _index4 = require("../typography/index.js");
 var _context = require("./context.js");
 var _modalPortal = require("./modal-portal");
 var _webCss = require("./web-css.js");
@@ -33,10 +33,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *             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,
@@ -100,11 +98,13 @@ function SettingsModal({
   control,
   open: controlledOpen,
   onClose,
+  onBeforeLeave,
   groups,
   pages,
   page: controlledPage,
   defaultPage,
   onPageChange,
+  initialView = 'navigation',
   labels,
   testID
 }) {
@@ -128,7 +128,12 @@ function SettingsModal({
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
 
   // `compact` layout is two levels: the section list, then a page pushed over it.
-  const [compactPageOpen, setCompactPageOpen] = (0, _react.useState)(false);
+  const [compactPageOpen, setCompactPageOpen] = (0, _react.useState)(initialView === 'page');
+  const initialViewRef = (0, _react.useRef)(initialView);
+  initialViewRef.current = initialView;
+  const beforeLeaveRef = (0, _react.useRef)(onBeforeLeave);
+  beforeLeaveRef.current = onBeforeLeave;
+  const mayLeave = (0, _react.useCallback)(reason => beforeLeaveRef.current?.(reason) !== false, []);
   const onCloseRef = (0, _react.useRef)(onClose);
   onCloseRef.current = onClose;
   const isControlledRef = (0, _react.useRef)(isControlled);
@@ -137,7 +142,7 @@ function SettingsModal({
   defaultPageRef.current = defaultPage ?? firstPage(groups);
   const show = (0, _react.useCallback)(() => {
     setInternalPage(defaultPageRef.current);
-    setCompactPageOpen(false);
+    setCompactPageOpen(initialViewRef.current === 'page');
     setMounted(true);
     setOpenCount(count => count + 1);
   }, []);
@@ -174,20 +179,25 @@ function SettingsModal({
     if (controlledOpen) show();else hide();
   }, [isControlled, controlledOpen, show, hide]);
   const requestClose = (0, _react.useCallback)(() => {
+    if (!mayLeave('close')) return false;
     if (isControlledRef.current) onCloseRef.current?.();else hide();
-  }, [hide]);
+    return true;
+  }, [hide, mayLeave]);
   (0, _react.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 = (0, _react.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 = (0, _react.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,
@@ -212,11 +222,11 @@ function SettingsModal({
     if (!mounted || _webCss.IS_WEB || typeof _reactNative.BackHandler?.addEventListener !== 'function') return;
     const sub = _reactNative.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] = (0, _react.useState)('hidden');
@@ -287,8 +297,8 @@ function SettingsModal({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalPortal.ModalPortal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.SettingsModalContext.Provider, {
       value: context,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.OverlayRoot, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Backdrop, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.OverlayRoot, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Backdrop, {
           onPress: requestClose,
           progress: progress,
           blurIntensity: 0,
@@ -326,32 +336,30 @@ function SettingsModal({
                   backgroundColor: palette.full,
                   boxShadow: palette.shadowXs
                 }, ringVars(palette)],
-                children: layout === 'compact' ? compactPageOpen && pageConfig ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: layout === 'compact' ? compactPageOpen && pageConfig ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   style: styles.content,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CompactHeader, {
-                    title: pageConfig.title,
-                    onBack: () => setCompactPageOpen(false),
-                    backLabel: labels?.back ?? 'Back',
-                    closeLabel: closeLabel,
-                    onClose: requestClose,
-                    palette: palette,
-                    testID: testID
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PageScroller, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  }, currentPage)
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   style: styles.content,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CompactHeader, {
-                    title: labels?.dialog ?? 'Settings',
-                    closeLabel: closeLabel,
-                    onClose: requestClose,
-                    palette: palette,
-                    testID: testID
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsRail, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsRail, {
+                    header: {
+                      title: labels?.dialog ?? 'Settings',
+                      closeLabel,
+                      onClose: requestClose
+                    },
                     groups: groups,
                     page: currentPage,
                     onSelect: selectPage,
@@ -359,7 +367,7 @@ function SettingsModal({
                     label: labels?.nav ?? 'Settings sections',
                     layout: "compact",
                     testID: testID
-                  })]
+                  })
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsRail, {
                     groups: groups,
@@ -369,35 +377,20 @@ function SettingsModal({
                     label: labels?.nav ?? 'Settings sections',
                     layout: layout,
                     testID: testID
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                     style: styles.content,
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index2.Text, {
-                        variant: "title-3-medium",
-                        role: "heading",
-                        style: {
-                          color: palette.text
-                        },
-                        children: pageConfig?.title ?? ''
-                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsCloseButton, {
-                        label: closeLabel,
-                        onPress: requestClose,
-                        palette: palette,
-                        testID: testID ? `${testID}-close` : undefined
-                      })]
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PageScroller, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(SavedToast, {
@@ -426,6 +419,7 @@ function ringVars(palette) {
 // ---------------------------------------------------------------------------
 
 function SettingsRail({
+  header,
   groups,
   page,
   onSelect,
@@ -435,7 +429,11 @@ function SettingsRail({
   testID
 }) {
   const compact = layout === 'compact';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+  const scrollY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const onScroll = (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
+    scrollY.value = Math.max(0, event.contentOffset.y);
+  }, [scrollY]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.ScrollView, {
     role: "navigation",
     "aria-label": label,
     style: [compact ? styles.railCompact : [styles.rail, {
@@ -444,31 +442,47 @@ function SettingsRail({
       backgroundColor: palette.secondary,
       borderRightColor: palette.separator
     }],
-    contentContainerStyle: [styles.railContent, compact ? styles.railContentCompact : null],
+    contentContainerStyle: header ? undefined : styles.railContent,
+    stickyHeaderIndices: header && !_webCss.IS_WEB ? [0] : undefined,
+    onScroll: onScroll,
+    scrollEventThrottle: 16,
+    contentInsetAdjustmentBehavior: "never",
+    automaticallyAdjustContentInsets: false,
     showsVerticalScrollIndicator: false,
     testID: testID ? `${testID}-rail` : undefined,
-    children: groups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.group,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
-        variant: "body-medium",
-        style: [styles.groupLabel, {
-          color: palette.textSecondary
-        }],
-        children: group.label
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.groupRows,
-        children: group.items.map(item => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(SettingsHeader, {
+      ...header,
+      palette: palette,
+      scrimColor: palette.secondary,
+      scrollY: scrollY,
+      testID: testID
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: header ? [styles.railContent, styles.railContentCompact] : {
+        gap: 20
+      },
+      children: groups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.group,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+          variant: "body-medium",
+          style: [styles.groupLabel, {
+            color: palette.textSecondary
+          }],
+          children: group.label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.groupRows,
+          children: group.items.map(item => /*#__PURE__*/(0, _jsxRuntime.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({
@@ -508,7 +522,7 @@ function RailRow({
       width: 20,
       height: 20,
       fill: palette.iconSecondary
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
       variant: "body-medium",
       numberOfLines: 1,
       style: [styles.railLabel, {
@@ -530,124 +544,78 @@ function RailRow({
 //  Close button, scroller, toast
 // ---------------------------------------------------------------------------
 
-function SettingsCloseButton({
-  label,
-  onPress,
-  palette,
-  testID
-}) {
-  const [hovered, setHovered] = (0, _react.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-    role: "button",
-    accessibilityLabel: label,
-    ...(0, _webData.webDataSet)({
-      bloomSettingsPress: ''
-    }),
-    onPress: onPress,
-    onHoverIn: () => setHovered(true),
-    onHoverOut: () => setHovered(false),
-    testID: testID,
-    style: [styles.close, {
-      backgroundColor: hovered ? palette.tertiaryHover : palette.tertiary
-    }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiCloseLine.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.compactHeader, {
-      borderBottomColor: palette.separator
-    }],
-    testID: testID ? `${testID}-title-row` : undefined,
-    children: [onBack ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      role: "button",
-      accessibilityLabel: backLabel,
-      ...(0, _webData.webDataSet)({
-        bloomSettingsPress: ''
-      }),
-      onPress: onBack,
-      hitSlop: 8,
-      testID: testID ? `${testID}-back` : undefined,
-      style: styles.compactBack,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiArrowLeftSLine.RiArrowLeftSLine, {
-        width: 24,
-        height: 24,
-        fill: palette.text
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PageHeader, {
+    title: title,
+    headingLevel: 2,
+    onBack: onBack,
+    backLabel: backLabel,
+    safeArea: false,
+    sticky: _webCss.IS_WEB,
+    placement: "inline",
+    scrim: "auto",
+    scrimColor: scrimColor,
+    scrollY: scrollY,
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ButtonGroup, {
+      accessibilityLabel: closeLabel,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ButtonGroupItem, {
+        iconOnly: true,
+        leadingIcon: _RiCloseLine.RiCloseLine,
+        accessibilityLabel: closeLabel,
+        onPress: onClose,
+        testID: testID ? `${testID}-close` : undefined
       })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
-      variant: "headline-medium",
-      role: "heading",
-      numberOfLines: 1,
-      style: [styles.compactTitle, {
-        color: palette.text
-      }],
-      children: title
-    }), /*#__PURE__*/(0, _jsxRuntime.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] = (0, _react.useState)(false);
-  const onScroll = (0, _react.useCallback)(event => {
-    const next = event.nativeEvent.contentOffset.y > 0;
-    setScrolled(prev => prev === next ? prev : next);
-  }, []);
-  const fade = {
-    opacity: scrolled ? 1 : 0,
-    ...(_webCss.IS_WEB ? {
-      transitionProperty: 'opacity',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-out'
-    } : null)
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.scrollHost,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      style: styles.scroll,
-      contentContainerStyle: [styles.scrollContent, {
+  const scrollY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const onScroll = (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
+    scrollY.value = Math.max(0, event.contentOffset.y);
+  }, [scrollY]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.ScrollView, {
+    style: styles.scroll,
+    stickyHeaderIndices: _webCss.IS_WEB ? undefined : [0],
+    onScroll: onScroll,
+    scrollEventThrottle: 16,
+    contentInsetAdjustmentBehavior: "never",
+    automaticallyAdjustContentInsets: false,
+    testID: testID ? `${testID}-page` : undefined,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsHeader, {
+      ...header,
+      palette: palette,
+      scrollY: scrollY,
+      testID: testID
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
         paddingLeft: inset,
         paddingRight: inset,
         paddingBottom: inset,
         paddingTop: insetTop
-      }],
-      onScroll: onScroll,
-      scrollEventThrottle: 16,
-      testID: testID ? `${testID}-page` : undefined,
+      },
       children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
-      style: [styles.fade, fade],
-      testID: testID ? `${testID}-fade` : undefined,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsArt.VerticalFade, {
-        color: palette.primary
-      })
     })]
   });
 }
@@ -705,7 +673,7 @@ function SavedToast({
       width: 16,
       height: 16,
       fill: palette.success[600]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
       variant: "body-2-medium",
       numberOfLines: 1,
       style: {
@@ -744,27 +712,6 @@ const styles = _reactNative.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,
@@ -803,33 +750,9 @@ const styles = _reactNative.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',