@xsolla/xui-b2b-sidebar 0.158.0 → 0.159.0

package/native/index.mjs

@@ -18,7 +18,9 @@ var DefaultLink = ({
   className,
   children,
   dataId,
-  onClick
+  testID,
+  onClick,
+  "aria-label": ariaLabel
 }) => /* @__PURE__ */ jsx(
   "a",
   {
@@ -27,6 +29,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
   }
@@ -382,6 +386,62 @@ var SingleLinkWrap = styled.div`
     text-decoration: none;
   }
 `;
+var CollapsedIconLinkWrap = styled.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;
@@ -396,6 +456,7 @@ var isChildActive = (item, pathname) => {
 };
 var CollapsedIconItem = ({ item, onPopoverOpen, onPopoverClose, pathname, sizing, colors }) => {
   const ref = useRef(null);
+  const { LinkComponent } = useSidebar();
   const hasChildren = Boolean(item.children && item.children.length > 0);
   const isActive = hasChildren && isChildActive(item, pathname);
   const openPopover = useCallback2(() => {
@@ -421,6 +482,42 @@ var CollapsedIconItem = ({ item, onPopoverOpen, onPopoverClose, pathname, sizing
   if (!item.icon) {
     return null;
   }
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsx3(
+      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__ */ jsx3(
+          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__ */ jsx3("span", { children: item.icon })
+          }
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ jsx3(
     IconBtn,
     {
@@ -432,7 +529,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,