@harborclient/sdk 1.6.3 → 1.6.4
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 +5 -0
- package/dist/components/Button/index.d.ts +4 -0
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +22 -8
- package/dist/components/CodeEditor/index.d.ts +6 -3
- package/dist/components/CodeEditor/index.d.ts.map +1 -1
- package/dist/components/CodeEditor/index.js +10 -3
- package/dist/components/RowActionsMenu/index.d.ts +7 -1
- package/dist/components/RowActionsMenu/index.d.ts.map +1 -1
- package/dist/components/RowActionsMenu/index.js +3 -2
- package/dist/components/Sidebar/index.d.ts +10 -2
- package/dist/components/Sidebar/index.d.ts.map +1 -1
- package/dist/components/Sidebar/index.js +2 -2
- package/dist/components/SidebarItem/SidebarEnvironmentItem.d.ts +5 -1
- package/dist/components/SidebarItem/SidebarEnvironmentItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarEnvironmentItem.js +6 -6
- package/dist/components/SidebarItem/SidebarItem.d.ts +10 -1
- package/dist/components/SidebarItem/SidebarItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarItem.js +3 -3
- package/dist/components/SidebarItem/SidebarListbox.d.ts +3 -1
- package/dist/components/SidebarItem/SidebarListbox.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarListbox.js +49 -2
- package/dist/components/SidebarItem/SidebarTree.d.ts +2 -0
- package/dist/components/SidebarItem/SidebarTree.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarTree.js +48 -1
- package/dist/components/SidebarItem/SortableSidebarItem.d.ts +15 -5
- package/dist/components/SidebarItem/SortableSidebarItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SortableSidebarItem.js +8 -7
- package/dist/components/SidebarItem/index.d.ts +1 -0
- package/dist/components/SidebarItem/index.d.ts.map +1 -1
- package/dist/components/SidebarItem/index.js +1 -0
- package/dist/components/SidebarItem/sidebarCompositeNavigation.d.ts +100 -0
- package/dist/components/SidebarItem/sidebarCompositeNavigation.d.ts.map +1 -0
- package/dist/components/SidebarItem/sidebarCompositeNavigation.js +246 -0
- package/dist/components/SidebarItem/sidebarListOption.d.ts +4 -0
- package/dist/components/SidebarItem/sidebarListOption.d.ts.map +1 -1
- package/dist/components/SidebarItem/sidebarListOption.js +11 -0
- package/dist/components/SidebarRail/SidebarRailItem.d.ts +1 -1
- package/dist/components/SidebarRail/SidebarRailItem.d.ts.map +1 -1
- package/dist/components/SidebarRail/SidebarRailItem.js +2 -1
- package/dist/components/SidebarRail/focusSidebarRailPanel.d.ts +31 -0
- package/dist/components/SidebarRail/focusSidebarRailPanel.d.ts.map +1 -0
- package/dist/components/SidebarRail/focusSidebarRailPanel.js +73 -0
- package/dist/components/SidebarRail/index.d.ts +21 -5
- package/dist/components/SidebarRail/index.d.ts.map +1 -1
- package/dist/components/SidebarRail/index.js +62 -7
- package/dist/components/SidebarSection/SectionItem.d.ts.map +1 -1
- package/dist/components/SidebarSection/SectionItem.js +3 -1
- package/dist/components/SidebarSection/index.d.ts.map +1 -1
- package/dist/components/SidebarSection/index.js +1 -1
- package/dist/components/index.d.ts +3 -2
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -1
- package/dist/styles.css +16 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
|
|
|
4
4
|
|
|
5
5
|
## Unreleased
|
|
6
6
|
|
|
7
|
+
## 1.6.4 - 2026-08-04
|
|
8
|
+
|
|
9
|
+
- feat: enhance sidebar navigation and focus management. (`015e793a`)
|
|
10
|
+
- feat: add activity rail support and close request tab shortcut. (`2b7baf93`)
|
|
11
|
+
|
|
7
12
|
## 1.6.3 - 2026-08-04
|
|
8
13
|
|
|
9
14
|
- refactor: update code editor theme to Nord. (`5fda54b0`)
|
|
@@ -30,6 +30,10 @@ export type ButtonProps = (BaseProps & {
|
|
|
30
30
|
* macOS-style button with shared variant presets for primary actions, secondary
|
|
31
31
|
* actions, danger/success emphasis, toolbar controls, and icon-only controls.
|
|
32
32
|
*
|
|
33
|
+
* Shadowed variants use an outline focus ring so keyboard focus stays visible when
|
|
34
|
+
* host `button:focus-visible` styles rely on `box-shadow` (overridden by `shadow-sm`).
|
|
35
|
+
* Transparent toolbar/icon variants highlight the surface on `:focus-visible`.
|
|
36
|
+
*
|
|
33
37
|
* Defaults to `type="button"` so clicks do not accidentally submit a parent form.
|
|
34
38
|
* Pass `type="submit"` explicitly when submit behavior is intended.
|
|
35
39
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,SAAS,GACT,MAAM,GACN,YAAY,CAAC;AAEjB,KAAK,iBAAiB,GAAG,MAAM,GAAG,YAAY,CAAC;AAE/C,KAAK,cAAc,GACf;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE5D,KAAK,SAAS,GAAG,IAAI,CACnB,wBAAwB,CAAC,QAAQ,CAAC,EAClC,YAAY,GAAG,iBAAiB,GAAG,KAAK,CACzC,GAAG;IACF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,CAAC,SAAS,GAAG;IAAE,OAAO,EAAE,iBAAiB,CAAA;CAAE,GAAG,cAAc,CAAC,GAC7D,CAAC,SAAS,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAA;CAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,SAAS,GACT,MAAM,GACN,YAAY,CAAC;AAEjB,KAAK,iBAAiB,GAAG,MAAM,GAAG,YAAY,CAAC;AAE/C,KAAK,cAAc,GACf;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE5D,KAAK,SAAS,GAAG,IAAI,CACnB,wBAAwB,CAAC,QAAQ,CAAC,EAClC,YAAY,GAAG,iBAAiB,GAAG,KAAK,CACzC,GAAG;IACF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,CAAC,SAAS,GAAG;IAAE,OAAO,EAAE,iBAAiB,CAAA;CAAE,GAAG,cAAc,CAAC,GAC7D,CAAC,SAAS,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAA;CAAE,CAAC,CAAC;AA2D1E;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,SAAS,EACT,IAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAS3B"}
|
|
@@ -1,20 +1,34 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
|
|
2
2
|
import { cn } from '../utils.js';
|
|
3
3
|
const BUTTON_BASE = 'inline-flex cursor-pointer items-center rounded-full app-no-drag';
|
|
4
|
+
/**
|
|
5
|
+
* Keyboard focus ring for variants that use `shadow-sm`. Host apps often style
|
|
6
|
+
* `button:focus-visible` with `box-shadow`, which Tailwind `shadow-sm` overrides —
|
|
7
|
+
* an outline ring stays visible regardless.
|
|
8
|
+
*/
|
|
9
|
+
const BUTTON_SHADOW_FOCUS = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent';
|
|
10
|
+
/**
|
|
11
|
+
* Keyboard focus feedback for transparent toolbar / icon variants (no drop shadow).
|
|
12
|
+
*/
|
|
13
|
+
const BUTTON_SURFACE_FOCUS = 'focus-visible:bg-selection focus-visible:text-text';
|
|
4
14
|
const VARIANT_CLASSES = {
|
|
5
|
-
primary: cn(BUTTON_BASE, 'min-h-[32px] justify-center border border-transparent bg-accent px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50'),
|
|
6
|
-
secondary: cn(BUTTON_BASE, 'min-h-[32px] justify-center border border-separator bg-control px-3 py-1 text-[15px] text-text shadow-sm hover:bg-selection disabled:cursor-not-allowed disabled:opacity-50'),
|
|
7
|
-
primaryDanger: cn(BUTTON_BASE, 'min-h-[32px] justify-center border border-transparent bg-danger px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50'),
|
|
8
|
-
primarySuccess: cn(BUTTON_BASE, 'min-h-[32px] justify-center border border-transparent bg-success px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50'),
|
|
9
|
-
secondaryDanger: cn(BUTTON_BASE, 'min-h-[32px] justify-center border border-separator bg-control px-3 py-1 text-[15px] text-danger shadow-sm hover:bg-danger/15 disabled:cursor-not-allowed disabled:opacity-50'),
|
|
10
|
-
toolbar: cn(BUTTON_BASE, 'min-h-[32px] border-none bg-transparent px-2 py-1 text-[15px] hover:bg-selection'),
|
|
11
|
-
icon: cn(BUTTON_BASE, 'size-[30px] shrink-0 justify-center border-none bg-transparent text-muted hover:bg-selection hover:text-text'),
|
|
12
|
-
iconDanger: cn(BUTTON_BASE, 'size-[30px] shrink-0 justify-center border-none bg-transparent text-muted hover:bg-danger/15 hover:text-danger')
|
|
15
|
+
primary: cn(BUTTON_BASE, BUTTON_SHADOW_FOCUS, 'min-h-[32px] justify-center border border-transparent bg-accent px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50'),
|
|
16
|
+
secondary: cn(BUTTON_BASE, BUTTON_SHADOW_FOCUS, 'min-h-[32px] justify-center border border-separator bg-control px-3 py-1 text-[15px] text-text shadow-sm hover:bg-selection disabled:cursor-not-allowed disabled:opacity-50'),
|
|
17
|
+
primaryDanger: cn(BUTTON_BASE, BUTTON_SHADOW_FOCUS, 'min-h-[32px] justify-center border border-transparent bg-danger px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50'),
|
|
18
|
+
primarySuccess: cn(BUTTON_BASE, BUTTON_SHADOW_FOCUS, 'min-h-[32px] justify-center border border-transparent bg-success px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50'),
|
|
19
|
+
secondaryDanger: cn(BUTTON_BASE, BUTTON_SHADOW_FOCUS, 'min-h-[32px] justify-center border border-separator bg-control px-3 py-1 text-[15px] text-danger shadow-sm hover:bg-danger/15 disabled:cursor-not-allowed disabled:opacity-50'),
|
|
20
|
+
toolbar: cn(BUTTON_BASE, BUTTON_SURFACE_FOCUS, 'min-h-[32px] border-none bg-transparent px-2 py-1 text-[15px] hover:bg-selection'),
|
|
21
|
+
icon: cn(BUTTON_BASE, BUTTON_SURFACE_FOCUS, 'size-[30px] shrink-0 justify-center border-none bg-transparent text-muted hover:bg-selection hover:text-text'),
|
|
22
|
+
iconDanger: cn(BUTTON_BASE, 'size-[30px] shrink-0 justify-center border-none bg-transparent text-muted hover:bg-danger/15 hover:text-danger focus-visible:bg-danger/15 focus-visible:text-danger')
|
|
13
23
|
};
|
|
14
24
|
/**
|
|
15
25
|
* macOS-style button with shared variant presets for primary actions, secondary
|
|
16
26
|
* actions, danger/success emphasis, toolbar controls, and icon-only controls.
|
|
17
27
|
*
|
|
28
|
+
* Shadowed variants use an outline focus ring so keyboard focus stays visible when
|
|
29
|
+
* host `button:focus-visible` styles rely on `box-shadow` (overridden by `shadow-sm`).
|
|
30
|
+
* Transparent toolbar/icon variants highlight the surface on `:focus-visible`.
|
|
31
|
+
*
|
|
18
32
|
* Defaults to `type="button"` so clicks do not accidentally submit a parent form.
|
|
19
33
|
* Pass `type="submit"` explicitly when submit behavior is intended.
|
|
20
34
|
*
|
|
@@ -162,12 +162,15 @@ export interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'
|
|
|
162
162
|
*/
|
|
163
163
|
language?: CodeEditorLanguage;
|
|
164
164
|
/**
|
|
165
|
-
* When true,
|
|
165
|
+
* When true, prevents document edits (CodeMirror `EditorState.readOnly`) while the
|
|
166
|
+
* content DOM can still be focused and selected. Pair with {@link editable} only when
|
|
167
|
+
* you also need to remove `contenteditable` (which drops the editor from tab order).
|
|
166
168
|
*/
|
|
167
169
|
readOnly?: boolean;
|
|
168
170
|
/**
|
|
169
|
-
* When false,
|
|
170
|
-
* Defaults to
|
|
171
|
+
* When false, sets `contenteditable="false"` on the content DOM so the editor leaves
|
|
172
|
+
* the tab order. Defaults to `true` even for {@link readOnly} viewers so keyboard
|
|
173
|
+
* users can focus and select text. Pass `false` for temporary input locks.
|
|
171
174
|
*/
|
|
172
175
|
editable?: boolean;
|
|
173
176
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -455,7 +455,8 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
|
|
|
455
455
|
const resolvedTheme = themeOverride ?? config.theme;
|
|
456
456
|
const resolvedSetup = setupOverride ?? (readOnly ? null : config.setup);
|
|
457
457
|
const resolvedFontSize = normalizeCodeEditorFontSize(fontSize ?? config.fontSize);
|
|
458
|
-
|
|
458
|
+
// Keep contenteditable for read-only viewers so they stay keyboard-focusable.
|
|
459
|
+
const resolvedEditable = editable ?? true;
|
|
459
460
|
const [isDark, setIsDark] = useState(() => isAppearanceDark());
|
|
460
461
|
const [selectionTooltip, setSelectionTooltip] = useState(null);
|
|
461
462
|
const selectionTooltipRef = useRef(selectionTooltip);
|
|
@@ -976,9 +977,15 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
|
|
|
976
977
|
completionKeymap: false
|
|
977
978
|
};
|
|
978
979
|
}, [resolvedSetup, readOnly]);
|
|
980
|
+
/**
|
|
981
|
+
* Shared inset panel chrome. Focus ring is drawn by SDK `styles.css`
|
|
982
|
+
* (`.hc-code-editor:focus-within::after`) so it stays visible inside
|
|
983
|
+
* OverlayScrollbars / overflow-hidden hosts such as the response Body viewer.
|
|
984
|
+
*/
|
|
985
|
+
const editorSurfaceClass = 'overflow-hidden rounded-lg bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag';
|
|
979
986
|
const wrapperClassName = readOnly
|
|
980
|
-
? `hc-code-editor
|
|
981
|
-
: `hc-code-editor min-h-36 resize-y
|
|
987
|
+
? `hc-code-editor ${editorSurfaceClass} ${className}`
|
|
988
|
+
: `hc-code-editor min-h-36 resize-y border border-separator ${editorSurfaceClass} ${className}`;
|
|
982
989
|
const selectionTooltipContent = selectionTooltip
|
|
983
990
|
? getVariableTooltipContent(selectionTooltip.key, variables ?? [])
|
|
984
991
|
: null;
|
|
@@ -85,6 +85,12 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
|
85
85
|
* Whether the menu opens below or above the trigger. Defaults to opening downward.
|
|
86
86
|
*/
|
|
87
87
|
placement?: 'down' | 'up';
|
|
88
|
+
/**
|
|
89
|
+
* Tab index for the menu trigger. Pass `-1` when the trigger lives inside a
|
|
90
|
+
* sidebar listbox/tree composite so the row remains the sole Tab stop; open
|
|
91
|
+
* the menu with click, Shift+F10, or ContextMenu from the focused row.
|
|
92
|
+
*/
|
|
93
|
+
triggerTabIndex?: number;
|
|
88
94
|
}
|
|
89
95
|
/**
|
|
90
96
|
* Hamburger-triggered dropdown for row-level actions (rename, delete, etc.).
|
|
@@ -94,6 +100,6 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
|
94
100
|
* `submenu` open a nested flyout panel beside them on hover, click, or
|
|
95
101
|
* `ArrowRight`/`Enter`.
|
|
96
102
|
*/
|
|
97
|
-
export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon, triggerAriaLabel, triggerTitle, triggerClassName, triggerActive, placement, className, ...props }: Props): JSX.Element;
|
|
103
|
+
export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon, triggerAriaLabel, triggerTitle, triggerClassName, triggerActive, placement, triggerTabIndex, className, ...props }: Props): JSX.Element;
|
|
98
104
|
export {};
|
|
99
105
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAUxE,OAAO,KAAK,EACV,wBAAwB,EACxB,GAAG,EAGH,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAmBlF,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,CAAC,YAAY,GAAG;IAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,GAC9D,CAAC,YAAY,GAAG;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;CACvB,CAAC,CAAC;AAEP,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;;OAGG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAE/B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAUxE,OAAO,KAAK,EACV,wBAAwB,EACxB,GAAG,EAGH,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAmBlF,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,CAAC,YAAY,GAAG;IAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,GAC9D,CAAC,YAAY,GAAG;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;CACvB,CAAC,CAAC;AAEP,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;;OAGG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAE/B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAUD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,UAAU,EACV,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,SAAkB,EAClB,eAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAslBrB"}
|
|
@@ -22,7 +22,7 @@ const SUBMENU_CLOSE_DELAY_MS = 200;
|
|
|
22
22
|
* `submenu` open a nested flyout panel beside them on hover, click, or
|
|
23
23
|
* `ArrowRight`/`Enter`.
|
|
24
24
|
*/
|
|
25
|
-
export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon = faBars, triggerAriaLabel, triggerTitle, triggerClassName, triggerActive, placement = 'down', className, ...props }) {
|
|
25
|
+
export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon = faBars, triggerAriaLabel, triggerTitle, triggerClassName, triggerActive, placement = 'down', triggerTabIndex, className, ...props }) {
|
|
26
26
|
const isOpen = openMenuId === menuId;
|
|
27
27
|
const menuElementId = `${menuId}-menu`;
|
|
28
28
|
const submenuElementId = `${menuId}-submenu`;
|
|
@@ -449,9 +449,10 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, trigg
|
|
|
449
449
|
'aria-haspopup': 'menu',
|
|
450
450
|
'aria-expanded': isOpen,
|
|
451
451
|
'aria-controls': isOpen ? menuElementId : undefined,
|
|
452
|
+
...(triggerTabIndex !== undefined ? { tabIndex: triggerTabIndex } : {}),
|
|
452
453
|
onClick: handleTriggerClick,
|
|
453
454
|
onKeyDown: handleTriggerKeyDown
|
|
454
455
|
};
|
|
455
|
-
const triggerButton = isLabeledTrigger ? (_jsxs(Button, { innerRef: triggerRef, type: "button", variant: labeledTriggerVariant, className: cn('hc-row-actions-menu-trigger', triggerActiveClassName, triggerClassName), title: resolvedTriggerTitle, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: handleTriggerClick, onKeyDown: handleTriggerKeyDown, children: [_jsx(FaIcon, { icon: triggerIcon, className: "h-[1em] w-[1em] shrink-0", "aria-hidden": true }), _jsx("span", { className: "hc-row-actions-menu-trigger-label inline-flex min-w-0 flex-1 items-center truncate overflow-hidden leading-none", children: triggerLabel })] })) : (_jsx(Button, { ...iconOnlyTriggerProps, children: triggerActive !== undefined ? (_jsx(FilterButtonIcon, { active: triggerActive, icon: triggerIcon })) : (_jsx(FaIcon, { icon: triggerIcon, className: "h-3.5 w-3.5" })) }));
|
|
456
|
+
const triggerButton = isLabeledTrigger ? (_jsxs(Button, { innerRef: triggerRef, type: "button", variant: labeledTriggerVariant, className: cn('hc-row-actions-menu-trigger', triggerActiveClassName, triggerClassName), title: resolvedTriggerTitle, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, tabIndex: triggerTabIndex, onClick: handleTriggerClick, onKeyDown: handleTriggerKeyDown, children: [_jsx(FaIcon, { icon: triggerIcon, className: "h-[1em] w-[1em] shrink-0", "aria-hidden": true }), _jsx("span", { className: "hc-row-actions-menu-trigger-label inline-flex min-w-0 flex-1 items-center truncate overflow-hidden leading-none", children: triggerLabel })] })) : (_jsx(Button, { ...iconOnlyTriggerProps, children: triggerActive !== undefined ? (_jsx(FilterButtonIcon, { active: triggerActive, icon: triggerIcon })) : (_jsx(FaIcon, { icon: triggerIcon, className: "h-3.5 w-3.5" })) }));
|
|
456
457
|
return (_jsxs("div", { ref: rootRef, ...props, className: cn('hc-row-actions-menu shrink-0', className), children: [triggerButton, menuPanel ? portalToBody(menuPanel) : null, submenuPanel] }));
|
|
457
458
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type JSX, type ReactNode } from 'react';
|
|
1
|
+
import { type JSX, type KeyboardEvent, type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Which edge of the main content the sidebar attaches to.
|
|
4
4
|
*/
|
|
@@ -47,6 +47,14 @@ interface Props {
|
|
|
47
47
|
* Optional ARIA role for the body wrapper (e.g. `tabpanel` with a rail tablist).
|
|
48
48
|
*/
|
|
49
49
|
bodyRole?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Optional `aria-labelledby` for the body (typically the active rail tab id).
|
|
52
|
+
*/
|
|
53
|
+
bodyAriaLabelledBy?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Optional keydown handler on the body (e.g. return focus to the rail tab).
|
|
56
|
+
*/
|
|
57
|
+
bodyOnKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
|
|
50
58
|
/**
|
|
51
59
|
* Additional classes for the resizable aside element.
|
|
52
60
|
*/
|
|
@@ -81,6 +89,6 @@ interface Props {
|
|
|
81
89
|
*
|
|
82
90
|
* Left sidebars render `[aside][handle]`; right sidebars render `[handle][aside]`.
|
|
83
91
|
*/
|
|
84
|
-
export declare function Sidebar({ side, ariaLabel, header, children, scroll, scrollAxis, scrollbarAutoHide, bodyClassName, bodyId, bodyRole, asideClassName, resizeHandleClassName, resizeAriaLabel, defaultSize, minSize, getMaxSize, storageKey }: Props): JSX.Element;
|
|
92
|
+
export declare function Sidebar({ side, ariaLabel, header, children, scroll, scrollAxis, scrollbarAutoHide, bodyClassName, bodyId, bodyRole, bodyAriaLabelledBy, bodyOnKeyDown, asideClassName, resizeHandleClassName, resizeAriaLabel, defaultSize, minSize, getMaxSize, storageKey }: Props): JSX.Element;
|
|
85
93
|
export {};
|
|
86
94
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAElB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAEhD;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAE5D;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,MAAM,CAAC;IAE1B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,MAAa,EACb,UAAuB,EACvB,iBAAwB,EACxB,aAAa,EACb,MAAM,EACN,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACX,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkGrB"}
|
|
@@ -7,7 +7,7 @@ import { cn } from '../utils.js';
|
|
|
7
7
|
*
|
|
8
8
|
* Left sidebars render `[aside][handle]`; right sidebars render `[handle][aside]`.
|
|
9
9
|
*/
|
|
10
|
-
export function Sidebar({ side, ariaLabel, header, children, scroll = true, scrollAxis = 'vertical', scrollbarAutoHide = true, bodyClassName, bodyId, bodyRole, asideClassName, resizeHandleClassName, resizeAriaLabel, defaultSize, minSize, getMaxSize, storageKey }) {
|
|
10
|
+
export function Sidebar({ side, ariaLabel, header, children, scroll = true, scrollAxis = 'vertical', scrollbarAutoHide = true, bodyClassName, bodyId, bodyRole, bodyAriaLabelledBy, bodyOnKeyDown, asideClassName, resizeHandleClassName, resizeAriaLabel, defaultSize, minSize, getMaxSize, storageKey }) {
|
|
11
11
|
const resizableOptions = {
|
|
12
12
|
axis: 'x',
|
|
13
13
|
direction: side === 'left' ? 1 : -1,
|
|
@@ -25,7 +25,7 @@ export function Sidebar({ side, ariaLabel, header, children, scroll = true, scro
|
|
|
25
25
|
* does not absorb it and section-header `-mr-*` cancel math keeps working.
|
|
26
26
|
*/
|
|
27
27
|
const scrollBody = (_jsx("div", { className: cn('flex min-h-full min-w-0 flex-col', bodyClassName), children: children }));
|
|
28
|
-
const body = scroll ? (_jsx(Scrollbars, { id: bodyId, role: bodyRole, axis: scrollAxis, autoHide: scrollbarAutoHide, className: "min-h-0 flex-1", children: scrollBody })) : (_jsx("div", { id: bodyId, role: bodyRole, className: cn('flex min-h-0 flex-1 flex-col', bodyClassName), children: children }));
|
|
28
|
+
const body = scroll ? (_jsx(Scrollbars, { id: bodyId, role: bodyRole, "aria-labelledby": bodyAriaLabelledBy, onKeyDown: bodyOnKeyDown, axis: scrollAxis, autoHide: scrollbarAutoHide, className: "min-h-0 flex-1", children: scrollBody })) : (_jsx("div", { id: bodyId, role: bodyRole, "aria-labelledby": bodyAriaLabelledBy, className: cn('flex min-h-0 flex-1 flex-col', bodyClassName), onKeyDown: bodyOnKeyDown, children: children }));
|
|
29
29
|
const aside = (_jsxs("aside", { className: cn('hc-sidebar flex shrink-0 flex-col overflow-x-hidden bg-sidebar', side === 'right' && 'h-full min-h-0', asideClassName), style: { width }, "aria-label": ariaLabel, children: [header, body] }));
|
|
30
30
|
if (side === 'left') {
|
|
31
31
|
return (_jsxs(_Fragment, { children: [aside, handle] }));
|
|
@@ -97,6 +97,10 @@ interface Props {
|
|
|
97
97
|
* Optional data attribute value for keyboard navigation focus targets.
|
|
98
98
|
*/
|
|
99
99
|
dataSidebarEnvironmentId?: string | number;
|
|
100
|
+
/**
|
|
101
|
+
* Nested tree group content owned by this treeitem (expanded children).
|
|
102
|
+
*/
|
|
103
|
+
subtree?: ReactNode;
|
|
100
104
|
/**
|
|
101
105
|
* HTML element for the row container. Use `li` inside {@link SidebarListbox}
|
|
102
106
|
* or {@link SidebarTree}.
|
|
@@ -111,6 +115,6 @@ interface Props {
|
|
|
111
115
|
*
|
|
112
116
|
* The accessible name is derived from visible row content (name, variable summary).
|
|
113
117
|
*/
|
|
114
|
-
export declare function SidebarEnvironmentItem({ name, variableSummary, markerDot, selected, hasChildren, expanded, childrenId, level, setSize, posInSet, onToggleExpand, expandIcon, collapseIcon, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, as }: Props): JSX.Element;
|
|
118
|
+
export declare function SidebarEnvironmentItem({ name, variableSummary, markerDot, selected, hasChildren, expanded, childrenId, level, setSize, posInSet, onToggleExpand, expandIcon, collapseIcon, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, subtree, as }: Props): JSX.Element;
|
|
115
119
|
export {};
|
|
116
120
|
//# sourceMappingURL=SidebarEnvironmentItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarEnvironmentItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarEnvironmentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAU/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3C;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAOD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,eAAe,EACf,SAAS,EACT,QAAgB,EAChB,WAAmB,EACnB,QAAgB,EAChB,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"SidebarEnvironmentItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarEnvironmentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAU/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3C;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAOD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,eAAe,EACf,SAAS,EACT,QAAgB,EAChB,WAAmB,EACnB,QAAgB,EAChB,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,OAAO,EACP,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuGrB"}
|
|
@@ -16,7 +16,7 @@ const ENVIRONMENT_LEVEL_INDENT_PX = 16;
|
|
|
16
16
|
*
|
|
17
17
|
* The accessible name is derived from visible row content (name, variable summary).
|
|
18
18
|
*/
|
|
19
|
-
export function SidebarEnvironmentItem({ name, variableSummary, markerDot, selected = false, hasChildren = false, expanded = false, childrenId, level, setSize, posInSet, onToggleExpand, expandIcon, collapseIcon, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, as = 'li' }) {
|
|
19
|
+
export function SidebarEnvironmentItem({ name, variableSummary, markerDot, selected = false, hasChildren = false, expanded = false, childrenId, level, setSize, posInSet, onToggleExpand, expandIcon, collapseIcon, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, subtree, as = 'li' }) {
|
|
20
20
|
const useTreeItem = as === 'li' && level != null;
|
|
21
21
|
const useListboxOption = as === 'li' && !useTreeItem;
|
|
22
22
|
const showChevron = hasChildren && expandIcon != null && collapseIcon != null && onToggleExpand != null;
|
|
@@ -34,7 +34,9 @@ export function SidebarEnvironmentItem({ name, variableSummary, markerDot, selec
|
|
|
34
34
|
};
|
|
35
35
|
const chevronLabel = expanded ? `Collapse environment "${name}"` : `Expand environment "${name}"`;
|
|
36
36
|
const labelOffsetClass = useTreeItem ? SIDEBAR_CHEVRON_LABEL_OFFSET_CLASS : '';
|
|
37
|
-
return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as,
|
|
37
|
+
return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, subtree: subtree, as: as, dataAttributes: dataSidebarEnvironmentId != null
|
|
38
|
+
? { 'data-sidebar-environment-id': String(dataSidebarEnvironmentId) }
|
|
39
|
+
: undefined, listboxOption: useListboxOption
|
|
38
40
|
? {
|
|
39
41
|
ariaLabel,
|
|
40
42
|
ariaSelected,
|
|
@@ -55,10 +57,8 @@ export function SidebarEnvironmentItem({ name, variableSummary, markerDot, selec
|
|
|
55
57
|
onDoubleClick,
|
|
56
58
|
onKeyDown: onEnter != null ? handleKeyDown : undefined
|
|
57
59
|
}
|
|
58
|
-
: undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, style: indentPx > 0 ? { paddingLeft: indentPx } : undefined,
|
|
59
|
-
? { 'data-sidebar-environment-id': String(dataSidebarEnvironmentId) }
|
|
60
|
-
: {}), children: [showChevron ? (_jsx("button", { type: "button", className: SIDEBAR_CHEVRON_BUTTON_CLASS, onClick: (event) => {
|
|
60
|
+
: undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, style: indentPx > 0 ? { paddingLeft: indentPx } : undefined, children: [showChevron ? (_jsx("button", { type: "button", className: SIDEBAR_CHEVRON_BUTTON_CLASS, onClick: (event) => {
|
|
61
61
|
event.stopPropagation();
|
|
62
62
|
onToggleExpand();
|
|
63
|
-
}, onPointerDown: stopSortableDragPointerDown, tabIndex: -1, "aria-label": chevronLabel, children: _jsx(FaIcon, { icon: expanded ? collapseIcon : expandIcon, className: SIDEBAR_CHEVRON_ICON_CLASS }) })) : useTreeItem ? (_jsx("span", { className: "inline-flex h-4 w-4 shrink-0", "aria-hidden": true })) : null, _jsxs("span", { className: `inline-flex min-w-0 flex-1 items-center gap-1.5 ${labelOffsetClass}`, children: [_jsx("span", { className: "min-w-0 truncate", children: name }), markerDot != null ? (_jsx(SidebarMarkerDot, { marker: markerDot.marker, visible: markerDot.visible, label: markerDot.label })) : null] }), _jsx("span", { className: "shrink-0 text-muted", children: variableSummary })] }) }));
|
|
63
|
+
}, onPointerDown: stopSortableDragPointerDown, tabIndex: -1, "aria-label": chevronLabel, "aria-expanded": expanded, children: _jsx(FaIcon, { icon: expanded ? collapseIcon : expandIcon, className: SIDEBAR_CHEVRON_ICON_CLASS }) })) : useTreeItem ? (_jsx("span", { className: "inline-flex h-4 w-4 shrink-0", "aria-hidden": true })) : null, _jsxs("span", { className: `inline-flex min-w-0 flex-1 items-center gap-1.5 ${labelOffsetClass}`, children: [_jsx("span", { className: "min-w-0 truncate", children: name }), markerDot != null ? (_jsx(SidebarMarkerDot, { marker: markerDot.marker, visible: markerDot.visible, label: markerDot.label })) : null] }), _jsx("span", { className: "shrink-0 text-muted", children: variableSummary })] }) }));
|
|
64
64
|
}
|
|
@@ -126,6 +126,15 @@ interface Props {
|
|
|
126
126
|
* Trailing actions slot, typically a {@link RowActionsMenu}.
|
|
127
127
|
*/
|
|
128
128
|
actions?: ReactNode;
|
|
129
|
+
/**
|
|
130
|
+
* Optional content rendered after actions inside the row (e.g. a nested
|
|
131
|
+
* {@link SidebarTreeGroup} owned by a treeitem).
|
|
132
|
+
*/
|
|
133
|
+
subtree?: ReactNode;
|
|
134
|
+
/**
|
|
135
|
+
* Extra data attributes applied to the focusable row container.
|
|
136
|
+
*/
|
|
137
|
+
dataAttributes?: Record<string, string>;
|
|
129
138
|
/**
|
|
130
139
|
* When true, wraps the actions slot with {@link stopSortableDragPointerDown}.
|
|
131
140
|
* Harmless when sortable: drag activation lives on the grip handle, not the row.
|
|
@@ -149,6 +158,6 @@ interface Props {
|
|
|
149
158
|
* drag behavior via a trailing grip handle (before actions), and a trailing
|
|
150
159
|
* actions slot suitable for Sidebar layout reuse.
|
|
151
160
|
*/
|
|
152
|
-
export declare function SidebarItem({ selected, compact, sortable, listboxOption, treeItem, onContextMenu, actions, actionsStopDrag, as: Container, className, children }: Props): JSX.Element;
|
|
161
|
+
export declare function SidebarItem({ selected, compact, sortable, listboxOption, treeItem, onContextMenu, actions, subtree, dataAttributes, actionsStopDrag, as: Container, className, children }: Props): JSX.Element;
|
|
153
162
|
export {};
|
|
154
163
|
//# sourceMappingURL=SidebarItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACzD;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACzD;AAED,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAE/B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,OAAc,EACd,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,aAAa,EACb,OAAO,EACP,eAAsB,EACtB,EAAE,EAAE,SAAiB,EACrB,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import { stopSortableDragPointerDown } from './stopSortableDragPointerDown.js';
|
|
|
9
9
|
* drag behavior via a trailing grip handle (before actions), and a trailing
|
|
10
10
|
* actions slot suitable for Sidebar layout reuse.
|
|
11
11
|
*/
|
|
12
|
-
export function SidebarItem({ selected = false, compact = true, sortable, listboxOption, treeItem, onContextMenu, actions, actionsStopDrag = true, as: Container = 'div', className, children }) {
|
|
12
|
+
export function SidebarItem({ selected = false, compact = true, sortable, listboxOption, treeItem, onContextMenu, actions, subtree, dataAttributes, actionsStopDrag = true, as: Container = 'div', className, children }) {
|
|
13
13
|
const rowClassName = cn('hc-sidebar-item', sourceRow(selected, compact), className);
|
|
14
14
|
const actionsNode = actions != null ? (_jsx("div", { className: "shrink-0", ...(actionsStopDrag ? { onPointerDown: stopSortableDragPointerDown } : {}), children: actions })) : null;
|
|
15
15
|
const listboxOptionProps = listboxOption != null
|
|
@@ -62,7 +62,7 @@ export function SidebarItem({ selected = false, compact = true, sortable, listbo
|
|
|
62
62
|
: {};
|
|
63
63
|
const interactiveProps = listboxOption != null ? listboxOptionProps : treeItemProps;
|
|
64
64
|
if (sortable != null) {
|
|
65
|
-
return (_jsx(SortableSidebarItem, { id: sortable.id, as: Container, className: rowClassName, dragHandleLabel: sortable.dragHandleLabel, disabled: sortable.disabled, onRowContextMenu: onContextMenu, trailing: actionsNode, ...interactiveProps, children: children }));
|
|
65
|
+
return (_jsx(SortableSidebarItem, { id: sortable.id, as: Container, className: rowClassName, dragHandleLabel: sortable.dragHandleLabel, disabled: sortable.disabled, onRowContextMenu: onContextMenu, trailing: actionsNode, subtree: subtree, dataAttributes: dataAttributes, ...interactiveProps, children: children }));
|
|
66
66
|
}
|
|
67
|
-
return (_jsxs(Container, { className: rowClassName, onContextMenu: onContextMenu, ...interactiveProps, children: [children, actionsNode] }));
|
|
67
|
+
return (_jsxs(Container, { className: rowClassName, onContextMenu: onContextMenu, ...dataAttributes, ...interactiveProps, children: [children, actionsNode, subtree] }));
|
|
68
68
|
}
|
|
@@ -21,7 +21,9 @@ interface Props {
|
|
|
21
21
|
* Accessible listbox container for flat sidebar item lists.
|
|
22
22
|
*
|
|
23
23
|
* Wrap rows rendered with {@link SidebarItem} `as="li"` and `listboxOption` so
|
|
24
|
-
* each row exposes `role="option"` and `aria-selected` correctly.
|
|
24
|
+
* each row exposes `role="option"` and `aria-selected` correctly. Arrow keys
|
|
25
|
+
* move a single roving Tab stop among options; Shift+F10 / ContextMenu open the
|
|
26
|
+
* focused row's actions menu.
|
|
25
27
|
*
|
|
26
28
|
* @example
|
|
27
29
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarListbox.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarListbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SidebarListbox.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarListbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvE,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,eAAuB,EACvB,YAAY,EAAE,SAAS,EACvB,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2CrB"}
|
|
@@ -1,10 +1,32 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
+
import { useLayoutEffect, useRef } from '@harborclient/sdk/react';
|
|
2
3
|
import { cn } from '../utils.js';
|
|
4
|
+
import { SIDEBAR_LISTBOX_ITEM_ROLE, handleSidebarCompositeContainerKeyDown, handleSidebarCompositeFocusIn, querySidebarCompositeItems, setSidebarCompositeRovingTabIndex } from './sidebarCompositeNavigation.js';
|
|
5
|
+
/**
|
|
6
|
+
* Ensures the listbox has exactly one Tab stop among its options.
|
|
7
|
+
*
|
|
8
|
+
* @param root - Listbox element.
|
|
9
|
+
*/
|
|
10
|
+
function ensureListboxTabStop(root) {
|
|
11
|
+
const items = querySidebarCompositeItems(root, SIDEBAR_LISTBOX_ITEM_ROLE);
|
|
12
|
+
if (items.length === 0) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
const currentStop = items.findIndex((item) => item.tabIndex === 0);
|
|
16
|
+
if (currentStop >= 0) {
|
|
17
|
+
setSidebarCompositeRovingTabIndex(items, currentStop);
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
const selectedIndex = items.findIndex((item) => item.getAttribute('aria-selected') === 'true');
|
|
21
|
+
setSidebarCompositeRovingTabIndex(items, selectedIndex >= 0 ? selectedIndex : 0);
|
|
22
|
+
}
|
|
3
23
|
/**
|
|
4
24
|
* Accessible listbox container for flat sidebar item lists.
|
|
5
25
|
*
|
|
6
26
|
* Wrap rows rendered with {@link SidebarItem} `as="li"` and `listboxOption` so
|
|
7
|
-
* each row exposes `role="option"` and `aria-selected` correctly.
|
|
27
|
+
* each row exposes `role="option"` and `aria-selected` correctly. Arrow keys
|
|
28
|
+
* move a single roving Tab stop among options; Shift+F10 / ContextMenu open the
|
|
29
|
+
* focused row's actions menu.
|
|
8
30
|
*
|
|
9
31
|
* @example
|
|
10
32
|
* ```tsx
|
|
@@ -14,5 +36,30 @@ import { cn } from '../utils.js';
|
|
|
14
36
|
* ```
|
|
15
37
|
*/
|
|
16
38
|
export function SidebarListbox({ children, multiselectable = false, 'aria-label': ariaLabel, className }) {
|
|
17
|
-
|
|
39
|
+
const listRef = useRef(null);
|
|
40
|
+
/**
|
|
41
|
+
* Keeps a single Tab stop when options mount or selection changes without focus.
|
|
42
|
+
*/
|
|
43
|
+
useLayoutEffect(() => {
|
|
44
|
+
if (listRef.current != null) {
|
|
45
|
+
ensureListboxTabStop(listRef.current);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
/**
|
|
49
|
+
* Moves focus among options and opens row actions from the composite root.
|
|
50
|
+
*
|
|
51
|
+
* @param event - Keydown bubbled from an option or fired on the listbox.
|
|
52
|
+
*/
|
|
53
|
+
const handleKeyDown = (event) => {
|
|
54
|
+
handleSidebarCompositeContainerKeyDown(event, SIDEBAR_LISTBOX_ITEM_ROLE);
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Syncs roving tabindex when focus enters an option via pointer or script.
|
|
58
|
+
*
|
|
59
|
+
* @param event - Focusin from inside the listbox.
|
|
60
|
+
*/
|
|
61
|
+
const handleFocusIn = (event) => {
|
|
62
|
+
handleSidebarCompositeFocusIn(event, SIDEBAR_LISTBOX_ITEM_ROLE);
|
|
63
|
+
};
|
|
64
|
+
return (_jsx("ul", { ref: listRef, role: "listbox", "aria-multiselectable": multiselectable ? true : undefined, "aria-label": ariaLabel, className: cn('m-0 list-none p-0', className), onKeyDown: handleKeyDown, onFocusCapture: handleFocusIn, children: children }));
|
|
18
65
|
}
|
|
@@ -18,6 +18,8 @@ interface TreeProps {
|
|
|
18
18
|
*
|
|
19
19
|
* Wrap folder rows rendered with {@link SidebarFolderItem} `as="li"` and
|
|
20
20
|
* `treeItem` so each row exposes `role="treeitem"` with expand/collapse state.
|
|
21
|
+
* ArrowUp/Down/Home/End move the roving Tab stop; ArrowLeft/Right expand,
|
|
22
|
+
* collapse, or move to a parent/child; Shift+F10 / ContextMenu open row actions.
|
|
21
23
|
*
|
|
22
24
|
* @example
|
|
23
25
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarTree.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarTree.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SidebarTree.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarTree.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvE,UAAU,SAAS;IACjB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EACV,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA0CzB"}
|
|
@@ -1,10 +1,32 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
+
import { useLayoutEffect, useRef } from '@harborclient/sdk/react';
|
|
2
3
|
import { cn } from '../utils.js';
|
|
4
|
+
import { SIDEBAR_TREE_ITEM_ROLE, handleSidebarCompositeContainerKeyDown, handleSidebarCompositeFocusIn, querySidebarCompositeItems, setSidebarCompositeRovingTabIndex } from './sidebarCompositeNavigation.js';
|
|
5
|
+
/**
|
|
6
|
+
* Ensures the tree has exactly one Tab stop among its visible treeitems.
|
|
7
|
+
*
|
|
8
|
+
* @param root - Tree element.
|
|
9
|
+
*/
|
|
10
|
+
function ensureTreeTabStop(root) {
|
|
11
|
+
const items = querySidebarCompositeItems(root, SIDEBAR_TREE_ITEM_ROLE);
|
|
12
|
+
if (items.length === 0) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
const currentStop = items.findIndex((item) => item.tabIndex === 0);
|
|
16
|
+
if (currentStop >= 0) {
|
|
17
|
+
setSidebarCompositeRovingTabIndex(items, currentStop);
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
const selectedIndex = items.findIndex((item) => item.getAttribute('aria-selected') === 'true');
|
|
21
|
+
setSidebarCompositeRovingTabIndex(items, selectedIndex >= 0 ? selectedIndex : 0);
|
|
22
|
+
}
|
|
3
23
|
/**
|
|
4
24
|
* Accessible tree container for nested sidebar folder hierarchies.
|
|
5
25
|
*
|
|
6
26
|
* Wrap folder rows rendered with {@link SidebarFolderItem} `as="li"` and
|
|
7
27
|
* `treeItem` so each row exposes `role="treeitem"` with expand/collapse state.
|
|
28
|
+
* ArrowUp/Down/Home/End move the roving Tab stop; ArrowLeft/Right expand,
|
|
29
|
+
* collapse, or move to a parent/child; Shift+F10 / ContextMenu open row actions.
|
|
8
30
|
*
|
|
9
31
|
* @example
|
|
10
32
|
* ```tsx
|
|
@@ -17,5 +39,30 @@ import { cn } from '../utils.js';
|
|
|
17
39
|
* ```
|
|
18
40
|
*/
|
|
19
41
|
export function SidebarTree({ children, 'aria-label': ariaLabel, className }) {
|
|
20
|
-
|
|
42
|
+
const treeRef = useRef(null);
|
|
43
|
+
/**
|
|
44
|
+
* Keeps a single Tab stop when treeitems mount or selection changes without focus.
|
|
45
|
+
*/
|
|
46
|
+
useLayoutEffect(() => {
|
|
47
|
+
if (treeRef.current != null) {
|
|
48
|
+
ensureTreeTabStop(treeRef.current);
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
/**
|
|
52
|
+
* Moves focus among treeitems and handles expand/collapse keys.
|
|
53
|
+
*
|
|
54
|
+
* @param event - Keydown bubbled from a treeitem or fired on the tree.
|
|
55
|
+
*/
|
|
56
|
+
const handleKeyDown = (event) => {
|
|
57
|
+
handleSidebarCompositeContainerKeyDown(event, SIDEBAR_TREE_ITEM_ROLE);
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* Syncs roving tabindex when focus enters a treeitem via pointer or script.
|
|
61
|
+
*
|
|
62
|
+
* @param event - Focusin from inside the tree.
|
|
63
|
+
*/
|
|
64
|
+
const handleFocusIn = (event) => {
|
|
65
|
+
handleSidebarCompositeFocusIn(event, SIDEBAR_TREE_ITEM_ROLE);
|
|
66
|
+
};
|
|
67
|
+
return (_jsx("ul", { ref: treeRef, role: "tree", "aria-label": ariaLabel, className: cn('m-0 list-none p-0', className), onKeyDown: handleKeyDown, onFocusCapture: handleFocusIn, children: children }));
|
|
21
68
|
}
|
|
@@ -24,10 +24,19 @@ interface Props {
|
|
|
24
24
|
* Optional trailing slot after the drag handle (typically row actions).
|
|
25
25
|
*/
|
|
26
26
|
trailing?: ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Optional content rendered after trailing actions inside the row container.
|
|
29
|
+
* Use for nested `role="group"` regions owned by a treeitem.
|
|
30
|
+
*/
|
|
31
|
+
subtree?: ReactNode;
|
|
27
32
|
/**
|
|
28
33
|
* When true, renders a static row without drag-and-drop behavior.
|
|
29
34
|
*/
|
|
30
35
|
disabled?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Extra data attributes applied to the row container (focus target).
|
|
38
|
+
*/
|
|
39
|
+
dataAttributes?: Record<string, string>;
|
|
31
40
|
/**
|
|
32
41
|
* Called when the user right-clicks the row container.
|
|
33
42
|
*/
|
|
@@ -50,11 +59,12 @@ interface Props {
|
|
|
50
59
|
}
|
|
51
60
|
/**
|
|
52
61
|
* Wraps a sidebar row with dnd-kit sortable drag behavior. Reordering is activated
|
|
53
|
-
* from a dedicated trailing grip handle
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
* non-sortable sections such as Runs
|
|
62
|
+
* from a dedicated trailing grip handle (mouse / programmatic focus). The handle is
|
|
63
|
+
* removed from Tab order so listbox/tree composites keep a single Tab stop per row;
|
|
64
|
+
* keyboard users reorder via Move up/down in the row actions menu. Keeping the handle
|
|
65
|
+
* after the label keeps leading content flush with non-sortable sections such as Runs
|
|
66
|
+
* and History.
|
|
57
67
|
*/
|
|
58
|
-
export declare function SortableSidebarItem({ id, as: Container, className, dragHandleLabel, children, trailing, disabled, onRowContextMenu, role, 'aria-selected': ariaSelected, 'aria-label': ariaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-level': ariaLevel, 'aria-setsize': ariaSetSize, 'aria-posinset': ariaPosInSet, tabIndex, onClick, onDoubleClick, onKeyDown }: Props): JSX.Element;
|
|
68
|
+
export declare function SortableSidebarItem({ id, as: Container, className, dragHandleLabel, children, trailing, subtree, disabled, dataAttributes, onRowContextMenu, role, 'aria-selected': ariaSelected, 'aria-label': ariaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-level': ariaLevel, 'aria-setsize': ariaSetSize, 'aria-posinset': ariaPosInSet, tabIndex, onClick, onDoubleClick, onKeyDown }: Props): JSX.Element;
|
|
59
69
|
export {};
|
|
60
70
|
//# sourceMappingURL=SortableSidebarItem.d.ts.map
|