@xsolla/xui-b2b-sidebar 0.158.0 → 0.160.0

package/README.md

@@ -34,7 +34,7 @@ import {
   type SidebarLinkProps,
   type SidebarLinkActiveCheck,
   type SidebarLinkClickHandler,
-} from '@xsolla/xui-b2b-sidebar';
+} from "@xsolla/xui-b2b-sidebar";
 ```
 
 ## Quick start
@@ -42,8 +42,8 @@ import {
 Wrap the sidebar in `SidebarProvider`, supplying the current `pathname`, the controlled `collapsed` state, and your app's link component (React Router, Next.js `Link`, etc.). The default link is a plain `<a>` if you omit `linkComponent`.
 
 ```tsx
-import { useState } from 'react';
-import { Home, Wallet, Settings } from '@xsolla/xui-icons-base';
+import { useState } from "react";
+import { Home, Wallet, Settings } from "@xsolla/xui-icons-base";
 import {
   Sidebar,
   SidebarProvider,
@@ -55,7 +55,7 @@ import {
   SidebarMenuCollapsible,
   SidebarMenuSub,
   SidebarTrigger,
-} from '@xsolla/xui-b2b-sidebar';
+} from "@xsolla/xui-b2b-sidebar";
 
 function AppShell({ pathname }: { pathname: string }) {
   const [collapsed, setCollapsed] = useState(false);
@@ -78,11 +78,19 @@ function AppShell({ pathname }: { pathname: string }) {
               <SidebarMenuCollapsible
                 icon={<Wallet size={18} variant="line" aria-hidden />}
                 label="Finance"
-                matchPaths={['/finance']}
+                matchPaths={["/finance"]}
               >
                 <SidebarMenuSub>
-                  <SidebarMenuItem to="/finance/payouts" label="Payouts" isNested />
-                  <SidebarMenuItem to="/finance/reports" label="Reports" isNested />
+                  <SidebarMenuItem
+                    to="/finance/payouts"
+                    label="Payouts"
+                    isNested
+                  />
+                  <SidebarMenuItem
+                    to="/finance/reports"
+                    label="Reports"
+                    isNested
+                  />
                 </SidebarMenuSub>
               </SidebarMenuCollapsible>
             </SidebarMenu>
@@ -112,13 +120,14 @@ None of the sidebar components extend `ThemeOverrideProps` — they read theme v
 
 ### `<SidebarProvider>`
 
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `collapsed` | `boolean` | uncontrolled | Controlled collapsed state. Omit to use the internal state. |
-| `onCollapsedChange` | `(collapsed: boolean) => void` | — | Called when the user toggles via `SidebarTrigger` or the collapsed-mode toggle. |
-| `pathname` | `string` | `""` | Current route, used for active-state matching and `matchPaths` auto-expand. |
-| `linkComponent` | `ComponentType<SidebarLinkProps>` | plain `<a>` | Router link component. |
-| `children` | `ReactNode` | — | Sidebar tree. |
+| Prop                | Type                              | Default      | Description                                                                                                   |
+| ------------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |
+| `testID`            | `string`                          | —            | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
+| `collapsed`         | `boolean`                         | uncontrolled | Controlled collapsed state. Omit to use the internal state.                                                   |
+| `onCollapsedChange` | `(collapsed: boolean) => void`    | —            | Called when the user toggles via `SidebarTrigger` or the collapsed-mode toggle.                               |
+| `pathname`          | `string`                          | `""`         | Current route, used for active-state matching and `matchPaths` auto-expand.                                   |
+| `linkComponent`     | `ComponentType<SidebarLinkProps>` | plain `<a>`  | Router link component.                                                                                        |
+| `children`          | `ReactNode`                       | —            | Sidebar tree.                                                                                                 |
 
 ### `useSidebar()`
 
@@ -139,61 +148,61 @@ function useSidebar(): {
 
 ### `<Sidebar>`
 
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `collapsedItems` | `SidebarItemType[]` | `[]` | Top icons in the collapsed strip. |
-| `collapsedToolItems` | `SidebarItemType[]` | `[]` | Tool icons rendered after a spacer. |
-| `collapsedBottomItems` | `SidebarItemType[]` | `[]` | Bottom icons (e.g. Settings, Billing). |
-| `showChat` | `boolean` | `true` | Render the chat button in the collapsed footer. |
-| `onChatClick` | `() => void` | — | Click handler for the chat button. |
-| `chatBadge` | `boolean` | `false` | Show an unread-indicator dot on the chat button. |
-| `children` | `ReactNode` | — | The expanded tree (`SidebarContent`, `SidebarFooter`). |
+| Prop                   | Type                | Default | Description                                            |
+| ---------------------- | ------------------- | ------- | ------------------------------------------------------ |
+| `collapsedItems`       | `SidebarItemType[]` | `[]`    | Top icons in the collapsed strip.                      |
+| `collapsedToolItems`   | `SidebarItemType[]` | `[]`    | Tool icons rendered after a spacer.                    |
+| `collapsedBottomItems` | `SidebarItemType[]` | `[]`    | Bottom icons (e.g. Settings, Billing).                 |
+| `showChat`             | `boolean`           | `true`  | Render the chat button in the collapsed footer.        |
+| `onChatClick`          | `() => void`        | —       | Click handler for the chat button.                     |
+| `chatBadge`            | `boolean`           | `false` | Show an unread-indicator dot on the chat button.       |
+| `children`             | `ReactNode`         | —       | The expanded tree (`SidebarContent`, `SidebarFooter`). |
 
 ### `<SidebarMenuItem>`
 
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `to` | `string` | — | Route URL passed through to `linkComponent`. |
-| `label` | `ReactNode` | — | Text label. |
-| `icon` | `ReactNode` | — | Leading icon (hidden when `isNested`). |
-| `exact` | `boolean` | — | Exact-match flag forwarded to the link component. |
-| `external` | `boolean` | — | Marks the link as external (sets `target`/`rel`). |
-| `hasExternalIcon` | `boolean` | — | Shows the external-link icon at the trailing edge. |
-| `target` | `string \| null` | — | Anchor target. |
-| `onClick` | `SidebarLinkClickHandler` | — | Click handler. |
-| `dataId` | `string` | — | `data-id` attribute for tests/analytics. |
-| `isActive` | `SidebarLinkActiveCheck` | — | Custom active-check forwarded to the link. |
-| `isPinned` | `boolean` | — | Renders the icon at 12px to indicate a pinned item. |
-| `showBadge` | `boolean` | — | Shows a small alert dot next to the label. |
-| `hasTooltip` | `boolean` | — | Truncates labels longer than 20 chars and shows the full text on hover. |
-| `beta` | `boolean` | — | Renders a "Beta" tag at the trailing edge. |
-| `multiLine` | `boolean` | — | Allows the label to wrap to multiple lines. |
-| `extra` | `ReactNode` | — | Slot rendered between the icon and the label. |
-| `isNested` | `boolean` | `false` | Set when rendered inside `SidebarMenuSub` (drops the icon, indents under the rail). |
+| Prop              | Type                      | Default | Description                                                                         |
+| ----------------- | ------------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `to`              | `string`                  | —       | Route URL passed through to `linkComponent`.                                        |
+| `label`           | `ReactNode`               | —       | Text label.                                                                         |
+| `icon`            | `ReactNode`               | —       | Leading icon (hidden when `isNested`).                                              |
+| `exact`           | `boolean`                 | —       | Exact-match flag forwarded to the link component.                                   |
+| `external`        | `boolean`                 | —       | Marks the link as external (sets `target`/`rel`).                                   |
+| `hasExternalIcon` | `boolean`                 | —       | Shows the external-link icon at the trailing edge.                                  |
+| `target`          | `string \| null`          | —       | Anchor target.                                                                      |
+| `onClick`         | `SidebarLinkClickHandler` | —       | Click handler.                                                                      |
+| `dataId`          | `string`                  | —       | `data-id` attribute for tests/analytics.                                            |
+| `isActive`        | `SidebarLinkActiveCheck`  | —       | Custom active-check forwarded to the link.                                          |
+| `isPinned`        | `boolean`                 | —       | Renders the icon at 12px to indicate a pinned item.                                 |
+| `showBadge`       | `boolean`                 | —       | Shows a small alert dot next to the label.                                          |
+| `hasTooltip`      | `boolean`                 | —       | Truncates labels longer than 20 chars and shows the full text on hover.             |
+| `beta`            | `boolean`                 | —       | Renders a "Beta" tag at the trailing edge.                                          |
+| `multiLine`       | `boolean`                 | —       | Allows the label to wrap to multiple lines.                                         |
+| `extra`           | `ReactNode`               | —       | Slot rendered between the icon and the label.                                       |
+| `isNested`        | `boolean`                 | `false` | Set when rendered inside `SidebarMenuSub` (drops the icon, indents under the rail). |
 
 ### `<SidebarMenuCollapsible>`
 
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `icon` | `ReactNode` | — | Leading icon. |
-| `label` | `ReactNode` | — | Section label. |
-| `dataId` | `string` | — | `data-id` attribute. Also seeds the stable id used by `aria-controls`. |
-| `matchPaths` | `string[]` | `[]` | Route prefixes that auto-expand this section. |
-| `children` | `ReactNode` | — | Nested items, typically a `SidebarMenuSub` of `SidebarMenuItem isNested`. |
+| Prop         | Type        | Default | Description                                                               |
+| ------------ | ----------- | ------- | ------------------------------------------------------------------------- |
+| `icon`       | `ReactNode` | —       | Leading icon.                                                             |
+| `label`      | `ReactNode` | —       | Section label.                                                            |
+| `dataId`     | `string`    | —       | `data-id` attribute. Also seeds the stable id used by `aria-controls`.    |
+| `matchPaths` | `string[]`  | `[]`    | Route prefixes that auto-expand this section.                             |
+| `children`   | `ReactNode` | —       | Nested items, typically a `SidebarMenuSub` of `SidebarMenuItem isNested`. |
 
 ### `<SidebarCollapsed>`
 
 Lower-level collapsed-strip renderer. The `<Sidebar>` component composes this for you; reach for it when you need to render the collapsed strip outside the standard layout.
 
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `items` | `SidebarItemType[]` | — | Top icon items. |
-| `toolItems` | `SidebarItemType[]` | `[]` | Tool icons after a spacer. |
-| `bottomItems` | `SidebarItemType[]` | `[]` | Bottom icons. |
-| `onToggleCollapse` | `() => void` | — | Click handler for the toggle button in the footer. |
-| `onChatClick` | `() => void` | — | Click handler for the chat button. |
-| `showChat` | `boolean` | `true` | Render the chat button. |
-| `chatBadge` | `boolean` | `false` | Show the unread dot. |
+| Prop               | Type                | Default | Description                                        |
+| ------------------ | ------------------- | ------- | -------------------------------------------------- |
+| `items`            | `SidebarItemType[]` | —       | Top icon items.                                    |
+| `toolItems`        | `SidebarItemType[]` | `[]`    | Tool icons after a spacer.                         |
+| `bottomItems`      | `SidebarItemType[]` | `[]`    | Bottom icons.                                      |
+| `onToggleCollapse` | `() => void`        | —       | Click handler for the toggle button in the footer. |
+| `onChatClick`      | `() => void`        | —       | Click handler for the chat button.                 |
+| `showChat`         | `boolean`           | `true`  | Render the chat button.                            |
+| `chatBadge`        | `boolean`           | `false` | Show the unread dot.                               |
 
 ### `<SidebarContent>`
 
@@ -241,7 +250,7 @@ type SidebarItemType = {
   multiLine?: boolean;
   isPinned?: boolean;
   showBadge?: boolean;
-  reverse?: boolean;        // reserved for legacy reversed-layout items
+  reverse?: boolean; // reserved for legacy reversed-layout items
   isActive?: SidebarLinkActiveCheck;
   children?: SidebarItemType[];
   privileges?: string[];
@@ -260,6 +269,7 @@ interface SidebarLinkProps {
   isActive?: SidebarLinkActiveCheck;
   onClick?: SidebarLinkClickHandler;
   dataId?: string;
+  "aria-label"?: string;
   children: ReactNode;
 }
 
@@ -278,8 +288,8 @@ type SidebarLinkClickHandler = (event?: React.MouseEvent<HTMLElement>) => void;
 Supply your router's link via the `linkComponent` prop on `SidebarProvider`. The component receives `to`, `exact`, `external`, `target`, `className`, `activeClassName`, `isActive`, `onClick`, `dataId`, and renders children.
 
 ```tsx
-import { NavLink } from 'react-router-dom';
-import type { SidebarLinkProps } from '@xsolla/xui-b2b-sidebar';
+import { NavLink } from "react-router-dom";
+import type { SidebarLinkProps } from "@xsolla/xui-b2b-sidebar";
 
 const RouterLink: React.FC<SidebarLinkProps> = ({
   to,
@@ -291,9 +301,11 @@ const RouterLink: React.FC<SidebarLinkProps> = ({
   dataId,
 }) => (
   <NavLink
-    to={to ?? '#'}
+    to={to ?? "#"}
     end={exact}
-    className={({ isActive }) => [className, isActive && activeClassName].filter(Boolean).join(' ')}
+    className={({ isActive }) =>
+      [className, isActive && activeClassName].filter(Boolean).join(" ")
+    }
     data-id={dataId}
     onClick={onClick}
   >
@@ -311,13 +323,17 @@ const RouterLink: React.FC<SidebarLinkProps> = ({
 Pass `matchPaths` to `SidebarMenuCollapsible`. When the current `pathname` starts with any of the listed prefixes, the section auto-expands. Only one collapsible can be open at a time, so navigating between sections collapses the others.
 
 ```tsx
-import { Wallet } from '@xsolla/xui-icons-base';
-import { SidebarMenuCollapsible, SidebarMenuSub, SidebarMenuItem } from '@xsolla/xui-b2b-sidebar';
+import { Wallet } from "@xsolla/xui-icons-base";
+import {
+  SidebarMenuCollapsible,
+  SidebarMenuSub,
+  SidebarMenuItem,
+} from "@xsolla/xui-b2b-sidebar";
 
 <SidebarMenuCollapsible
   icon={<Wallet size={18} variant="line" aria-hidden />}
   label="Finance"
-  matchPaths={['/finance', '/finance/payouts', '/finance/reports']}
+  matchPaths={["/finance", "/finance/payouts", "/finance/reports"]}
 >
   <SidebarMenuSub>
     <SidebarMenuItem to="/finance/payouts" label="Payouts" isNested />
@@ -329,8 +345,8 @@ import { SidebarMenuCollapsible, SidebarMenuSub, SidebarMenuItem } from '@xsolla
 ### Item flags
 
 ```tsx
-import { Pin, Graph, Layer } from '@xsolla/xui-icons-base';
-import { SidebarMenuItem } from '@xsolla/xui-b2b-sidebar';
+import { Pin, Graph, Layer } from "@xsolla/xui-icons-base";
+import { SidebarMenuItem } from "@xsolla/xui-b2b-sidebar";
 
 <>
   <SidebarMenuItem
@@ -359,20 +375,24 @@ import { SidebarMenuItem } from '@xsolla/xui-b2b-sidebar';
 
 ### Collapsed icon strip
 
-Because the collapsed layout is fundamentally different (icons only, hover popovers), pass icon-strip items separately as `collapsedItems`, `collapsedToolItems` (rendered after a spacer in the main scroll area), and `collapsedBottomItems` (rendered above the chat/toggle footer). Items with `children` open a hover popover listing the children; items without children open a single-link popover.
+Because the collapsed layout is fundamentally different (icons only, hover popovers), pass icon-strip items separately as `collapsedItems`, `collapsedToolItems` (rendered after a spacer in the main scroll area), and `collapsedBottomItems` (rendered above the chat/toggle footer). Items with `children` open a hover popover listing the children; items without children navigate directly on click (the icon is rendered as a link), and show a label tooltip on hover for discoverability.
 
 ```tsx
-import { Home, Wallet, Settings } from '@xsolla/xui-icons-base';
-import { Sidebar, type SidebarItemType } from '@xsolla/xui-b2b-sidebar';
+import { Home, Wallet, Settings } from "@xsolla/xui-icons-base";
+import { Sidebar, type SidebarItemType } from "@xsolla/xui-b2b-sidebar";
 
 const mainNavItems: SidebarItemType[] = [
-  { to: '/dashboard', label: 'Dashboard', icon: <Home size={18} variant="line" aria-hidden /> },
   {
-    label: 'Finance',
+    to: "/dashboard",
+    label: "Dashboard",
+    icon: <Home size={18} variant="line" aria-hidden />,
+  },
+  {
+    label: "Finance",
     icon: <Wallet size={18} variant="line" aria-hidden />,
     children: [
-      { to: '/finance/payouts', label: 'Payouts' },
-      { to: '/finance/reports', label: 'Reports' },
+      { to: "/finance/payouts", label: "Payouts" },
+      { to: "/finance/reports", label: "Reports" },
     ],
   },
 ];
@@ -380,7 +400,11 @@ const mainNavItems: SidebarItemType[] = [
 <Sidebar
   collapsedItems={mainNavItems}
   collapsedBottomItems={[
-    { to: '/settings', label: 'Settings', icon: <Settings size={18} aria-hidden /> },
+    {
+      to: "/settings",
+      label: "Settings",
+      icon: <Settings size={18} aria-hidden />,
+    },
   ]}
   onChatClick={() => openSupportChat()}
   chatBadge={hasUnreadMessages}
@@ -394,7 +418,7 @@ const mainNavItems: SidebarItemType[] = [
 - The root sidebar is `role="navigation"` with `aria-label="Sidebar navigation"`. The expanded and collapsed panes are toggled via `aria-hidden` so only one is announced at a time.
 - `SidebarTrigger` and the collapsed-mode toggle have `aria-pressed` and a context-aware `aria-label` (`"Expand sidebar"` / `"Collapse sidebar"`).
 - Each `SidebarMenuCollapsible` header is a `<button>` with `aria-expanded` and `aria-controls` linking to its region.
-- Collapsed icon items expose `aria-haspopup="menu"` when they have children; popovers are keyboard-reachable (focus opens, blur closes after 150ms; Escape closes immediately).
+- Collapsed icon items with children expose `aria-haspopup="menu"`; their popovers are keyboard-reachable (focus opens, blur closes after 150ms, Escape closes immediately). Leaf items (no children) render as native links and navigate on click or Enter.
 - Truncated labels (`hasTooltip`) fall back to a Tooltip with the full text.
 
 ## Behaviour

package/native/index.d.mts

@@ -16,7 +16,10 @@ interface SidebarLinkProps {
     isActive?: SidebarLinkActiveCheck;
     onClick?: SidebarLinkClickHandler;
     dataId?: string;
+    "aria-label"?: string;
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 interface SidebarContextValue {
     collapsed: boolean;
@@ -32,6 +35,8 @@ interface SidebarProviderProps {
     pathname?: string;
     linkComponent?: React.ComponentType<SidebarLinkProps>;
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarProvider: React.FC<SidebarProviderProps>;
 declare const useSidebar: () => SidebarContextValue;
@@ -104,6 +109,8 @@ interface SidebarProps {
     /** Whether the chat button shows a notification badge */
     chatBadge?: boolean;
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const Sidebar: React.FC<SidebarProps>;
 
@@ -123,6 +130,8 @@ interface SidebarGroupProps {
     /** Docks this group to the bottom of the expanded sidebar (e.g. Settings, Billing). */
     pinnedToBottom?: boolean;
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarGroup: React.FC<SidebarGroupProps>;
 
@@ -153,6 +162,8 @@ interface SidebarMenuItemProps {
     extra?: ReactNode;
     /** Whether this item is inside a SidebarMenuSub (parent collapsible sets nested styling) */
     isNested?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarMenuItem: React.FC<SidebarMenuItemProps>;
 
@@ -163,6 +174,8 @@ interface SidebarMenuCollapsibleProps {
     /** Route prefixes that should auto-expand this collapsible */
     matchPaths?: string[];
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps>;
 
@@ -178,6 +191,8 @@ declare const SidebarMenuSub: React.FC<{
 interface SidebarChatButtonProps {
     onClick?: () => void;
     badge?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarChatButton: React.FC<SidebarChatButtonProps>;
 
@@ -189,6 +204,8 @@ interface SidebarCollapsedProps {
     onChatClick?: () => void;
     showChat?: boolean;
     chatBadge?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarCollapsed: React.FC<SidebarCollapsedProps>;
 
@@ -210,6 +227,8 @@ interface SidebarPinnedListProps {
     onReorder?: (fromKey: string, toKey: string) => void;
     /** Render 8px top/bottom spacers when items are present. Default true. */
     spacers?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 /**
  * Renders the pinned shortcuts list with pointer-event-based drag-and-drop

package/native/index.d.ts

@@ -16,7 +16,10 @@ interface SidebarLinkProps {
     isActive?: SidebarLinkActiveCheck;
     onClick?: SidebarLinkClickHandler;
     dataId?: string;
+    "aria-label"?: string;
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 interface SidebarContextValue {
     collapsed: boolean;
@@ -32,6 +35,8 @@ interface SidebarProviderProps {
     pathname?: string;
     linkComponent?: React.ComponentType<SidebarLinkProps>;
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarProvider: React.FC<SidebarProviderProps>;
 declare const useSidebar: () => SidebarContextValue;
@@ -104,6 +109,8 @@ interface SidebarProps {
     /** Whether the chat button shows a notification badge */
     chatBadge?: boolean;
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const Sidebar: React.FC<SidebarProps>;
 
@@ -123,6 +130,8 @@ interface SidebarGroupProps {
     /** Docks this group to the bottom of the expanded sidebar (e.g. Settings, Billing). */
     pinnedToBottom?: boolean;
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarGroup: React.FC<SidebarGroupProps>;
 
@@ -153,6 +162,8 @@ interface SidebarMenuItemProps {
     extra?: ReactNode;
     /** Whether this item is inside a SidebarMenuSub (parent collapsible sets nested styling) */
     isNested?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarMenuItem: React.FC<SidebarMenuItemProps>;
 
@@ -163,6 +174,8 @@ interface SidebarMenuCollapsibleProps {
     /** Route prefixes that should auto-expand this collapsible */
     matchPaths?: string[];
     children: ReactNode;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps>;
 
@@ -178,6 +191,8 @@ declare const SidebarMenuSub: React.FC<{
 interface SidebarChatButtonProps {
     onClick?: () => void;
     badge?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarChatButton: React.FC<SidebarChatButtonProps>;
 
@@ -189,6 +204,8 @@ interface SidebarCollapsedProps {
     onChatClick?: () => void;
     showChat?: boolean;
     chatBadge?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const SidebarCollapsed: React.FC<SidebarCollapsedProps>;
 
@@ -210,6 +227,8 @@ interface SidebarPinnedListProps {
     onReorder?: (fromKey: string, toKey: string) => void;
     /** Render 8px top/bottom spacers when items are present. Default true. */
     spacers?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 /**
  * Renders the pinned shortcuts list with pointer-event-based drag-and-drop

package/native/index.js

@@ -62,7 +62,9 @@ var DefaultLink = ({
   className,
   children,
   dataId,
-  onClick
+  testID,
+  onClick,
+  "aria-label": ariaLabel
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "a",
   {
@@ -71,6 +73,8 @@ var DefaultLink = ({
     target: external ? target ?? "_blank" : target ?? void 0,
     rel: external ? "noopener noreferrer" : void 0,
     "data-id": dataId,
+    "data-testid": testID,
+    "aria-label": ariaLabel,
     onClick,
     children
   }
@@ -420,6 +424,62 @@ var SingleLinkWrap = import_styled_components.default.div`
     text-decoration: none;
   }
 `;
+var CollapsedIconLinkWrap = import_styled_components.default.div`
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+
+  & > a,
+  & > * {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: ${(p) => p.$radius}px;
+    background: ${(p) => p.$active ? p.$activeBg : "transparent"};
+    color: ${(p) => p.$active ? p.$hoverColor : p.$color};
+    cursor: pointer;
+    padding: 0;
+    font: inherit;
+    text-decoration: none;
+    transition:
+      background-color 0.15s ease-in-out,
+      color 0.15s ease-in-out;
+
+    ${(p) => p.$active && `
+      outline: 1px solid ${p.$activeOutline};
+      outline-offset: -1px;
+    `}
+  }
+
+  & > a:hover,
+  & > *:hover {
+    background-color: ${(p) => p.$hoverBg};
+    color: ${(p) => p.$hoverColor};
+  }
+
+  & > a:focus-visible,
+  & > *:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: -${(p) => p.$focusOutlineWidth}px;
+  }
+
+  & > a > span,
+  & > * > span {
+    display: flex;
+    width: ${(p) => p.$iconSize}px;
+    height: ${(p) => p.$iconSize}px;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: ${(p) => p.$iconSize}px;
+      height: ${(p) => p.$iconSize}px;
+    }
+  }
+`;
 var isChildActive = (item, pathname) => {
   if (!item.children || !pathname) {
     return false;
@@ -434,6 +494,7 @@ var isChildActive = (item, pathname) => {
 };
 var CollapsedIconItem = ({ item, onPopoverOpen, onPopoverClose, pathname, sizing, colors }) => {
   const ref = (0, import_react2.useRef)(null);
+  const { LinkComponent } = useSidebar();
   const hasChildren = Boolean(item.children && item.children.length > 0);
   const isActive = hasChildren && isChildActive(item, pathname);
   const openPopover = (0, import_react2.useCallback)(() => {
@@ -459,6 +520,42 @@ var CollapsedIconItem = ({ item, onPopoverOpen, onPopoverClose, pathname, sizing
   if (!item.icon) {
     return null;
   }
+  if (!hasChildren) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      CollapsedIconLinkWrap,
+      {
+        ref,
+        onMouseEnter: openPopover,
+        onMouseLeave: onPopoverClose,
+        onFocus: openPopover,
+        onBlur: onPopoverClose,
+        "data-id": item.dataId,
+        $size: sizing.itemHeight,
+        $radius: sizing.radius,
+        $iconSize: sizing.iconSize,
+        $color: colors.content.tertiary,
+        $hoverBg: colors.overlay.mono,
+        $hoverColor: colors.content.primary,
+        $activeBg: colors.overlay.mono,
+        $activeOutline: colors.border.secondary,
+        $focusOutline: colors.border.brand,
+        $focusOutlineWidth: sizing.focusOutlineWidth,
+        $active: isSimpleActive,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          LinkComponent,
+          {
+            to: item.to,
+            exact: item.exact,
+            external: item.external,
+            target: item.target,
+            dataId: item.dataId,
+            "aria-label": typeof item.label === "string" ? item.label : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: item.icon })
+          }
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     IconBtn,
     {
@@ -470,7 +567,7 @@ var CollapsedIconItem = ({ item, onPopoverOpen, onPopoverClose, pathname, sizing
       onBlur: onPopoverClose,
       onKeyDown: handleKeyDown,
       "data-id": item.dataId,
-      "aria-haspopup": hasChildren ? "menu" : "false",
+      "aria-haspopup": "menu",
       $size: sizing.itemHeight,
       $radius: sizing.radius,
       $iconSize: sizing.iconSize,