@xsolla/xui-b2b-sidebar 0.193.0 → 0.195.0

package/native/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  DEFAULT_SIDEBAR_LABELS: () => DEFAULT_SIDEBAR_LABELS,
   Sidebar: () => Sidebar,
   SidebarChatButton: () => SidebarChatButton,
   SidebarCollapsed: () => SidebarCollapsed,
@@ -44,6 +45,7 @@ __export(index_exports, {
   SidebarProvider: () => SidebarProvider,
   SidebarTrigger: () => SidebarTrigger,
   getPinnedCollapsedItem: () => getPinnedCollapsedItem,
+  resolveSidebarLabels: () => resolveSidebarLabels,
   useSidebar: () => useSidebar
 });
 module.exports = __toCommonJS(index_exports);
@@ -54,6 +56,24 @@ var import_xui_core2 = require("@xsolla/xui-core");
 
 // src/SidebarContext.tsx
 var import_react = require("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
 var import_jsx_runtime = require("react/jsx-runtime");
 var DefaultLink = ({
   to,
@@ -87,13 +107,15 @@ var SidebarContext = (0, import_react.createContext)({
   LinkComponent: DefaultLink,
   expandedId: null,
   onExpandedIdChange: () => {
-  }
+  },
+  labels: DEFAULT_SIDEBAR_LABELS
 });
 var SidebarProvider = ({
   collapsed: collapsedProp,
   onCollapsedChange,
   pathname = "",
   linkComponent,
+  labels: labelsProp,
   children
 }) => {
   const [internalCollapsed, setInternalCollapsed] = (0, import_react.useState)(false);
@@ -109,6 +131,12 @@ var SidebarProvider = ({
   const onExpandedIdChange = (0, import_react.useCallback)((id) => {
     setExpandedId(id);
   }, []);
+  const labelsKey = labelsProp ? JSON.stringify(labelsProp) : "";
+  const labels = (0, import_react.useMemo)(
+    () => resolveSidebarLabels(labelsProp),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [labelsKey]
+  );
   const value = (0, import_react.useMemo)(
     () => ({
       collapsed,
@@ -116,7 +144,8 @@ var SidebarProvider = ({
       pathname,
       LinkComponent: linkComponent || DefaultLink,
       expandedId,
-      onExpandedIdChange
+      onExpandedIdChange,
+      labels
     }),
     [
       collapsed,
@@ -124,7 +153,8 @@ var SidebarProvider = ({
       pathname,
       linkComponent,
       expandedId,
-      onExpandedIdChange
+      onExpandedIdChange,
+      labels
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarContext.Provider, { value, children });
@@ -740,9 +770,11 @@ var SidebarCollapsed = ({
   onToggleCollapse,
   onChatClick,
   showChat = true,
-  chatBadge = false
+  chatBadge = false,
+  chatAriaLabel,
+  expandLabel
 }) => {
-  const { pathname } = useSidebar();
+  const { pathname, labels } = useSidebar();
   const { theme } = (0, import_xui_core.useResolvedTheme)();
   const sizing = theme.sizing.sidebar();
   const colors = theme.colors;
@@ -829,7 +861,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,
@@ -854,7 +886,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,
@@ -940,16 +972,17 @@ var Sidebar = ({
   showChat = true,
   onChatClick,
   chatBadge = false,
+  navigationLabel,
   children
 }) => {
-  const { collapsed, onCollapsedChange } = useSidebar();
+  const { collapsed, onCollapsedChange, labels } = useSidebar();
   const { theme } = (0, import_xui_core2.useResolvedTheme)();
   const sizing = theme.sizing.sidebar();
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Outer2,
     {
       role: "navigation",
-      "aria-label": "Sidebar navigation",
+      "aria-label": navigationLabel ?? labels.navigation,
       $expanded: sizing.widthExpanded,
       $collapsed: sizing.widthCollapsed,
       $width: collapsed ? sizing.widthCollapsed : sizing.widthExpanded,
@@ -1268,8 +1301,11 @@ var ToggleButton = import_styled_components4.default.button`
     height: ${(p) => p.$iconSize}px;
   }
 `;
-var SidebarTrigger = () => {
-  const { collapsed, onCollapsedChange } = useSidebar();
+var SidebarTrigger = ({
+  expandLabel,
+  collapseLabel
+}) => {
+  const { collapsed, onCollapsedChange, labels } = useSidebar();
   const { theme } = (0, import_xui_core5.useResolvedTheme)();
   const sizing = theme.sizing.sidebar();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1277,7 +1313,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,
@@ -1532,13 +1568,20 @@ var SidebarMenuItem = ({
   beta,
   multiLine,
   extra,
-  isNested = false
+  isNested = false,
+  pinLabel,
+  unpinLabel,
+  pinAriaLabel,
+  unpinAriaLabel,
+  betaLabel
 }) => {
-  const { LinkComponent } = useSidebar();
+  const { LinkComponent, labels } = useSidebar();
   const { theme } = (0, import_xui_core7.useResolvedTheme)();
   const sizing = theme.sizing.sidebar();
   const shouldTruncate = Boolean(hasTooltip) && typeof label === "string" && label.length > TOOLTIP_TRUNCATE_LENGTH;
   const displayLabel = shouldTruncate ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_tooltip.Tooltip, { content: label, placement: "right", size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(
     ItemWrapper,
     {
@@ -1590,40 +1633,32 @@ var SidebarMenuItem = ({
                 }
               )
             ] }),
-            onPinToggle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              import_xui_tooltip.Tooltip,
+            onPinToggle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_tooltip.Tooltip, { content: pinTooltip, placement: "top", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              PinButton,
               {
-                content: isPinned ? "Unpin" : "Pin",
-                placement: "top",
-                size: "sm",
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  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__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.Remove, { size: 12, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.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__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.Remove, { size: 12, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_icons_base2.Pin, { size: 12, variant: "solid" })
               }
-            ),
+            ) }),
             beta && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               BetaTag,
               {
                 $bg: theme.colors.overlay.mono,
                 $color: theme.colors.content.tertiary,
                 $radius: sizing.radius,
-                children: "Beta"
+                children: betaLabel ?? labels.beta
               }
             ),
             external && hasExternalIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -1899,9 +1934,11 @@ var Badge = import_styled_components7.default.span`
 `;
 var SidebarChatButton = ({
   onClick,
-  badge
+  badge,
+  label
 }) => {
   const { theme } = (0, import_xui_core9.useResolvedTheme)();
+  const { labels } = useSidebar();
   const sizing = theme.sizing.sidebar();
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     ChatButton,
@@ -1918,7 +1955,7 @@ var SidebarChatButton = ({
       $focusOutlineWidth: sizing.focusOutlineWidth,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_xui_icons_base4.ChatTwoMessages, { size: 16, variant: "line" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_xui_typography5.Typography, { variant: "bodySmAccent", color: "inherit", children: "Chat" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_xui_typography5.Typography, { variant: "bodySmAccent", color: "inherit", children: label ?? labels.chat }),
         badge && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Badge,
           {
@@ -2006,7 +2043,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__ */ (0, import_jsx_runtime15.jsx)(import_xui_icons_base5.Pin, { size: 18, variant: "solid" }),
     dataId: options.dataId ?? "sidebar-collapsed-pinned",
     children: items.map((i) => ({
@@ -2018,6 +2055,7 @@ var getPinnedCollapsedItem = (items, options = {}) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DEFAULT_SIDEBAR_LABELS,
   Sidebar,
   SidebarChatButton,
   SidebarCollapsed,
@@ -2032,6 +2070,7 @@ var getPinnedCollapsedItem = (items, options = {}) => {
   SidebarProvider,
   SidebarTrigger,
   getPinnedCollapsedItem,
+  resolveSidebarLabels,
   useSidebar
 });
 //# sourceMappingURL=index.js.map