@oxy.so/bloom 4.1.0 → 4.3.0

package/src/settings-modal/types.ts

@@ -33,11 +33,11 @@ export interface SettingsNavGroup {
 
 /** One page of the content pane. */
 export interface SettingsModalPage {
-  /** Heading of the fixed title row. */
+  /** Heading of the shared PageHeader. */
   title: string;
   content: ReactNode;
   /**
-   * Used on the Storage page: a 6px title gap instead of 12px, because the page
+   * Used on the Storage page: a 6px gap below PageHeader instead of 12px, because the page
    * already carries 10px of headroom for the dropzone's progress badge.
    */
   compactTitle?: boolean;
@@ -66,6 +66,9 @@ export interface SettingsModalProps {
    * Imperative mode: the modal finished closing.
    */
   onClose?: () => void;
+  /** Veto an internal leave intention before it changes or unmounts content.
+   * External controlled open/page changes remain the caller's authority. */
+  onBeforeLeave?: (reason: 'close' | 'navigation' | 'page') => boolean;
   groups: SettingsNavGroup[];
   pages: Record<string, SettingsModalPage>;
   /** Controlled current page. */
@@ -73,6 +76,8 @@ export interface SettingsModalProps {
   /** Page selected every time the modal opens. Defaults to the first navigable row. */
   defaultPage?: string;
   onPageChange?: (page: string) => void;
+  /** Compact layout: start at the section list (default) or open the selected page directly. Resets on each open. */
+  initialView?: 'navigation' | 'page';
   labels?: SettingsModalLabels;
   testID?: string;
 }

package/src/sidebar/Sidebar.tsx

@@ -141,6 +141,8 @@ function SearchField({
 const SidebarPanel: React.FC<SidebarProps> = ({
   items = [],
   primaryAction,
+  content,
+  onScroll,
   footer,
   secondaryItems = [],
   modes,
@@ -210,7 +212,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
 
   // `fluid` fills its container while expanded; the morph needs a number, so
   // the last expanded width is measured. The collapsed end is the size's own.
-  const geometry = useMemo(() => resolveSidebarGeometry(metrics, surface, Boolean(primaryAction), Boolean(tree)), [metrics, surface, primaryAction, tree]);
+  const geometry = useMemo(() => resolveSidebarGeometry(metrics, surface, Boolean(primaryAction), Boolean(tree) || content != null), [metrics, surface, primaryAction, tree, content]);
   const { collapsedWidth, collapsedLane, expandedInset } = geometry;
   const expandedWidth = useSharedValue(metrics.expanded);
   useEffect(() => {
@@ -232,6 +234,13 @@ const SidebarPanel: React.FC<SidebarProps> = ({
       paddingLeft: padding, paddingRight: padding,
     };
   }, [progress, expandedWidth, fluid, collapsedWidth, expandedPadding, collapsedPadding]);
+  const [contentHeight, setContentHeight] = useState(0);
+  const contentMorph = useAnimatedStyle(() => ({
+    height: contentHeight > 0 ? contentHeight * (1 - progress.value) : collapsed ? 0 : undefined,
+    opacity: 1 - progress.value,
+    marginTop: tree ? 0 : 24 * (1 - progress.value),
+  }), [contentHeight, collapsed, progress, tree]);
+  const contentWidth = useAnimatedStyle(() => ({ width: expandedWidth.value - expandedPadding * 2 }), [expandedWidth, expandedPadding]);
   const navInset = useAnimatedStyle(() => {
     const inset = expandedInset * (1 - progress.value);
     return { paddingLeft: inset, paddingRight: inset };
@@ -388,7 +397,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     setSuppressUserHover(expanding);
   };
 
-  const headerControl = flatMobile ? (
+  const headerControl = flatMobile && showSearch ? (
     <View
       ref={searchFieldRef}
       style={{
@@ -534,8 +543,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     [tree, normalized],
   );
   const nothingMatches =
-    shownItems.length === 0 && shownSecondary.length === 0 && shownFolders.length === 0 && !collapsed;
-  const hasTree = !!tree;
+    shownItems.length === 0 && shownSecondary.length === 0 && shownFolders.length === 0 && content == null && !collapsed;
+  const hasTree = !!tree || content != null;
 
   // A fresh closure here would re-render the memoised switcher on every
   // keystroke in the quick-search field.
@@ -642,8 +651,9 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             testID={`${testID ?? 'sidebar'}-scroll`}
             {...(IS_WEB ? { dataSet: { bloomSidebarScroll: 'none' } } : {})}
             style={{ marginTop: -headerOverlap, marginBottom: -8, marginLeft: -8, marginRight: -8, flexGrow: 0, flexShrink: 1, minHeight: 0 }}
-            contentContainerStyle={{ paddingTop: headerOverlap + 12, paddingBottom: 8, paddingLeft: 8, paddingRight: 8, gap: hasTree ? 24 : 0 }}
+            contentContainerStyle={{ paddingTop: headerOverlap + 12, paddingBottom: 8, paddingLeft: 8, paddingRight: 8, gap: tree ? 24 : 0 }}
             showsVerticalScrollIndicator={false}
+            onScroll={onScroll}
           >
             {shownItems.length > 0 || !hasTree ? (
               <Animated.View role="navigation" style={[{ width: '100%', gap: 4 }, !hasTree && navInset]}>
@@ -665,6 +675,17 @@ const SidebarPanel: React.FC<SidebarProps> = ({
                 </View>
               </View>
             ) : null}
+            {content != null ? (
+              <Animated.View testID={`${testID ?? 'sidebar'}-content`} pointerEvents={collapsed ? 'none' : 'auto'}
+                aria-hidden={collapsed} accessibilityElementsHidden={collapsed}
+                importantForAccessibility={collapsed ? 'no-hide-descendants' : 'auto'}
+                {...(IS_WEB && collapsed ? { inert: true } : {})}
+                style={[{ overflow: 'hidden', flexShrink: 0 }, contentMorph]}>
+                <Animated.View onLayout={(event) => setContentHeight(event.nativeEvent.layout.height)} style={contentWidth}>
+                  {content}
+                </Animated.View>
+              </Animated.View>
+            ) : null}
             {nothingMatches && hasTree ? (
               <Text variant="body-regular" style={{ paddingLeft: 8, paddingRight: 8, color: palette.textTertiary }}>{noResultsLabel}</Text>
             ) : null}

package/src/sidebar/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { BloomIconComponent } from '../icons/icon-component';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, ScrollViewProps } from 'react-native';
 
 /** A Remix-style icon: `width` / `height` / `fill`. */
 /** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
@@ -232,6 +232,17 @@ export interface SidebarUserMenuProps {
 }
 
 export interface SidebarProps {
+  /** App-owned destination content after the built-in rows/tree, inside the same
+   * scroll viewport. Hidden and noninteractive while collapsed; remains mounted
+   * so pagination and disclosure state survive. Not rendered in variant="rail".
+   * Compose rows here, never another ScrollView. Quick search filters only the
+   * built-in items/tree; disable it when your content owns search.
+   */
+  content?: ReactNode;
+  /** Observes the destination viewport after Bloom updates its edge fades.
+   * Useful for loading another page of history. No separate scroll owner.
+   */
+  onScroll?: ScrollViewProps['onScroll'];
   /** Additional persistent bottom content, outside destination scrolling.
    * Receives the rendered state: true in a rail, false in a mobile panel.
    * Existing account/theme/team controls remain; omit account when supplying your own account footer.