@oxy.so/bloom 4.3.1 → 4.5.0

package/src/sidebar/SidebarFolder.tsx

@@ -61,7 +61,8 @@ function TreeRow({
 }) {
   const { state: hovered, onIn, onOut } = useInteractionState();
   const style: WebCssStyle = {
-    width: '100%',
+    flex: 1,
+    minWidth: 0,
     flexDirection: 'row',
     alignItems: 'center',
     gap: 10,
@@ -74,6 +75,8 @@ function TreeRow({
     '--bloom-sidebar-ring': palette.ring,
   };
   return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', width: '100%' }}
+      onPointerEnter={item.onPrefetch} onTouchStart={item.onPrefetch}>
     <Pressable
       {...(IS_WEB
         ? {
@@ -88,7 +91,9 @@ function TreeRow({
       focusable={focusable}
       onHoverIn={onIn}
       onHoverOut={onOut}
+      onLongPress={item.onLongPress}
       onPress={(event: GestureResponderEvent) => {
+        item.onPrefetch?.();
         if (!onPress) return;
         if (IS_WEB && item.href) event.preventDefault();
         onPress(item, folder);
@@ -116,6 +121,8 @@ function TreeRow({
         </View>
       ) : null}
     </Pressable>
+    {item.actions}
+    </View>
   );
 }
 
@@ -148,9 +155,9 @@ function SidebarFolderComponent({
   const reducedMotion = useReducedMotion();
   const { state: hovered, onIn, onOut } = useInteractionState();
   const [isOpen, setOpen] = useControllableState<boolean>({
-    value: open,
+    value: open ?? folder.open,
     defaultValue: folder.defaultOpen ?? false,
-    onChange: onOpenChange,
+    onChange: onOpenChange ?? folder.onOpenChange,
   });
   const expanded = forceOpen || isOpen;
   const Icon = expanded ? RiFolderOpenLine : RiFolderLine;
@@ -176,7 +183,8 @@ function SidebarFolderComponent({
   );
 
   const rowStyle: WebCssStyle = {
-    width: '100%',
+    flex: 1,
+    minWidth: 0,
     flexDirection: 'row',
     alignItems: 'center',
     gap: 8,
@@ -188,6 +196,7 @@ function SidebarFolderComponent({
 
   return (
     <View testID={testID} style={[{ width: '100%', flexDirection: 'column' }, style]}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
       <Pressable
         {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' } } : {})}
         role="button"
@@ -205,9 +214,14 @@ function SidebarFolderComponent({
           {folder.label}
         </Text>
       </Pressable>
+      {folder.actions}
+      </View>
       <Animated.View
         aria-hidden={!expanded}
         pointerEvents={expanded ? 'auto' : 'none'}
+        accessibilityElementsHidden={!expanded}
+        importantForAccessibility={expanded ? 'auto' : 'no-hide-descendants'}
+        {...(IS_WEB && !expanded ? { inert: true } : {})}
         style={[{ overflow: 'hidden' }, clipStyle]}>
         <View onLayout={onContentLayout} style={{ position: 'relative', width: '100%', flexDirection: 'column', gap: 2, paddingTop: 2 }}>
           <TreeConnector count={folder.items.length} color={palette.iconQuaternary} />

package/src/sidebar/SidebarRail.tsx

@@ -29,6 +29,7 @@ export function SidebarRail({
   logo,
   items = [],
   primaryAction,
+  contentAlignment = 'start',
   footer,
   secondaryItems = [],
   selected,
@@ -81,6 +82,8 @@ export function SidebarRail({
         style,
       ]}
     >
+      <View testID={`${testID ?? 'sidebar'}-main-region`} style={{ flex: 1, minHeight: 0, justifyContent: contentAlignment === 'center' ? 'center' : undefined }}>
+      <View style={{ minHeight: 0, flexShrink: 1, ...(contentAlignment === 'start' ? { flex: 1 } : {}) }}>
       {logo ? (
         <View style={{ flexShrink: 0, alignItems: 'center', paddingTop: 24 }}>
           <SidebarLogoView logo={logo} showWordmark={false} testID="sidebar-logo" />
@@ -90,7 +93,7 @@ export function SidebarRail({
         fadeColor={palette.flat}
         testID={testID ? `${testID}-scroll` : 'sidebar-rail-scroll'}
         {...(IS_WEB ? { dataSet: { bloomSidebarScroll: 'none' } } : {})}
-        style={{ flex: 1 }}
+        style={contentAlignment === 'center' ? { flexGrow: 0, flexShrink: 1, minHeight: 0 } : { flex: 1 }}
         contentContainerStyle={{
           flexGrow: 1,
           justifyContent: 'center',
@@ -109,6 +112,8 @@ export function SidebarRail({
       {primaryAction ? <View style={{ flexShrink: 0, paddingLeft: 8, paddingRight: 8, paddingBottom: 24 }}>
         <SidebarPrimaryAction action={primaryAction} rail testID={testID ? `${testID}-primary-action` : undefined} />
       </View> : null}
+      </View>
+      </View>
       {secondaryItems.length > 0 ? (
         <View
           role="navigation"

package/src/sidebar/types.ts

@@ -232,6 +232,8 @@ export interface SidebarUserMenuProps {
 }
 
 export interface SidebarProps {
+  /** Center the main navigation group in space above the persistent footer. */
+  contentAlignment?: 'start' | 'center';
   /** 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".
@@ -298,6 +300,9 @@ export interface SidebarProps {
   showThemeToggle?: boolean;
   /** Quick search over the rows. Defaults to true. */
   showSearch?: boolean;
+  /** Controlled quick-search text; also lets app-owned content filter the same query. */
+  searchQuery?: string;
+  onSearchQueryChange?: (query: string) => void;
   /** Shortcut hint on the quick-search button. Defaults to "⌘L". */
   searchShortcutLabel?: string;
   /** Binds ⌘L / Ctrl+L on web. Defaults to true. */
@@ -334,6 +339,11 @@ export interface SidebarProps {
 
 /** A row under a tree folder. */
 export interface SidebarTreeItem {
+  /** Secondary controls beside the row, never nested inside its press target. */
+  actions?: ReactNode;
+  /** Warm navigation data on hover/touch and before selection. */
+  onPrefetch?: () => void;
+  onLongPress?: () => void;
   key: string;
   label: string;
   /** A short chip on the right, e.g. a relative time (`34m`, `now`). */
@@ -343,6 +353,10 @@ export interface SidebarTreeItem {
 }
 
 export interface SidebarTreeFolder {
+  /** Secondary controls beside the disclosure, such as edit/create menus. */
+  actions?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
   key: string;
   label: string;
   items: ReadonlyArray<SidebarTreeItem>;
@@ -351,6 +365,8 @@ export interface SidebarTreeFolder {
 }
 
 export interface SidebarTree {
+  /** Collection actions, e.g. create a project, beside the section label. */
+  actions?: ReactNode;
   /** The section label, e.g. `Repositories`. */
   label: string;
   folders: ReadonlyArray<SidebarTreeFolder>;

package/src/styles/web-view-style.ts

@@ -118,3 +118,8 @@ export interface WebCssStyle extends ViewStyle {
    */
   [customProperty: `--${string}`]: string | undefined;
 }
+
+/** Position a secondary sticky row below measured chrome, retaining panel inset. */
+export function webSurfaceStickyTopPlus(px: number): ViewStyle['top'] {
+  return `calc(var(--bloom-panel-sticky-top, 0px) + ${px}px)` as ViewStyle['top'];
+}