@xsolla/xui-b2b-sidebar 0.193.0 → 0.195.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +170 -42
- package/native/index.d.mts +98 -2
- package/native/index.d.ts +98 -2
- package/native/index.js +82 -43
- package/native/index.js.map +1 -1
- package/native/index.mjs +80 -43
- package/native/index.mjs.map +1 -1
- package/package.json +6 -6
- package/web/index.d.mts +98 -2
- package/web/index.d.ts +98 -2
- package/web/index.js +82 -43
- package/web/index.js.map +1 -1
- package/web/index.mjs +80 -43
- package/web/index.mjs.map +1 -1
package/web/index.d.mts
CHANGED
|
@@ -1,5 +1,56 @@
|
|
|
1
1
|
import React, { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Every user-visible string the sidebar renders on its own behalf.
|
|
5
|
+
*
|
|
6
|
+
* Labels for menu items, groups and popovers come from the consumer as props,
|
|
7
|
+
* so they are already localisable. The strings collected here are the ones the
|
|
8
|
+
* component library hard-codes internally — visible text (`chat`, `beta`) and
|
|
9
|
+
* assistive-technology text (`navigation`, `expandSidebar`, `pinItem`, …).
|
|
10
|
+
*
|
|
11
|
+
* Override them once on `SidebarProvider`:
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <SidebarProvider labels={{ chat: "Chat", expandSidebar: "Ouvrir le menu" }}>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* Every override is optional — omitted keys fall back to
|
|
18
|
+
* {@link DEFAULT_SIDEBAR_LABELS}. Individual components also accept per-instance
|
|
19
|
+
* label props that take precedence over the provider value.
|
|
20
|
+
*/
|
|
21
|
+
interface SidebarLabels {
|
|
22
|
+
/** `aria-label` on the root `role="navigation"` landmark. */
|
|
23
|
+
navigation: string;
|
|
24
|
+
/** `aria-label` on the toggle when the sidebar is collapsed. */
|
|
25
|
+
expandSidebar: string;
|
|
26
|
+
/** `aria-label` on the toggle when the sidebar is expanded. */
|
|
27
|
+
collapseSidebar: string;
|
|
28
|
+
/** Visible text on the expanded-mode chat button. */
|
|
29
|
+
chat: string;
|
|
30
|
+
/** `aria-label` on the collapsed-mode icon-only chat button. */
|
|
31
|
+
openChat: string;
|
|
32
|
+
/** Pin-toggle tooltip when the item is not pinned. */
|
|
33
|
+
pin: string;
|
|
34
|
+
/** Pin-toggle tooltip when the item is pinned. */
|
|
35
|
+
unpin: string;
|
|
36
|
+
/** Pin-toggle `aria-label` when the item is not pinned. */
|
|
37
|
+
pinItem: string;
|
|
38
|
+
/** Pin-toggle `aria-label` when the item is pinned. */
|
|
39
|
+
unpinItem: string;
|
|
40
|
+
/** Visible text in the trailing "Beta" tag. */
|
|
41
|
+
beta: string;
|
|
42
|
+
/** Default label for the collapsed-mode pinned-shortcuts popover. */
|
|
43
|
+
pinned: string;
|
|
44
|
+
}
|
|
45
|
+
/** English defaults — used whenever a label is not overridden. */
|
|
46
|
+
declare const DEFAULT_SIDEBAR_LABELS: SidebarLabels;
|
|
47
|
+
/**
|
|
48
|
+
* Merge a partial override map over {@link DEFAULT_SIDEBAR_LABELS}. Returns the
|
|
49
|
+
* shared default object untouched when there is nothing to override, so the
|
|
50
|
+
* common case allocates nothing.
|
|
51
|
+
*/
|
|
52
|
+
declare const resolveSidebarLabels: (overrides?: Partial<SidebarLabels>) => SidebarLabels;
|
|
53
|
+
|
|
3
54
|
type SidebarLinkClickHandler = (event?: MouseEvent<HTMLElement>) => void;
|
|
4
55
|
type SidebarLinkActiveCheck = (match: unknown, location: {
|
|
5
56
|
pathname: string;
|
|
@@ -27,12 +78,20 @@ interface SidebarContextValue {
|
|
|
27
78
|
LinkComponent: React.ComponentType<SidebarLinkProps>;
|
|
28
79
|
expandedId: string | null;
|
|
29
80
|
onExpandedIdChange: (id: string | null) => void;
|
|
81
|
+
/** Fully-resolved label set — provider overrides merged over the defaults. */
|
|
82
|
+
labels: SidebarLabels;
|
|
30
83
|
}
|
|
31
84
|
interface SidebarProviderProps {
|
|
32
85
|
collapsed?: boolean;
|
|
33
86
|
onCollapsedChange?: (collapsed: boolean) => void;
|
|
34
87
|
pathname?: string;
|
|
35
88
|
linkComponent?: React.ComponentType<SidebarLinkProps>;
|
|
89
|
+
/**
|
|
90
|
+
* Translations for the strings the sidebar renders on its own behalf
|
|
91
|
+
* (chat button, collapse/expand toggle, pin controls, "Beta" tag, nav
|
|
92
|
+
* landmark). Partial — omitted keys keep their English default.
|
|
93
|
+
*/
|
|
94
|
+
labels?: Partial<SidebarLabels>;
|
|
36
95
|
children: ReactNode;
|
|
37
96
|
testID?: string;
|
|
38
97
|
}
|
|
@@ -91,6 +150,10 @@ type SidebarItemType = {
|
|
|
91
150
|
* </SidebarFooter>
|
|
92
151
|
* </Sidebar>
|
|
93
152
|
* </SidebarProvider>
|
|
153
|
+
*
|
|
154
|
+
* Strings the sidebar renders on its own behalf (nav landmark, chat button,
|
|
155
|
+
* collapse toggle, pin controls, "Beta" tag) are localised through the
|
|
156
|
+
* `labels` prop on `SidebarProvider`.
|
|
94
157
|
*/
|
|
95
158
|
|
|
96
159
|
interface SidebarProps {
|
|
@@ -106,6 +169,12 @@ interface SidebarProps {
|
|
|
106
169
|
onChatClick?: () => void;
|
|
107
170
|
/** Whether the chat button shows a notification badge */
|
|
108
171
|
chatBadge?: boolean;
|
|
172
|
+
/**
|
|
173
|
+
* `aria-label` for the navigation landmark. Defaults to the provider's
|
|
174
|
+
* `navigation` label; set this when a page renders more than one sidebar and
|
|
175
|
+
* each landmark needs a distinct name.
|
|
176
|
+
*/
|
|
177
|
+
navigationLabel?: string;
|
|
109
178
|
children: ReactNode;
|
|
110
179
|
testID?: string;
|
|
111
180
|
}
|
|
@@ -119,7 +188,14 @@ declare const SidebarFooter: React.FC<{
|
|
|
119
188
|
children: ReactNode;
|
|
120
189
|
}>;
|
|
121
190
|
|
|
122
|
-
|
|
191
|
+
interface SidebarTriggerProps {
|
|
192
|
+
/** `aria-label` used while collapsed. Defaults to the provider's `expandSidebar` label. */
|
|
193
|
+
expandLabel?: string;
|
|
194
|
+
/** `aria-label` used while expanded. Defaults to the provider's `collapseSidebar` label. */
|
|
195
|
+
collapseLabel?: string;
|
|
196
|
+
testID?: string;
|
|
197
|
+
}
|
|
198
|
+
declare const SidebarTrigger: React.FC<SidebarTriggerProps>;
|
|
123
199
|
|
|
124
200
|
interface SidebarGroupProps {
|
|
125
201
|
label?: string;
|
|
@@ -158,6 +234,16 @@ interface SidebarMenuItemProps {
|
|
|
158
234
|
extra?: ReactNode;
|
|
159
235
|
/** Whether this item is inside a SidebarMenuSub (parent collapsible sets nested styling) */
|
|
160
236
|
isNested?: boolean;
|
|
237
|
+
/** Pin-toggle tooltip while unpinned. Defaults to the provider's `pin` label. */
|
|
238
|
+
pinLabel?: string;
|
|
239
|
+
/** Pin-toggle tooltip while pinned. Defaults to the provider's `unpin` label. */
|
|
240
|
+
unpinLabel?: string;
|
|
241
|
+
/** Pin-toggle `aria-label` while unpinned. Defaults to the provider's `pinItem` label. */
|
|
242
|
+
pinAriaLabel?: string;
|
|
243
|
+
/** Pin-toggle `aria-label` while pinned. Defaults to the provider's `unpinItem` label. */
|
|
244
|
+
unpinAriaLabel?: string;
|
|
245
|
+
/** Text inside the trailing tag when `beta` is set. Defaults to the provider's `beta` label. */
|
|
246
|
+
betaLabel?: string;
|
|
161
247
|
testID?: string;
|
|
162
248
|
}
|
|
163
249
|
declare const SidebarMenuItem: React.FC<SidebarMenuItemProps>;
|
|
@@ -185,6 +271,8 @@ declare const SidebarMenuSub: React.FC<{
|
|
|
185
271
|
interface SidebarChatButtonProps {
|
|
186
272
|
onClick?: () => void;
|
|
187
273
|
badge?: boolean;
|
|
274
|
+
/** Visible button text. Defaults to the provider's `chat` label. */
|
|
275
|
+
label?: string;
|
|
188
276
|
testID?: string;
|
|
189
277
|
}
|
|
190
278
|
declare const SidebarChatButton: React.FC<SidebarChatButtonProps>;
|
|
@@ -197,6 +285,10 @@ interface SidebarCollapsedProps {
|
|
|
197
285
|
onChatClick?: () => void;
|
|
198
286
|
showChat?: boolean;
|
|
199
287
|
chatBadge?: boolean;
|
|
288
|
+
/** `aria-label` for the icon-only chat button. Defaults to the provider's `openChat` label. */
|
|
289
|
+
chatAriaLabel?: string;
|
|
290
|
+
/** `aria-label` for the expand toggle. Defaults to the provider's `expandSidebar` label. */
|
|
291
|
+
expandLabel?: string;
|
|
200
292
|
testID?: string;
|
|
201
293
|
}
|
|
202
294
|
declare const SidebarCollapsed: React.FC<SidebarCollapsedProps>;
|
|
@@ -234,10 +326,14 @@ declare const SidebarPinnedList: React.FC<SidebarPinnedListProps>;
|
|
|
234
326
|
* Helper for the collapsed sidebar: returns a single `SidebarItemType` whose
|
|
235
327
|
* popover lists every pinned shortcut. Spread it into `collapsedItems` at the
|
|
236
328
|
* position you want the Pin button to appear. Returns `null` when no items.
|
|
329
|
+
*
|
|
330
|
+
* This is a plain function rather than a component, so it cannot read the
|
|
331
|
+
* `SidebarProvider` labels — pass `options.label` with your translated string
|
|
332
|
+
* to localise the popover title (defaults to the English "Pinned").
|
|
237
333
|
*/
|
|
238
334
|
declare const getPinnedCollapsedItem: (items: SidebarPinnedItem[], options?: {
|
|
239
335
|
label?: string;
|
|
240
336
|
dataId?: string;
|
|
241
337
|
}) => SidebarItemType | null;
|
|
242
338
|
|
|
243
|
-
export { Sidebar, SidebarChatButton, SidebarCollapsed, type SidebarCollapsedProps, SidebarContent, SidebarFooter, SidebarGroup, type SidebarItemType, type SidebarLinkActiveCheck, type SidebarLinkClickHandler, type SidebarLinkProps, SidebarMenu, SidebarMenuCollapsible, type SidebarMenuCollapsibleProps, SidebarMenuItem, type SidebarMenuItemProps, SidebarMenuSub, type SidebarPinnedItem, SidebarPinnedList, type SidebarPinnedListProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, getPinnedCollapsedItem, useSidebar };
|
|
339
|
+
export { DEFAULT_SIDEBAR_LABELS, Sidebar, SidebarChatButton, type SidebarChatButtonProps, SidebarCollapsed, type SidebarCollapsedProps, SidebarContent, SidebarFooter, SidebarGroup, type SidebarItemType, type SidebarLabels, type SidebarLinkActiveCheck, type SidebarLinkClickHandler, type SidebarLinkProps, SidebarMenu, SidebarMenuCollapsible, type SidebarMenuCollapsibleProps, SidebarMenuItem, type SidebarMenuItemProps, SidebarMenuSub, type SidebarPinnedItem, SidebarPinnedList, type SidebarPinnedListProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, type SidebarTriggerProps, getPinnedCollapsedItem, resolveSidebarLabels, useSidebar };
|
package/web/index.d.ts
CHANGED
|
@@ -1,5 +1,56 @@
|
|
|
1
1
|
import React, { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Every user-visible string the sidebar renders on its own behalf.
|
|
5
|
+
*
|
|
6
|
+
* Labels for menu items, groups and popovers come from the consumer as props,
|
|
7
|
+
* so they are already localisable. The strings collected here are the ones the
|
|
8
|
+
* component library hard-codes internally — visible text (`chat`, `beta`) and
|
|
9
|
+
* assistive-technology text (`navigation`, `expandSidebar`, `pinItem`, …).
|
|
10
|
+
*
|
|
11
|
+
* Override them once on `SidebarProvider`:
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <SidebarProvider labels={{ chat: "Chat", expandSidebar: "Ouvrir le menu" }}>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* Every override is optional — omitted keys fall back to
|
|
18
|
+
* {@link DEFAULT_SIDEBAR_LABELS}. Individual components also accept per-instance
|
|
19
|
+
* label props that take precedence over the provider value.
|
|
20
|
+
*/
|
|
21
|
+
interface SidebarLabels {
|
|
22
|
+
/** `aria-label` on the root `role="navigation"` landmark. */
|
|
23
|
+
navigation: string;
|
|
24
|
+
/** `aria-label` on the toggle when the sidebar is collapsed. */
|
|
25
|
+
expandSidebar: string;
|
|
26
|
+
/** `aria-label` on the toggle when the sidebar is expanded. */
|
|
27
|
+
collapseSidebar: string;
|
|
28
|
+
/** Visible text on the expanded-mode chat button. */
|
|
29
|
+
chat: string;
|
|
30
|
+
/** `aria-label` on the collapsed-mode icon-only chat button. */
|
|
31
|
+
openChat: string;
|
|
32
|
+
/** Pin-toggle tooltip when the item is not pinned. */
|
|
33
|
+
pin: string;
|
|
34
|
+
/** Pin-toggle tooltip when the item is pinned. */
|
|
35
|
+
unpin: string;
|
|
36
|
+
/** Pin-toggle `aria-label` when the item is not pinned. */
|
|
37
|
+
pinItem: string;
|
|
38
|
+
/** Pin-toggle `aria-label` when the item is pinned. */
|
|
39
|
+
unpinItem: string;
|
|
40
|
+
/** Visible text in the trailing "Beta" tag. */
|
|
41
|
+
beta: string;
|
|
42
|
+
/** Default label for the collapsed-mode pinned-shortcuts popover. */
|
|
43
|
+
pinned: string;
|
|
44
|
+
}
|
|
45
|
+
/** English defaults — used whenever a label is not overridden. */
|
|
46
|
+
declare const DEFAULT_SIDEBAR_LABELS: SidebarLabels;
|
|
47
|
+
/**
|
|
48
|
+
* Merge a partial override map over {@link DEFAULT_SIDEBAR_LABELS}. Returns the
|
|
49
|
+
* shared default object untouched when there is nothing to override, so the
|
|
50
|
+
* common case allocates nothing.
|
|
51
|
+
*/
|
|
52
|
+
declare const resolveSidebarLabels: (overrides?: Partial<SidebarLabels>) => SidebarLabels;
|
|
53
|
+
|
|
3
54
|
type SidebarLinkClickHandler = (event?: MouseEvent<HTMLElement>) => void;
|
|
4
55
|
type SidebarLinkActiveCheck = (match: unknown, location: {
|
|
5
56
|
pathname: string;
|
|
@@ -27,12 +78,20 @@ interface SidebarContextValue {
|
|
|
27
78
|
LinkComponent: React.ComponentType<SidebarLinkProps>;
|
|
28
79
|
expandedId: string | null;
|
|
29
80
|
onExpandedIdChange: (id: string | null) => void;
|
|
81
|
+
/** Fully-resolved label set — provider overrides merged over the defaults. */
|
|
82
|
+
labels: SidebarLabels;
|
|
30
83
|
}
|
|
31
84
|
interface SidebarProviderProps {
|
|
32
85
|
collapsed?: boolean;
|
|
33
86
|
onCollapsedChange?: (collapsed: boolean) => void;
|
|
34
87
|
pathname?: string;
|
|
35
88
|
linkComponent?: React.ComponentType<SidebarLinkProps>;
|
|
89
|
+
/**
|
|
90
|
+
* Translations for the strings the sidebar renders on its own behalf
|
|
91
|
+
* (chat button, collapse/expand toggle, pin controls, "Beta" tag, nav
|
|
92
|
+
* landmark). Partial — omitted keys keep their English default.
|
|
93
|
+
*/
|
|
94
|
+
labels?: Partial<SidebarLabels>;
|
|
36
95
|
children: ReactNode;
|
|
37
96
|
testID?: string;
|
|
38
97
|
}
|
|
@@ -91,6 +150,10 @@ type SidebarItemType = {
|
|
|
91
150
|
* </SidebarFooter>
|
|
92
151
|
* </Sidebar>
|
|
93
152
|
* </SidebarProvider>
|
|
153
|
+
*
|
|
154
|
+
* Strings the sidebar renders on its own behalf (nav landmark, chat button,
|
|
155
|
+
* collapse toggle, pin controls, "Beta" tag) are localised through the
|
|
156
|
+
* `labels` prop on `SidebarProvider`.
|
|
94
157
|
*/
|
|
95
158
|
|
|
96
159
|
interface SidebarProps {
|
|
@@ -106,6 +169,12 @@ interface SidebarProps {
|
|
|
106
169
|
onChatClick?: () => void;
|
|
107
170
|
/** Whether the chat button shows a notification badge */
|
|
108
171
|
chatBadge?: boolean;
|
|
172
|
+
/**
|
|
173
|
+
* `aria-label` for the navigation landmark. Defaults to the provider's
|
|
174
|
+
* `navigation` label; set this when a page renders more than one sidebar and
|
|
175
|
+
* each landmark needs a distinct name.
|
|
176
|
+
*/
|
|
177
|
+
navigationLabel?: string;
|
|
109
178
|
children: ReactNode;
|
|
110
179
|
testID?: string;
|
|
111
180
|
}
|
|
@@ -119,7 +188,14 @@ declare const SidebarFooter: React.FC<{
|
|
|
119
188
|
children: ReactNode;
|
|
120
189
|
}>;
|
|
121
190
|
|
|
122
|
-
|
|
191
|
+
interface SidebarTriggerProps {
|
|
192
|
+
/** `aria-label` used while collapsed. Defaults to the provider's `expandSidebar` label. */
|
|
193
|
+
expandLabel?: string;
|
|
194
|
+
/** `aria-label` used while expanded. Defaults to the provider's `collapseSidebar` label. */
|
|
195
|
+
collapseLabel?: string;
|
|
196
|
+
testID?: string;
|
|
197
|
+
}
|
|
198
|
+
declare const SidebarTrigger: React.FC<SidebarTriggerProps>;
|
|
123
199
|
|
|
124
200
|
interface SidebarGroupProps {
|
|
125
201
|
label?: string;
|
|
@@ -158,6 +234,16 @@ interface SidebarMenuItemProps {
|
|
|
158
234
|
extra?: ReactNode;
|
|
159
235
|
/** Whether this item is inside a SidebarMenuSub (parent collapsible sets nested styling) */
|
|
160
236
|
isNested?: boolean;
|
|
237
|
+
/** Pin-toggle tooltip while unpinned. Defaults to the provider's `pin` label. */
|
|
238
|
+
pinLabel?: string;
|
|
239
|
+
/** Pin-toggle tooltip while pinned. Defaults to the provider's `unpin` label. */
|
|
240
|
+
unpinLabel?: string;
|
|
241
|
+
/** Pin-toggle `aria-label` while unpinned. Defaults to the provider's `pinItem` label. */
|
|
242
|
+
pinAriaLabel?: string;
|
|
243
|
+
/** Pin-toggle `aria-label` while pinned. Defaults to the provider's `unpinItem` label. */
|
|
244
|
+
unpinAriaLabel?: string;
|
|
245
|
+
/** Text inside the trailing tag when `beta` is set. Defaults to the provider's `beta` label. */
|
|
246
|
+
betaLabel?: string;
|
|
161
247
|
testID?: string;
|
|
162
248
|
}
|
|
163
249
|
declare const SidebarMenuItem: React.FC<SidebarMenuItemProps>;
|
|
@@ -185,6 +271,8 @@ declare const SidebarMenuSub: React.FC<{
|
|
|
185
271
|
interface SidebarChatButtonProps {
|
|
186
272
|
onClick?: () => void;
|
|
187
273
|
badge?: boolean;
|
|
274
|
+
/** Visible button text. Defaults to the provider's `chat` label. */
|
|
275
|
+
label?: string;
|
|
188
276
|
testID?: string;
|
|
189
277
|
}
|
|
190
278
|
declare const SidebarChatButton: React.FC<SidebarChatButtonProps>;
|
|
@@ -197,6 +285,10 @@ interface SidebarCollapsedProps {
|
|
|
197
285
|
onChatClick?: () => void;
|
|
198
286
|
showChat?: boolean;
|
|
199
287
|
chatBadge?: boolean;
|
|
288
|
+
/** `aria-label` for the icon-only chat button. Defaults to the provider's `openChat` label. */
|
|
289
|
+
chatAriaLabel?: string;
|
|
290
|
+
/** `aria-label` for the expand toggle. Defaults to the provider's `expandSidebar` label. */
|
|
291
|
+
expandLabel?: string;
|
|
200
292
|
testID?: string;
|
|
201
293
|
}
|
|
202
294
|
declare const SidebarCollapsed: React.FC<SidebarCollapsedProps>;
|
|
@@ -234,10 +326,14 @@ declare const SidebarPinnedList: React.FC<SidebarPinnedListProps>;
|
|
|
234
326
|
* Helper for the collapsed sidebar: returns a single `SidebarItemType` whose
|
|
235
327
|
* popover lists every pinned shortcut. Spread it into `collapsedItems` at the
|
|
236
328
|
* position you want the Pin button to appear. Returns `null` when no items.
|
|
329
|
+
*
|
|
330
|
+
* This is a plain function rather than a component, so it cannot read the
|
|
331
|
+
* `SidebarProvider` labels — pass `options.label` with your translated string
|
|
332
|
+
* to localise the popover title (defaults to the English "Pinned").
|
|
237
333
|
*/
|
|
238
334
|
declare const getPinnedCollapsedItem: (items: SidebarPinnedItem[], options?: {
|
|
239
335
|
label?: string;
|
|
240
336
|
dataId?: string;
|
|
241
337
|
}) => SidebarItemType | null;
|
|
242
338
|
|
|
243
|
-
export { Sidebar, SidebarChatButton, SidebarCollapsed, type SidebarCollapsedProps, SidebarContent, SidebarFooter, SidebarGroup, type SidebarItemType, type SidebarLinkActiveCheck, type SidebarLinkClickHandler, type SidebarLinkProps, SidebarMenu, SidebarMenuCollapsible, type SidebarMenuCollapsibleProps, SidebarMenuItem, type SidebarMenuItemProps, SidebarMenuSub, type SidebarPinnedItem, SidebarPinnedList, type SidebarPinnedListProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, getPinnedCollapsedItem, useSidebar };
|
|
339
|
+
export { DEFAULT_SIDEBAR_LABELS, Sidebar, SidebarChatButton, type SidebarChatButtonProps, SidebarCollapsed, type SidebarCollapsedProps, SidebarContent, SidebarFooter, SidebarGroup, type SidebarItemType, type SidebarLabels, type SidebarLinkActiveCheck, type SidebarLinkClickHandler, type SidebarLinkProps, SidebarMenu, SidebarMenuCollapsible, type SidebarMenuCollapsibleProps, SidebarMenuItem, type SidebarMenuItemProps, SidebarMenuSub, type SidebarPinnedItem, SidebarPinnedList, type SidebarPinnedListProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, type SidebarTriggerProps, getPinnedCollapsedItem, resolveSidebarLabels, useSidebar };
|
package/web/index.js
CHANGED
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.tsx
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
+
DEFAULT_SIDEBAR_LABELS: () => DEFAULT_SIDEBAR_LABELS,
|
|
33
34
|
Sidebar: () => Sidebar,
|
|
34
35
|
SidebarChatButton: () => SidebarChatButton,
|
|
35
36
|
SidebarCollapsed: () => SidebarCollapsed,
|
|
@@ -44,6 +45,7 @@ __export(index_exports, {
|
|
|
44
45
|
SidebarProvider: () => SidebarProvider,
|
|
45
46
|
SidebarTrigger: () => SidebarTrigger,
|
|
46
47
|
getPinnedCollapsedItem: () => getPinnedCollapsedItem,
|
|
48
|
+
resolveSidebarLabels: () => resolveSidebarLabels,
|
|
47
49
|
useSidebar: () => useSidebar
|
|
48
50
|
});
|
|
49
51
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -54,6 +56,24 @@ var import_xui_core2 = require("@xsolla/xui-core");
|
|
|
54
56
|
|
|
55
57
|
// src/SidebarContext.tsx
|
|
56
58
|
var import_react = require("react");
|
|
59
|
+
|
|
60
|
+
// src/labels.ts
|
|
61
|
+
var DEFAULT_SIDEBAR_LABELS = {
|
|
62
|
+
navigation: "Sidebar navigation",
|
|
63
|
+
expandSidebar: "Expand sidebar",
|
|
64
|
+
collapseSidebar: "Collapse sidebar",
|
|
65
|
+
chat: "Chat",
|
|
66
|
+
openChat: "Open chat",
|
|
67
|
+
pin: "Pin",
|
|
68
|
+
unpin: "Unpin",
|
|
69
|
+
pinItem: "Pin item",
|
|
70
|
+
unpinItem: "Unpin item",
|
|
71
|
+
beta: "Beta",
|
|
72
|
+
pinned: "Pinned"
|
|
73
|
+
};
|
|
74
|
+
var resolveSidebarLabels = (overrides) => overrides ? { ...DEFAULT_SIDEBAR_LABELS, ...overrides } : DEFAULT_SIDEBAR_LABELS;
|
|
75
|
+
|
|
76
|
+
// src/SidebarContext.tsx
|
|
57
77
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
58
78
|
var DefaultLink = ({
|
|
59
79
|
to,
|
|
@@ -87,13 +107,15 @@ var SidebarContext = (0, import_react.createContext)({
|
|
|
87
107
|
LinkComponent: DefaultLink,
|
|
88
108
|
expandedId: null,
|
|
89
109
|
onExpandedIdChange: () => {
|
|
90
|
-
}
|
|
110
|
+
},
|
|
111
|
+
labels: DEFAULT_SIDEBAR_LABELS
|
|
91
112
|
});
|
|
92
113
|
var SidebarProvider = ({
|
|
93
114
|
collapsed: collapsedProp,
|
|
94
115
|
onCollapsedChange,
|
|
95
116
|
pathname = "",
|
|
96
117
|
linkComponent,
|
|
118
|
+
labels: labelsProp,
|
|
97
119
|
children
|
|
98
120
|
}) => {
|
|
99
121
|
const [internalCollapsed, setInternalCollapsed] = (0, import_react.useState)(false);
|
|
@@ -109,6 +131,12 @@ var SidebarProvider = ({
|
|
|
109
131
|
const onExpandedIdChange = (0, import_react.useCallback)((id) => {
|
|
110
132
|
setExpandedId(id);
|
|
111
133
|
}, []);
|
|
134
|
+
const labelsKey = labelsProp ? JSON.stringify(labelsProp) : "";
|
|
135
|
+
const labels = (0, import_react.useMemo)(
|
|
136
|
+
() => resolveSidebarLabels(labelsProp),
|
|
137
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
138
|
+
[labelsKey]
|
|
139
|
+
);
|
|
112
140
|
const value = (0, import_react.useMemo)(
|
|
113
141
|
() => ({
|
|
114
142
|
collapsed,
|
|
@@ -116,7 +144,8 @@ var SidebarProvider = ({
|
|
|
116
144
|
pathname,
|
|
117
145
|
LinkComponent: linkComponent || DefaultLink,
|
|
118
146
|
expandedId,
|
|
119
|
-
onExpandedIdChange
|
|
147
|
+
onExpandedIdChange,
|
|
148
|
+
labels
|
|
120
149
|
}),
|
|
121
150
|
[
|
|
122
151
|
collapsed,
|
|
@@ -124,7 +153,8 @@ var SidebarProvider = ({
|
|
|
124
153
|
pathname,
|
|
125
154
|
linkComponent,
|
|
126
155
|
expandedId,
|
|
127
|
-
onExpandedIdChange
|
|
156
|
+
onExpandedIdChange,
|
|
157
|
+
labels
|
|
128
158
|
]
|
|
129
159
|
);
|
|
130
160
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarContext.Provider, { value, children });
|
|
@@ -740,9 +770,11 @@ var SidebarCollapsed = ({
|
|
|
740
770
|
onToggleCollapse,
|
|
741
771
|
onChatClick,
|
|
742
772
|
showChat = true,
|
|
743
|
-
chatBadge = false
|
|
773
|
+
chatBadge = false,
|
|
774
|
+
chatAriaLabel,
|
|
775
|
+
expandLabel
|
|
744
776
|
}) => {
|
|
745
|
-
const { pathname } = useSidebar();
|
|
777
|
+
const { pathname, labels } = useSidebar();
|
|
746
778
|
const { theme } = (0, import_xui_core.useResolvedTheme)();
|
|
747
779
|
const sizing = theme.sizing.sidebar();
|
|
748
780
|
const colors = theme.colors;
|
|
@@ -829,7 +861,7 @@ var SidebarCollapsed = ({
|
|
|
829
861
|
{
|
|
830
862
|
onClick: onChatClick,
|
|
831
863
|
type: "button",
|
|
832
|
-
"aria-label":
|
|
864
|
+
"aria-label": chatAriaLabel ?? labels.openChat,
|
|
833
865
|
$size: sizing.itemHeight,
|
|
834
866
|
$radius: sizing.radius,
|
|
835
867
|
$bg: colors.control.brand.primary.bg,
|
|
@@ -854,7 +886,7 @@ var SidebarCollapsed = ({
|
|
|
854
886
|
{
|
|
855
887
|
onClick: onToggleCollapse,
|
|
856
888
|
type: "button",
|
|
857
|
-
"aria-label":
|
|
889
|
+
"aria-label": expandLabel ?? labels.expandSidebar,
|
|
858
890
|
"aria-pressed": true,
|
|
859
891
|
$size: sizing.itemHeight,
|
|
860
892
|
$radius: sizing.radius,
|
|
@@ -940,16 +972,17 @@ var Sidebar = ({
|
|
|
940
972
|
showChat = true,
|
|
941
973
|
onChatClick,
|
|
942
974
|
chatBadge = false,
|
|
975
|
+
navigationLabel,
|
|
943
976
|
children
|
|
944
977
|
}) => {
|
|
945
|
-
const { collapsed, onCollapsedChange } = useSidebar();
|
|
978
|
+
const { collapsed, onCollapsedChange, labels } = useSidebar();
|
|
946
979
|
const { theme } = (0, import_xui_core2.useResolvedTheme)();
|
|
947
980
|
const sizing = theme.sizing.sidebar();
|
|
948
981
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
949
982
|
Outer2,
|
|
950
983
|
{
|
|
951
984
|
role: "navigation",
|
|
952
|
-
"aria-label":
|
|
985
|
+
"aria-label": navigationLabel ?? labels.navigation,
|
|
953
986
|
$expanded: sizing.widthExpanded,
|
|
954
987
|
$collapsed: sizing.widthCollapsed,
|
|
955
988
|
$width: collapsed ? sizing.widthCollapsed : sizing.widthExpanded,
|
|
@@ -1345,8 +1378,11 @@ var ToggleButton = import_styled_components5.default.button`
|
|
|
1345
1378
|
height: ${(p) => p.$iconSize}px;
|
|
1346
1379
|
}
|
|
1347
1380
|
`;
|
|
1348
|
-
var SidebarTrigger = (
|
|
1349
|
-
|
|
1381
|
+
var SidebarTrigger = ({
|
|
1382
|
+
expandLabel,
|
|
1383
|
+
collapseLabel
|
|
1384
|
+
}) => {
|
|
1385
|
+
const { collapsed, onCollapsedChange, labels } = useSidebar();
|
|
1350
1386
|
const { theme } = (0, import_xui_core5.useResolvedTheme)();
|
|
1351
1387
|
const sizing = theme.sizing.sidebar();
|
|
1352
1388
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
@@ -1354,7 +1390,7 @@ var SidebarTrigger = () => {
|
|
|
1354
1390
|
{
|
|
1355
1391
|
type: "button",
|
|
1356
1392
|
onClick: () => onCollapsedChange(!collapsed),
|
|
1357
|
-
"aria-label": collapsed ?
|
|
1393
|
+
"aria-label": collapsed ? expandLabel ?? labels.expandSidebar : collapseLabel ?? labels.collapseSidebar,
|
|
1358
1394
|
"aria-pressed": collapsed,
|
|
1359
1395
|
$size: sizing.itemHeight,
|
|
1360
1396
|
$radius: sizing.radius,
|
|
@@ -1609,13 +1645,20 @@ var SidebarMenuItem = ({
|
|
|
1609
1645
|
beta,
|
|
1610
1646
|
multiLine,
|
|
1611
1647
|
extra,
|
|
1612
|
-
isNested = false
|
|
1648
|
+
isNested = false,
|
|
1649
|
+
pinLabel,
|
|
1650
|
+
unpinLabel,
|
|
1651
|
+
pinAriaLabel,
|
|
1652
|
+
unpinAriaLabel,
|
|
1653
|
+
betaLabel
|
|
1613
1654
|
}) => {
|
|
1614
|
-
const { LinkComponent } = useSidebar();
|
|
1655
|
+
const { LinkComponent, labels } = useSidebar();
|
|
1615
1656
|
const { theme } = (0, import_xui_core7.useResolvedTheme)();
|
|
1616
1657
|
const sizing = theme.sizing.sidebar();
|
|
1617
1658
|
const shouldTruncate = Boolean(hasTooltip) && typeof label === "string" && label.length > TOOLTIP_TRUNCATE_LENGTH;
|
|
1618
1659
|
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;
|
|
1660
|
+
const pinTooltip = isPinned ? unpinLabel ?? labels.unpin : pinLabel ?? labels.pin;
|
|
1661
|
+
const pinAria = isPinned ? unpinAriaLabel ?? labels.unpinItem : pinAriaLabel ?? labels.pinItem;
|
|
1619
1662
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1620
1663
|
ItemWrapper,
|
|
1621
1664
|
{
|
|
@@ -1667,40 +1710,32 @@ var SidebarMenuItem = ({
|
|
|
1667
1710
|
}
|
|
1668
1711
|
)
|
|
1669
1712
|
] }),
|
|
1670
|
-
onPinToggle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1671
|
-
|
|
1713
|
+
onPinToggle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_xui_tooltip.Tooltip, { content: pinTooltip, placement: "top", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1714
|
+
PinButton,
|
|
1672
1715
|
{
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
onClick: (e) => {
|
|
1688
|
-
e.preventDefault();
|
|
1689
|
-
e.stopPropagation();
|
|
1690
|
-
onPinToggle(e);
|
|
1691
|
-
},
|
|
1692
|
-
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" })
|
|
1693
|
-
}
|
|
1694
|
-
)
|
|
1716
|
+
type: "button",
|
|
1717
|
+
"aria-label": pinAria,
|
|
1718
|
+
"aria-pressed": Boolean(isPinned),
|
|
1719
|
+
$size: sizing.iconSize,
|
|
1720
|
+
$color: theme.colors.content.tertiary,
|
|
1721
|
+
$hoverColor: theme.colors.content.primary,
|
|
1722
|
+
$activeColor: theme.colors.content.primary,
|
|
1723
|
+
$isPinned: Boolean(isPinned),
|
|
1724
|
+
onClick: (e) => {
|
|
1725
|
+
e.preventDefault();
|
|
1726
|
+
e.stopPropagation();
|
|
1727
|
+
onPinToggle(e);
|
|
1728
|
+
},
|
|
1729
|
+
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" })
|
|
1695
1730
|
}
|
|
1696
|
-
),
|
|
1731
|
+
) }),
|
|
1697
1732
|
beta && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1698
1733
|
BetaTag,
|
|
1699
1734
|
{
|
|
1700
1735
|
$bg: theme.colors.overlay.mono,
|
|
1701
1736
|
$color: theme.colors.content.tertiary,
|
|
1702
1737
|
$radius: sizing.radius,
|
|
1703
|
-
children:
|
|
1738
|
+
children: betaLabel ?? labels.beta
|
|
1704
1739
|
}
|
|
1705
1740
|
),
|
|
1706
1741
|
external && hasExternalIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
@@ -1976,9 +2011,11 @@ var Badge = import_styled_components8.default.span`
|
|
|
1976
2011
|
`;
|
|
1977
2012
|
var SidebarChatButton = ({
|
|
1978
2013
|
onClick,
|
|
1979
|
-
badge
|
|
2014
|
+
badge,
|
|
2015
|
+
label
|
|
1980
2016
|
}) => {
|
|
1981
2017
|
const { theme } = (0, import_xui_core9.useResolvedTheme)();
|
|
2018
|
+
const { labels } = useSidebar();
|
|
1982
2019
|
const sizing = theme.sizing.sidebar();
|
|
1983
2020
|
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1984
2021
|
ChatButton,
|
|
@@ -1995,7 +2032,7 @@ var SidebarChatButton = ({
|
|
|
1995
2032
|
$focusOutlineWidth: sizing.focusOutlineWidth,
|
|
1996
2033
|
children: [
|
|
1997
2034
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_xui_icons_base4.ChatTwoMessages, { size: 16, variant: "line" }),
|
|
1998
|
-
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_xui_typography5.Typography, { variant: "bodySmAccent", color: "inherit", children:
|
|
2035
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_xui_typography5.Typography, { variant: "bodySmAccent", color: "inherit", children: label ?? labels.chat }),
|
|
1999
2036
|
badge && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2000
2037
|
Badge,
|
|
2001
2038
|
{
|
|
@@ -2083,7 +2120,7 @@ var SidebarPinnedList = ({
|
|
|
2083
2120
|
var getPinnedCollapsedItem = (items, options = {}) => {
|
|
2084
2121
|
if (items.length === 0) return null;
|
|
2085
2122
|
return {
|
|
2086
|
-
label: options.label ??
|
|
2123
|
+
label: options.label ?? DEFAULT_SIDEBAR_LABELS.pinned,
|
|
2087
2124
|
icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_xui_icons_base5.Pin, { size: 18, variant: "solid" }),
|
|
2088
2125
|
dataId: options.dataId ?? "sidebar-collapsed-pinned",
|
|
2089
2126
|
children: items.map((i) => ({
|
|
@@ -2095,6 +2132,7 @@ var getPinnedCollapsedItem = (items, options = {}) => {
|
|
|
2095
2132
|
};
|
|
2096
2133
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2097
2134
|
0 && (module.exports = {
|
|
2135
|
+
DEFAULT_SIDEBAR_LABELS,
|
|
2098
2136
|
Sidebar,
|
|
2099
2137
|
SidebarChatButton,
|
|
2100
2138
|
SidebarCollapsed,
|
|
@@ -2109,6 +2147,7 @@ var getPinnedCollapsedItem = (items, options = {}) => {
|
|
|
2109
2147
|
SidebarProvider,
|
|
2110
2148
|
SidebarTrigger,
|
|
2111
2149
|
getPinnedCollapsedItem,
|
|
2150
|
+
resolveSidebarLabels,
|
|
2112
2151
|
useSidebar
|
|
2113
2152
|
});
|
|
2114
2153
|
//# sourceMappingURL=index.js.map
|