@bacon-pos/ui 0.9.0 → 0.11.0

package/lib/commonjs/components/Sidebar/Sidebar.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sidebar = Sidebar;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _BaconLogo = require("../brand/BaconLogo.js");
+var _Icon = require("../Icon/Icon.js");
+var _IconButton = require("../IconButton/IconButton.js");
+var _Text = require("../Text/Text.js");
+var _ScrollArea = require("../_internal/ScrollArea.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const ITEM_HEIGHT = 74;
+const ITEM_GAP = 16;
+const PADDING = 24;
+const TOGGLE_SIZE = 40; // IconButton size "sm"
+
+function SidebarButton({
+  item,
+  active,
+  collapsed,
+  onPress
+}) {
+  const theme = (0, _index.useTheme)();
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const disabled = item.disabled;
+  const backgroundColor = active ? theme.colors.action.secondary : hovered && !disabled ? theme.colors.background.muted : 'transparent';
+  const contentColor = active ? theme.colors.action.secondaryForeground : theme.colors.text.secondary;
+  const iconColor = active ? theme.colors.action.secondaryForeground : 'secondary';
+  const iconName = active && item.activeIcon ? item.activeIcon : item.icon;
+  const initial = item.label.trim().charAt(0).toUpperCase();
+
+  // Leading slot is always a fixed 24×24 box (flexShrink: 0) so the icon never
+  // shrinks next to a long label and labels stay aligned with or without an icon.
+  // No icon → reserve the space when expanded; show the initial when collapsed.
+  const leadingBox = {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+  const leading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: leadingBox,
+    children: iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: iconName,
+      size: 24,
+      color: iconColor
+    }) : collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      variant: "bodyLarge",
+      weight: "medium",
+      color: contentColor,
+      children: initial
+    }) : null
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: disabled ? undefined : onPress,
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false),
+    disabled: disabled,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: active,
+      disabled
+    },
+    accessibilityLabel: item.label,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: collapsed ? 'center' : 'flex-start',
+      gap: 10,
+      height: ITEM_HEIGHT,
+      paddingHorizontal: PADDING,
+      borderRadius: theme.radii.pill,
+      borderWidth: active ? 1 : 0,
+      borderColor: active ? theme.colors.border.default : 'transparent',
+      backgroundColor,
+      opacity: disabled ? 0.5 : 1
+    },
+    children: [leading, !collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      variant: "bodyLarge",
+      weight: "medium",
+      color: contentColor,
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      style: {
+        flexShrink: 1,
+        minWidth: 0
+      },
+      children: item.label
+    }) : null]
+  });
+}
+
+/**
+ * Sidebar — the app's main navigation drawer (Figma "Sidebar"). Expands/collapses
+ * between a labelled and an icon-only rail (animated width). The logo defaults to
+ * the Bacon mark (override via `logo`); an optional `footer` shows supporting text
+ * at the bottom. Items are dynamic buttons (icon + label via props); the list
+ * scrolls with an elegant auto-hiding indicator when it overflows, leaving the
+ * footer pinned. Buttons have hover and active states to mark the current section.
+ */
+function Sidebar({
+  items = [],
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  showToggle = true,
+  logo,
+  footer,
+  expandedWidth = 284,
+  collapsedWidth = 122,
+  scrollbarColor,
+  style
+}) {
+  const theme = (0, _index.useTheme)();
+  const activeControlled = activeKey !== undefined;
+  const [activeInternal, setActiveInternal] = (0, _react.useState)(defaultActiveKey);
+  const active = activeControlled ? activeKey : activeInternal;
+  const collapseControlled = collapsedProp !== undefined;
+  const [collapsedInternal, setCollapsedInternal] = (0, _react.useState)(defaultCollapsed);
+  const collapsed = collapseControlled ? collapsedProp : collapsedInternal;
+  const width = (0, _react.useRef)(new _reactNative.Animated.Value(collapsed ? collapsedWidth : expandedWidth)).current;
+  // `visualCollapsed` drives the layout (labels, alignment, footer). It lags on
+  // collapse — labels stay mounted (clipped by overflow) until the width finishes
+  // shrinking — and leads on expand, so both directions animate without a jump.
+  const [visualCollapsed, setVisualCollapsed] = (0, _react.useState)(collapsed);
+  (0, _react.useEffect)(() => {
+    if (!collapsed) setVisualCollapsed(false);
+    const anim = _reactNative.Animated.timing(width, {
+      toValue: collapsed ? collapsedWidth : expandedWidth,
+      duration: 220,
+      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
+      useNativeDriver: false // width
+    });
+    anim.start(({
+      finished
+    }) => {
+      if (finished && collapsed) setVisualCollapsed(true);
+    });
+    return () => anim.stop();
+  }, [collapsed, collapsedWidth, expandedWidth, width]);
+
+  // The toggle arrow spins in place (0° → 180°) instead of moving, so collapsing
+  // never nudges it. Driven by intent (`collapsed`), in sync with the width.
+  const arrowRot = (0, _react.useRef)(new _reactNative.Animated.Value(collapsed ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    const anim = _reactNative.Animated.timing(arrowRot, {
+      toValue: collapsed ? 1 : 0,
+      duration: 220,
+      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [collapsed, arrowRot]);
+  const arrowRotate = arrowRot.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg']
+  });
+
+  // Glide the toggle from flush-left (expanded) to centered on the icon axis
+  // (collapsed), tracking the width so it never jumps.
+  const toggleTranslateX = width.interpolate({
+    inputRange: [collapsedWidth, expandedWidth],
+    outputRange: [Math.max(0, (collapsedWidth - 2 * PADDING - TOGGLE_SIZE) / 2), 0],
+    extrapolate: 'clamp'
+  });
+  const selectItem = item => {
+    if (!activeControlled) setActiveInternal(item.key);
+    item.onPress?.();
+    onChange?.(item.key);
+  };
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    if (!collapseControlled) setCollapsedInternal(next);
+    onCollapsedChange?.(next);
+  };
+  const logoNode = logo ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaconLogo.BaconLogo, {
+    height: visualCollapsed ? 36 : 40
+  });
+  const toggle = showToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: {
+      transform: [{
+        translateX: toggleTranslateX
+      }]
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        transform: [{
+          rotate: arrowRotate
+        }]
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+        icon: "arrow-left",
+        accessibilityLabel: collapsed ? 'Expand sidebar' : 'Collapse sidebar',
+        variant: "ghost",
+        size: "sm",
+        onPress: toggleCollapsed
+      })
+    })
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [{
+      width,
+      height: '100%',
+      backgroundColor: theme.colors.background.default,
+      paddingTop: 48,
+      paddingBottom: PADDING,
+      paddingHorizontal: PADDING,
+      overflow: 'hidden'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        minHeight: 56,
+        alignItems: visualCollapsed ? 'center' : 'flex-start',
+        justifyContent: 'center'
+      },
+      children: logoNode
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollArea.ScrollArea, {
+      style: {
+        flex: 1,
+        marginTop: 32
+      },
+      indicatorColor: scrollbarColor ?? theme.colors.border.strong,
+      contentContainerStyle: {
+        gap: ITEM_GAP,
+        paddingBottom: 8
+      },
+      children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(SidebarButton, {
+        item: item,
+        active: item.key === active,
+        collapsed: visualCollapsed,
+        onPress: () => selectItem(item)
+      }, item.key))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        marginTop: 28,
+        gap: 16
+      },
+      children: [footer && !visualCollapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+        variant: "bodySmall",
+        color: "tertiary",
+        numberOfLines: 1,
+        style: {
+          marginLeft: 8
+        },
+        children: footer
+      }) : null, toggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          alignItems: 'flex-start'
+        },
+        children: toggle
+      }) : null]
+    })]
+  });
+}
+//# sourceMappingURL=Sidebar.js.map

package/lib/commonjs/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_index","_BaconLogo","_Icon","_IconButton","_Text","_ScrollArea","_jsxRuntime","ITEM_HEIGHT","ITEM_GAP","PADDING","TOGGLE_SIZE","SidebarButton","item","active","collapsed","onPress","theme","useTheme","hovered","setHovered","useState","disabled","backgroundColor","colors","action","secondary","background","muted","contentColor","secondaryForeground","text","iconColor","iconName","activeIcon","icon","initial","label","trim","charAt","toUpperCase","leadingBox","width","height","flexShrink","alignItems","justifyContent","leading","jsx","View","style","children","Icon","name","size","color","Text","variant","weight","jsxs","Pressable","undefined","onHoverIn","onHoverOut","accessibilityRole","accessibilityState","selected","accessibilityLabel","flexDirection","gap","paddingHorizontal","borderRadius","radii","pill","borderWidth","borderColor","border","default","opacity","numberOfLines","ellipsizeMode","minWidth","Sidebar","items","activeKey","defaultActiveKey","onChange","collapsedProp","defaultCollapsed","onCollapsedChange","showToggle","logo","footer","expandedWidth","collapsedWidth","scrollbarColor","activeControlled","activeInternal","setActiveInternal","collapseControlled","collapsedInternal","setCollapsedInternal","useRef","Animated","Value","current","visualCollapsed","setVisualCollapsed","useEffect","anim","timing","toValue","duration","easing","Easing","out","ease","useNativeDriver","start","finished","stop","arrowRot","arrowRotate","interpolate","inputRange","outputRange","toggleTranslateX","Math","max","extrapolate","selectItem","key","toggleCollapsed","next","logoNode","BaconLogo","toggle","transform","translateX","rotate","IconButton","paddingTop","paddingBottom","overflow","minHeight","ScrollArea","flex","marginTop","indicatorColor","strong","contentContainerStyle","map","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Sidebar/Sidebar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Sidebar/Sidebar.stories.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toggleable = exports.Scrolling = exports.NoIcon = exports.Minimal = exports.LongLabels = exports.Expanded = exports.CustomLogo = exports.Collapsed = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _Sidebar = require("./Sidebar.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const meta = {
+  title: 'Components/Sidebar',
+  component: _Sidebar.Sidebar
+};
+var _default = exports.default = meta;
+const ITEMS = [{
+  key: 'home',
+  label: 'Home',
+  icon: 'home'
+}, {
+  key: 'tables',
+  label: 'Table Map',
+  icon: 'table'
+}, {
+  key: 'menu',
+  label: 'Menu List',
+  icon: 'dish'
+}, {
+  key: 'orders',
+  label: 'Orders',
+  icon: 'receipt'
+}, {
+  key: 'users',
+  label: 'User Mgmt.',
+  icon: 'usergroup'
+}, {
+  key: 'customers',
+  label: 'Customers',
+  icon: 'user-star'
+}, {
+  key: 'reports',
+  label: 'Reports',
+  icon: 'analytics'
+}, {
+  key: 'settings',
+  label: 'Settings',
+  icon: 'settings'
+}];
+
+// A tall frame so the drawer fills a page-like height.
+function Frame({
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      height: 720,
+      flexDirection: 'row'
+    },
+    children: children
+  });
+}
+
+/** Expanded (Figma default), with footer text. */
+const Expanded = exports.Expanded = {
+  render: () => {
+    const [active, setActive] = (0, _react.useState)('home');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: ITEMS,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** Collapsed (icon-only rail). */
+const Collapsed = exports.Collapsed = {
+  render: () => {
+    const [active, setActive] = (0, _react.useState)('home');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: ITEMS,
+        activeKey: active,
+        onChange: setActive,
+        defaultCollapsed: true,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** Toggle it — press the arrow to expand/collapse. */
+const Toggleable = exports.Toggleable = {
+  render: () => {
+    const [active, setActive] = (0, _react.useState)('orders');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: ITEMS,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** No footer (default) and few items. */
+const Minimal = exports.Minimal = {
+  render: () => {
+    const [active, setActive] = (0, _react.useState)('home');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: ITEMS.slice(0, 3),
+        activeKey: active,
+        onChange: setActive,
+        showToggle: false
+      })
+    });
+  }
+};
+
+/** Many items — the list scrolls, the footer stays pinned. */
+const Scrolling = exports.Scrolling = {
+  render: () => {
+    const many = Array.from({
+      length: 14
+    }).map((_, i) => ({
+      key: String(i),
+      label: `Section ${i + 1}`,
+      icon: 'analytics'
+    }));
+    const [active, setActive] = (0, _react.useState)('0');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        height: 480,
+        flexDirection: 'row'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: many,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** Long labels truncate with an ellipsis (single line). */
+const LongLabels = exports.LongLabels = {
+  render: () => {
+    const [active, setActive] = (0, _react.useState)('a');
+    const items = [{
+      key: 'a',
+      label: 'Reservations & waitlist management',
+      icon: 'table'
+    }, {
+      key: 'b',
+      label: 'Kitchen display system settings',
+      icon: 'settings'
+    }, {
+      key: 'c',
+      label: 'Customer loyalty & rewards program',
+      icon: 'user-star'
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: items,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/**
+ * Items without an icon: expanded keeps the icon's blank space (labels stay
+ * aligned); collapsed shows the label's initial.
+ */
+const NoIcon = exports.NoIcon = {
+  render: () => {
+    const [active, setActive] = (0, _react.useState)('home');
+    const items = [{
+      key: 'home',
+      label: 'Home',
+      icon: 'home'
+    }, {
+      key: 'reports',
+      label: 'Reports'
+    },
+    // no icon → blank space / initial "R"
+    {
+      key: 'billing',
+      label: 'Billing'
+    },
+    // no icon → "B"
+    {
+      key: 'settings',
+      label: 'Settings',
+      icon: 'settings'
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: items,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** Custom logo color. */
+const CustomLogo = exports.CustomLogo = {
+  render: () => {
+    const [active, setActive] = (0, _react.useState)('home');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: ITEMS,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Acme v1"
+      })
+    });
+  }
+};
+//# sourceMappingURL=Sidebar.stories.js.map

package/lib/commonjs/components/Sidebar/Sidebar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_Sidebar","_jsxRuntime","meta","title","component","Sidebar","_default","exports","default","ITEMS","key","label","icon","Frame","children","jsx","View","style","height","flexDirection","Expanded","render","active","setActive","useState","items","activeKey","onChange","footer","Collapsed","defaultCollapsed","Toggleable","Minimal","slice","showToggle","Scrolling","many","Array","from","length","map","_","i","String","LongLabels","NoIcon","CustomLogo"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Sidebar/Sidebar.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Sidebar/Sidebar.test.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _react = require("react");
+var _reactNative = require("@testing-library/react-native");
+var _index = require("../../theme/index.js");
+var _Sidebar = require("./Sidebar.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function wrap(ui) {
+  return (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+    children: ui
+  }));
+}
+const ITEMS = [{
+  key: 'home',
+  label: 'Home',
+  icon: 'home'
+}, {
+  key: 'orders',
+  label: 'Orders',
+  icon: 'receipt'
+}, {
+  key: 'settings',
+  label: 'Settings',
+  icon: 'settings'
+}];
+describe('Sidebar', () => {
+  it('renders all item labels when expanded', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+      items: ITEMS
+    }));
+    expect(_reactNative.screen.getByText('Home')).toBeTruthy();
+    expect(_reactNative.screen.getByText('Orders')).toBeTruthy();
+    expect(_reactNative.screen.getByText('Settings')).toBeTruthy();
+  });
+  it('shows the footer only when provided', () => {
+    const {
+      rerender
+    } = wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+      items: ITEMS
+    }));
+    expect(_reactNative.screen.queryByText('v1.0')).toBeNull();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: ITEMS,
+        footer: "v1.0"
+      })
+    }));
+    expect(_reactNative.screen.getByText('v1.0')).toBeTruthy();
+  });
+  it('fires onChange with the pressed item key', () => {
+    const onChange = jest.fn();
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+      items: ITEMS,
+      onChange: onChange
+    }));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Orders'));
+    expect(onChange).toHaveBeenCalledWith('orders');
+  });
+  it('marks the active item as selected', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+      items: ITEMS,
+      activeKey: "orders"
+    }));
+    expect(_reactNative.screen.getByLabelText('Orders').props.accessibilityState).toMatchObject({
+      selected: true
+    });
+    expect(_reactNative.screen.getByLabelText('Home').props.accessibilityState).toMatchObject({
+      selected: false
+    });
+  });
+  it('hides labels and footer when collapsed', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+      items: ITEMS,
+      defaultCollapsed: true,
+      footer: "v1.0"
+    }));
+    expect(_reactNative.screen.queryByText('Home')).toBeNull();
+    expect(_reactNative.screen.queryByText('v1.0')).toBeNull();
+  });
+  it('truncates a long label to a single line', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+      items: [{
+        key: 'a',
+        label: 'A very long navigation label',
+        icon: 'home'
+      }]
+    }));
+    expect(_reactNative.screen.getByText('A very long navigation label').props.numberOfLines).toBe(1);
+  });
+  it('shows the label initial for an icon-less item when collapsed', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+      items: [{
+        key: 'r',
+        label: 'Reports'
+      }],
+      defaultCollapsed: true
+    }));
+    expect(_reactNative.screen.getByText('R')).toBeTruthy();
+  });
+  it('renders an icon-less item normally when expanded (label shown, no initial)', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+      items: [{
+        key: 'r',
+        label: 'Reports'
+      }]
+    }));
+    expect(_reactNative.screen.getByText('Reports')).toBeTruthy();
+    expect(_reactNative.screen.queryByText('R')).toBeNull();
+  });
+  it('toggles collapse via the built-in control', () => {
+    function Ctrl() {
+      const [c, setC] = (0, _react.useState)(false);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.Sidebar, {
+        items: ITEMS,
+        collapsed: c,
+        onCollapsedChange: setC
+      });
+    }
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(Ctrl, {}));
+    // The control flips its intent immediately (the visual collapse trails the
+    // width animation, so we assert on the toggle rather than label unmount).
+    expect(_reactNative.screen.getByLabelText('Collapse sidebar')).toBeTruthy();
+    _reactNative.fireEvent.press(_reactNative.screen.getByLabelText('Collapse sidebar'));
+    expect(_reactNative.screen.getByLabelText('Expand sidebar')).toBeTruthy();
+    _reactNative.fireEvent.press(_reactNative.screen.getByLabelText('Expand sidebar'));
+    expect(_reactNative.screen.getByLabelText('Collapse sidebar')).toBeTruthy();
+    // Labels are still present while expanded.
+    expect(_reactNative.screen.getByText('Home')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=Sidebar.test.js.map

package/lib/commonjs/components/Sidebar/Sidebar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_index","_Sidebar","_jsxRuntime","wrap","ui","render","jsx","ThemeProvider","children","ITEMS","key","label","icon","describe","it","Sidebar","items","expect","screen","getByText","toBeTruthy","rerender","queryByText","toBeNull","footer","onChange","jest","fn","fireEvent","press","toHaveBeenCalledWith","activeKey","getByLabelText","props","accessibilityState","toMatchObject","selected","defaultCollapsed","numberOfLines","toBe","Ctrl","c","setC","useState","collapsed","onCollapsedChange"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Sidebar/Sidebar.test.tsx"],"mappings":"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","ignoreList":[]}