@harborclient/sdk 1.1.8 → 1.1.10
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/dist/components/Resizable/ResizeHandle.d.ts +7 -2
- package/dist/components/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/components/Resizable/ResizeHandle.js +6 -2
- package/dist/components/SidebarItem/SidebarColorDot.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarColorDot.js +1 -1
- package/dist/components/SidebarItem/SidebarCommitItem.d.ts +7 -1
- package/dist/components/SidebarItem/SidebarCommitItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarCommitItem.js +4 -2
- package/dist/components/SidebarItem/SidebarEnvironmentItem.d.ts +23 -15
- package/dist/components/SidebarItem/SidebarEnvironmentItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarEnvironmentItem.js +20 -6
- package/dist/components/SidebarItem/SidebarFolderItem.d.ts +30 -4
- package/dist/components/SidebarItem/SidebarFolderItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarFolderItem.js +26 -5
- package/dist/components/SidebarItem/SidebarHistoryItem.d.ts +9 -5
- package/dist/components/SidebarItem/SidebarHistoryItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarHistoryItem.js +13 -4
- package/dist/components/SidebarItem/SidebarItem.d.ts +94 -3
- package/dist/components/SidebarItem/SidebarItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarItem.js +55 -4
- package/dist/components/SidebarItem/SidebarList.d.ts +30 -0
- package/dist/components/SidebarItem/SidebarList.d.ts.map +1 -0
- package/dist/components/SidebarItem/SidebarList.js +17 -0
- package/dist/components/SidebarItem/SidebarListbox.d.ts +35 -0
- package/dist/components/SidebarItem/SidebarListbox.d.ts.map +1 -0
- package/dist/components/SidebarItem/SidebarListbox.js +18 -0
- package/dist/components/SidebarItem/SidebarMethodBadge.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarMethodBadge.js +1 -1
- package/dist/components/SidebarItem/SidebarRequestItem.d.ts +39 -24
- package/dist/components/SidebarItem/SidebarRequestItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarRequestItem.js +29 -4
- package/dist/components/SidebarItem/SidebarRunItem.d.ts +23 -6
- package/dist/components/SidebarItem/SidebarRunItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarRunItem.js +15 -4
- package/dist/components/SidebarItem/SidebarStatusMarker.js +1 -1
- package/dist/components/SidebarItem/SidebarTabGroupItem.d.ts +7 -3
- package/dist/components/SidebarItem/SidebarTabGroupItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SidebarTabGroupItem.js +8 -3
- package/dist/components/SidebarItem/SidebarTree.d.ts +55 -0
- package/dist/components/SidebarItem/SidebarTree.d.ts.map +1 -0
- package/dist/components/SidebarItem/SidebarTree.js +30 -0
- package/dist/components/SidebarItem/SortableSidebarItem.d.ts +24 -5
- package/dist/components/SidebarItem/SortableSidebarItem.d.ts.map +1 -1
- package/dist/components/SidebarItem/SortableSidebarItem.js +27 -13
- package/dist/components/SidebarItem/index.d.ts +5 -1
- package/dist/components/SidebarItem/index.d.ts.map +1 -1
- package/dist/components/SidebarItem/index.js +4 -0
- package/dist/components/SidebarItem/sidebarItemClasses.d.ts +4 -0
- package/dist/components/SidebarItem/sidebarItemClasses.d.ts.map +1 -1
- package/dist/components/SidebarItem/sidebarItemClasses.js +4 -0
- package/dist/components/SidebarItem/sidebarListOption.d.ts +6 -0
- package/dist/components/SidebarItem/sidebarListOption.d.ts.map +1 -0
- package/dist/components/SidebarItem/sidebarListOption.js +10 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -1
- package/package.json +1 -1
|
@@ -2,16 +2,67 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@harborclient
|
|
|
2
2
|
import { cn } from '../utils.js';
|
|
3
3
|
import { SortableSidebarItem } from './SortableSidebarItem.js';
|
|
4
4
|
import { sourceRow } from './sidebarItemClasses.js';
|
|
5
|
+
import { handleSidebarOptionKeyDown } from './sidebarListOption.js';
|
|
5
6
|
import { stopSortableDragPointerDown } from './stopSortableDragPointerDown.js';
|
|
6
7
|
/**
|
|
7
8
|
* Base shell for sidebar list rows. Applies shared row chrome, optional sortable
|
|
8
|
-
* drag behavior, and a trailing actions slot suitable
|
|
9
|
+
* drag behavior via a leading grip handle, and a trailing actions slot suitable
|
|
10
|
+
* for future Sidebar layout reuse.
|
|
9
11
|
*/
|
|
10
|
-
export function SidebarItem({ selected = false, compact = true, sortable, onContextMenu, actions, actionsStopDrag = true, as: Container = 'div', className, children }) {
|
|
12
|
+
export function SidebarItem({ selected = false, compact = true, sortable, listboxOption, treeItem, onContextMenu, actions, actionsStopDrag = true, as: Container = 'div', className, children }) {
|
|
11
13
|
const rowClassName = cn('hc-sidebar-item', sourceRow(selected, compact), className);
|
|
12
14
|
const rowContent = (_jsxs(_Fragment, { children: [children, actions != null ? (_jsx("div", { className: "shrink-0", ...(actionsStopDrag ? { onPointerDown: stopSortableDragPointerDown } : {}), children: actions })) : null] }));
|
|
15
|
+
const listboxOptionProps = listboxOption != null
|
|
16
|
+
? {
|
|
17
|
+
role: 'option',
|
|
18
|
+
'aria-selected': (listboxOption.ariaSelected ?? selected) ? 'true' : 'false',
|
|
19
|
+
...(listboxOption.ariaCurrent === true ? { 'aria-current': 'true' } : {}),
|
|
20
|
+
...(listboxOption.ariaLabel != null ? { 'aria-label': listboxOption.ariaLabel } : {}),
|
|
21
|
+
tabIndex: listboxOption.tabIndex ?? (selected ? 0 : -1),
|
|
22
|
+
...(listboxOption.onClick != null ? { onClick: listboxOption.onClick } : {}),
|
|
23
|
+
...(listboxOption.onDoubleClick != null
|
|
24
|
+
? { onDoubleClick: listboxOption.onDoubleClick }
|
|
25
|
+
: {}),
|
|
26
|
+
onKeyDown: (event) => {
|
|
27
|
+
listboxOption.onKeyDown?.(event);
|
|
28
|
+
if (event.defaultPrevented) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
handleSidebarOptionKeyDown(event, () => {
|
|
32
|
+
listboxOption.onClick?.(event);
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
: {};
|
|
37
|
+
const treeItemProps = treeItem != null
|
|
38
|
+
? {
|
|
39
|
+
role: 'treeitem',
|
|
40
|
+
'aria-selected': selected ? 'true' : 'false',
|
|
41
|
+
...(treeItem.ariaLabel != null ? { 'aria-label': treeItem.ariaLabel } : {}),
|
|
42
|
+
...(treeItem.expanded != null
|
|
43
|
+
? { 'aria-expanded': treeItem.expanded ? 'true' : 'false' }
|
|
44
|
+
: {}),
|
|
45
|
+
...(treeItem.controlsId != null ? { 'aria-controls': treeItem.controlsId } : {}),
|
|
46
|
+
...(treeItem.level != null ? { 'aria-level': treeItem.level } : {}),
|
|
47
|
+
...(treeItem.setSize != null ? { 'aria-setsize': treeItem.setSize } : {}),
|
|
48
|
+
...(treeItem.posInSet != null ? { 'aria-posinset': treeItem.posInSet } : {}),
|
|
49
|
+
tabIndex: treeItem.tabIndex ?? (selected ? 0 : -1),
|
|
50
|
+
...(treeItem.onClick != null ? { onClick: treeItem.onClick } : {}),
|
|
51
|
+
...(treeItem.onDoubleClick != null ? { onDoubleClick: treeItem.onDoubleClick } : {}),
|
|
52
|
+
onKeyDown: (event) => {
|
|
53
|
+
treeItem.onKeyDown?.(event);
|
|
54
|
+
if (event.defaultPrevented) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
handleSidebarOptionKeyDown(event, () => {
|
|
58
|
+
treeItem.onClick?.(event);
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
: {};
|
|
63
|
+
const interactiveProps = listboxOption != null ? listboxOptionProps : treeItemProps;
|
|
13
64
|
if (sortable != null) {
|
|
14
|
-
return (_jsx(SortableSidebarItem, { id: sortable.id, className: rowClassName, dragHandleLabel: sortable.dragHandleLabel, disabled: sortable.disabled, onRowContextMenu: onContextMenu, children: rowContent }));
|
|
65
|
+
return (_jsx(SortableSidebarItem, { id: sortable.id, as: Container, className: rowClassName, dragHandleLabel: sortable.dragHandleLabel, disabled: sortable.disabled, onRowContextMenu: onContextMenu, ...interactiveProps, children: rowContent }));
|
|
15
66
|
}
|
|
16
|
-
return (_jsx(Container, { className: rowClassName, onContextMenu: onContextMenu, children: rowContent }));
|
|
67
|
+
return (_jsx(Container, { className: rowClassName, onContextMenu: onContextMenu, ...interactiveProps, children: rowContent }));
|
|
17
68
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { JSX, ReactNode } from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
/**
|
|
4
|
+
* List rows. Each child should render as an `<li>` (e.g. {@link SidebarCommitItem} `as="li"`).
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Accessible name for the list when the section title is not sufficient.
|
|
9
|
+
*/
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Additional classes merged onto the list element.
|
|
13
|
+
*/
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Accessible list container for non-selectable sidebar rows.
|
|
18
|
+
*
|
|
19
|
+
* Wrap rows rendered with `as="li"` so each child is a `role="listitem"`.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <SidebarList aria-label="Commits">
|
|
24
|
+
* <SidebarCommitItem as="li" message="Fix auth" author="Alex" timestampLabel="2h ago" icon={faCodeBranch} />
|
|
25
|
+
* </SidebarList>
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare function SidebarList({ children, 'aria-label': ariaLabel, className }: Props): JSX.Element;
|
|
29
|
+
export {};
|
|
30
|
+
//# sourceMappingURL=SidebarList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidebarList.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAMhG"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
+
import { cn } from '../utils.js';
|
|
3
|
+
/**
|
|
4
|
+
* Accessible list container for non-selectable sidebar rows.
|
|
5
|
+
*
|
|
6
|
+
* Wrap rows rendered with `as="li"` so each child is a `role="listitem"`.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* <SidebarList aria-label="Commits">
|
|
11
|
+
* <SidebarCommitItem as="li" message="Fix auth" author="Alex" timestampLabel="2h ago" icon={faCodeBranch} />
|
|
12
|
+
* </SidebarList>
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export function SidebarList({ children, 'aria-label': ariaLabel, className }) {
|
|
16
|
+
return (_jsx("ul", { role: "list", "aria-label": ariaLabel, className: cn('m-0 list-none p-0', className), children: children }));
|
|
17
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { JSX, ReactNode } from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
/**
|
|
4
|
+
* Listbox option rows. Each child should be a {@link SidebarItem} with `as="li"`.
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* When true, multiple options may be selected at once.
|
|
9
|
+
*/
|
|
10
|
+
multiselectable?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Accessible name for the listbox when the section title is not sufficient.
|
|
13
|
+
*/
|
|
14
|
+
'aria-label'?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Additional classes merged onto the listbox element.
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Accessible listbox container for flat sidebar item lists.
|
|
22
|
+
*
|
|
23
|
+
* Wrap rows rendered with {@link SidebarItem} `as="li"` and `listboxOption` so
|
|
24
|
+
* each row exposes `role="option"` and `aria-selected` correctly.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <SidebarListbox aria-label="Collections">
|
|
29
|
+
* <SidebarRequestItem as="li" name="List users" method="GET" />
|
|
30
|
+
* </SidebarListbox>
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export declare function SidebarListbox({ children, multiselectable, 'aria-label': ariaLabel, className }: Props): JSX.Element;
|
|
34
|
+
export {};
|
|
35
|
+
//# sourceMappingURL=SidebarListbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidebarListbox.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarListbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,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;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,eAAuB,EACvB,YAAY,EAAE,SAAS,EACvB,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAWrB"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
+
import { cn } from '../utils.js';
|
|
3
|
+
/**
|
|
4
|
+
* Accessible listbox container for flat sidebar item lists.
|
|
5
|
+
*
|
|
6
|
+
* Wrap rows rendered with {@link SidebarItem} `as="li"` and `listboxOption` so
|
|
7
|
+
* each row exposes `role="option"` and `aria-selected` correctly.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <SidebarListbox aria-label="Collections">
|
|
12
|
+
* <SidebarRequestItem as="li" name="List users" method="GET" />
|
|
13
|
+
* </SidebarListbox>
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
export function SidebarListbox({ children, multiselectable = false, 'aria-label': ariaLabel, className }) {
|
|
17
|
+
return (_jsx("ul", { role: "listbox", "aria-multiselectable": multiselectable ? true : undefined, "aria-label": ariaLabel, className: cn('m-0 list-none p-0', className), children: children }));
|
|
18
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarMethodBadge.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarMethodBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,SAAiB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"SidebarMethodBadge.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarMethodBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,SAAiB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CASpF"}
|
|
@@ -7,5 +7,5 @@ import { METHOD_CLASSES } from './sidebarItemClasses.js';
|
|
|
7
7
|
export function SidebarMethodBadge({ method, uppercase = false }) {
|
|
8
8
|
const methodKey = method.toLowerCase();
|
|
9
9
|
const colorClass = METHOD_CLASSES[methodKey] ?? 'text-info';
|
|
10
|
-
return (_jsx("span", { className: cn('shrink-0 px-1 py-px', uppercase && 'font-medium uppercase', colorClass),
|
|
10
|
+
return (_jsx("span", { className: cn('shrink-0 px-1 py-px', uppercase && 'font-medium uppercase', colorClass), children: method }));
|
|
11
11
|
}
|
|
@@ -39,39 +39,46 @@ interface Props {
|
|
|
39
39
|
*/
|
|
40
40
|
sortable?: SidebarItemSortableConfig;
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* Accessible label for the listbox option. When omitted, the name is derived
|
|
43
|
+
* from visible row content (method, name, markers).
|
|
43
44
|
*/
|
|
44
|
-
|
|
45
|
+
ariaLabel?: string;
|
|
45
46
|
/**
|
|
46
|
-
*
|
|
47
|
+
* Overrides the `aria-selected` state. When omitted, falls back to `selected`.
|
|
48
|
+
* Use to decouple selection semantics from highlight styling.
|
|
47
49
|
*/
|
|
48
|
-
|
|
50
|
+
ariaSelected?: boolean;
|
|
49
51
|
/**
|
|
50
|
-
*
|
|
52
|
+
* When true, marks the row as the current item with `aria-current="true"`.
|
|
51
53
|
*/
|
|
52
|
-
|
|
54
|
+
ariaCurrent?: boolean;
|
|
53
55
|
/**
|
|
54
|
-
*
|
|
56
|
+
* Called when the user right-clicks the row container.
|
|
55
57
|
*/
|
|
56
|
-
|
|
58
|
+
onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
|
|
57
59
|
/**
|
|
58
|
-
*
|
|
60
|
+
* Called when the primary label area is activated.
|
|
59
61
|
*/
|
|
60
|
-
|
|
62
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
61
63
|
/**
|
|
62
64
|
* Trailing actions slot, typically a row actions menu.
|
|
63
65
|
*/
|
|
64
66
|
actions?: ReactNode;
|
|
65
67
|
/**
|
|
66
|
-
* HTML element for the row container
|
|
68
|
+
* HTML element for the row container. Use `li` inside {@link SidebarListbox}.
|
|
67
69
|
*/
|
|
68
70
|
as?: 'div' | 'li';
|
|
69
71
|
}
|
|
70
72
|
/**
|
|
71
73
|
* Renders a saved-request sidebar row with method badge, optional color dot or git
|
|
72
74
|
* status marker, and shared row chrome. Used in both Collections and Git sidebars.
|
|
75
|
+
*
|
|
76
|
+
* The accessible name defaults to visible row content (method, name, markers) but
|
|
77
|
+
* can be overridden with `ariaLabel` (e.g. to include git status context).
|
|
78
|
+
*
|
|
79
|
+
* Wrap lists in {@link SidebarListbox} and pass `as="li"` for valid listbox semantics.
|
|
73
80
|
*/
|
|
74
|
-
export declare function SidebarRequestItem({ method, name, nameClassName, colorDot, statusMarker, selected, sortable,
|
|
81
|
+
export declare function SidebarRequestItem({ method, name, nameClassName, colorDot, statusMarker, selected, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, actions, as }: Props): JSX.Element;
|
|
75
82
|
interface DocumentProps {
|
|
76
83
|
/**
|
|
77
84
|
* Icon shown before the document name. Defaults to a file-lines icon when omitted.
|
|
@@ -106,38 +113,46 @@ interface DocumentProps {
|
|
|
106
113
|
*/
|
|
107
114
|
selected?: boolean;
|
|
108
115
|
/**
|
|
109
|
-
*
|
|
116
|
+
* Accessible label for the listbox option. When omitted, the name is derived
|
|
117
|
+
* from visible row content (name, markers).
|
|
110
118
|
*/
|
|
111
|
-
|
|
119
|
+
ariaLabel?: string;
|
|
120
|
+
/**
|
|
121
|
+
* Overrides the `aria-selected` state. When omitted, falls back to `selected`.
|
|
122
|
+
*/
|
|
123
|
+
ariaSelected?: boolean;
|
|
112
124
|
/**
|
|
113
|
-
*
|
|
125
|
+
* When true, marks the row as the current item with `aria-current="true"`.
|
|
114
126
|
*/
|
|
115
|
-
|
|
127
|
+
ariaCurrent?: boolean;
|
|
116
128
|
/**
|
|
117
|
-
* Called when the
|
|
129
|
+
* Called when the user right-clicks the row container.
|
|
118
130
|
*/
|
|
119
|
-
|
|
131
|
+
onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
|
|
120
132
|
/**
|
|
121
|
-
*
|
|
133
|
+
* Called when the primary label area is activated.
|
|
122
134
|
*/
|
|
123
|
-
|
|
135
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
124
136
|
/**
|
|
125
|
-
*
|
|
137
|
+
* Called when the primary label area is double-clicked.
|
|
126
138
|
*/
|
|
127
|
-
|
|
139
|
+
onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
128
140
|
/**
|
|
129
141
|
* Trailing actions slot, typically a row actions menu.
|
|
130
142
|
*/
|
|
131
143
|
actions?: ReactNode;
|
|
132
144
|
/**
|
|
133
|
-
* HTML element for the row container.
|
|
145
|
+
* HTML element for the row container. Use `li` inside {@link SidebarListbox}.
|
|
134
146
|
*/
|
|
135
147
|
as?: 'div' | 'li';
|
|
136
148
|
}
|
|
137
149
|
/**
|
|
138
150
|
* Renders a markdown document sidebar row with file icon, optional color dot or git
|
|
139
151
|
* status marker, and shared row chrome. Used in both Collections and Git sidebars.
|
|
152
|
+
*
|
|
153
|
+
* The accessible name defaults to visible row content (name, markers) but can be
|
|
154
|
+
* overridden with `ariaLabel` (e.g. to include git status context).
|
|
140
155
|
*/
|
|
141
|
-
export declare function SidebarDocumentItem({ icon, name, nameClassName, colorDot, statusMarker, selected,
|
|
156
|
+
export declare function SidebarDocumentItem({ icon, name, nameClassName, colorDot, statusMarker, selected, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, actions, as }: DocumentProps): JSX.Element;
|
|
142
157
|
export {};
|
|
143
158
|
//# sourceMappingURL=SidebarRequestItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarRequestItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarRequestItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAK/E,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QACjC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,YAAY,CAAC,EAAE;QACb,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC
|
|
1
|
+
{"version":3,"file":"SidebarRequestItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarRequestItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,14 +9,39 @@ import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
|
|
|
9
9
|
/**
|
|
10
10
|
* Renders a saved-request sidebar row with method badge, optional color dot or git
|
|
11
11
|
* status marker, and shared row chrome. Used in both Collections and Git sidebars.
|
|
12
|
+
*
|
|
13
|
+
* The accessible name defaults to visible row content (method, name, markers) but
|
|
14
|
+
* can be overridden with `ariaLabel` (e.g. to include git status context).
|
|
15
|
+
*
|
|
16
|
+
* Wrap lists in {@link SidebarListbox} and pass `as="li"` for valid listbox semantics.
|
|
12
17
|
*/
|
|
13
|
-
export function SidebarRequestItem({ method, name, nameClassName, colorDot, statusMarker, selected = false, sortable,
|
|
14
|
-
|
|
18
|
+
export function SidebarRequestItem({ method, name, nameClassName, colorDot, statusMarker, selected = false, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, actions, as = 'li' }) {
|
|
19
|
+
const useListboxOption = as === 'li';
|
|
20
|
+
return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
|
|
21
|
+
? {
|
|
22
|
+
ariaLabel,
|
|
23
|
+
ariaSelected,
|
|
24
|
+
ariaCurrent,
|
|
25
|
+
onClick
|
|
26
|
+
}
|
|
27
|
+
: undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, children: [_jsx(SidebarMethodBadge, { method: method }), colorDot != null ? (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name }), _jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })] })) : (_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name })), statusMarker != null ? (_jsx(SidebarStatusMarker, { marker: statusMarker.marker, className: statusMarker.className, label: statusMarker.label })) : null] }) }));
|
|
15
28
|
}
|
|
16
29
|
/**
|
|
17
30
|
* Renders a markdown document sidebar row with file icon, optional color dot or git
|
|
18
31
|
* status marker, and shared row chrome. Used in both Collections and Git sidebars.
|
|
32
|
+
*
|
|
33
|
+
* The accessible name defaults to visible row content (name, markers) but can be
|
|
34
|
+
* overridden with `ariaLabel` (e.g. to include git status context).
|
|
19
35
|
*/
|
|
20
|
-
export function SidebarDocumentItem({ icon = faFileLines, name, nameClassName, colorDot, statusMarker, selected = false,
|
|
21
|
-
|
|
36
|
+
export function SidebarDocumentItem({ icon = faFileLines, name, nameClassName, colorDot, statusMarker, selected = false, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, actions, as = 'li' }) {
|
|
37
|
+
const useListboxOption = as === 'li';
|
|
38
|
+
return (_jsx(SidebarItem, { selected: selected, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
|
|
39
|
+
? {
|
|
40
|
+
ariaLabel,
|
|
41
|
+
ariaSelected,
|
|
42
|
+
ariaCurrent,
|
|
43
|
+
onClick,
|
|
44
|
+
onDoubleClick
|
|
45
|
+
}
|
|
46
|
+
: undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, children: [_jsx(FaIcon, { icon: icon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), colorDot != null ? (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name }), _jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })] })) : (_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name })), statusMarker != null ? (_jsx(SidebarStatusMarker, { marker: statusMarker.marker, className: statusMarker.className, label: statusMarker.label })) : null] }) }));
|
|
22
47
|
}
|
|
@@ -25,21 +25,31 @@ interface Props {
|
|
|
25
25
|
*/
|
|
26
26
|
selected?: boolean;
|
|
27
27
|
/**
|
|
28
|
-
* Tooltip title for the primary
|
|
28
|
+
* Tooltip title for the primary label area.
|
|
29
29
|
*/
|
|
30
30
|
title?: string;
|
|
31
31
|
/**
|
|
32
|
-
* Accessible label for the
|
|
32
|
+
* Accessible label for the listbox option. When omitted, the name is derived
|
|
33
|
+
* from visible row content (method, label, connection badge, status summary).
|
|
33
34
|
*/
|
|
34
|
-
ariaLabel
|
|
35
|
+
ariaLabel?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Overrides the `aria-selected` state. When omitted, falls back to `selected`.
|
|
38
|
+
* Use to decouple selection semantics from highlight styling.
|
|
39
|
+
*/
|
|
40
|
+
ariaSelected?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* When true, marks the row as the current item with `aria-current="true"`.
|
|
43
|
+
*/
|
|
44
|
+
ariaCurrent?: boolean;
|
|
35
45
|
/**
|
|
36
46
|
* Called when the user right-clicks the row container.
|
|
37
47
|
*/
|
|
38
48
|
onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
|
|
39
49
|
/**
|
|
40
|
-
* Called when the primary row
|
|
50
|
+
* Called when the primary row area is activated.
|
|
41
51
|
*/
|
|
42
|
-
onClick?: (event: MouseEvent<
|
|
52
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
43
53
|
/**
|
|
44
54
|
* Trailing actions slot, typically a row actions menu.
|
|
45
55
|
*/
|
|
@@ -48,10 +58,17 @@ interface Props {
|
|
|
48
58
|
* Optional data attribute value for keyboard navigation focus targets.
|
|
49
59
|
*/
|
|
50
60
|
dataSidebarRunResultId?: string | number;
|
|
61
|
+
/**
|
|
62
|
+
* HTML element for the row container. Use `li` inside {@link SidebarListbox}.
|
|
63
|
+
*/
|
|
64
|
+
as?: 'div' | 'li';
|
|
51
65
|
}
|
|
52
66
|
/**
|
|
53
67
|
* Renders a saved run result row in the Collections sidebar Runs section.
|
|
68
|
+
*
|
|
69
|
+
* The accessible name is derived from visible row content (method, label, connection badge,
|
|
70
|
+
* status summary).
|
|
54
71
|
*/
|
|
55
|
-
export declare function SidebarRunItem({ method, label, connectionBadge, statusDotClassName, statusSummary, selected, title, ariaLabel, onContextMenu, onClick, actions, dataSidebarRunResultId }: Props): JSX.Element;
|
|
72
|
+
export declare function SidebarRunItem({ method, label, connectionBadge, statusDotClassName, statusSummary, selected, title, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, actions, dataSidebarRunResultId, as }: Props): JSX.Element;
|
|
56
73
|
export {};
|
|
57
74
|
//# sourceMappingURL=SidebarRunItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarRunItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarRunItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf
|
|
1
|
+
{"version":3,"file":"SidebarRunItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarRunItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;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,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzC;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,aAAa,EACb,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,OAAO,EACP,OAAO,EACP,sBAAsB,EACtB,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2CrB"}
|
|
@@ -1,13 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
-
import { Button } from '../Button/index.js';
|
|
3
2
|
import { SidebarItem } from './SidebarItem.js';
|
|
4
3
|
import { SidebarMethodBadge } from './SidebarMethodBadge.js';
|
|
5
4
|
import { SidebarStatusDot } from './SidebarStatusDot.js';
|
|
5
|
+
import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
|
|
6
6
|
/**
|
|
7
7
|
* Renders a saved run result row in the Collections sidebar Runs section.
|
|
8
|
+
*
|
|
9
|
+
* The accessible name is derived from visible row content (method, label, connection badge,
|
|
10
|
+
* status summary).
|
|
8
11
|
*/
|
|
9
|
-
export function SidebarRunItem({ method, label, connectionBadge, statusDotClassName, statusSummary, selected = false, title, ariaLabel, onContextMenu, onClick, actions, dataSidebarRunResultId }) {
|
|
10
|
-
|
|
12
|
+
export function SidebarRunItem({ method, label, connectionBadge, statusDotClassName, statusSummary, selected = false, title, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, actions, dataSidebarRunResultId, as = 'li' }) {
|
|
13
|
+
const useListboxOption = as === 'li';
|
|
14
|
+
return (_jsx(SidebarItem, { selected: selected, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
|
|
15
|
+
? {
|
|
16
|
+
ariaLabel,
|
|
17
|
+
ariaSelected,
|
|
18
|
+
ariaCurrent,
|
|
19
|
+
onClick
|
|
20
|
+
}
|
|
21
|
+
: undefined, children: _jsxs("span", { className: `${SIDEBAR_ITEM_BUTTON_CLASS} py-0.5`, title: title, ...(dataSidebarRunResultId != null
|
|
11
22
|
? { 'data-sidebar-run-result-id': String(dataSidebarRunResultId) }
|
|
12
|
-
: {}),
|
|
23
|
+
: {}), children: [method != null && method !== '' ? _jsx(SidebarMethodBadge, { method: method, uppercase: true }) : null, _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate text-text", children: label }), connectionBadge != null ? (_jsx("span", { className: "shrink-0 rounded bg-info/15 px-1.5 py-0.5 text-[14px] font-medium text-info", title: `Stored in ${connectionBadge}`, children: connectionBadge })) : null] }), _jsx(SidebarStatusDot, { className: statusDotClassName, srOnlyLabel: statusSummary })] }) }));
|
|
13
24
|
}
|
|
@@ -4,5 +4,5 @@ import { cn } from '../utils.js';
|
|
|
4
4
|
* Renders a git change status marker in square brackets after a file name.
|
|
5
5
|
*/
|
|
6
6
|
export function SidebarStatusMarker({ marker, className, label }) {
|
|
7
|
-
return (_jsxs("span", { className: cn('shrink-0', className), title: label, "aria-label": label, children: ["[", marker, "]"] }));
|
|
7
|
+
return (_jsxs("span", { className: cn('shrink-0', className), role: "img", title: label, "aria-label": label, children: ["[", marker, "]"] }));
|
|
8
8
|
}
|
|
@@ -35,17 +35,21 @@ interface Props {
|
|
|
35
35
|
*/
|
|
36
36
|
onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
|
|
37
37
|
/**
|
|
38
|
-
* Called when the primary row
|
|
38
|
+
* Called when the primary row area is activated.
|
|
39
39
|
*/
|
|
40
|
-
onClick?: (event: MouseEvent<
|
|
40
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
41
41
|
/**
|
|
42
42
|
* Trailing actions slot, typically a row actions menu.
|
|
43
43
|
*/
|
|
44
44
|
actions?: ReactNode;
|
|
45
|
+
/**
|
|
46
|
+
* HTML element for the row container. Use `li` inside {@link SidebarListbox}.
|
|
47
|
+
*/
|
|
48
|
+
as?: 'div' | 'li';
|
|
45
49
|
}
|
|
46
50
|
/**
|
|
47
51
|
* Renders a tab group row in the Collections sidebar Tab Groups section.
|
|
48
52
|
*/
|
|
49
|
-
export declare function SidebarTabGroupItem({ name, summary, icon, colorDot, selected, sortable, onContextMenu, onClick, actions }: Props): JSX.Element;
|
|
53
|
+
export declare function SidebarTabGroupItem({ name, summary, icon, colorDot, selected, sortable, onContextMenu, onClick, actions, as }: Props): JSX.Element;
|
|
50
54
|
export {};
|
|
51
55
|
//# sourceMappingURL=SidebarTabGroupItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarTabGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarTabGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SidebarTabGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarTabGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAG/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QACjC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;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,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,OAAO,EACP,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCrB"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
-
import { Button } from '../Button/index.js';
|
|
3
2
|
import { FaIcon } from '../FaIcon/index.js';
|
|
4
3
|
import { SidebarColorDot } from './SidebarColorDot.js';
|
|
5
4
|
import { SidebarItem } from './SidebarItem.js';
|
|
5
|
+
import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
|
|
6
6
|
/**
|
|
7
7
|
* Renders a tab group row in the Collections sidebar Tab Groups section.
|
|
8
8
|
*/
|
|
9
|
-
export function SidebarTabGroupItem({ name, summary, icon, colorDot, selected = false, sortable, onContextMenu, onClick, actions }) {
|
|
10
|
-
|
|
9
|
+
export function SidebarTabGroupItem({ name, summary, icon, colorDot, selected = false, sortable, onContextMenu, onClick, actions, as = 'li' }) {
|
|
10
|
+
const useListboxOption = as === 'li';
|
|
11
|
+
return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
|
|
12
|
+
? {
|
|
13
|
+
onClick
|
|
14
|
+
}
|
|
15
|
+
: undefined, children: _jsxs("span", { className: `${SIDEBAR_ITEM_BUTTON_CLASS} gap-2 rounded-md px-2 py-1`, children: [_jsx(FaIcon, { icon: icon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), _jsxs("span", { className: "inline-flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate", children: name }), colorDot != null ? (_jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })) : null] }), _jsx("span", { className: "shrink-0 text-muted", children: summary })] }) }));
|
|
11
16
|
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { JSX, ReactNode } from 'react';
|
|
2
|
+
interface TreeProps {
|
|
3
|
+
/**
|
|
4
|
+
* Tree rows. Each child should be a {@link SidebarFolderItem} with `as="li"`.
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Accessible name for the tree when the section title is not sufficient.
|
|
9
|
+
*/
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Additional classes merged onto the tree element.
|
|
13
|
+
*/
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Accessible tree container for nested sidebar folder hierarchies.
|
|
18
|
+
*
|
|
19
|
+
* Wrap folder rows rendered with {@link SidebarFolderItem} `as="li"` and
|
|
20
|
+
* `treeItem` so each row exposes `role="treeitem"` with expand/collapse state.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <SidebarTree aria-label="Collections">
|
|
25
|
+
* <SidebarFolderItem as="li" name="Auth" expanded childrenId="auth-children" />
|
|
26
|
+
* <SidebarTreeGroup id="auth-children">
|
|
27
|
+
* <SidebarRequestItem as="li" name="Login" method="POST" />
|
|
28
|
+
* </SidebarTreeGroup>
|
|
29
|
+
* </SidebarTree>
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export declare function SidebarTree({ children, 'aria-label': ariaLabel, className }: TreeProps): JSX.Element;
|
|
33
|
+
interface TreeGroupProps {
|
|
34
|
+
/**
|
|
35
|
+
* Child tree rows or nested groups.
|
|
36
|
+
*/
|
|
37
|
+
children: ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Stable id referenced by the parent treeitem's `aria-controls`.
|
|
40
|
+
*/
|
|
41
|
+
id: string;
|
|
42
|
+
/**
|
|
43
|
+
* Additional classes merged onto the group element.
|
|
44
|
+
*/
|
|
45
|
+
className?: string;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Child region for an expanded folder treeitem.
|
|
49
|
+
*
|
|
50
|
+
* Renders `role="group"` and must use the same `id` passed to the parent
|
|
51
|
+
* folder's `childrenId` / `aria-controls`.
|
|
52
|
+
*/
|
|
53
|
+
export declare function SidebarTreeGroup({ children, id, className }: TreeGroupProps): JSX.Element;
|
|
54
|
+
export {};
|
|
55
|
+
//# sourceMappingURL=SidebarTree.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidebarTree.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,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;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EACV,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAMzB;AAED,UAAU,cAAc;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAMzF"}
|