@xsolla/xui-b2b-sidebar 0.193.0 → 0.195.0

package/web/index.mjs

@@ -10,6 +10,24 @@ import {
   useState,
   useCallback
 } from "react";
+
+// src/labels.ts
+var DEFAULT_SIDEBAR_LABELS = {
+  navigation: "Sidebar navigation",
+  expandSidebar: "Expand sidebar",
+  collapseSidebar: "Collapse sidebar",
+  chat: "Chat",
+  openChat: "Open chat",
+  pin: "Pin",
+  unpin: "Unpin",
+  pinItem: "Pin item",
+  unpinItem: "Unpin item",
+  beta: "Beta",
+  pinned: "Pinned"
+};
+var resolveSidebarLabels = (overrides) => overrides ? { ...DEFAULT_SIDEBAR_LABELS, ...overrides } : DEFAULT_SIDEBAR_LABELS;
+
+// src/SidebarContext.tsx
 import { jsx } from "react/jsx-runtime";
 var DefaultLink = ({
   to,
@@ -43,13 +61,15 @@ var SidebarContext = createContext({
   LinkComponent: DefaultLink,
   expandedId: null,
   onExpandedIdChange: () => {
-  }
+  },
+  labels: DEFAULT_SIDEBAR_LABELS
 });
 var SidebarProvider = ({
   collapsed: collapsedProp,
   onCollapsedChange,
   pathname = "",
   linkComponent,
+  labels: labelsProp,
   children
 }) => {
   const [internalCollapsed, setInternalCollapsed] = useState(false);
@@ -65,6 +85,12 @@ var SidebarProvider = ({
   const onExpandedIdChange = useCallback((id) => {
     setExpandedId(id);
   }, []);
+  const labelsKey = labelsProp ? JSON.stringify(labelsProp) : "";
+  const labels = useMemo(
+    () => resolveSidebarLabels(labelsProp),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [labelsKey]
+  );
   const value = useMemo(
     () => ({
       collapsed,
@@ -72,7 +98,8 @@ var SidebarProvider = ({
       pathname,
       LinkComponent: linkComponent || DefaultLink,
       expandedId,
-      onExpandedIdChange
+      onExpandedIdChange,
+      labels
     }),
     [
       collapsed,
@@ -80,7 +107,8 @@ var SidebarProvider = ({
       pathname,
       linkComponent,
       expandedId,
-      onExpandedIdChange
+      onExpandedIdChange,
+      labels
     ]
   );
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
@@ -702,9 +730,11 @@ var SidebarCollapsed = ({
   onToggleCollapse,
   onChatClick,
   showChat = true,
-  chatBadge = false
+  chatBadge = false,
+  chatAriaLabel,
+  expandLabel
 }) => {
-  const { pathname } = useSidebar();
+  const { pathname, labels } = useSidebar();
   const { theme } = useResolvedTheme();
   const sizing = theme.sizing.sidebar();
   const colors = theme.colors;
@@ -791,7 +821,7 @@ var SidebarCollapsed = ({
             {
               onClick: onChatClick,
               type: "button",
-              "aria-label": "Open chat",
+              "aria-label": chatAriaLabel ?? labels.openChat,
               $size: sizing.itemHeight,
               $radius: sizing.radius,
               $bg: colors.control.brand.primary.bg,
@@ -816,7 +846,7 @@ var SidebarCollapsed = ({
             {
               onClick: onToggleCollapse,
               type: "button",
-              "aria-label": "Expand sidebar",
+              "aria-label": expandLabel ?? labels.expandSidebar,
               "aria-pressed": true,
               $size: sizing.itemHeight,
               $radius: sizing.radius,
@@ -902,16 +932,17 @@ var Sidebar = ({
   showChat = true,
   onChatClick,
   chatBadge = false,
+  navigationLabel,
   children
 }) => {
-  const { collapsed, onCollapsedChange } = useSidebar();
+  const { collapsed, onCollapsedChange, labels } = useSidebar();
   const { theme } = useResolvedTheme2();
   const sizing = theme.sizing.sidebar();
   return /* @__PURE__ */ jsxs3(
     Outer2,
     {
       role: "navigation",
-      "aria-label": "Sidebar navigation",
+      "aria-label": navigationLabel ?? labels.navigation,
       $expanded: sizing.widthExpanded,
       $collapsed: sizing.widthCollapsed,
       $width: collapsed ? sizing.widthCollapsed : sizing.widthExpanded,
@@ -1307,8 +1338,11 @@ var ToggleButton = styled5.button`
     height: ${(p) => p.$iconSize}px;
   }
 `;
-var SidebarTrigger = () => {
-  const { collapsed, onCollapsedChange } = useSidebar();
+var SidebarTrigger = ({
+  expandLabel,
+  collapseLabel
+}) => {
+  const { collapsed, onCollapsedChange, labels } = useSidebar();
   const { theme } = useResolvedTheme5();
   const sizing = theme.sizing.sidebar();
   return /* @__PURE__ */ jsx8(
@@ -1316,7 +1350,7 @@ var SidebarTrigger = () => {
     {
       type: "button",
       onClick: () => onCollapsedChange(!collapsed),
-      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      "aria-label": collapsed ? expandLabel ?? labels.expandSidebar : collapseLabel ?? labels.collapseSidebar,
       "aria-pressed": collapsed,
       $size: sizing.itemHeight,
       $radius: sizing.radius,
@@ -1571,13 +1605,20 @@ var SidebarMenuItem = ({
   beta,
   multiLine,
   extra,
-  isNested = false
+  isNested = false,
+  pinLabel,
+  unpinLabel,
+  pinAriaLabel,
+  unpinAriaLabel,
+  betaLabel
 }) => {
-  const { LinkComponent } = useSidebar();
+  const { LinkComponent, labels } = useSidebar();
   const { theme } = useResolvedTheme7();
   const sizing = theme.sizing.sidebar();
   const shouldTruncate = Boolean(hasTooltip) && typeof label === "string" && label.length > TOOLTIP_TRUNCATE_LENGTH;
   const displayLabel = shouldTruncate ? /* @__PURE__ */ jsx11(Tooltip, { content: label, placement: "right", size: "md", children: /* @__PURE__ */ jsx11("span", { children: `${label.slice(0, TOOLTIP_TRUNCATE_LENGTH)}\u2026` }) }) : label;
+  const pinTooltip = isPinned ? unpinLabel ?? labels.unpin : pinLabel ?? labels.pin;
+  const pinAria = isPinned ? unpinAriaLabel ?? labels.unpinItem : pinAriaLabel ?? labels.pinItem;
   return /* @__PURE__ */ jsx11(
     ItemWrapper,
     {
@@ -1629,40 +1670,32 @@ var SidebarMenuItem = ({
                 }
               )
             ] }),
-            onPinToggle && /* @__PURE__ */ jsx11(
-              Tooltip,
+            onPinToggle && /* @__PURE__ */ jsx11(Tooltip, { content: pinTooltip, placement: "top", size: "sm", children: /* @__PURE__ */ jsx11(
+              PinButton,
               {
-                content: isPinned ? "Unpin" : "Pin",
-                placement: "top",
-                size: "sm",
-                children: /* @__PURE__ */ jsx11(
-                  PinButton,
-                  {
-                    type: "button",
-                    "aria-label": isPinned ? "Unpin item" : "Pin item",
-                    "aria-pressed": Boolean(isPinned),
-                    $size: sizing.iconSize,
-                    $color: theme.colors.content.tertiary,
-                    $hoverColor: theme.colors.content.primary,
-                    $activeColor: theme.colors.content.primary,
-                    $isPinned: Boolean(isPinned),
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onPinToggle(e);
-                    },
-                    children: isPinned ? /* @__PURE__ */ jsx11(Remove, { size: 12, variant: "line" }) : /* @__PURE__ */ jsx11(Pin, { size: 12, variant: "solid" })
-                  }
-                )
+                type: "button",
+                "aria-label": pinAria,
+                "aria-pressed": Boolean(isPinned),
+                $size: sizing.iconSize,
+                $color: theme.colors.content.tertiary,
+                $hoverColor: theme.colors.content.primary,
+                $activeColor: theme.colors.content.primary,
+                $isPinned: Boolean(isPinned),
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onPinToggle(e);
+                },
+                children: isPinned ? /* @__PURE__ */ jsx11(Remove, { size: 12, variant: "line" }) : /* @__PURE__ */ jsx11(Pin, { size: 12, variant: "solid" })
               }
-            ),
+            ) }),
             beta && /* @__PURE__ */ jsx11(
               BetaTag,
               {
                 $bg: theme.colors.overlay.mono,
                 $color: theme.colors.content.tertiary,
                 $radius: sizing.radius,
-                children: "Beta"
+                children: betaLabel ?? labels.beta
               }
             ),
             external && hasExternalIcon && /* @__PURE__ */ jsx11(
@@ -1938,9 +1971,11 @@ var Badge = styled8.span`
 `;
 var SidebarChatButton = ({
   onClick,
-  badge
+  badge,
+  label
 }) => {
   const { theme } = useResolvedTheme9();
+  const { labels } = useSidebar();
   const sizing = theme.sizing.sidebar();
   return /* @__PURE__ */ jsxs7(
     ChatButton,
@@ -1957,7 +1992,7 @@ var SidebarChatButton = ({
       $focusOutlineWidth: sizing.focusOutlineWidth,
       children: [
         /* @__PURE__ */ jsx14(ChatTwoMessages2, { size: 16, variant: "line" }),
-        /* @__PURE__ */ jsx14(Typography5, { variant: "bodySmAccent", color: "inherit", children: "Chat" }),
+        /* @__PURE__ */ jsx14(Typography5, { variant: "bodySmAccent", color: "inherit", children: label ?? labels.chat }),
         badge && /* @__PURE__ */ jsx14(
           Badge,
           {
@@ -2045,7 +2080,7 @@ var SidebarPinnedList = ({
 var getPinnedCollapsedItem = (items, options = {}) => {
   if (items.length === 0) return null;
   return {
-    label: options.label ?? "Pinned",
+    label: options.label ?? DEFAULT_SIDEBAR_LABELS.pinned,
     icon: /* @__PURE__ */ jsx15(Pin2, { size: 18, variant: "solid" }),
     dataId: options.dataId ?? "sidebar-collapsed-pinned",
     children: items.map((i) => ({
@@ -2056,6 +2091,7 @@ var getPinnedCollapsedItem = (items, options = {}) => {
   };
 };
 export {
+  DEFAULT_SIDEBAR_LABELS,
   Sidebar,
   SidebarChatButton,
   SidebarCollapsed,
@@ -2070,6 +2106,7 @@ export {
   SidebarProvider,
   SidebarTrigger,
   getPinnedCollapsedItem,
+  resolveSidebarLabels,
   useSidebar
 };
 //# sourceMappingURL=index.mjs.map