@oxy.so/bloom 4.0.0 → 4.2.0

package/lib/commonjs/sidebar/Sidebar.js

@@ -20,6 +20,7 @@ var _tokens = require("../styles/tokens.js");
 var _zIndex = require("../styles/z-index.js");
 var _index4 = require("../theme-toggle/index.js");
 var _index5 = require("../typography/index.js");
+var _geometry = require("./geometry.js");
 var _metrics = require("./metrics.js");
 var _palette = require("./palette.js");
 var _parts = require("./parts.js");
@@ -27,6 +28,7 @@ var _SidebarFolder = require("./SidebarFolder.js");
 var _SidebarItem = require("./SidebarItem.js");
 var _SidebarModeSwitcher = require("./SidebarModeSwitcher.js");
 var _SidebarPlanCard = require("./SidebarPlanCard.js");
+var _SidebarPrimaryAction = require("./SidebarPrimaryAction.js");
 var _SidebarRail = require("./SidebarRail.js");
 var _SidebarScrollArea = require("./SidebarScrollArea.js");
 var _SidebarTeamMenu = require("./SidebarTeamMenu.js");
@@ -118,6 +120,8 @@ function SearchField({
 }
 const SidebarPanel = ({
   items = [],
+  primaryAction,
+  footer,
   secondaryItems = [],
   modes,
   mode,
@@ -195,7 +199,12 @@ const SidebarPanel = ({
 
   // `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 collapsedWidth = metrics.collapsed;
+  const geometry = (0, _react.useMemo)(() => (0, _geometry.resolveSidebarGeometry)(metrics, surface, Boolean(primaryAction), Boolean(tree)), [metrics, surface, primaryAction, tree]);
+  const {
+    collapsedWidth,
+    collapsedLane,
+    expandedInset
+  } = geometry;
   const expandedWidth = (0, _reactNativeReanimated.useSharedValue)(metrics.expanded);
   (0, _react.useEffect)(() => {
     if (!fluid) expandedWidth.value = metrics.expanded;
@@ -215,12 +224,23 @@ const SidebarPanel = ({
     };
   }, [progress, expandedWidth, fluid, collapsedWidth, expandedPadding, collapsedPadding]);
   const navInset = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const inset = 2 * (1 - progress.value);
+    const inset = expandedInset * (1 - progress.value);
     return {
       paddingLeft: inset,
       paddingRight: inset
     };
-  }, [progress]);
+  }, [progress, expandedInset]);
+  const searchInset = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const start = metrics.row.padding + expandedInset;
+    const end = metrics.row.padding;
+    const padding = start + (end - start) * progress.value;
+    return {
+      paddingLeft: padding,
+      paddingRight: padding,
+      marginLeft: (collapsedLane - metrics.row.square) / 2 * progress.value,
+      marginRight: (collapsedLane - metrics.row.square) / 2 * progress.value
+    };
+  }, [progress, metrics.row.square, metrics.row.padding, metrics.row.icon, expandedInset, collapsedLane]);
   const sideBarIconStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     transform: [{
       scaleX: 2 * progress.value - 1
@@ -239,13 +259,13 @@ const SidebarPanel = ({
     const p = progress.value;
     return {
       left: `${100 * (1 - p)}%`,
-      width: 20 + 16 * p,
+      width: 20 + (collapsedLane - 20) * p,
       top: hasLogo ? 8 + 38 * p : hasAccount ? 6 * (1 - p) : 0,
       transform: [{
         translateX: -20 * (1 - p)
       }]
     };
-  }, [progress, hasLogo, hasAccount]);
+  }, [progress, hasLogo, hasAccount, collapsedLane]);
   const themeGeometry = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     height: 40 - 4 * progress.value
   }), [progress]);
@@ -315,6 +335,7 @@ const SidebarPanel = ({
       selected: isSelected,
       collapsed: collapsed,
       onPress: pressFor(item),
+      onLongPress: item.onLongPress,
       testID: `sidebar-item-${item.key}`,
       badge: item.badge !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Badge, {
         content: item.badge,
@@ -356,7 +377,7 @@ const SidebarPanel = ({
     setCollapsed(!collapsedState);
     setSuppressUserHover(expanding);
   };
-  const headerControl = flatMobile ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const headerControl = flatMobile && showSearch ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     ref: searchFieldRef,
     style: {
       height: 36,
@@ -497,12 +518,14 @@ const SidebarPanel = ({
     style: [{
       flexDirection: 'row',
       alignItems: 'center',
-      padding: metrics.row.padding,
+      height: metrics.row.square,
+      paddingTop: metrics.row.padding,
+      paddingBottom: metrics.row.padding,
       overflow: 'hidden',
       borderRadius: _tokens.borderRadius.full,
       backgroundColor: searchHover.state ? palette.searchHover : palette.tertiary,
       '--bloom-sidebar-ring': palette.ring
-    }, searchGapStyle],
+    }, searchGapStyle, searchInset],
     testID: "sidebar-search",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
       style: [{
@@ -633,189 +656,209 @@ const SidebarPanel = ({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_metrics.SidebarSizeProvider, {
     value: size,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.CollapseProvider, {
-      value: progress,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
-        role: "complementary",
-        accessibilityLabel: "Sidebar",
-        onLayout: onPanelLayout,
-        testID: testID,
-        style: [{
-          height: '100%',
-          flexShrink: 0,
-          flexDirection: 'column',
-          justifyContent: 'space-between',
-          overflow: 'hidden',
-          paddingTop: metrics.padding,
-          paddingBottom: metrics.padding
-        }, chrome, panelStyle, style],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: {
-            width: '100%',
-            minHeight: 0,
-            flexShrink: 1
-          },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_geometry.SidebarGeometryProvider, {
+      value: geometry,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.CollapseProvider, {
+        value: progress,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+          role: "complementary",
+          accessibilityLabel: "Sidebar",
+          onLayout: onPanelLayout,
+          testID: testID,
+          style: [{
+            height: '100%',
+            flexShrink: 0,
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            overflow: 'hidden',
+            paddingTop: metrics.padding,
+            paddingBottom: metrics.padding
+          }, chrome, panelStyle, style],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            testID: `${testID ?? 'sidebar'}-fixed-header`,
-            pointerEvents: "box-none",
-            onLayout: event => setHeaderOverlap(Math.min(20, event.nativeEvent.layout.height / 2)),
             style: {
               width: '100%',
-              flexShrink: 0,
-              gap: 12,
-              zIndex: _zIndex.Z_INDEX.floating
-            },
-            children: [headerRow, modeSwitcher, showSearch && !flatMobile ? searchButton : null]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SidebarScrollArea.SidebarScrollArea, {
-            fadeColor: plain ? palette.flat : palette.panel,
-            testID: `${testID ?? 'sidebar'}-scroll`,
-            ...(_parts.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
+              minHeight: 0,
+              flexShrink: 1
             },
-            showsVerticalScrollIndicator: false,
-            children: [shownItems.length > 0 || !hasTree ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-              role: "navigation",
-              style: [{
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              testID: `${testID ?? 'sidebar'}-fixed-header`,
+              pointerEvents: "box-none",
+              onLayout: event => setHeaderOverlap(Math.min(20, event.nativeEvent.layout.height / 2)),
+              style: {
                 width: '100%',
-                gap: 4
-              }, !hasTree && navInset],
-              children: nothingMatches && !hasTree ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+                flexShrink: 0,
+                gap: 12,
+                zIndex: _zIndex.Z_INDEX.floating
+              },
+              children: [headerRow, modeSwitcher, showSearch && !flatMobile ? searchButton : null]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SidebarScrollArea.SidebarScrollArea, {
+              fadeColor: plain ? palette.flat : palette.panel,
+              testID: `${testID ?? 'sidebar'}-scroll`,
+              ...(_parts.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
+              },
+              showsVerticalScrollIndicator: false,
+              children: [shownItems.length > 0 || !hasTree ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                role: "navigation",
+                style: [{
+                  width: '100%',
+                  gap: 4
+                }, !hasTree && navInset],
+                children: nothingMatches && !hasTree ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+                  variant: "body-regular",
+                  style: {
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    paddingTop: 12,
+                    paddingBottom: 12,
+                    color: palette.textTertiary
+                  },
+                  children: noResultsLabel
+                }) : shownItems.map(renderRow)
+              }) : null, tree && !collapsed && shownFolders.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: {
+                  width: '100%',
+                  gap: 10
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+                  variant: "body-medium",
+                  style: {
+                    color: palette.textSecondary
+                  },
+                  children: tree.label
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  role: "navigation",
+                  accessibilityLabel: tree.label,
+                  style: {
+                    width: '100%',
+                    gap: 4
+                  },
+                  children: shownFolders.map(folder => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarFolder.SidebarFolder, {
+                    folder: folder,
+                    forceOpen: normalized.length > 0,
+                    selectedItem: selectedTreeItem,
+                    onItemPress: onTreeItemPress,
+                    testID: `sidebar-folder-${folder.key}`
+                  }, folder.key))
+                })]
+              }) : null, nothingMatches && hasTree ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
                 variant: "body-regular",
                 style: {
                   paddingLeft: 8,
                   paddingRight: 8,
-                  paddingTop: 12,
-                  paddingBottom: 12,
                   color: palette.textTertiary
                 },
                 children: noResultsLabel
-              }) : shownItems.map(renderRow)
-            }) : null, tree && !collapsed && shownFolders.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: {
-                width: '100%',
-                gap: 10
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-                variant: "body-medium",
-                style: {
-                  color: palette.textSecondary
-                },
-                children: tree.label
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                role: "navigation",
-                accessibilityLabel: tree.label,
-                style: {
-                  width: '100%',
-                  gap: 4
-                },
-                children: shownFolders.map(folder => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarFolder.SidebarFolder, {
-                  folder: folder,
-                  forceOpen: normalized.length > 0,
-                  selectedItem: selectedTreeItem,
-                  onItemPress: onTreeItemPress,
-                  testID: `sidebar-folder-${folder.key}`
-                }, folder.key))
+              }) : null]
+            }), primaryAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarPrimaryAction.SidebarPrimaryAction, {
+              action: primaryAction,
+              collapsed: collapsed,
+              testID: testID ? `${testID}-primary-action` : undefined
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: {
+              width: '100%',
+              flexShrink: 0,
+              gap: 12,
+              paddingTop: hasTree ? 12 : 0
+            },
+            children: [showThemeToggle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+              testID: "sidebar-theme-morph",
+              style: [{
+                position: 'relative',
+                overflow: 'hidden'
+              }, themeGeometry],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                pointerEvents: collapsed ? 'none' : 'auto',
+                "aria-hidden": collapsed,
+                accessibilityElementsHidden: collapsed,
+                importantForAccessibility: collapsed ? 'no-hide-descendants' : 'auto',
+                ...(_parts.IS_WEB && collapsed ? {
+                  inert: true
+                } : {}),
+                style: [{
+                  position: 'absolute',
+                  left: 0,
+                  top: 0
+                }, themeExpandedStyle],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.ThemeToggle, {
+                  variant: "sidebar-segmented",
+                  style: plain ? {
+                    backgroundColor: palette.panel
+                  } : undefined
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                pointerEvents: collapsed ? 'auto' : 'none',
+                "aria-hidden": !collapsed,
+                accessibilityElementsHidden: !collapsed,
+                importantForAccessibility: collapsed ? 'auto' : 'no-hide-descendants',
+                ...(_parts.IS_WEB && !collapsed ? {
+                  inert: true
+                } : {}),
+                style: [{
+                  position: 'absolute',
+                  left: 0,
+                  right: 0,
+                  top: 0
+                }, themeCollapsedStyle],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.ThemeToggle, {
+                  collapsed: true,
+                  style: {
+                    alignSelf: 'center'
+                  }
+                })
               })]
-            }) : null, nothingMatches && hasTree ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-              variant: "body-regular",
+            }) : null, shownSecondary.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+              role: "navigation",
+              style: [{
+                width: '100%',
+                gap: 4
+              }, navInset],
+              children: shownSecondary.map(renderRow)
+            }) : null, plan ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarPlanCard.SidebarPlanCard, {
+              plan: plan,
+              collapsed: collapsed,
+              style: plain ? {
+                backgroundColor: palette.panel
+              } : undefined,
+              testID: "sidebar-plan"
+            }) : team ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarTeamMenu.SidebarTeamMenu, {
+              team: team,
+              collapsed: collapsed,
+              style: plain ? {
+                backgroundColor: palette.panel
+              } : undefined,
+              testID: "sidebar-team"
+            }) : null, footer != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              testID: testID ? `${testID}-footer` : 'sidebar-footer',
               style: {
-                paddingLeft: 8,
-                paddingRight: 8,
-                color: palette.textTertiary
+                width: '100%',
+                flexShrink: 0
               },
-              children: noResultsLabel
+              children: typeof footer === 'function' ? footer({
+                collapsed
+              }) : footer
             }) : null]
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: {
-            width: '100%',
-            flexShrink: 0,
-            gap: 12,
-            paddingTop: hasTree ? 12 : 0
-          },
-          children: [showThemeToggle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
-            testID: "sidebar-theme-morph",
-            style: [{
-              position: 'relative',
-              overflow: 'hidden'
-            }, themeGeometry],
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-              pointerEvents: collapsed ? 'none' : 'auto',
-              "aria-hidden": collapsed,
-              accessibilityElementsHidden: collapsed,
-              importantForAccessibility: collapsed ? 'no-hide-descendants' : 'auto',
-              ...(_parts.IS_WEB && collapsed ? {
-                inert: true
-              } : {}),
-              style: [{
-                position: 'absolute',
-                left: 0,
-                top: 0
-              }, themeExpandedStyle],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.ThemeToggle, {
-                variant: "sidebar-segmented",
-                style: plain ? {
-                  backgroundColor: palette.panel
-                } : undefined
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-              pointerEvents: collapsed ? 'auto' : 'none',
-              "aria-hidden": !collapsed,
-              accessibilityElementsHidden: !collapsed,
-              importantForAccessibility: collapsed ? 'auto' : 'no-hide-descendants',
-              ...(_parts.IS_WEB && !collapsed ? {
-                inert: true
-              } : {}),
-              style: [{
-                position: 'absolute',
-                left: 0,
-                top: 0
-              }, themeCollapsedStyle],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.ThemeToggle, {
-                collapsed: true
-              })
-            })]
-          }) : null, shownSecondary.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            role: "navigation",
-            style: {
-              width: '100%',
-              gap: 4
-            },
-            children: shownSecondary.map(renderRow)
-          }) : null, plan ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarPlanCard.SidebarPlanCard, {
-            plan: plan,
-            collapsed: collapsed,
-            style: plain ? {
-              backgroundColor: palette.panel
-            } : undefined,
-            testID: "sidebar-plan"
-          }) : team ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarTeamMenu.SidebarTeamMenu, {
-            team: team,
-            collapsed: collapsed,
-            style: plain ? {
-              backgroundColor: palette.panel
-            } : undefined,
-            testID: "sidebar-team"
-          }) : null]
-        })]
+        })
       })
     })
   });