@xsolla/xui-b2b-sidebar 0.158.0 → 0.159.0

package/web/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/web/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/web/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,