@harborclient/sdk 1.0.55 → 1.0.58
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/CodeEditor/syntaxHighlightedPlaceholder.d.ts +8 -0
- package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.d.ts.map +1 -1
- package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.js +139 -22
- package/dist/components/SegmentedTabs/index.js +2 -2
- package/dist/components/Toolbar/index.d.ts +7 -3
- package/dist/components/Toolbar/index.d.ts.map +1 -1
- package/dist/components/Toolbar/index.js +13 -6
- package/dist/components/VisibilityMenu/index.d.ts +34 -0
- package/dist/components/VisibilityMenu/index.d.ts.map +1 -0
- package/dist/components/{SegmentedTabs/SegmentedTabsVisibilityMenu.js → VisibilityMenu/index.js} +15 -15
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/package.json +1 -1
- package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.d.ts +0 -22
- package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.d.ts.map +0 -1
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import type { Extension } from '@codemirror/state';
|
|
2
|
+
import { EditorView } from '@codemirror/view';
|
|
2
3
|
import { type RenderHighlightedPlaceholderOptions } from './renderHighlightedPlaceholder.js';
|
|
3
4
|
/**
|
|
4
5
|
* Options for building a muted syntax-highlighted placeholder layer.
|
|
5
6
|
*/
|
|
6
7
|
export type SyntaxHighlightedPlaceholderOptions = RenderHighlightedPlaceholderOptions;
|
|
8
|
+
/**
|
|
9
|
+
* Returns whether the syntax-highlighted placeholder should be visible.
|
|
10
|
+
*
|
|
11
|
+
* @param view - Parent CodeMirror editor view.
|
|
12
|
+
* @param engaged - True after the user pressed inside the editor chrome.
|
|
13
|
+
*/
|
|
14
|
+
export declare function shouldShowSyntaxPlaceholder(view: EditorView, engaged: boolean): boolean;
|
|
7
15
|
/**
|
|
8
16
|
* Returns CodeMirror extensions that show muted syntax-highlighted placeholder content
|
|
9
17
|
* when the editor document is empty and unfocused.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"syntaxHighlightedPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/syntaxHighlightedPlaceholder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"syntaxHighlightedPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/syntaxHighlightedPlaceholder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAGL,UAAU,EAIX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,mCAAmC,EAEzC,MAAM,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,mCAAmC,GAAG,mCAAmC,CAAC;AA6CtF;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAQvF;AAiGD;;;;;;GAMG;AACH,wBAAgB,kCAAkC,CAChD,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,mCAAmC,GAC3C,SAAS,EAAE,CA+Eb"}
|
|
@@ -28,13 +28,32 @@ class SyntaxHighlightedPlaceholderWidget extends WidgetType {
|
|
|
28
28
|
return true;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
+
/**
|
|
32
|
+
* Returns whether focus currently lives inside the editor's DOM subtree.
|
|
33
|
+
*
|
|
34
|
+
* @param view - Parent CodeMirror editor view.
|
|
35
|
+
*/
|
|
36
|
+
function isEditorDomFocused(view) {
|
|
37
|
+
const active = view.root.activeElement;
|
|
38
|
+
if (active == null) {
|
|
39
|
+
return false;
|
|
40
|
+
}
|
|
41
|
+
return view.dom.contains(active);
|
|
42
|
+
}
|
|
31
43
|
/**
|
|
32
44
|
* Returns whether the syntax-highlighted placeholder should be visible.
|
|
33
45
|
*
|
|
34
46
|
* @param view - Parent CodeMirror editor view.
|
|
47
|
+
* @param engaged - True after the user pressed inside the editor chrome.
|
|
35
48
|
*/
|
|
36
|
-
function shouldShowSyntaxPlaceholder(view) {
|
|
37
|
-
|
|
49
|
+
export function shouldShowSyntaxPlaceholder(view, engaged) {
|
|
50
|
+
if (view.state.doc.length > 0) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
if (engaged || isEditorDomFocused(view)) {
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
return true;
|
|
38
57
|
}
|
|
39
58
|
/**
|
|
40
59
|
* Builds widget decorations for the muted placeholder layer.
|
|
@@ -50,6 +69,75 @@ function buildSyntaxPlaceholderDecorations(text, options) {
|
|
|
50
69
|
}).range(0)
|
|
51
70
|
]);
|
|
52
71
|
}
|
|
72
|
+
/**
|
|
73
|
+
* ViewPlugin that tracks editor engagement and renders placeholder decorations.
|
|
74
|
+
*/
|
|
75
|
+
class SyntaxHighlightedPlaceholderPlugin {
|
|
76
|
+
text;
|
|
77
|
+
options;
|
|
78
|
+
placeholder;
|
|
79
|
+
/**
|
|
80
|
+
* True after a pointer press inside the editor; cleared when focus leaves the editor
|
|
81
|
+
* while the document is still empty.
|
|
82
|
+
*/
|
|
83
|
+
engaged = false;
|
|
84
|
+
/**
|
|
85
|
+
* @param view - Parent CodeMirror editor view.
|
|
86
|
+
* @param text - Placeholder source shown until the user engages or types.
|
|
87
|
+
* @param options - Highlighting and theme options.
|
|
88
|
+
*/
|
|
89
|
+
constructor(view, text, options) {
|
|
90
|
+
this.text = text;
|
|
91
|
+
this.options = options;
|
|
92
|
+
this.placeholder = this.compute(view);
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Recomputes placeholder decorations from document length and engagement state.
|
|
96
|
+
*
|
|
97
|
+
* @param view - Parent CodeMirror editor view.
|
|
98
|
+
*/
|
|
99
|
+
compute(view) {
|
|
100
|
+
return shouldShowSyntaxPlaceholder(view, this.engaged)
|
|
101
|
+
? buildSyntaxPlaceholderDecorations(this.text, this.options)
|
|
102
|
+
: Decoration.none;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Applies a new engagement flag and refreshes decorations when it changes.
|
|
106
|
+
*
|
|
107
|
+
* @param view - Parent CodeMirror editor view.
|
|
108
|
+
* @param nextEngaged - Whether the user has pressed inside the editor chrome.
|
|
109
|
+
*/
|
|
110
|
+
setEngaged(view, nextEngaged) {
|
|
111
|
+
if (this.engaged === nextEngaged) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
this.engaged = nextEngaged;
|
|
115
|
+
this.placeholder = this.compute(view);
|
|
116
|
+
view.dispatch({});
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Shows or hides the placeholder when the document, focus, or engagement changes.
|
|
120
|
+
*
|
|
121
|
+
* @param update - Parent view update.
|
|
122
|
+
*/
|
|
123
|
+
update(update) {
|
|
124
|
+
if (update.docChanged || update.focusChanged || update.view.state.doc.length === 0) {
|
|
125
|
+
this.placeholder = this.compute(update.view);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
get decorations() {
|
|
129
|
+
return this.placeholder;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* Returns whether a DOM event target lies inside the editor root element.
|
|
134
|
+
*
|
|
135
|
+
* @param view - Parent CodeMirror editor view.
|
|
136
|
+
* @param target - Event target node.
|
|
137
|
+
*/
|
|
138
|
+
function isEventTargetInEditor(view, target) {
|
|
139
|
+
return target instanceof Node && view.dom.contains(target);
|
|
140
|
+
}
|
|
53
141
|
/**
|
|
54
142
|
* Returns CodeMirror extensions that show muted syntax-highlighted placeholder content
|
|
55
143
|
* when the editor document is empty and unfocused.
|
|
@@ -58,37 +146,66 @@ function buildSyntaxPlaceholderDecorations(text, options) {
|
|
|
58
146
|
* @param options - Highlighting and theme options shared with the parent editor.
|
|
59
147
|
*/
|
|
60
148
|
export function createSyntaxHighlightedPlaceholder(text, options) {
|
|
61
|
-
const
|
|
62
|
-
placeholder;
|
|
149
|
+
const placeholderPlugin = ViewPlugin.fromClass(class extends SyntaxHighlightedPlaceholderPlugin {
|
|
63
150
|
/**
|
|
64
151
|
* Initializes placeholder decorations for an empty, unfocused document.
|
|
65
152
|
*
|
|
66
153
|
* @param view - Parent CodeMirror editor view.
|
|
67
154
|
*/
|
|
68
155
|
constructor(view) {
|
|
69
|
-
|
|
70
|
-
? buildSyntaxPlaceholderDecorations(text, options)
|
|
71
|
-
: Decoration.none;
|
|
156
|
+
super(view, text, options);
|
|
72
157
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
158
|
+
}, { decorations: (v) => v.decorations });
|
|
159
|
+
/**
|
|
160
|
+
* Marks the editor engaged on pointer presses inside the editor chrome only.
|
|
161
|
+
*
|
|
162
|
+
* @param view - Parent CodeMirror editor view.
|
|
163
|
+
* @param event - Pointer or mouse event from the editor root.
|
|
164
|
+
*/
|
|
165
|
+
const handleEditorPointerDown = (view, event) => {
|
|
166
|
+
if (view.state.doc.length > 0 || !isEventTargetInEditor(view, event.target)) {
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
const plugin = view.plugin(placeholderPlugin);
|
|
170
|
+
if (plugin == null) {
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
plugin.setEngaged(view, true);
|
|
174
|
+
};
|
|
175
|
+
/**
|
|
176
|
+
* Clears engagement after focus leaves the editor while the document is still empty.
|
|
177
|
+
*
|
|
178
|
+
* @param view - Parent CodeMirror editor view.
|
|
179
|
+
*/
|
|
180
|
+
const handleEditorFocusOut = (view) => {
|
|
181
|
+
requestAnimationFrame(() => {
|
|
182
|
+
if (view.state.doc.length > 0 || isEditorDomFocused(view)) {
|
|
80
183
|
return;
|
|
81
184
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
185
|
+
const plugin = view.plugin(placeholderPlugin);
|
|
186
|
+
if (plugin == null) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
plugin.setEngaged(view, false);
|
|
190
|
+
});
|
|
191
|
+
};
|
|
192
|
+
const engagementHandlers = EditorView.domEventHandlers({
|
|
193
|
+
mousedown(event, view) {
|
|
194
|
+
handleEditorPointerDown(view, event);
|
|
195
|
+
return false;
|
|
196
|
+
},
|
|
197
|
+
pointerdown(event, view) {
|
|
198
|
+
handleEditorPointerDown(view, event);
|
|
199
|
+
return false;
|
|
200
|
+
},
|
|
201
|
+
focusout(_event, view) {
|
|
202
|
+
handleEditorFocusOut(view);
|
|
203
|
+
return false;
|
|
88
204
|
}
|
|
89
|
-
}
|
|
205
|
+
});
|
|
90
206
|
return [
|
|
91
|
-
|
|
207
|
+
placeholderPlugin,
|
|
208
|
+
engagementHandlers,
|
|
92
209
|
EditorView.contentAttributes.of({ 'aria-placeholder': text }),
|
|
93
210
|
EditorView.theme({
|
|
94
211
|
'.cm-content:has(.cm-syntax-placeholder) .cm-activeLine': {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
2
2
|
import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from '@harborclient/sdk/react';
|
|
3
|
+
import { VisibilityMenu } from '../VisibilityMenu/index.js';
|
|
3
4
|
import { segment, segmentGroup } from '../classes.js';
|
|
4
5
|
import { getFocusableElements } from '../useDialogFocus.js';
|
|
5
6
|
import { cn, resolveTabListKeyAction } from '../utils.js';
|
|
6
7
|
import { SegmentedTabsContext } from './SegmentedTabsContext.js';
|
|
7
|
-
import { SegmentedTabsVisibilityMenu } from './SegmentedTabsVisibilityMenu.js';
|
|
8
8
|
export { SegmentedTabsGroup } from './SegmentedTabsGroup.js';
|
|
9
9
|
export { SegmentedTabPanel } from './SegmentedTabPanel.js';
|
|
10
10
|
/**
|
|
@@ -204,5 +204,5 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
|
|
|
204
204
|
'aria-selected': selected,
|
|
205
205
|
...(context ? { 'aria-controls': getPanelId(tab.value) } : {})
|
|
206
206
|
}), children: _jsxs("span", { className: "hc-segmented-tabs-tab-label inline-flex items-center justify-center gap-1.5", children: [_jsx("span", { className: "inline-flex shrink-0 items-center px-1.5", children: _jsx("span", { className: cn('hc-segmented-tabs-tab-indicator h-1.5 w-1.5 shrink-0 rounded-full', tab.indicator ? 'bg-accent' : 'bg-transparent'), "aria-hidden": true }) }), tab.label, _jsx("span", { className: "hc-segmented-tabs-tab-indicator-spacer inline-flex shrink-0 items-center px-1.5", "aria-hidden": true, children: _jsx("span", { className: "h-1.5 w-1.5 shrink-0" }) })] }) }, tab.value));
|
|
207
|
-
}) }), editable && (_jsx(
|
|
207
|
+
}) }), editable && (_jsx(VisibilityMenu, { items: editableTabs, visibleValues: visibleTabValues, onToggle: handleVisibilityToggle }))] }));
|
|
208
208
|
}
|
|
@@ -51,17 +51,21 @@ export interface ToolbarAction {
|
|
|
51
51
|
}
|
|
52
52
|
interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'aria-label'> {
|
|
53
53
|
/**
|
|
54
|
-
* Icon actions rendered in the toolbar.
|
|
54
|
+
* Icon actions rendered left-aligned in the toolbar.
|
|
55
55
|
*/
|
|
56
56
|
actions: ToolbarAction[];
|
|
57
|
+
/**
|
|
58
|
+
* Icon actions rendered right-aligned in the toolbar (e.g. toggles).
|
|
59
|
+
*/
|
|
60
|
+
toggles?: ToolbarAction[];
|
|
57
61
|
/**
|
|
58
62
|
* Accessible name for the toolbar landmark.
|
|
59
63
|
*/
|
|
60
64
|
ariaLabel?: string;
|
|
61
65
|
}
|
|
62
66
|
/**
|
|
63
|
-
* Top-of-sidebar toolbar with left-aligned
|
|
67
|
+
* Top-of-sidebar toolbar with left-aligned actions and optional right-aligned toggles.
|
|
64
68
|
*/
|
|
65
|
-
export declare function Toolbar({ actions, ariaLabel, className, ...props }: Props): JSX.Element;
|
|
69
|
+
export declare function Toolbar({ actions, toggles, ariaLabel, className, ...props }: Props): JSX.Element;
|
|
66
70
|
export {};
|
|
67
71
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjG;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAE/C;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtF;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjG;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAE/C;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtF;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4CD;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,OAAO,EACP,SAAqB,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBrB"}
|
|
@@ -6,11 +6,18 @@ import { cn } from '../utils.js';
|
|
|
6
6
|
*/
|
|
7
7
|
const TOOLBAR_ACTION_BUTTON = 'hc-toolbar-action inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-text hover:bg-selection focus-visible:bg-selection focus-visible:text-text disabled:cursor-not-allowed disabled:opacity-50 app-no-drag';
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Renders a single toolbar icon action with optional popover content.
|
|
10
|
+
*
|
|
11
|
+
* @param action - Declarative action to render as an icon button.
|
|
12
|
+
* @returns Toolbar action button wrapped with optional popover anchor.
|
|
10
13
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
function renderAction(action) {
|
|
15
|
+
const title = action.title ?? action.label;
|
|
16
|
+
return (_jsxs("div", { className: "hc-toolbar-action-wrap relative", children: [_jsx("button", { type: "button", ref: action.buttonRef, className: TOOLBAR_ACTION_BUTTON, title: title, "aria-label": action.label, "aria-expanded": action.ariaExpanded, "aria-pressed": action.ariaPressed, "aria-haspopup": action.ariaHaspopup, disabled: action.disabled, onClick: action.onClick, children: _jsx(FaIcon, { icon: action.icon, className: cn('hc-toolbar-action-icon h-5! w-5!', action.ariaPressed === true ? 'opacity-100' : 'opacity-50') }) }), action.popover] }, action.id));
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Top-of-sidebar toolbar with left-aligned actions and optional right-aligned toggles.
|
|
20
|
+
*/
|
|
21
|
+
export function Toolbar({ actions, toggles, ariaLabel = 'Toolbar', className, ...props }) {
|
|
22
|
+
return (_jsxs("div", { ...props, role: "toolbar", "aria-label": ariaLabel, className: cn('hc-toolbar app-no-drag flex shrink-0 items-center border-b border-separator bg-sidebar-toolbar px-2 py-2', className), children: [_jsx("div", { className: "hc-toolbar-actions flex items-center gap-1 leading-none", children: actions.map(renderAction) }), toggles && toggles.length > 0 ? (_jsx("div", { className: "hc-toolbar-toggles ml-auto flex items-center gap-1", children: toggles.map(renderAction) })) : null] }));
|
|
16
23
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { JSX, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* One entry in a {@link VisibilityMenu} that can be shown or hidden.
|
|
4
|
+
*/
|
|
5
|
+
export interface VisibilityMenuItem<T extends string> {
|
|
6
|
+
/**
|
|
7
|
+
* Unique item identifier.
|
|
8
|
+
*/
|
|
9
|
+
value: T;
|
|
10
|
+
/**
|
|
11
|
+
* Item label or custom content.
|
|
12
|
+
*/
|
|
13
|
+
label: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
interface Props<T extends string> {
|
|
16
|
+
/**
|
|
17
|
+
* Items that can be shown or hidden via the menu.
|
|
18
|
+
*/
|
|
19
|
+
items: VisibilityMenuItem<T>[];
|
|
20
|
+
/**
|
|
21
|
+
* Item values currently visible in the parent UI.
|
|
22
|
+
*/
|
|
23
|
+
visibleValues: T[];
|
|
24
|
+
/**
|
|
25
|
+
* Called when the user toggles an item's visibility in the menu.
|
|
26
|
+
*/
|
|
27
|
+
onToggle: (value: T) => void;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Caret-triggered menu for toggling which items are visible in a parent control.
|
|
31
|
+
*/
|
|
32
|
+
export declare function VisibilityMenu<T extends string>({ items, visibleValues, onToggle }: Props<T>): JSX.Element;
|
|
33
|
+
export {};
|
|
34
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VisibilityMenu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3D;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM;IAClD;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/B;;OAEG;IACH,aAAa,EAAE,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9B;AAQD;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,EAC/C,KAAK,EACL,aAAa,EACb,QAAQ,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAgLxB"}
|
package/dist/components/{SegmentedTabs/SegmentedTabsVisibilityMenu.js → VisibilityMenu/index.js}
RENAMED
|
@@ -7,9 +7,9 @@ import { cn, resolveTabListKeyAction } from '../utils.js';
|
|
|
7
7
|
const menuItemClass = 'flex w-full cursor-pointer items-center gap-2 border-none bg-transparent px-3.5 py-1.5 text-left text-[14px] text-text hover:bg-selection app-no-drag';
|
|
8
8
|
const triggerClassName = '!rounded-full hover:!bg-[rgba(0,122,255,0.18)] dark:hover:!bg-[rgba(10,132,255,0.22)]';
|
|
9
9
|
/**
|
|
10
|
-
* Caret-triggered menu for toggling which
|
|
10
|
+
* Caret-triggered menu for toggling which items are visible in a parent control.
|
|
11
11
|
*/
|
|
12
|
-
export function
|
|
12
|
+
export function VisibilityMenu({ items, visibleValues, onToggle }) {
|
|
13
13
|
const menuId = useId();
|
|
14
14
|
const menuElementId = `${menuId}-menu`;
|
|
15
15
|
const rootRef = useRef(null);
|
|
@@ -18,7 +18,7 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
|
|
|
18
18
|
const wasOpenRef = useRef(false);
|
|
19
19
|
const [isOpen, setIsOpen] = useState(false);
|
|
20
20
|
const [focusedIndex, setFocusedIndex] = useState(0);
|
|
21
|
-
const visibleSet = new Set(
|
|
21
|
+
const visibleSet = new Set(visibleValues);
|
|
22
22
|
/**
|
|
23
23
|
* Closes the menu and returns focus to the trigger button.
|
|
24
24
|
*/
|
|
@@ -32,11 +32,11 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
|
|
|
32
32
|
* Opens the menu and focuses the first or last item.
|
|
33
33
|
*/
|
|
34
34
|
const openMenu = useCallback((focusLast = false) => {
|
|
35
|
-
if (
|
|
35
|
+
if (items.length === 0)
|
|
36
36
|
return;
|
|
37
|
-
setFocusedIndex(focusLast ?
|
|
37
|
+
setFocusedIndex(focusLast ? items.length - 1 : 0);
|
|
38
38
|
setIsOpen(true);
|
|
39
|
-
}, [
|
|
39
|
+
}, [items.length]);
|
|
40
40
|
/**
|
|
41
41
|
* Focuses a menu item by index and updates roving tabindex state.
|
|
42
42
|
*/
|
|
@@ -110,38 +110,38 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
|
|
|
110
110
|
* Handles keyboard navigation within the open menu.
|
|
111
111
|
*/
|
|
112
112
|
const handleMenuKeyDown = (event) => {
|
|
113
|
-
if (
|
|
113
|
+
if (items.length === 0)
|
|
114
114
|
return;
|
|
115
115
|
if (event.key === 'Tab') {
|
|
116
116
|
closeMenu();
|
|
117
117
|
return;
|
|
118
118
|
}
|
|
119
|
-
const arrowIndex = resolveTabListKeyAction(event.key, focusedIndex,
|
|
119
|
+
const arrowIndex = resolveTabListKeyAction(event.key, focusedIndex, items.length);
|
|
120
120
|
if (arrowIndex !== null) {
|
|
121
121
|
event.preventDefault();
|
|
122
122
|
focusItem(arrowIndex);
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
|
-
return (_jsxs("div", { ref: rootRef, className: "hc-
|
|
125
|
+
return (_jsxs("div", { ref: rootRef, className: "hc-visibility-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: cn('hc-visibility-menu-trigger', triggerClassName), "aria-label": "Customize visible tabs", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: () => {
|
|
126
126
|
if (isOpen) {
|
|
127
127
|
closeMenu();
|
|
128
128
|
}
|
|
129
129
|
else {
|
|
130
130
|
openMenu(false);
|
|
131
131
|
}
|
|
132
|
-
}, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faCaretDown, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-
|
|
133
|
-
const checked = visibleSet.has(
|
|
132
|
+
}, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faCaretDown, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-visibility-menu-panel app-no-drag absolute top-full right-0 z-10 mt-0.5 min-w-[140px] rounded-md border border-separator bg-surface py-1 shadow-md", onKeyDown: handleMenuKeyDown, children: items.map((item, index) => {
|
|
133
|
+
const checked = visibleSet.has(item.value);
|
|
134
134
|
return (_jsx(MenuCheckboxItem, { ref: (element) => {
|
|
135
135
|
itemRefs.current[index] = element;
|
|
136
|
-
}, checked: checked, tabIndex: index === focusedIndex ? 0 : -1, label:
|
|
136
|
+
}, checked: checked, tabIndex: index === focusedIndex ? 0 : -1, label: item.label, onSelect: () => onToggle(item.value) }, item.value));
|
|
137
137
|
}) }))] }));
|
|
138
138
|
}
|
|
139
139
|
/**
|
|
140
|
-
* Single checkbox-style row in the
|
|
140
|
+
* Single checkbox-style row in the visibility menu.
|
|
141
141
|
*/
|
|
142
142
|
function MenuCheckboxItem({ checked, label, tabIndex, onSelect, ref }) {
|
|
143
|
-
return (_jsxs("button", { ref: ref, type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: tabIndex, className: cn('hc-
|
|
143
|
+
return (_jsxs("button", { ref: ref, type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: tabIndex, className: cn('hc-visibility-menu-item', menuItemClass), onClick: (e) => {
|
|
144
144
|
e.stopPropagation();
|
|
145
145
|
onSelect();
|
|
146
|
-
}, children: [_jsx("span", { className: "hc-
|
|
146
|
+
}, children: [_jsx("span", { className: "hc-visibility-menu-item-check inline-flex w-4 shrink-0 justify-center", "aria-hidden": true, children: checked ? _jsx(FaIcon, { icon: faCheck, className: "h-3 w-3" }) : null }), _jsx("span", { className: "hc-visibility-menu-item-label min-w-0", children: label })] }));
|
|
147
147
|
}
|
|
@@ -54,6 +54,8 @@ export { VariableInput } from './VariableInput/index.js';
|
|
|
54
54
|
export type { Props as VariableInputProps } from './VariableInput/index.js';
|
|
55
55
|
export { VariableTable } from './VariableTable/index.js';
|
|
56
56
|
export { VariableTooltipValue, appendVariableTooltipValueRow, buildVariableTooltipDom } from './VariableTooltip/index.js';
|
|
57
|
+
export { VisibilityMenu } from './VisibilityMenu/index.js';
|
|
58
|
+
export type { VisibilityMenuItem } from './VisibilityMenu/index.js';
|
|
57
59
|
export { cleanVariables, resolveTabListKeyAction } from './utils.js';
|
|
58
60
|
export type { TabListKeyOptions } from './utils.js';
|
|
59
61
|
export { useDialogFocus, getFocusableElements } from './useDialogFocus.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/dist/components/index.js
CHANGED
|
@@ -40,6 +40,7 @@ export { Table, TableBody, TableCell, TableHead, TableHeader, tableCellClass, ta
|
|
|
40
40
|
export { VariableInput } from './VariableInput/index.js';
|
|
41
41
|
export { VariableTable } from './VariableTable/index.js';
|
|
42
42
|
export { VariableTooltipValue, appendVariableTooltipValueRow, buildVariableTooltipDom } from './VariableTooltip/index.js';
|
|
43
|
+
export { VisibilityMenu } from './VisibilityMenu/index.js';
|
|
43
44
|
export { cleanVariables, resolveTabListKeyAction } from './utils.js';
|
|
44
45
|
export { useDialogFocus, getFocusableElements } from './useDialogFocus.js';
|
|
45
46
|
export { segment, segmentGroup } from './classes.js';
|
package/package.json
CHANGED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { JSX } from 'react';
|
|
2
|
-
import type { TabItem } from './types.js';
|
|
3
|
-
interface Props<T extends string> {
|
|
4
|
-
/**
|
|
5
|
-
* Tabs that can be shown or hidden via the menu.
|
|
6
|
-
*/
|
|
7
|
-
tabs: TabItem<T>[];
|
|
8
|
-
/**
|
|
9
|
-
* Tab values currently shown in the tab strip.
|
|
10
|
-
*/
|
|
11
|
-
visibleTabValues: T[];
|
|
12
|
-
/**
|
|
13
|
-
* Called when the user toggles a tab's visibility in the menu.
|
|
14
|
-
*/
|
|
15
|
-
onToggle: (tabValue: T) => void;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Caret-triggered menu for toggling which segmented tabs are visible.
|
|
19
|
-
*/
|
|
20
|
-
export declare function SegmentedTabsVisibilityMenu<T extends string>({ tabs, visibleTabValues, onToggle }: Props<T>): JSX.Element;
|
|
21
|
-
export {};
|
|
22
|
-
//# sourceMappingURL=SegmentedTabsVisibilityMenu.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedTabsVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsVisibilityMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAA4B,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,gBAAgB,EAAE,CAAC,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AAQD;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5D,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAgLxB"}
|