@setsquare/ui 0.5.0 → 0.6.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/CHANGELOG.md +58 -0
- package/README.md +37 -2
- package/dist/index.d.ts +10 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/english.d.ts +11 -0
- package/dist/lib/english.d.ts.map +1 -0
- package/dist/lib/english.js +65 -0
- package/dist/lib/english.js.map +1 -0
- package/dist/lib/labels.d.ts +38 -8
- package/dist/lib/labels.d.ts.map +1 -1
- package/dist/lib/labels.js +97 -9
- package/dist/lib/labels.js.map +1 -1
- package/dist/lib/locale.d.ts +105 -0
- package/dist/lib/locale.d.ts.map +1 -0
- package/dist/lib/locale.js +42 -0
- package/dist/lib/locale.js.map +1 -0
- package/dist/shell/dashboard-shell.d.ts +4 -1
- package/dist/shell/dashboard-shell.d.ts.map +1 -1
- package/dist/shell/dashboard-shell.js +3 -2
- package/dist/shell/dashboard-shell.js.map +1 -1
- package/dist/shell/landmarks.d.ts +33 -0
- package/dist/shell/landmarks.d.ts.map +1 -0
- package/dist/shell/landmarks.js +20 -0
- package/dist/shell/landmarks.js.map +1 -0
- package/dist/shell/right-panel.d.ts +7 -2
- package/dist/shell/right-panel.d.ts.map +1 -1
- package/dist/shell/right-panel.js +13 -7
- package/dist/shell/right-panel.js.map +1 -1
- package/dist/shell/sidebar.d.ts +10 -2
- package/dist/shell/sidebar.d.ts.map +1 -1
- package/dist/shell/sidebar.js +31 -14
- package/dist/shell/sidebar.js.map +1 -1
- package/dist/shell/site-menu.d.ts +11 -3
- package/dist/shell/site-menu.d.ts.map +1 -1
- package/dist/shell/site-menu.js +7 -1
- package/dist/shell/site-menu.js.map +1 -1
- package/dist/shell/site-nav.d.ts +4 -1
- package/dist/shell/site-nav.d.ts.map +1 -1
- package/dist/shell/site-nav.js +3 -3
- package/dist/shell/site-nav.js.map +1 -1
- package/dist/shell/site-shell.d.ts +4 -2
- package/dist/shell/site-shell.d.ts.map +1 -1
- package/dist/shell/site-shell.js +3 -2
- package/dist/shell/site-shell.js.map +1 -1
- package/dist/ui/alert.d.ts +2 -0
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +11 -9
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/breadcrumbs.d.ts +9 -1
- package/dist/ui/breadcrumbs.d.ts.map +1 -1
- package/dist/ui/breadcrumbs.js +5 -2
- package/dist/ui/breadcrumbs.js.map +1 -1
- package/dist/ui/calendar.d.ts +1 -0
- package/dist/ui/calendar.d.ts.map +1 -1
- package/dist/ui/calendar.js +7 -1
- package/dist/ui/calendar.js.map +1 -1
- package/dist/ui/checkbox.d.ts.map +1 -1
- package/dist/ui/checkbox.js +7 -7
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/code-block-parts.d.ts +30 -0
- package/dist/ui/code-block-parts.d.ts.map +1 -0
- package/dist/ui/code-block-parts.js +27 -0
- package/dist/ui/code-block-parts.js.map +1 -0
- package/dist/ui/code-block.d.ts +4 -10
- package/dist/ui/code-block.d.ts.map +1 -1
- package/dist/ui/code-block.js +4 -9
- package/dist/ui/code-block.js.map +1 -1
- package/dist/ui/combo-box.d.ts +7 -1
- package/dist/ui/combo-box.d.ts.map +1 -1
- package/dist/ui/combo-box.js +9 -2
- package/dist/ui/combo-box.js.map +1 -1
- package/dist/ui/copy-button.d.ts +7 -1
- package/dist/ui/copy-button.d.ts.map +1 -1
- package/dist/ui/copy-button.js +11 -10
- package/dist/ui/copy-button.js.map +1 -1
- package/dist/ui/date-field.d.ts +1 -0
- package/dist/ui/date-field.d.ts.map +1 -1
- package/dist/ui/date-field.js +20 -16
- package/dist/ui/date-field.js.map +1 -1
- package/dist/ui/dialog.d.ts +6 -1
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +11 -8
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/error-state.d.ts +17 -2
- package/dist/ui/error-state.d.ts.map +1 -1
- package/dist/ui/error-state.js +32 -34
- package/dist/ui/error-state.js.map +1 -1
- package/dist/ui/feature-card.d.ts +18 -3
- package/dist/ui/feature-card.d.ts.map +1 -1
- package/dist/ui/feature-card.js +18 -3
- package/dist/ui/feature-card.js.map +1 -1
- package/dist/ui/field.d.ts +28 -9
- package/dist/ui/field.d.ts.map +1 -1
- package/dist/ui/field.js +22 -10
- package/dist/ui/field.js.map +1 -1
- package/dist/ui/file-upload.d.ts +23 -5
- package/dist/ui/file-upload.d.ts.map +1 -1
- package/dist/ui/file-upload.js +54 -36
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/form.d.ts +11 -1
- package/dist/ui/form.d.ts.map +1 -1
- package/dist/ui/form.js +7 -4
- package/dist/ui/form.js.map +1 -1
- package/dist/ui/number-field.d.ts.map +1 -1
- package/dist/ui/number-field.js +5 -3
- package/dist/ui/number-field.js.map +1 -1
- package/dist/ui/pagination.d.ts +11 -3
- package/dist/ui/pagination.d.ts.map +1 -1
- package/dist/ui/pagination.js +30 -23
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/radio-group.d.ts.map +1 -1
- package/dist/ui/radio-group.js +4 -4
- package/dist/ui/radio-group.js.map +1 -1
- package/dist/ui/search.d.ts +3 -0
- package/dist/ui/search.d.ts.map +1 -1
- package/dist/ui/search.js +11 -10
- package/dist/ui/search.js.map +1 -1
- package/dist/ui/select.d.ts +7 -1
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +7 -3
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/selection-bar.d.ts +17 -4
- package/dist/ui/selection-bar.d.ts.map +1 -1
- package/dist/ui/selection-bar.js +15 -11
- package/dist/ui/selection-bar.js.map +1 -1
- package/dist/ui/sheet.d.ts +1 -0
- package/dist/ui/sheet.d.ts.map +1 -1
- package/dist/ui/sheet.js +4 -1
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/slider.d.ts +9 -2
- package/dist/ui/slider.d.ts.map +1 -1
- package/dist/ui/slider.js +13 -5
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/tabs.d.ts +1 -0
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +13 -12
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/text-field.d.ts.map +1 -1
- package/dist/ui/text-field.js +7 -3
- package/dist/ui/text-field.js.map +1 -1
- package/dist/ui/theme-switcher.d.ts +1 -0
- package/dist/ui/theme-switcher.d.ts.map +1 -1
- package/dist/ui/theme-switcher.js +7 -7
- package/dist/ui/theme-switcher.js.map +1 -1
- package/dist/ui/toast.d.ts +1 -0
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +4 -1
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/tree.d.ts.map +1 -1
- package/dist/ui/tree.js +5 -5
- package/dist/ui/tree.js.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type LabelValues } from './labels.js';
|
|
3
|
+
import type { ShellLabels, SiteNavLabels } from '../shell/landmarks.js';
|
|
4
|
+
import type { RightPanelLabels } from '../shell/right-panel.js';
|
|
5
|
+
import type { SidebarLabels, SidebarTriggerLabels } from '../shell/sidebar.js';
|
|
6
|
+
import type { SiteMenuLabels } from '../shell/site-menu.js';
|
|
7
|
+
import type { AlertLabels, OfflineAlertLabels } from '../ui/alert.js';
|
|
8
|
+
import type { BreadcrumbsLabels } from '../ui/breadcrumbs.js';
|
|
9
|
+
import type { CalendarLabels } from '../ui/calendar.js';
|
|
10
|
+
import type { CodeBlockLabels } from '../ui/code-block-parts.js';
|
|
11
|
+
import type { ComboBoxLabels } from '../ui/combo-box.js';
|
|
12
|
+
import type { CopyButtonLabels } from '../ui/copy-button.js';
|
|
13
|
+
import type { DateFieldLabels } from '../ui/date-field.js';
|
|
14
|
+
import type { ConfirmDialogLabels, DialogLabels } from '../ui/dialog.js';
|
|
15
|
+
import type { ErrorStateLabels } from '../ui/error-state.js';
|
|
16
|
+
import type { FeatureCardLabels } from '../ui/feature-card.js';
|
|
17
|
+
import type { FieldLabels } from '../ui/field.js';
|
|
18
|
+
import type { FileUploadLabels } from '../ui/file-upload.js';
|
|
19
|
+
import type { ErrorSummaryLabels } from '../ui/form.js';
|
|
20
|
+
import type { PaginationLabels } from '../ui/pagination.js';
|
|
21
|
+
import type { SearchLabels } from '../ui/search.js';
|
|
22
|
+
import type { SelectLabels } from '../ui/select.js';
|
|
23
|
+
import type { SelectionBarLabels } from '../ui/selection-bar.js';
|
|
24
|
+
import type { SheetLabels } from '../ui/sheet.js';
|
|
25
|
+
import type { RangeSliderLabels } from '../ui/slider.js';
|
|
26
|
+
import type { TabsLabels } from '../ui/tabs.js';
|
|
27
|
+
import type { ThemeSwitcherLabels } from '../ui/theme-switcher.js';
|
|
28
|
+
import type { ToasterLabels } from '../ui/toast.js';
|
|
29
|
+
/**
|
|
30
|
+
* The words every component can take app-wide, keyed by component. Each entry is that component's `labels`
|
|
31
|
+
* shape with every word optional; a word left out stays English.
|
|
32
|
+
*/
|
|
33
|
+
export interface SetsquareLabels {
|
|
34
|
+
alert?: Partial<AlertLabels>;
|
|
35
|
+
breadcrumbs?: Partial<BreadcrumbsLabels>;
|
|
36
|
+
calendar?: Partial<CalendarLabels>;
|
|
37
|
+
/** CodeBlock's own words; its copy button's are `copyButton`'s. */
|
|
38
|
+
codeBlock?: Partial<Omit<CodeBlockLabels, keyof CopyButtonLabels>>;
|
|
39
|
+
/** ComboBox, over `field`. */
|
|
40
|
+
comboBox?: Partial<Omit<ComboBoxLabels, keyof FieldLabels>>;
|
|
41
|
+
confirmDialog?: Partial<ConfirmDialogLabels>;
|
|
42
|
+
copyButton?: Partial<CopyButtonLabels>;
|
|
43
|
+
/** DateField, TimeField, DatePicker and DateRangePicker, over `field`. */
|
|
44
|
+
/** DashboardShell's skip link. */
|
|
45
|
+
dashboardShell?: Partial<ShellLabels>;
|
|
46
|
+
dateField?: Partial<Omit<DateFieldLabels, keyof FieldLabels>>;
|
|
47
|
+
dialog?: Partial<DialogLabels>;
|
|
48
|
+
errorState?: Partial<ErrorStateLabels>;
|
|
49
|
+
/** ErrorSummary, and the one Form shows. */
|
|
50
|
+
errorSummary?: Partial<ErrorSummaryLabels>;
|
|
51
|
+
featureCard?: Partial<FeatureCardLabels>;
|
|
52
|
+
/** Every field. */
|
|
53
|
+
field?: Partial<FieldLabels>;
|
|
54
|
+
fileUpload?: Partial<FileUploadLabels>;
|
|
55
|
+
offlineAlert?: Partial<OfflineAlertLabels>;
|
|
56
|
+
pagination?: Partial<PaginationLabels>;
|
|
57
|
+
rangeSlider?: Partial<RangeSliderLabels>;
|
|
58
|
+
/** RightPanel and PanelToggle. */
|
|
59
|
+
rightPanel?: Partial<RightPanelLabels>;
|
|
60
|
+
search?: Partial<SearchLabels>;
|
|
61
|
+
selectionBar?: Partial<SelectionBarLabels>;
|
|
62
|
+
/** Select, over `field`. */
|
|
63
|
+
select?: Partial<Omit<SelectLabels, keyof FieldLabels>>;
|
|
64
|
+
sheet?: Partial<SheetLabels>;
|
|
65
|
+
sidebar?: Partial<SidebarLabels>;
|
|
66
|
+
sidebarTrigger?: Partial<SidebarTriggerLabels>;
|
|
67
|
+
/** SiteMenu's button; its navigation's name is `siteNav`'s. */
|
|
68
|
+
siteMenu?: Partial<Omit<SiteMenuLabels, keyof SiteNavLabels>>;
|
|
69
|
+
/** SiteNav, and SiteMenu's navigation. */
|
|
70
|
+
siteNav?: Partial<SiteNavLabels>;
|
|
71
|
+
/** SiteShell's skip link. */
|
|
72
|
+
siteShell?: Partial<ShellLabels>;
|
|
73
|
+
tabs?: Partial<TabsLabels>;
|
|
74
|
+
themeSwitcher?: Partial<ThemeSwitcherLabels>;
|
|
75
|
+
toaster?: Partial<ToasterLabels>;
|
|
76
|
+
}
|
|
77
|
+
export interface SetsquareLocaleProps {
|
|
78
|
+
/**
|
|
79
|
+
* A BCP 47 language tag (`en-GB`, `de`, `pl`): the language of the product's words, and of React Aria's own
|
|
80
|
+
* (the calendar's buttons, "Clear search", the table's "Select all"), numbers, dates and lists. Set it, or
|
|
81
|
+
* React Aria follows the server's default while rendering there and the browser's after hydration. Left out
|
|
82
|
+
* on a nested provider, it keeps the outer one's.
|
|
83
|
+
*/
|
|
84
|
+
locale?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Words for every component of a kind, keyed by component: `{ pagination: { previous: 'Zurück' } }`. A
|
|
87
|
+
* component's own `labels` prop wins over these, and these over the English defaults. A nested provider's
|
|
88
|
+
* words are laid over the outer one's, one component at a time.
|
|
89
|
+
*/
|
|
90
|
+
labels?: SetsquareLabels;
|
|
91
|
+
children?: ReactNode;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* Sets the language once for the whole product: React Aria's locale (through its I18nProvider) and every
|
|
95
|
+
* component's words. Put it high in the root layout, inside `<html lang>`, with the same locale.
|
|
96
|
+
*/
|
|
97
|
+
export declare function SetsquareLocale({ locale, labels, children }: SetsquareLocaleProps): import("react").JSX.Element;
|
|
98
|
+
/** Formats one of a component's words, an ICU template, with its values: `t('remove', { name: 'plan.pdf' })`. */
|
|
99
|
+
export type Translate<T> = (key: keyof T & string, values?: LabelValues) => string;
|
|
100
|
+
/**
|
|
101
|
+
* A component's words: its English defaults, under the app-wide ones from `SetsquareLocale` (each name in
|
|
102
|
+
* `names`, later ones winning), under the instance's own `labels`. Returns a function that formats one word.
|
|
103
|
+
*/
|
|
104
|
+
export declare function useLabels<T extends object>(names: keyof SetsquareLabels | (keyof SetsquareLabels)[], defaults: T, given: Partial<T> | undefined): Translate<T>;
|
|
105
|
+
//# sourceMappingURL=locale.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"locale.d.ts","sourceRoot":"","sources":["../../src/lib/locale.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { createContext, useContext, useMemo } from 'react';
|
|
4
|
+
import { I18nProvider, useLocale } from 'react-aria-components';
|
|
5
|
+
import { fill, withLabels } from './labels.js';
|
|
6
|
+
const LocaleContext = createContext({ locale: undefined, labels: {} });
|
|
7
|
+
/**
|
|
8
|
+
* Sets the language once for the whole product: React Aria's locale (through its I18nProvider) and every
|
|
9
|
+
* component's words. Put it high in the root layout, inside `<html lang>`, with the same locale.
|
|
10
|
+
*/
|
|
11
|
+
export function SetsquareLocale({ locale, labels, children }) {
|
|
12
|
+
const outer = useContext(LocaleContext);
|
|
13
|
+
const resolved = locale ?? outer.locale;
|
|
14
|
+
const value = useMemo(() => {
|
|
15
|
+
if (!labels)
|
|
16
|
+
return { locale: resolved, labels: outer.labels };
|
|
17
|
+
const merged = { ...outer.labels };
|
|
18
|
+
for (const [key, words] of Object.entries(labels)) {
|
|
19
|
+
merged[key] = withLabels(merged[key] ?? {}, words);
|
|
20
|
+
}
|
|
21
|
+
return { locale: resolved, labels: merged };
|
|
22
|
+
}, [resolved, labels, outer.labels]);
|
|
23
|
+
const provided = _jsx(LocaleContext.Provider, { value: value, children: children });
|
|
24
|
+
return resolved ? _jsx(I18nProvider, { locale: resolved, children: provided }) : provided;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* A component's words: its English defaults, under the app-wide ones from `SetsquareLocale` (each name in
|
|
28
|
+
* `names`, later ones winning), under the instance's own `labels`. Returns a function that formats one word.
|
|
29
|
+
*/
|
|
30
|
+
export function useLabels(names, defaults, given) {
|
|
31
|
+
const { labels: appWide } = useContext(LocaleContext);
|
|
32
|
+
const { locale } = useLocale();
|
|
33
|
+
const layers = (Array.isArray(names) ? names : [names]).map((name) => appWide[name]);
|
|
34
|
+
// Compared by content, so `labels={{ … }}` written inline doesn't give the function a new identity each render.
|
|
35
|
+
const words = JSON.stringify(withLabels(defaults, ...layers, given));
|
|
36
|
+
return useMemo(() => {
|
|
37
|
+
const parsed = JSON.parse(words);
|
|
38
|
+
const english = defaults;
|
|
39
|
+
return (key, values) => fill(parsed[key], values, locale, english[key]);
|
|
40
|
+
}, [words, locale, defaults]);
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=locale.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"locale.js","sourceRoot":"","sources":["../../src/lib/locale.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAoB,MAAM,aAAa,CAAC;AAkFjE,MAAM,aAAa,GAAG,aAAa,CAAqB,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;AAmB3F;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAwB;IAChF,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;IACxC,MAAM,KAAK,GAAG,OAAO,CAAqB,GAAG,EAAE;QAC7C,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;QAC/D,MAAM,MAAM,GAAuC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;QACvE,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAmC,EAAE,CAAC;YACpF,MAAM,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;QACrD,CAAC;QACD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAyB,EAAE,CAAC;IACjE,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACrC,MAAM,QAAQ,GAAG,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA0B,CAAC;IAC3F,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,MAAM,EAAE,QAAQ,YAAG,QAAQ,GAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC;AACzF,CAAC;AAKD;;;GAGG;AACH,MAAM,UAAU,SAAS,CACvB,KAAwD,EACxD,QAAW,EACX,KAA6B;IAE7B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CACzD,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAA2B,CAClD,CAAC;IACF,gHAAgH;IAChH,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IACrE,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAA2B,CAAC;QAC3D,MAAM,OAAO,GAAG,QAAkC,CAAC;QACnD,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;AAChC,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type CSSProperties, type ReactNode, type RefObject } from 'react';
|
|
2
|
+
import { type ShellLabels } from './landmarks.js';
|
|
2
3
|
export type ShellSize = 'mobile' | 'tablet' | 'laptop' | 'desktop';
|
|
3
4
|
export type PanelMode = 'inline' | 'sheet';
|
|
4
5
|
export interface ShellContextValue {
|
|
@@ -29,7 +30,9 @@ export interface DashboardShellProps {
|
|
|
29
30
|
defaultSidebarCollapsed?: boolean;
|
|
30
31
|
/** Force a size instead of measuring (previews, tests, Storybook). */
|
|
31
32
|
size?: ShellSize;
|
|
33
|
+
/** @deprecated Use `labels.skipLink`. Kept for one release. */
|
|
32
34
|
skipLinkLabel?: string;
|
|
35
|
+
labels?: Partial<ShellLabels>;
|
|
33
36
|
className?: string;
|
|
34
37
|
style?: CSSProperties;
|
|
35
38
|
}
|
|
@@ -39,7 +42,7 @@ export interface DashboardShellProps {
|
|
|
39
42
|
* tablet ≥ bp-md: sidebar icons, panel as a Sheet · mobile: sidebar and panel both Sheets.
|
|
40
43
|
* CSS container queries on `shell` do the first layout, so there is no flash before measuring.
|
|
41
44
|
*/
|
|
42
|
-
export declare function DashboardShell({ children, productName, defaultPanelOpen, defaultMobileNavOpen, defaultSidebarCollapsed, size: forcedSize, skipLinkLabel, className, style, }: DashboardShellProps): import("react").JSX.Element;
|
|
45
|
+
export declare function DashboardShell({ children, productName, defaultPanelOpen, defaultMobileNavOpen, defaultSidebarCollapsed, size: forcedSize, skipLinkLabel, labels, className, style, }: DashboardShellProps): import("react").JSX.Element;
|
|
43
46
|
/** The raised surface that holds the header, the page and the right panel. Edge to edge on phones. */
|
|
44
47
|
export declare function ShellInset({ children, className }: {
|
|
45
48
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-shell.d.ts","sourceRoot":"","sources":["../../src/shell/dashboard-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EASL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-shell.d.ts","sourceRoot":"","sources":["../../src/shell/dashboard-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EASL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AACnE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,YAAY,EAAE,OAAO,CAAC;CACvB;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AACD,wFAAwF;AACxF,wBAAgB,gBAAgB,IAAI,iBAAiB,GAAG,IAAI,CAE3D;AAeD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,wFAAwF;IACxF,WAAW,EAAE,MAAM,CAAC;IACpB,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kFAAkF;IAClF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,oBAA4B,EAC5B,uBAAuB,EACvB,IAAI,EAAE,UAAU,EAChB,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,+BA4FrB;AAED,sGAAsG;AACtG,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY9F;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE7F;AAMD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,iBAAiB,EAAE,UAAU,GAC9B,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,+BAsDA"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
4
4
|
import { cn } from '../lib/cn.js';
|
|
5
|
+
import { SkipLink } from './landmarks.js';
|
|
5
6
|
const ShellContext = createContext(null);
|
|
6
7
|
export function useShell() {
|
|
7
8
|
const ctx = useContext(ShellContext);
|
|
@@ -34,7 +35,7 @@ function sizeFor(width, bp) {
|
|
|
34
35
|
* tablet ≥ bp-md: sidebar icons, panel as a Sheet · mobile: sidebar and panel both Sheets.
|
|
35
36
|
* CSS container queries on `shell` do the first layout, so there is no flash before measuring.
|
|
36
37
|
*/
|
|
37
|
-
export function DashboardShell({ children, productName, defaultPanelOpen, defaultMobileNavOpen = false, defaultSidebarCollapsed, size: forcedSize, skipLinkLabel
|
|
38
|
+
export function DashboardShell({ children, productName, defaultPanelOpen, defaultMobileNavOpen = false, defaultSidebarCollapsed, size: forcedSize, skipLinkLabel, labels, className, style, }) {
|
|
38
39
|
const ref = useRef(null);
|
|
39
40
|
const [measured, setMeasured] = useState(null);
|
|
40
41
|
const size = forcedSize ?? measured ?? 'desktop';
|
|
@@ -98,7 +99,7 @@ export function DashboardShell({ children, productName, defaultPanelOpen, defaul
|
|
|
98
99
|
productName,
|
|
99
100
|
forcedSize,
|
|
100
101
|
]);
|
|
101
|
-
return (_jsx(ShellContext.Provider, { value: value, children: _jsxs("div", { ref: ref, "data-size": size, style: style, className: cn('@container/shell relative flex h-dvh min-h-0 w-full overflow-hidden bg-sidebar text-foreground', className), children: [_jsx(
|
|
102
|
+
return (_jsx(ShellContext.Provider, { value: value, children: _jsxs("div", { ref: ref, "data-size": size, style: style, className: cn('@container/shell relative flex h-dvh min-h-0 w-full overflow-hidden bg-sidebar text-foreground', className), children: [_jsx(SkipLink, { href: "#main", shell: "dashboardShell", label: skipLinkLabel, labels: labels }), children] }) }));
|
|
102
103
|
}
|
|
103
104
|
/** The raised surface that holds the header, the page and the right panel. Edge to edge on phones. */
|
|
104
105
|
export function ShellInset({ children, className }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-shell.js","sourceRoot":"","sources":["../../src/shell/dashboard-shell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,MAAM,EACN,QAAQ,GAIT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-shell.js","sourceRoot":"","sources":["../../src/shell/dashboard-shell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/** A shell's words, for the `labels` prop on `DashboardShell` and `SiteShell`. */
|
|
3
|
+
export interface ShellLabels {
|
|
4
|
+
/** The skip link, the first thing a keyboard reaches. */
|
|
5
|
+
skipLink: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const shellLabels: ShellLabels;
|
|
8
|
+
/**
|
|
9
|
+
* The skip link both shells start with. A client component of its own, so its words come from `SetsquareLocale`
|
|
10
|
+
* while SiteShell stays server-safe.
|
|
11
|
+
*/
|
|
12
|
+
export declare function SkipLink({ href, shell, label, labels, }: {
|
|
13
|
+
href: string;
|
|
14
|
+
shell: 'dashboardShell' | 'siteShell';
|
|
15
|
+
/** `skipLinkLabel`, kept for one release. */
|
|
16
|
+
label?: string;
|
|
17
|
+
labels?: Partial<ShellLabels>;
|
|
18
|
+
}): import("react").JSX.Element;
|
|
19
|
+
/** The site's navigation's words, for the `labels` prop on `SiteNav` (and `SiteMenu`, whose nav it names too). */
|
|
20
|
+
export interface SiteNavLabels {
|
|
21
|
+
/** Names the navigation landmark. */
|
|
22
|
+
navigation: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const siteNavLabels: SiteNavLabels;
|
|
25
|
+
/** SiteNav's landmark, named from `SetsquareLocale`, so SiteNav itself stays server-safe. */
|
|
26
|
+
export declare function SiteNavLandmark({ label, labels, className, children, }: {
|
|
27
|
+
/** `label`, kept for one release. */
|
|
28
|
+
label?: string;
|
|
29
|
+
labels?: Partial<SiteNavLabels>;
|
|
30
|
+
className?: string;
|
|
31
|
+
children: ReactNode;
|
|
32
|
+
}): import("react").JSX.Element;
|
|
33
|
+
//# sourceMappingURL=landmarks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"landmarks.d.ts","sourceRoot":"","sources":["../../src/shell/landmarks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,kFAAkF;AAClF,MAAM,WAAW,WAAW;IAC1B,yDAAyD;IACzD,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,EAAE,WAAkD,CAAC;AAE7E;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,GACP,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,gBAAgB,GAAG,WAAW,CAAC;IACtC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B,+BAaA;AAED,kHAAkH;AAClH,MAAM,WAAW,aAAa;IAC5B,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,aAAyC,CAAC;AAEtE,6FAA6F;AAC7F,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE;IACD,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAOA"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from '../lib/cn.js';
|
|
4
|
+
import { useLabels } from '../lib/locale.js';
|
|
5
|
+
export const shellLabels = { skipLink: 'Skip to main content' };
|
|
6
|
+
/**
|
|
7
|
+
* The skip link both shells start with. A client component of its own, so its words come from `SetsquareLocale`
|
|
8
|
+
* while SiteShell stays server-safe.
|
|
9
|
+
*/
|
|
10
|
+
export function SkipLink({ href, shell, label, labels, }) {
|
|
11
|
+
const t = useLabels(shell, shellLabels, labels);
|
|
12
|
+
return (_jsx("a", { href: href, className: "group/skip absolute top-2 left-4 z-(--z-popover) inline-flex min-h-target min-w-target -translate-y-[200%] cursor-pointer items-center no-underline outline-none focus:translate-y-0", children: _jsx("span", { className: "inline-flex min-h-control items-center rounded-md bg-primary px-(--control-pad-x) text-sm font-semibold text-primary-foreground group-focus-visible/skip:focus-ring", children: label ?? t('skipLink') }) }));
|
|
13
|
+
}
|
|
14
|
+
export const siteNavLabels = { navigation: 'Primary' };
|
|
15
|
+
/** SiteNav's landmark, named from `SetsquareLocale`, so SiteNav itself stays server-safe. */
|
|
16
|
+
export function SiteNavLandmark({ label, labels, className, children, }) {
|
|
17
|
+
const t = useLabels('siteNav', siteNavLabels, labels);
|
|
18
|
+
return (_jsx("nav", { "aria-label": label ?? t('navigation'), className: cn('hidden site-lg:block', className), children: children }));
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=landmarks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"landmarks.js","sourceRoot":"","sources":["../../src/shell/landmarks.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQ7C,MAAM,CAAC,MAAM,WAAW,GAAgB,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;AAE7E;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,GAOP;IACC,MAAM,CAAC,GAAG,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;IAChD,OAAO,CAEL,YACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,sLAAsL,YAEhM,eAAM,SAAS,EAAC,qKAAqK,YAClL,KAAK,IAAI,CAAC,CAAC,UAAU,CAAC,GAClB,GACL,CACL,CAAC;AACJ,CAAC;AAQD,MAAM,CAAC,MAAM,aAAa,GAAkB,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AAEtE,6FAA6F;AAC7F,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,GAOT;IACC,MAAM,CAAC,GAAG,SAAS,CAAC,SAAS,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC;IACtD,OAAO,CACL,4BAAiB,KAAK,IAAI,CAAC,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,YACxF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
/** The panel's words, for the `labels` prop. */
|
|
3
3
|
export interface RightPanelLabels {
|
|
4
|
-
/** Its close button; `{title}` is the panel's title
|
|
4
|
+
/** Its close button; `{title}` is the panel's title, as written. */
|
|
5
5
|
close: string;
|
|
6
|
+
/** PanelToggle's name. */
|
|
7
|
+
toggle: string;
|
|
6
8
|
}
|
|
9
|
+
export declare const rightPanelLabels: RightPanelLabels;
|
|
7
10
|
export interface RightPanelProps {
|
|
8
11
|
/** The panel's heading; also names the landmark or dialog. */
|
|
9
12
|
title: string;
|
|
@@ -19,8 +22,10 @@ export interface RightPanelProps {
|
|
|
19
22
|
*/
|
|
20
23
|
export declare function RightPanel({ title, children, footer, labels: given, className }: RightPanelProps): import("react").JSX.Element | null;
|
|
21
24
|
/** Shows and hides the right panel. Put it in the page actions. */
|
|
22
|
-
export declare function PanelToggle({ label }: {
|
|
25
|
+
export declare function PanelToggle({ label, labels, }: {
|
|
26
|
+
/** @deprecated Use `labels.toggle`. Kept for one release. */
|
|
23
27
|
label?: string;
|
|
28
|
+
labels?: Partial<RightPanelLabels>;
|
|
24
29
|
}): import("react").JSX.Element;
|
|
25
30
|
/** A titled group inside the panel. */
|
|
26
31
|
export declare function PanelSection({ title, children, className, }: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"right-panel.d.ts","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"right-panel.d.ts","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAS9D,gDAAgD;AAChD,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAG9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,eAAe,sCA6DhG;AAED,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,GACP,EAAE;IACD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACpC,+BAcA;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA"}
|
|
@@ -3,35 +3,41 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useId } from 'react';
|
|
4
4
|
import { PanelRight, X } from 'lucide-react';
|
|
5
5
|
import { cn } from '../lib/cn.js';
|
|
6
|
-
import {
|
|
6
|
+
import { literal } from '../lib/labels.js';
|
|
7
|
+
import { useLabels } from '../lib/locale.js';
|
|
7
8
|
import { IconButton } from '../ui/icon-button.js';
|
|
8
9
|
import { Sheet } from '../ui/sheet.js';
|
|
9
10
|
import { useShell } from './dashboard-shell.js';
|
|
10
|
-
const rightPanelLabels = {
|
|
11
|
+
export const rightPanelLabels = {
|
|
12
|
+
close: 'Close {title}',
|
|
13
|
+
toggle: 'Details panel',
|
|
14
|
+
};
|
|
11
15
|
/**
|
|
12
16
|
* Extra information about the current selection. An <aside> beside main on wide shells,
|
|
13
17
|
* a Sheet (modal dialog) on narrow ones. Closing returns focus to the PanelToggle.
|
|
14
18
|
*/
|
|
15
19
|
export function RightPanel({ title, children, footer, labels: given, className }) {
|
|
16
|
-
const
|
|
20
|
+
const t = useLabels('rightPanel', rightPanelLabels, given);
|
|
21
|
+
const close = t('close', { title });
|
|
17
22
|
const { panelOpen, setPanelOpen, panelMode, panelToggleRef, isSizeForced } = useShell();
|
|
18
23
|
const headingId = useId();
|
|
19
24
|
const foot = footer ? (_jsx("div", { className: "flex gap-(--control-gap) border-t border-border px-4 py-3 *:flex-1", children: footer })) : null;
|
|
20
25
|
const body = (_jsx("div", { className: "relative flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4", children: children }));
|
|
21
26
|
if (panelMode === 'sheet') {
|
|
22
|
-
return (_jsx(Sheet, { side: "right", title: title, labels: { close:
|
|
27
|
+
return (_jsx(Sheet, { side: "right", title: title, labels: { close: literal(close) }, isOpen: panelOpen, onOpenChange: setPanelOpen, footer: foot, children: body }));
|
|
23
28
|
}
|
|
24
29
|
if (!panelOpen)
|
|
25
30
|
return null;
|
|
26
|
-
return (_jsxs("aside", { "aria-labelledby": headingId, style: { viewTransitionName: 'shell-panel' }, className: cn('flex w-panel shrink-0 flex-col border-l border-border bg-card text-card-foreground', !isSizeForced && '@max-[64rem]/shell:hidden', className), children: [_jsxs("div", { className: "flex min-h-[calc(var(--control-height)+1rem)] items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4", children: [_jsx("h2", { id: headingId, className: "text-subheading", children: title }), _jsx(IconButton, { label:
|
|
31
|
+
return (_jsxs("aside", { "aria-labelledby": headingId, style: { viewTransitionName: 'shell-panel' }, className: cn('flex w-panel shrink-0 flex-col border-l border-border bg-card text-card-foreground', !isSizeForced && '@max-[64rem]/shell:hidden', className), children: [_jsxs("div", { className: "flex min-h-[calc(var(--control-height)+1rem)] items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4", children: [_jsx("h2", { id: headingId, className: "text-subheading", children: title }), _jsx(IconButton, { label: close, icon: X, visualSize: "icon-sm", tooltip: false, className: "justify-end", onPress: () => {
|
|
27
32
|
setPanelOpen(false);
|
|
28
33
|
requestAnimationFrame(() => panelToggleRef.current?.focus());
|
|
29
34
|
} })] }), body, foot] }));
|
|
30
35
|
}
|
|
31
36
|
/** Shows and hides the right panel. Put it in the page actions. */
|
|
32
|
-
export function PanelToggle({ label
|
|
37
|
+
export function PanelToggle({ label, labels, }) {
|
|
38
|
+
const t = useLabels('rightPanel', rightPanelLabels, labels);
|
|
33
39
|
const { panelOpen, setPanelOpen, panelToggleRef, panelMode } = useShell();
|
|
34
|
-
return (_jsx(IconButton, { ref: panelToggleRef, label: label, icon: PanelRight, variant: "outline", "aria-expanded": panelMode === 'inline' ? panelOpen : undefined, "aria-haspopup": panelMode === 'sheet' ? 'dialog' : undefined, onPress: () => setPanelOpen(!panelOpen) }));
|
|
40
|
+
return (_jsx(IconButton, { ref: panelToggleRef, label: label ?? t('toggle'), icon: PanelRight, variant: "outline", "aria-expanded": panelMode === 'inline' ? panelOpen : undefined, "aria-haspopup": panelMode === 'sheet' ? 'dialog' : undefined, onPress: () => setPanelOpen(!panelOpen) }));
|
|
35
41
|
}
|
|
36
42
|
/** A titled group inside the panel. */
|
|
37
43
|
export function PanelSection({ title, children, className, }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"right-panel.js","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAkC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"right-panel.js","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"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"}
|
package/dist/shell/sidebar.d.ts
CHANGED
|
@@ -7,10 +7,17 @@ export declare const useSidebarCollapsed: () => boolean;
|
|
|
7
7
|
export interface SidebarLabels {
|
|
8
8
|
/** Names the Sheet it becomes on phones; `{product}` is the shell's `productName`. */
|
|
9
9
|
navigation: string;
|
|
10
|
+
/** Names the navigation landmark. */
|
|
11
|
+
primary: string;
|
|
12
|
+
/** Added to an item's name for its count, which shows as a number only: "Projects, 12". */
|
|
13
|
+
count: string;
|
|
14
|
+
/** A collapsed item's tooltip, with its count: "Projects (12)". */
|
|
15
|
+
tipCount: string;
|
|
10
16
|
}
|
|
17
|
+
export declare const sidebarLabels: SidebarLabels;
|
|
11
18
|
export interface SidebarProps {
|
|
12
19
|
children: ReactNode;
|
|
13
|
-
/**
|
|
20
|
+
/** @deprecated Use `labels.primary`. Kept for one release. */
|
|
14
21
|
label?: string;
|
|
15
22
|
labels?: Partial<SidebarLabels>;
|
|
16
23
|
className?: string;
|
|
@@ -19,7 +26,7 @@ export interface SidebarProps {
|
|
|
19
26
|
* The full-height sidebar. Expanded, collapsed to icons (labels stay in the accessibility tree
|
|
20
27
|
* and show as tooltips), or — on phones — a Sheet opened from the header.
|
|
21
28
|
*/
|
|
22
|
-
export declare function Sidebar({ children, label, labels: given, className }: SidebarProps): import("react").JSX.Element;
|
|
29
|
+
export declare function Sidebar({ children, label: givenLabel, labels: given, className }: SidebarProps): import("react").JSX.Element;
|
|
23
30
|
export declare function SidebarHeader({ children, className, }: {
|
|
24
31
|
children: ReactNode;
|
|
25
32
|
className?: string;
|
|
@@ -97,6 +104,7 @@ export interface SidebarTriggerLabels {
|
|
|
97
104
|
/** Wider, where it collapses the sidebar to icons and back. */
|
|
98
105
|
toggleSidebar: string;
|
|
99
106
|
}
|
|
107
|
+
export declare const sidebarTriggerLabels: SidebarTriggerLabels;
|
|
100
108
|
/** Collapses the sidebar to icons, or opens it as a Sheet on phones. */
|
|
101
109
|
export declare function SidebarTrigger({ labels: given, className, }: {
|
|
102
110
|
labels?: Partial<SidebarTriggerLabels>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAML,KAAK,GAAG,EACT,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAO1D,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,eAA4C,CAAC;AAE7E,kDAAkD;AAClD,MAAM,WAAW,aAAa;IAC5B,sFAAsF;IACtF,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,EAAE,aAK3B,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,YAAY,+BAuC9F;AAMD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAEA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAQA;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAYA;AAED,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAoBA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE/F;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BAuDhG;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,QAAQ,CAAC;IACf,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,8EAA8E;IAC9E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,eAAe,GAChB,EAAE,sBAAsB,+BAoFxB;AAED,MAAM,WAAW,oBAAoB;IACnC,sCAAsC;IACtC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,SAAS,CAAC,EAAE,cAAc,GAAG,WAAW,GAAG,WAAW,GAAG,cAAc,CAAC;CACzE;AAED,wGAAwG;AACxG,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAA0B,GAC3B,EAAE,oBAAoB,+BA+EtB;AAED,kGAAkG;AAClG,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,oBAAoB,EAAE,oBAGlC,CAAC;AAEF,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EAAE,KAAK,EACb,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAcA"}
|
package/dist/shell/sidebar.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import {
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useContext, useId } from 'react';
|
|
4
|
-
import { Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel, Link, } from 'react-aria-components';
|
|
4
|
+
import { Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel, Link, useLocale, } from 'react-aria-components';
|
|
5
5
|
import { ChevronDown, ChevronsUpDown, Menu as MenuIcon, PanelLeft } from 'lucide-react';
|
|
6
6
|
import { cn } from '../lib/cn.js';
|
|
7
|
-
import {
|
|
7
|
+
import { useLabels } from '../lib/locale.js';
|
|
8
8
|
import { IconButton } from '../ui/icon-button.js';
|
|
9
9
|
import { renderIcon } from '../ui/icon.js';
|
|
10
10
|
import { Menu, MenuItem, MenuTrigger, Popover } from '../ui/menu.js';
|
|
@@ -14,16 +14,22 @@ import { useShell } from './dashboard-shell.js';
|
|
|
14
14
|
const SidebarCollapsedContext = createContext(false);
|
|
15
15
|
/** True when the sidebar shows icons only (never inside the mobile Sheet). */
|
|
16
16
|
export const useSidebarCollapsed = () => useContext(SidebarCollapsedContext);
|
|
17
|
-
const sidebarLabels = {
|
|
17
|
+
export const sidebarLabels = {
|
|
18
|
+
navigation: '{product} navigation',
|
|
19
|
+
primary: 'Primary',
|
|
20
|
+
count: ', {count, number}',
|
|
21
|
+
tipCount: '{name} ({count, number})',
|
|
22
|
+
};
|
|
18
23
|
/**
|
|
19
24
|
* The full-height sidebar. Expanded, collapsed to icons (labels stay in the accessibility tree
|
|
20
25
|
* and show as tooltips), or — on phones — a Sheet opened from the header.
|
|
21
26
|
*/
|
|
22
|
-
export function Sidebar({ children, label
|
|
27
|
+
export function Sidebar({ children, label: givenLabel, labels: given, className }) {
|
|
23
28
|
const { size, sidebarCollapsed, mobileNavOpen, setMobileNavOpen, productName, isSizeForced } = useShell();
|
|
24
|
-
const
|
|
29
|
+
const t = useLabels('sidebar', sidebarLabels, given);
|
|
30
|
+
const label = givenLabel ?? t('primary');
|
|
25
31
|
if (size === 'mobile') {
|
|
26
|
-
return (_jsx(Sheet, { side: "left", isOpen: mobileNavOpen, onOpenChange: setMobileNavOpen, "aria-label":
|
|
32
|
+
return (_jsx(Sheet, { side: "left", isOpen: mobileNavOpen, onOpenChange: setMobileNavOpen, "aria-label": t('navigation', { product: productName }), children: _jsx(SidebarCollapsedContext.Provider, { value: false, children: _jsx("nav", { "aria-label": label, className: "flex h-full min-h-0 flex-col text-sidebar-foreground", children: children }) }) }));
|
|
27
33
|
}
|
|
28
34
|
return (_jsx(SidebarCollapsedContext.Provider, { value: sidebarCollapsed, children: _jsx("nav", { "aria-label": label, "data-collapsed": sidebarCollapsed || undefined, style: { viewTransitionName: 'shell-sidebar' }, className: cn('group/sidebar flex h-full min-h-0 w-sidebar shrink-0 flex-col text-sidebar-foreground', 'transition-[width] duration-(--duration-panel) ease-(--ease-standard) motion-reduce:transition-none aaa:transition-none', 'data-collapsed:w-sidebar-collapsed', !isSizeForced && '@max-[48rem]/shell:hidden', className), children: children }) }));
|
|
29
35
|
}
|
|
@@ -48,10 +54,12 @@ export function SidebarList({ children, className }) {
|
|
|
48
54
|
}
|
|
49
55
|
export function SidebarItem({ href, icon, children, isCurrent, count, onPress }) {
|
|
50
56
|
const collapsed = useSidebarCollapsed();
|
|
57
|
+
const t = useLabels('sidebar', sidebarLabels, undefined);
|
|
58
|
+
const { locale } = useLocale();
|
|
51
59
|
const link = (_jsx(Link, { href: href, onPress: onPress, "aria-current": isCurrent ? 'page' : undefined, className: cn(
|
|
52
60
|
// Layer 1: the row is the target, full width and at least --target-min tall.
|
|
53
|
-
'group/item relative flex min-h-target w-full cursor-pointer items-center text-sm font-medium text-sidebar-foreground no-underline outline-none', 'group-data-collapsed/sidebar:justify-center'), children: _jsxs("span", { className: cn('relative flex min-h-nav-item w-full min-w-0 items-center gap-3 rounded-md px-3', 'group-data-hovered/item:bg-sidebar-accent group-data-hovered/item:text-sidebar-accent-foreground group-data-focus-visible/item:focus-ring', 'group-aria-[current=page]/item:bg-brand-subtle group-aria-[current=page]/item:font-bold group-aria-[current=page]/item:text-foreground', 'group-aria-[current=page]/item:before:absolute group-aria-[current=page]/item:before:inset-y-2 group-aria-[current=page]/item:before:left-0 group-aria-[current=page]/item:before:w-[3px] group-aria-[current=page]/item:before:rounded-full group-aria-[current=page]/item:before:bg-sidebar-primary', 'group-data-collapsed/sidebar:w-nav-item group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0'), children: [renderIcon(icon, 'size-5 shrink-0 group-aria-[current=page]/item:text-brand'), _jsxs("span", { className: "min-w-0 flex-1 truncate group-data-collapsed/sidebar:sr-only", children: [children, count != null &&
|
|
54
|
-
return (_jsx("li", { children: collapsed ? (_jsxs(TooltipTrigger, { delay: 300, children: [link, _jsx(Tooltip, { placement: "right", children: count != null ?
|
|
61
|
+
'group/item relative flex min-h-target w-full cursor-pointer items-center text-sm font-medium text-sidebar-foreground no-underline outline-none', 'group-data-collapsed/sidebar:justify-center'), children: _jsxs("span", { className: cn('relative flex min-h-nav-item w-full min-w-0 items-center gap-3 rounded-md px-3', 'group-data-hovered/item:bg-sidebar-accent group-data-hovered/item:text-sidebar-accent-foreground group-data-focus-visible/item:focus-ring', 'group-aria-[current=page]/item:bg-brand-subtle group-aria-[current=page]/item:font-bold group-aria-[current=page]/item:text-foreground', 'group-aria-[current=page]/item:before:absolute group-aria-[current=page]/item:before:inset-y-2 group-aria-[current=page]/item:before:left-0 group-aria-[current=page]/item:before:w-[3px] group-aria-[current=page]/item:before:rounded-full group-aria-[current=page]/item:before:bg-sidebar-primary', 'group-data-collapsed/sidebar:w-nav-item group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0'), children: [renderIcon(icon, 'size-5 shrink-0 group-aria-[current=page]/item:text-brand'), _jsxs("span", { className: "min-w-0 flex-1 truncate group-data-collapsed/sidebar:sr-only", children: [children, count != null && _jsx("span", { className: "sr-only", children: t('count', { count }) })] }), count != null && (_jsx("span", { "aria-hidden": "true", className: "text-[13px] font-medium text-muted-foreground tabular-nums group-data-collapsed/sidebar:hidden", children: new Intl.NumberFormat(locale).format(count) }))] }) }));
|
|
62
|
+
return (_jsx("li", { children: collapsed ? (_jsxs(TooltipTrigger, { delay: 300, children: [link, _jsx(Tooltip, { placement: "right", children: count != null ? t('tipCount', { name: children, count }) : children })] })) : (link) }));
|
|
55
63
|
}
|
|
56
64
|
/**
|
|
57
65
|
* A sidebar row with rows under it. Expanded (and in the phone's Sheet), the row is a button that opens and closes
|
|
@@ -76,13 +84,22 @@ export function SidebarDisclosure({ icon, children, items, defaultExpanded, }) {
|
|
|
76
84
|
export function SidebarSwitcher({ leading, title, subtitle, menuLabel, children, onAction, selectedKey, placement = 'bottom start', }) {
|
|
77
85
|
const collapsed = useSidebarCollapsed();
|
|
78
86
|
// Named by its content, not an aria-label: the title and subtitle as shown, then the menu's purpose, so the
|
|
79
|
-
// name always contains the visible text (2.5.3).
|
|
87
|
+
// name always contains the visible text (2.5.3). They are a list in the locale's punctuation, which is for the
|
|
88
|
+
// name only; the layout already separates them.
|
|
89
|
+
const { locale } = useLocale();
|
|
90
|
+
const parts = new Intl.ListFormat(locale, { type: 'unit', style: 'short' }).formatToParts(subtitle ? [title, subtitle, menuLabel] : [title, menuLabel]);
|
|
91
|
+
let element = -1;
|
|
80
92
|
const button = (_jsx(RACButton, { className: cn(
|
|
81
93
|
// Layer 1: the target. Collapsed, it keeps at least --target-min across the rail.
|
|
82
|
-
'group/switcher flex min-h-target w-full min-w-target cursor-pointer items-center text-left outline-none', 'group-data-collapsed/sidebar:justify-center'), children: _jsxs("span", { className: cn('flex min-h-[calc(var(--nav-item-height)+12px)] w-full min-w-0 items-center gap-3 rounded-md px-2', 'group-data-hovered/switcher:bg-sidebar-accent group-data-pressed/switcher:bg-sidebar-accent group-data-focus-visible/switcher:focus-ring', 'group-data-collapsed/sidebar:w-nav-item group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0'), children: [leading,
|
|
94
|
+
'group/switcher flex min-h-target w-full min-w-target cursor-pointer items-center text-left outline-none', 'group-data-collapsed/sidebar:justify-center'), children: _jsxs("span", { className: cn('flex min-h-[calc(var(--nav-item-height)+12px)] w-full min-w-0 items-center gap-3 rounded-md px-2', 'group-data-hovered/switcher:bg-sidebar-accent group-data-pressed/switcher:bg-sidebar-accent group-data-focus-visible/switcher:focus-ring', 'group-data-collapsed/sidebar:w-nav-item group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0'), children: [leading, _jsx("span", { className: "flex min-w-0 flex-1 flex-col group-data-collapsed/sidebar:sr-only", children: parts.map((part, i) => {
|
|
95
|
+
if (part.type === 'literal')
|
|
96
|
+
return (_jsx("span", { className: "sr-only", children: part.value }, i));
|
|
97
|
+
element++;
|
|
98
|
+
return element === 0 ? (_jsx("span", { className: "truncate text-sm leading-5 font-bold", children: part.value }, i)) : subtitle && element === 1 ? (_jsx("span", { className: "truncate text-[13px] leading-5 text-muted-foreground", children: part.value }, i)) : (_jsx("span", { className: "sr-only", children: part.value }, i));
|
|
99
|
+
}) }), _jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground group-data-collapsed/sidebar:hidden" })] }) }));
|
|
83
100
|
return (_jsxs(MenuTrigger, { children: [collapsed ? (_jsxs(TooltipTrigger, { delay: 300, children: [button, _jsx(Tooltip, { placement: "right", children: title })] })) : (button), _jsx(Popover, { placement: collapsed ? 'right top' : placement, className: "min-w-64", children: _jsx(Menu, { onAction: onAction, selectionMode: selectedKey != null ? 'single' : undefined, selectedKeys: selectedKey != null ? [selectedKey] : undefined, children: children }) })] }));
|
|
84
101
|
}
|
|
85
|
-
const sidebarTriggerLabels = {
|
|
102
|
+
export const sidebarTriggerLabels = {
|
|
86
103
|
openNavigation: 'Open navigation',
|
|
87
104
|
toggleSidebar: 'Toggle sidebar',
|
|
88
105
|
};
|
|
@@ -90,7 +107,7 @@ const sidebarTriggerLabels = {
|
|
|
90
107
|
export function SidebarTrigger({ labels: given, className, }) {
|
|
91
108
|
const { size, sidebarCollapsed, toggleSidebar, mobileNavOpen, setMobileNavOpen } = useShell();
|
|
92
109
|
const mobile = size === 'mobile';
|
|
93
|
-
const
|
|
94
|
-
return (_jsx(IconButton, { className: className, label: mobile ?
|
|
110
|
+
const t = useLabels('sidebarTrigger', sidebarTriggerLabels, given);
|
|
111
|
+
return (_jsx(IconButton, { className: className, label: mobile ? t('openNavigation') : t('toggleSidebar'), icon: mobile ? MenuIcon : PanelLeft, "aria-expanded": mobile ? mobileNavOpen : !sidebarCollapsed, "aria-haspopup": mobile ? 'dialog' : undefined, onPress: () => (mobile ? setMobileNavOpen(true) : toggleSidebar()) }));
|
|
95
112
|
}
|
|
96
113
|
//# sourceMappingURL=sidebar.js.map
|