@harborclient/sdk 1.0.67 → 1.0.69
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/FooterIcon/index.d.ts +2 -1
- package/dist/components/FooterIcon/index.d.ts.map +1 -1
- package/dist/components/FooterIcon/index.js +3 -2
- package/dist/components/RowActionsMenu/Submenu.d.ts +49 -0
- package/dist/components/RowActionsMenu/Submenu.d.ts.map +1 -0
- package/dist/components/RowActionsMenu/Submenu.js +156 -0
- package/dist/components/RowActionsMenu/index.d.ts +58 -5
- package/dist/components/RowActionsMenu/index.d.ts.map +1 -1
- package/dist/components/RowActionsMenu/index.js +293 -55
- package/dist/components/TabBar/ClosingTabShell.d.ts +20 -0
- package/dist/components/TabBar/ClosingTabShell.d.ts.map +1 -0
- package/dist/components/TabBar/ClosingTabShell.js +126 -0
- package/dist/components/TabBar/TabBarShell.d.ts +58 -0
- package/dist/components/TabBar/TabBarShell.d.ts.map +1 -0
- package/dist/components/TabBar/TabBarShell.js +37 -0
- package/dist/components/TabBar/TabContextMenu.d.ts +23 -0
- package/dist/components/TabBar/TabContextMenu.d.ts.map +1 -0
- package/dist/components/TabBar/TabContextMenu.js +119 -0
- package/dist/components/TabBar/TabNewButton.d.ts +26 -0
- package/dist/components/TabBar/TabNewButton.d.ts.map +1 -0
- package/dist/components/TabBar/TabNewButton.js +14 -0
- package/dist/components/TabBar/index.d.ts +92 -0
- package/dist/components/TabBar/index.d.ts.map +1 -0
- package/dist/components/TabBar/index.js +224 -0
- package/dist/components/TabBar/tabCloseMenuHelpers.d.ts +41 -0
- package/dist/components/TabBar/tabCloseMenuHelpers.d.ts.map +1 -0
- package/dist/components/TabBar/tabCloseMenuHelpers.js +48 -0
- package/dist/components/TabBar/types.d.ts +60 -0
- package/dist/components/TabBar/types.d.ts.map +1 -0
- package/dist/components/TabBar/types.js +1 -0
- package/dist/components/TabBar/useExitingTabItems.d.ts +73 -0
- package/dist/components/TabBar/useExitingTabItems.d.ts.map +1 -0
- package/dist/components/TabBar/useExitingTabItems.js +103 -0
- package/dist/components/TabBar/useSortableTabItem.d.ts +31 -0
- package/dist/components/TabBar/useSortableTabItem.d.ts.map +1 -0
- package/dist/components/TabBar/useSortableTabItem.js +29 -0
- package/dist/components/Toolbar/index.d.ts.map +1 -1
- package/dist/components/Toolbar/index.js +21 -5
- package/dist/components/classes.d.ts +9 -0
- package/dist/components/classes.d.ts.map +1 -1
- package/dist/components/classes.js +15 -2
- package/dist/components/footerBarUtils.d.ts +11 -0
- package/dist/components/footerBarUtils.d.ts.map +1 -0
- package/dist/components/footerBarUtils.js +10 -0
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +3 -1
- package/dist/components/menuPosition.d.ts +48 -0
- package/dist/components/menuPosition.d.ts.map +1 -0
- package/dist/components/menuPosition.js +49 -0
- package/dist/components/rowActionsMenuHelpers.d.ts +17 -0
- package/dist/components/rowActionsMenuHelpers.d.ts.map +1 -1
- package/dist/components/rowActionsMenuHelpers.js +47 -0
- package/dist/styles.css +12 -0
- package/dist/types.d.ts +2 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +7 -1
|
@@ -24,7 +24,8 @@ interface Props extends Omit<ComponentPropsWithoutRef<'button'>, 'aria-label' |
|
|
|
24
24
|
title?: string;
|
|
25
25
|
/**
|
|
26
26
|
* Active-state background treatment. Use `"selection"` to match sidebar
|
|
27
|
-
* toolbar icon toggles; defaults to `"surface"` for
|
|
27
|
+
* toolbar icon toggles (`bg-sidebar-section`); defaults to `"surface"` for
|
|
28
|
+
* the action menu icon.
|
|
28
29
|
*/
|
|
29
30
|
activeStyle?: ActiveStyle;
|
|
30
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAE3C,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,YAAY,GAAG,cAAc,CAAC;IAC7F;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAuBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,EACL,KAAK,EACL,WAAuB,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBrB"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
|
|
2
2
|
import { FaIcon } from '../FaIcon/index.js';
|
|
3
|
+
import { footerIconButtonSizeClass } from '../footerBarUtils.js';
|
|
3
4
|
import { cn } from '../utils.js';
|
|
4
|
-
const footerIconBase =
|
|
5
|
+
const footerIconBase = `inline-flex ${footerIconButtonSizeClass} shrink-0 cursor-pointer items-center justify-center rounded-md border-none app-no-drag`;
|
|
5
6
|
/**
|
|
6
7
|
* Square icon toggle styles for footer sidebar buttons.
|
|
7
8
|
*
|
|
@@ -12,7 +13,7 @@ const footerIconBase = 'inline-flex h-7 w-7 shrink-0 cursor-pointer items-center
|
|
|
12
13
|
function footerIconButton(active, activeStyle) {
|
|
13
14
|
if (activeStyle === 'selection') {
|
|
14
15
|
return active
|
|
15
|
-
? `${footerIconBase} bg-
|
|
16
|
+
? `${footerIconBase} bg-sidebar-section text-text`
|
|
16
17
|
: `${footerIconBase} bg-transparent text-text hover:bg-selection focus-visible:bg-selection focus-visible:text-text`;
|
|
17
18
|
}
|
|
18
19
|
return active
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import type { JSX } from 'react';
|
|
2
|
+
import type { MenuItem } from './index.js';
|
|
3
|
+
interface Props {
|
|
4
|
+
/**
|
|
5
|
+
* Grouped flyout entries, mirroring `RowActionsMenu`'s `groups` shape.
|
|
6
|
+
*/
|
|
7
|
+
groups: MenuItem[][];
|
|
8
|
+
/**
|
|
9
|
+
* Bounding rect of the parent row that anchors this flyout.
|
|
10
|
+
*/
|
|
11
|
+
anchorRect: DOMRect;
|
|
12
|
+
/**
|
|
13
|
+
* Id applied to the flyout panel for `aria-controls` on the anchor row.
|
|
14
|
+
*/
|
|
15
|
+
menuElementId: string;
|
|
16
|
+
/**
|
|
17
|
+
* Called when a leaf item is activated. The caller is responsible for
|
|
18
|
+
* closing the whole menu tree and invoking the item's `onSelect`.
|
|
19
|
+
*/
|
|
20
|
+
onSelectItem: (item: MenuItem) => void;
|
|
21
|
+
/**
|
|
22
|
+
* Closes just this flyout and returns focus to the anchor row.
|
|
23
|
+
*/
|
|
24
|
+
onRequestClose: () => void;
|
|
25
|
+
/**
|
|
26
|
+
* Closes the entire menu tree, e.g. when the user tabs out.
|
|
27
|
+
*/
|
|
28
|
+
onCloseAll: () => void;
|
|
29
|
+
/**
|
|
30
|
+
* Forwarded so the parent can cancel a pending auto-close while the
|
|
31
|
+
* pointer is over the flyout panel itself.
|
|
32
|
+
*/
|
|
33
|
+
onMouseEnter: () => void;
|
|
34
|
+
/**
|
|
35
|
+
* Forwarded so the parent can schedule closing this flyout once the
|
|
36
|
+
* pointer leaves the panel.
|
|
37
|
+
*/
|
|
38
|
+
onMouseLeave: () => void;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Flyout panel opened beside a `RowActionsMenu` row that has a `submenu`.
|
|
42
|
+
* Portaled to `document.body` with fixed positioning, matching the main
|
|
43
|
+
* panel's styling and keyboard behavior (roving tabindex, typeahead,
|
|
44
|
+
* Home/End). `ArrowLeft` and `Tab` bubble a close request to the parent
|
|
45
|
+
* instead of being handled locally.
|
|
46
|
+
*/
|
|
47
|
+
export declare function Submenu({ groups, anchorRect, menuElementId, onSelectItem, onRequestClose, onCloseAll, onMouseEnter, onMouseLeave }: Props): JSX.Element;
|
|
48
|
+
export {};
|
|
49
|
+
//# sourceMappingURL=Submenu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Submenu.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/Submenu.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAgBhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAK3C,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB;;;OAGG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB;;;OAGG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,YAAY,EACb,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+MrB"}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
+
import { faCheck } from '@fortawesome/free-solid-svg-icons';
|
|
3
|
+
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
|
|
4
|
+
import { FaIcon } from '../FaIcon/index.js';
|
|
5
|
+
import { MENU_MIN_WIDTH_PX, clampMenuPosition, getSubmenuAnchoredPosition } from '../menuPosition.js';
|
|
6
|
+
import { portalToBody } from '../portalToBody.js';
|
|
7
|
+
import { findAdjacentEnabledIndex, findEdgeEnabledIndex, isMenuItemEnabled, menuItemClass } from '../rowActionsMenuHelpers.js';
|
|
8
|
+
import { cn, resolveMenuTypeahead } from '../utils.js';
|
|
9
|
+
/** Milliseconds before an accumulated typeahead search resets. */
|
|
10
|
+
const TYPEAHEAD_TIMEOUT_MS = 500;
|
|
11
|
+
/**
|
|
12
|
+
* Flyout panel opened beside a `RowActionsMenu` row that has a `submenu`.
|
|
13
|
+
* Portaled to `document.body` with fixed positioning, matching the main
|
|
14
|
+
* panel's styling and keyboard behavior (roving tabindex, typeahead,
|
|
15
|
+
* Home/End). `ArrowLeft` and `Tab` bubble a close request to the parent
|
|
16
|
+
* instead of being handled locally.
|
|
17
|
+
*/
|
|
18
|
+
export function Submenu({ groups, anchorRect, menuElementId, onSelectItem, onRequestClose, onCloseAll, onMouseEnter, onMouseLeave }) {
|
|
19
|
+
const panelRef = useRef(null);
|
|
20
|
+
const itemRefs = useRef([]);
|
|
21
|
+
const typeaheadBuffer = useRef('');
|
|
22
|
+
const typeaheadTimer = useRef(null);
|
|
23
|
+
const flatItems = useMemo(() => groups.flat(), [groups]);
|
|
24
|
+
const itemLabels = useMemo(() => flatItems.map((item) => item.label), [flatItems]);
|
|
25
|
+
const [focusedIndex, setFocusedIndex] = useState(() => findEdgeEnabledIndex(flatItems, false) ?? 0);
|
|
26
|
+
const [position, setPosition] = useState(() => getSubmenuAnchoredPosition(anchorRect, { width: MENU_MIN_WIDTH_PX, height: 0 }));
|
|
27
|
+
/**
|
|
28
|
+
* Clears the accumulated typeahead buffer.
|
|
29
|
+
*/
|
|
30
|
+
const clearTypeahead = useCallback(() => {
|
|
31
|
+
typeaheadBuffer.current = '';
|
|
32
|
+
if (typeaheadTimer.current != null) {
|
|
33
|
+
window.clearTimeout(typeaheadTimer.current);
|
|
34
|
+
typeaheadTimer.current = null;
|
|
35
|
+
}
|
|
36
|
+
}, []);
|
|
37
|
+
/**
|
|
38
|
+
* Focuses a flyout item by index and updates roving tabindex state.
|
|
39
|
+
*/
|
|
40
|
+
const focusItem = useCallback((index) => {
|
|
41
|
+
setFocusedIndex(index);
|
|
42
|
+
requestAnimationFrame(() => {
|
|
43
|
+
itemRefs.current[index]?.focus();
|
|
44
|
+
});
|
|
45
|
+
}, []);
|
|
46
|
+
/**
|
|
47
|
+
* Moves focus into the flyout as soon as it mounts.
|
|
48
|
+
*/
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
requestAnimationFrame(() => {
|
|
51
|
+
itemRefs.current[focusedIndex]?.focus();
|
|
52
|
+
});
|
|
53
|
+
// Intentionally runs once on mount; the flyout is remounted per anchor,
|
|
54
|
+
// so `focusedIndex` never needs to re-trigger this effect.
|
|
55
|
+
}, []);
|
|
56
|
+
/**
|
|
57
|
+
* Positions the flyout beside the anchor row once its size is known,
|
|
58
|
+
* flipping sides and clamping so it stays inside the viewport.
|
|
59
|
+
*/
|
|
60
|
+
useLayoutEffect(() => {
|
|
61
|
+
const panelRect = panelRef.current?.getBoundingClientRect();
|
|
62
|
+
const size = {
|
|
63
|
+
width: panelRect?.width ?? MENU_MIN_WIDTH_PX,
|
|
64
|
+
height: panelRect?.height ?? 0
|
|
65
|
+
};
|
|
66
|
+
const requested = getSubmenuAnchoredPosition(anchorRect, size);
|
|
67
|
+
setPosition(size.height > 0 ? clampMenuPosition(requested, size) : requested);
|
|
68
|
+
}, [anchorRect, groups]);
|
|
69
|
+
/**
|
|
70
|
+
* Handles keyboard navigation within the flyout. `ArrowLeft` and `Tab`
|
|
71
|
+
* stop propagation and delegate closing to the parent, since the parent
|
|
72
|
+
* panel would otherwise also react to the bubbled event.
|
|
73
|
+
*/
|
|
74
|
+
const handleKeyDown = (event) => {
|
|
75
|
+
if (event.key === 'Tab') {
|
|
76
|
+
event.preventDefault();
|
|
77
|
+
event.stopPropagation();
|
|
78
|
+
onCloseAll();
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
if (event.key === 'ArrowLeft') {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
event.stopPropagation();
|
|
84
|
+
onRequestClose();
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
|
|
88
|
+
const direction = event.key === 'ArrowDown' ? 1 : -1;
|
|
89
|
+
const nextIndex = findAdjacentEnabledIndex(flatItems, focusedIndex, direction);
|
|
90
|
+
if (nextIndex != null) {
|
|
91
|
+
event.preventDefault();
|
|
92
|
+
event.stopPropagation();
|
|
93
|
+
clearTypeahead();
|
|
94
|
+
focusItem(nextIndex);
|
|
95
|
+
}
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
if (event.key === 'Home') {
|
|
99
|
+
const firstIndex = findEdgeEnabledIndex(flatItems, false);
|
|
100
|
+
if (firstIndex != null) {
|
|
101
|
+
event.preventDefault();
|
|
102
|
+
event.stopPropagation();
|
|
103
|
+
clearTypeahead();
|
|
104
|
+
focusItem(firstIndex);
|
|
105
|
+
}
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
if (event.key === 'End') {
|
|
109
|
+
const lastIndex = findEdgeEnabledIndex(flatItems, true);
|
|
110
|
+
if (lastIndex != null) {
|
|
111
|
+
event.preventDefault();
|
|
112
|
+
event.stopPropagation();
|
|
113
|
+
clearTypeahead();
|
|
114
|
+
focusItem(lastIndex);
|
|
115
|
+
}
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
const typeahead = resolveMenuTypeahead(itemLabels, focusedIndex, event.key, typeaheadBuffer.current);
|
|
119
|
+
if (typeahead) {
|
|
120
|
+
const candidate = flatItems[typeahead.index];
|
|
121
|
+
if (!candidate || !isMenuItemEnabled(candidate)) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
event.preventDefault();
|
|
125
|
+
event.stopPropagation();
|
|
126
|
+
typeaheadBuffer.current = typeahead.buffer;
|
|
127
|
+
if (typeaheadTimer.current != null) {
|
|
128
|
+
window.clearTimeout(typeaheadTimer.current);
|
|
129
|
+
}
|
|
130
|
+
typeaheadTimer.current = window.setTimeout(() => {
|
|
131
|
+
typeaheadBuffer.current = '';
|
|
132
|
+
typeaheadTimer.current = null;
|
|
133
|
+
}, TYPEAHEAD_TIMEOUT_MS);
|
|
134
|
+
focusItem(typeahead.index);
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
return portalToBody(_jsx("div", { ref: panelRef, id: menuElementId, role: "menu", className: "hc-row-actions-menu-panel hc-row-actions-submenu-panel app-no-drag fixed z-50 min-w-[200px] rounded-md border border-separator bg-surface py-1 shadow-md", style: { left: position.x, top: position.y }, onKeyDown: handleKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: groups.map((group, groupIndex) => {
|
|
138
|
+
let flatIndex = groups.slice(0, groupIndex).reduce((count, g) => count + g.length, 0);
|
|
139
|
+
return (_jsx("div", { className: groupIndex > 0
|
|
140
|
+
? 'hc-row-actions-menu-group border-t border-separator'
|
|
141
|
+
: 'hc-row-actions-menu-group', children: group.map((item) => {
|
|
142
|
+
const itemIndex = flatIndex++;
|
|
143
|
+
const isCheckboxItem = item.checked !== undefined;
|
|
144
|
+
const isDisabled = item.disabled === true;
|
|
145
|
+
return (_jsxs("button", { ref: (el) => {
|
|
146
|
+
itemRefs.current[itemIndex] = isDisabled ? null : el;
|
|
147
|
+
}, type: "button", role: isCheckboxItem ? 'menuitemcheckbox' : 'menuitem', "aria-checked": isCheckboxItem ? item.checked : undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, tabIndex: isDisabled ? -1 : itemIndex === focusedIndex ? 0 : -1, className: cn('hc-row-actions-menu-item', menuItemClass(item.variant, isDisabled)), onClick: (e) => {
|
|
148
|
+
e.stopPropagation();
|
|
149
|
+
if (isDisabled) {
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
onSelectItem(item);
|
|
153
|
+
}, children: [isCheckboxItem ? (_jsx("span", { className: "hc-row-actions-menu-item-check inline-flex w-4 shrink-0 justify-center", "aria-hidden": true, children: item.checked ? _jsx(FaIcon, { icon: faCheck, className: "h-3 w-3" }) : null })) : null, _jsx("span", { className: "hc-row-actions-menu-item-label min-w-0", children: item.label })] }, item.label));
|
|
154
|
+
}) }, groupIndex));
|
|
155
|
+
}) }));
|
|
156
|
+
}
|
|
@@ -1,14 +1,36 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
|
+
import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
|
|
3
|
+
import { type ButtonVariant } from '../Button/index.js';
|
|
4
|
+
interface MenuItemBase {
|
|
3
5
|
label: string;
|
|
4
|
-
onSelect: () => void;
|
|
5
6
|
variant?: 'default' | 'danger';
|
|
6
7
|
/**
|
|
7
8
|
* When set, renders the item as a checkbox-style menu entry with a leading
|
|
8
9
|
* checkmark slot. `true` shows the check; `false` reserves the slot for alignment.
|
|
9
10
|
*/
|
|
10
11
|
checked?: boolean;
|
|
11
|
-
|
|
12
|
+
/**
|
|
13
|
+
* When true, renders a non-interactive informational row excluded from keyboard
|
|
14
|
+
* focus and activation.
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* A single row in a `RowActionsMenu`. An item is either a leaf action that
|
|
20
|
+
* runs `onSelect`, or a parent that opens a `submenu` flyout beside it (shown
|
|
21
|
+
* with a trailing caret) — never both.
|
|
22
|
+
*/
|
|
23
|
+
export type MenuItem = (MenuItemBase & {
|
|
24
|
+
onSelect: () => void;
|
|
25
|
+
submenu?: undefined;
|
|
26
|
+
}) | (MenuItemBase & {
|
|
27
|
+
onSelect?: undefined;
|
|
28
|
+
/**
|
|
29
|
+
* Grouped entries shown in a flyout beside this row when it is hovered,
|
|
30
|
+
* clicked, or activated with `ArrowRight`/`Enter`.
|
|
31
|
+
*/
|
|
32
|
+
submenu: MenuItem[][];
|
|
33
|
+
});
|
|
12
34
|
interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
13
35
|
/**
|
|
14
36
|
* Grouped menu entries shown when the trigger is open. Each inner array is
|
|
@@ -27,10 +49,41 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
|
27
49
|
* Called when the user opens or closes a menu.
|
|
28
50
|
*/
|
|
29
51
|
onOpenChange: (id: string | null) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Visual style for the menu trigger button. Defaults to `icon` (hamburger).
|
|
54
|
+
*/
|
|
55
|
+
triggerVariant?: ButtonVariant;
|
|
56
|
+
/**
|
|
57
|
+
* Optional label rendered beside the trigger icon. When set, the trigger
|
|
58
|
+
* switches from icon-only to a labeled control.
|
|
59
|
+
*/
|
|
60
|
+
triggerLabel?: ReactNode;
|
|
61
|
+
/**
|
|
62
|
+
* Icon shown in the trigger. Defaults to the hamburger icon.
|
|
63
|
+
*/
|
|
64
|
+
triggerIcon?: IconDefinition;
|
|
65
|
+
/**
|
|
66
|
+
* Accessible name for the trigger. Defaults to "Row actions" for icon-only
|
|
67
|
+
* triggers or `triggerLabel` when a label is provided.
|
|
68
|
+
*/
|
|
69
|
+
triggerAriaLabel?: string;
|
|
70
|
+
/**
|
|
71
|
+
* Tooltip for the trigger button.
|
|
72
|
+
*/
|
|
73
|
+
triggerTitle?: string;
|
|
74
|
+
/**
|
|
75
|
+
* Additional classes merged onto the trigger button.
|
|
76
|
+
*/
|
|
77
|
+
triggerClassName?: string;
|
|
30
78
|
}
|
|
31
79
|
/**
|
|
32
80
|
* Hamburger-triggered dropdown for row-level actions (rename, delete, etc.).
|
|
81
|
+
*
|
|
82
|
+
* The menu panel is portaled to `document.body` with fixed positioning so it is
|
|
83
|
+
* not clipped by overflow-hidden sidebar or scroll containers. Items with a
|
|
84
|
+
* `submenu` open a nested flyout panel beside them on hover, click, or
|
|
85
|
+
* `ArrowRight`/`Enter`.
|
|
33
86
|
*/
|
|
34
|
-
export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, className, ...props }: Props): JSX.Element;
|
|
87
|
+
export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon, triggerAriaLabel, triggerTitle, triggerClassName, className, ...props }: Props): JSX.Element;
|
|
35
88
|
export {};
|
|
36
89
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"
|
|
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,EAAE,wBAAwB,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAkBhE,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;CAC3B;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,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkjBrB"}
|