@harborclient/sdk 1.0.21 → 1.0.25
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/README.md +1 -1
- package/dist/components/AsyncListState/index.js +3 -3
- package/dist/components/Autocomplete/SuggestionList.js +3 -3
- package/dist/components/BackButton/index.js +1 -1
- package/dist/components/BusyIndicator/index.js +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/CodeEditor/config.d.ts +4 -0
- package/dist/components/CodeEditor/config.d.ts.map +1 -1
- package/dist/components/CodeEditor/config.js +3 -2
- package/dist/components/CodeEditor/editorChrome.d.ts +23 -0
- package/dist/components/CodeEditor/editorChrome.d.ts.map +1 -0
- package/dist/components/CodeEditor/editorChrome.js +136 -0
- package/dist/components/CodeEditor/index.d.ts +133 -1
- package/dist/components/CodeEditor/index.d.ts.map +1 -1
- package/dist/components/CodeEditor/index.js +389 -134
- package/dist/components/CodeEditor/renderHighlightedPlaceholder.d.ts +32 -0
- package/dist/components/CodeEditor/renderHighlightedPlaceholder.d.ts.map +1 -0
- package/dist/components/CodeEditor/renderHighlightedPlaceholder.js +105 -0
- package/dist/components/CodeEditor/slashCommandHighlighter.d.ts +17 -0
- package/dist/components/CodeEditor/slashCommandHighlighter.d.ts.map +1 -0
- package/dist/components/CodeEditor/slashCommandHighlighter.js +56 -0
- package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.d.ts +15 -0
- package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.d.ts.map +1 -0
- package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.js +99 -0
- package/dist/components/EmptyState/index.js +1 -1
- package/dist/components/FooterButton/index.js +2 -2
- package/dist/components/FooterIcon/index.js +1 -1
- package/dist/components/FormDataEditor/index.js +2 -2
- package/dist/components/FormGroup/index.d.ts.map +1 -1
- package/dist/components/FormGroup/index.js +7 -5
- package/dist/components/KeyValueEditor/index.js +2 -2
- package/dist/components/Modal/ModalFooter.d.ts.map +1 -1
- package/dist/components/Modal/ModalFooter.js +3 -1
- package/dist/components/Modal/ModalHeader.d.ts.map +1 -1
- package/dist/components/Modal/ModalHeader.js +1 -1
- package/dist/components/Modal/index.js +1 -1
- package/dist/components/OverlayCloseButton/index.js +1 -1
- package/dist/components/Page/index.js +1 -1
- package/dist/components/PageHeader/index.d.ts.map +1 -1
- package/dist/components/PageHeader/index.js +1 -1
- package/dist/components/PageSidebar/index.d.ts.map +1 -1
- package/dist/components/PageSidebar/index.js +6 -6
- package/dist/components/PanelCloseButton/index.js +1 -1
- package/dist/components/Resizable/Resizable.js +2 -2
- package/dist/components/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/components/Resizable/ResizeHandle.js +4 -2
- package/dist/components/Resizable/footerPanelUtils.d.ts +1 -1
- package/dist/components/Resizable/footerPanelUtils.d.ts.map +1 -1
- package/dist/components/Resizable/footerPanelUtils.js +1 -1
- package/dist/components/Resizable/useResizable.d.ts +5 -4
- package/dist/components/Resizable/useResizable.d.ts.map +1 -1
- package/dist/components/Resizable/useResizable.js +19 -10
- package/dist/components/ResourceList/index.d.ts.map +1 -1
- package/dist/components/ResourceList/index.js +5 -5
- package/dist/components/RowActionsMenu/index.d.ts.map +1 -1
- package/dist/components/RowActionsMenu/index.js +6 -4
- package/dist/components/SegmentedTabs/SegmentedTabPanel.js +1 -1
- package/dist/components/SegmentedTabs/SegmentedTabsVisibilityMenu.js +4 -4
- package/dist/components/SegmentedTabs/index.d.ts.map +1 -1
- package/dist/components/SegmentedTabs/index.js +6 -3
- package/dist/components/SegmentedTabs/types.d.ts +3 -1
- package/dist/components/SegmentedTabs/types.d.ts.map +1 -1
- package/dist/components/SidebarLayout/index.js +1 -1
- package/dist/components/Spinner/index.js +1 -1
- package/dist/components/TabCloseButton/index.js +1 -1
- package/dist/components/Table/index.d.ts.map +1 -1
- package/dist/components/Table/index.js +7 -6
- package/dist/components/Toolbar/index.d.ts +75 -0
- package/dist/components/Toolbar/index.d.ts.map +1 -0
- package/dist/components/Toolbar/index.js +38 -0
- package/dist/components/VariableInput/index.d.ts.map +1 -1
- package/dist/components/VariableInput/index.js +6 -4
- package/dist/components/VariableTable/index.d.ts.map +1 -1
- package/dist/components/VariableTable/index.js +1 -1
- package/dist/components/classes.js +2 -2
- package/dist/components/forms/Checkbox.d.ts.map +1 -1
- package/dist/components/forms/Checkbox.js +1 -1
- package/dist/components/forms/Radio.js +1 -1
- package/dist/components/forms/classes.d.ts +4 -4
- package/dist/components/forms/classes.d.ts.map +1 -1
- package/dist/components/forms/classes.js +4 -4
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/styles.css +80 -0
- package/dist/styles.css.d.ts +2 -0
- package/dist/ui/codeEditorSettings.d.ts +15 -0
- package/dist/ui/codeEditorSettings.d.ts.map +1 -1
- package/dist/ui/codeEditorSettings.js +40 -0
- package/dist/ui/index.d.ts +1 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +1 -1
- package/package.json +10 -4
|
@@ -21,5 +21,5 @@ export declare function getFooterPanelMaxSize(containerRef: RefObject<HTMLDivEle
|
|
|
21
21
|
*/
|
|
22
22
|
export declare function footerPanelClassName(open: boolean): string;
|
|
23
23
|
/** Shared close-button styling for footer slide-up panels. */
|
|
24
|
-
export declare const footerPanelCloseButtonClassName = "inline-flex h-
|
|
24
|
+
export declare const footerPanelCloseButtonClassName = "inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center self-center rounded-full border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text app-no-drag";
|
|
25
25
|
//# sourceMappingURL=footerPanelUtils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footerPanelUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/footerPanelUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,sDAAsD;AACtD,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,sDAAsD;AACtD,eAAO,MAAM,UAAU,MAAM,CAAC;AAiC9B;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,MAAM,CAI5F;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAQ1D;AAED,8DAA8D;AAC9D,eAAO,MAAM,+BAA+B,
|
|
1
|
+
{"version":3,"file":"footerPanelUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/footerPanelUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,sDAAsD;AACtD,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,sDAAsD;AACtD,eAAO,MAAM,UAAU,MAAM,CAAC;AAiC9B;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,MAAM,CAI5F;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAQ1D;AAED,8DAA8D;AAC9D,eAAO,MAAM,+BAA+B,sMACyJ,CAAC"}
|
|
@@ -58,4 +58,4 @@ export function footerPanelClassName(open) {
|
|
|
58
58
|
].join(' ');
|
|
59
59
|
}
|
|
60
60
|
/** Shared close-button styling for footer slide-up panels. */
|
|
61
|
-
export const footerPanelCloseButtonClassName = 'inline-flex h-
|
|
61
|
+
export const footerPanelCloseButtonClassName = 'inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center self-center rounded-full border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text app-no-drag';
|
|
@@ -25,6 +25,10 @@ export interface UseResizableOptions {
|
|
|
25
25
|
* When set, size is restored from and persisted to localStorage.
|
|
26
26
|
*/
|
|
27
27
|
storageKey?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Called when a resize is committed (mouseup after drag or keyboard nudge).
|
|
30
|
+
*/
|
|
31
|
+
onPersist?: (size: number) => void;
|
|
28
32
|
}
|
|
29
33
|
export interface UseResizableResult {
|
|
30
34
|
size: number;
|
|
@@ -34,9 +38,6 @@ export interface UseResizableResult {
|
|
|
34
38
|
onResizeStart: (event: ReactMouseEvent) => void;
|
|
35
39
|
onKeyboardResize: (event: ReactKeyboardEvent) => void;
|
|
36
40
|
}
|
|
37
|
-
|
|
38
|
-
* Tracks resizable panel size with pointer drag and optional persistence.
|
|
39
|
-
*/
|
|
40
|
-
export declare function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey }: UseResizableOptions): UseResizableResult;
|
|
41
|
+
export declare function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey, onPersist }: UseResizableOptions): UseResizableResult;
|
|
41
42
|
export {};
|
|
42
43
|
//# sourceMappingURL=useResizable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/useResizable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhG,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAkDtB,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IAEX;;OAEG;IACH,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAElB;;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,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/useResizable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhG,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAkDtB,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IAEX;;OAEG;IACH,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAElB;;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,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAyDD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACV,EAAE,mBAAmB,GAAG,kBAAkB,CAgJ1C"}
|
|
@@ -80,7 +80,20 @@ function clampSize(size, minSize, getMaxSize) {
|
|
|
80
80
|
/**
|
|
81
81
|
* Tracks resizable panel size with pointer drag and optional persistence.
|
|
82
82
|
*/
|
|
83
|
-
|
|
83
|
+
/**
|
|
84
|
+
* Persists a committed resize size via localStorage and/or a caller callback.
|
|
85
|
+
*
|
|
86
|
+
* @param storageKey - Optional localStorage key.
|
|
87
|
+
* @param onPersist - Optional commit callback.
|
|
88
|
+
* @param size - Committed size in pixels.
|
|
89
|
+
*/
|
|
90
|
+
function commitSize(storageKey, onPersist, size) {
|
|
91
|
+
if (storageKey) {
|
|
92
|
+
persistSize(storageKey, size);
|
|
93
|
+
}
|
|
94
|
+
onPersist?.(size);
|
|
95
|
+
}
|
|
96
|
+
export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey, onPersist }) {
|
|
84
97
|
const [size, setSizeState] = useState(() => {
|
|
85
98
|
const initial = storageKey ? loadStoredSize(storageKey, defaultSize) : defaultSize;
|
|
86
99
|
return clampSize(initial, minSize, getMaxSize);
|
|
@@ -153,10 +166,8 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
|
|
|
153
166
|
event.preventDefault();
|
|
154
167
|
const nextSize = clampSize(sizeRef.current + keyDelta * direction, minSize, getMaxSize);
|
|
155
168
|
setSizeState(nextSize);
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
}, [axis, direction, getMaxSize, minSize, storageKey]);
|
|
169
|
+
commitSize(storageKey, onPersist, nextSize);
|
|
170
|
+
}, [axis, direction, getMaxSize, minSize, onPersist, storageKey]);
|
|
160
171
|
/**
|
|
161
172
|
* Applies pointer delta to panel size during drag and persists on mouse up.
|
|
162
173
|
*/
|
|
@@ -175,16 +186,14 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
|
|
|
175
186
|
setSizeState(nextSize);
|
|
176
187
|
};
|
|
177
188
|
/**
|
|
178
|
-
* Ends the resize drag and
|
|
189
|
+
* Ends the resize drag and commits the final size when configured.
|
|
179
190
|
*/
|
|
180
191
|
const handleMouseUp = () => {
|
|
181
192
|
if (!resizingRef.current)
|
|
182
193
|
return;
|
|
183
194
|
resizingRef.current = false;
|
|
184
195
|
clearResizingState();
|
|
185
|
-
|
|
186
|
-
persistSize(storageKey, sizeRef.current);
|
|
187
|
-
}
|
|
196
|
+
commitSize(storageKey, onPersist, sizeRef.current);
|
|
188
197
|
};
|
|
189
198
|
window.addEventListener('mousemove', handleMouseMove);
|
|
190
199
|
window.addEventListener('mouseup', handleMouseUp);
|
|
@@ -198,7 +207,7 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
|
|
|
198
207
|
window.removeEventListener('mousemove', handleMouseMove);
|
|
199
208
|
window.removeEventListener('mouseup', handleMouseUp);
|
|
200
209
|
};
|
|
201
|
-
}, [axis, direction, getMaxSize, minSize, storageKey]);
|
|
210
|
+
}, [axis, direction, getMaxSize, minSize, onPersist, storageKey]);
|
|
202
211
|
/**
|
|
203
212
|
* Clears the document resize marker when the hook unmounts mid-drag.
|
|
204
213
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResourceList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,iBAAiB;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EAClC,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CASjC;AAED,UAAU,oBAAoB;IAC5B;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAY,EACZ,SAAS,EACV,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResourceList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,iBAAiB;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EAClC,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CASjC;AAED,UAAU,oBAAoB;IAC5B;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAY,EACZ,SAAS,EACV,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAwBpC;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAMtF;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAExF"}
|
|
@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
|
8
8
|
* @param aria-labelledby - Id of a visible heading that names the list.
|
|
9
9
|
*/
|
|
10
10
|
export function ResourceList({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }) {
|
|
11
|
-
const base = 'hc-resource-list m-0 flex list-none flex-col gap-
|
|
11
|
+
const base = 'hc-resource-list m-0 flex list-none flex-col gap-[10px] p-0';
|
|
12
12
|
const classes = className ? `${base} ${className}` : base;
|
|
13
13
|
return (_jsx("ul", { className: classes, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: children }));
|
|
14
14
|
}
|
|
@@ -24,9 +24,9 @@ export function ResourceList({ children, className, 'aria-label': ariaLabel, 'ar
|
|
|
24
24
|
*/
|
|
25
25
|
export function ResourceListRow({ primary, secondary, meta, actions, wrap = false, className }) {
|
|
26
26
|
const wrapClass = wrap ? 'flex-wrap' : '';
|
|
27
|
-
const base = `flex items-center justify-between gap-3 rounded-
|
|
27
|
+
const base = `hc-resource-list-row flex items-center justify-between gap-3 rounded-[10px] border border-separator/80 px-4 py-[14px] shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-[background-color,box-shadow] duration-[120ms] ease-out hover:shadow-[0_2px_8px_rgba(0,0,0,0.06)] dark:shadow-[0_1px_2px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_2px_8px_rgba(0,0,0,0.28)] ${wrapClass}`.trim();
|
|
28
28
|
const classes = className ? `${base} ${className}` : base;
|
|
29
|
-
return (_jsxs("li", { className: classes, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "min-w-0", children: primary }), secondary != null ? (_jsx("div", { className: "truncate text-[14px] text-muted", children: secondary })) : null, meta] }), actions ? (_jsx("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2", children: actions })) : null] }));
|
|
29
|
+
return (_jsxs("li", { className: classes, children: [_jsxs("div", { className: "hc-resource-list-row-content min-w-0", children: [_jsx("div", { className: "hc-resource-list-row-primary min-w-0", children: primary }), secondary != null ? (_jsx("div", { className: "hc-resource-list-row-secondary truncate text-[14px] text-muted", children: secondary })) : null, meta] }), actions ? (_jsx("div", { className: "hc-resource-list-row-actions flex shrink-0 flex-wrap items-center justify-end gap-2", children: actions })) : null] }));
|
|
30
30
|
}
|
|
31
31
|
/**
|
|
32
32
|
* Primary title styling for {@link ResourceListRow}.
|
|
@@ -34,7 +34,7 @@ export function ResourceListRow({ primary, secondary, meta, actions, wrap = fals
|
|
|
34
34
|
* @param children - Title content.
|
|
35
35
|
*/
|
|
36
36
|
export function ResourceListPrimary({ children }) {
|
|
37
|
-
return _jsx("div", { className: "truncate text-[14px] font-medium text-text", children: children });
|
|
37
|
+
return (_jsx("div", { className: "hc-resource-list-primary truncate text-[14px] font-medium text-text", children: children }));
|
|
38
38
|
}
|
|
39
39
|
/**
|
|
40
40
|
* Inline empty-state row rendered inside a {@link ResourceList}.
|
|
@@ -42,5 +42,5 @@ export function ResourceListPrimary({ children }) {
|
|
|
42
42
|
* @param children - Empty message content.
|
|
43
43
|
*/
|
|
44
44
|
export function ResourceListEmptyItem({ children }) {
|
|
45
|
-
return _jsx("li", { className: "text-[14px] text-muted", children: children });
|
|
45
|
+
return _jsx("li", { className: "hc-resource-list-empty-item text-[14px] text-muted", children: children });
|
|
46
46
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAMhD,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAChC,CAAC;AAEF,UAAU,KAAK;IACb;;;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;;;;OAIG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAkBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAMhD,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAChC,CAAC;AAEF,UAAU,KAAK;IACb;;;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;;;;OAIG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAkBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoP/F"}
|
|
@@ -169,7 +169,7 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
|
|
|
169
169
|
focusItem(typeahead.index);
|
|
170
170
|
}
|
|
171
171
|
};
|
|
172
|
-
return (_jsxs("div", { ref: rootRef, className: "hc-row-actions-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", title: "Actions", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
|
|
172
|
+
return (_jsxs("div", { ref: rootRef, className: "hc-row-actions-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: "hc-row-actions-menu-trigger", title: "Actions", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
|
|
173
173
|
e.stopPropagation();
|
|
174
174
|
if (isOpen) {
|
|
175
175
|
closeMenu();
|
|
@@ -177,13 +177,15 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
|
|
|
177
177
|
else {
|
|
178
178
|
openMenu(false);
|
|
179
179
|
}
|
|
180
|
-
}, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faBars, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "absolute right-0 top-full z-10 mt-0.5 min-w-[120px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", onKeyDown: handleMenuKeyDown, children: groups.map((group, groupIndex) => {
|
|
180
|
+
}, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faBars, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-row-actions-menu-panel absolute right-0 top-full z-10 mt-0.5 min-w-[120px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", onKeyDown: handleMenuKeyDown, children: groups.map((group, groupIndex) => {
|
|
181
181
|
let flatIndex = groups.slice(0, groupIndex).reduce((count, g) => count + g.length, 0);
|
|
182
|
-
return (_jsx("div", { className: groupIndex > 0
|
|
182
|
+
return (_jsx("div", { className: groupIndex > 0
|
|
183
|
+
? 'hc-row-actions-menu-group border-t border-separator'
|
|
184
|
+
: 'hc-row-actions-menu-group', children: group.map((item) => {
|
|
183
185
|
const itemIndex = flatIndex++;
|
|
184
186
|
return (_jsx("button", { ref: (el) => {
|
|
185
187
|
itemRefs.current[itemIndex] = el;
|
|
186
|
-
}, type: "button", role: "menuitem", tabIndex: itemIndex === focusedIndex ? 0 : -1, className: menuItemClass(item.variant)
|
|
188
|
+
}, type: "button", role: "menuitem", tabIndex: itemIndex === focusedIndex ? 0 : -1, className: `hc-row-actions-menu-item ${menuItemClass(item.variant)}`, onClick: (e) => {
|
|
187
189
|
e.stopPropagation();
|
|
188
190
|
closeMenu();
|
|
189
191
|
item.onSelect();
|
|
@@ -32,5 +32,5 @@ export function SegmentedTabPanel({ value, children, className }) {
|
|
|
32
32
|
}, [context, value]);
|
|
33
33
|
if (context.value !== value)
|
|
34
34
|
return null;
|
|
35
|
-
return (_jsx("div", { role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: className, onKeyDown: handleKeyDown, children: children }));
|
|
35
|
+
return (_jsx("div", { role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: className ? `hc-segmented-tab-panel ${className}` : 'hc-segmented-tab-panel', onKeyDown: handleKeyDown, children: children }));
|
|
36
36
|
}
|
|
@@ -130,14 +130,14 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
|
|
|
130
130
|
focusItem(arrowIndex);
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
|
-
return (_jsxs("div", { ref: rootRef, className: "hc-segmented-tabs-visibility-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: triggerClassName
|
|
133
|
+
return (_jsxs("div", { ref: rootRef, className: "hc-segmented-tabs-visibility-menu relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: `hc-segmented-tabs-visibility-menu-trigger ${triggerClassName}`, "aria-label": "Customize visible tabs", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: () => {
|
|
134
134
|
if (isOpen) {
|
|
135
135
|
closeMenu();
|
|
136
136
|
}
|
|
137
137
|
else {
|
|
138
138
|
openMenu(false);
|
|
139
139
|
}
|
|
140
|
-
}, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faCaretDown, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "absolute right-0 top-full z-10 mt-0.5 min-w-[140px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", onKeyDown: handleMenuKeyDown, children: tabs.map((tab, index) => {
|
|
140
|
+
}, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faCaretDown, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-segmented-tabs-visibility-menu-panel absolute right-0 top-full z-10 mt-0.5 min-w-[140px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", onKeyDown: handleMenuKeyDown, children: tabs.map((tab, index) => {
|
|
141
141
|
const checked = visibleSet.has(tab.value);
|
|
142
142
|
return (_jsx(MenuCheckboxItem, { ref: (element) => {
|
|
143
143
|
itemRefs.current[index] = element;
|
|
@@ -148,8 +148,8 @@ export function SegmentedTabsVisibilityMenu({ tabs, visibleTabValues, onToggle }
|
|
|
148
148
|
* Single checkbox-style row in the tab visibility menu.
|
|
149
149
|
*/
|
|
150
150
|
function MenuCheckboxItem({ checked, label, tabIndex, onSelect, ref }) {
|
|
151
|
-
return (_jsxs("button", { ref: ref, type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: tabIndex, className: menuItemClass
|
|
151
|
+
return (_jsxs("button", { ref: ref, type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: tabIndex, className: `hc-segmented-tabs-visibility-menu-item ${menuItemClass}`, onClick: (e) => {
|
|
152
152
|
e.stopPropagation();
|
|
153
153
|
onSelect();
|
|
154
|
-
}, children: [_jsx("span", { className: "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: "min-w-0", children: label })] }));
|
|
154
|
+
}, children: [_jsx("span", { className: "hc-segmented-tabs-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-segmented-tabs-visibility-menu-item-label min-w-0", children: label })] }));
|
|
155
155
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAMhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkD1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC;IAEvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,EAAE,CAAC;IAE9B;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAe,EACf,gBAAgB,EAAE,oBAAoB,EACtC,uBAAuB,EACvB,wBAAwB,EACxB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAMhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkD1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC;IAEvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,EAAE,CAAC;IAE9B;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAe,EACf,gBAAgB,EAAE,oBAAoB,EACtC,uBAAuB,EACvB,wBAAwB,EACxB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAoQxB"}
|
|
@@ -151,7 +151,10 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
|
|
|
151
151
|
]
|
|
152
152
|
.filter(Boolean)
|
|
153
153
|
.join(' ');
|
|
154
|
-
const tabListClassName = [
|
|
154
|
+
const tabListClassName = [
|
|
155
|
+
'hc-segmented-tabs-list inline-flex min-w-0 flex-1 items-center',
|
|
156
|
+
fullWidth ? 'w-full' : ''
|
|
157
|
+
]
|
|
155
158
|
.filter(Boolean)
|
|
156
159
|
.join(' ');
|
|
157
160
|
const isRadiogroup = pattern === 'radiogroup';
|
|
@@ -208,7 +211,7 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
|
|
|
208
211
|
}, [visibleTabs, value, onChange, isRadiogroup, context, getPanelId]);
|
|
209
212
|
return (_jsxs("div", { className: outerClassName, children: [_jsx("div", { className: tabListClassName, role: isRadiogroup ? 'radiogroup' : 'tablist', "aria-label": ariaLabel, ...(!isRadiogroup ? { 'aria-orientation': 'horizontal' } : {}), onKeyDown: handleKeyDown, children: visibleTabs.map((tab) => {
|
|
210
213
|
const selected = value === tab.value;
|
|
211
|
-
const tabClassName =
|
|
214
|
+
const tabClassName = `hc-segmented-tabs-tab ${segment(selected)}${fullWidth ? ' flex-1' : ''}`;
|
|
212
215
|
return (_jsx("button", { ref: (element) => {
|
|
213
216
|
if (element)
|
|
214
217
|
tabRefs.current.set(tab.value, element);
|
|
@@ -221,6 +224,6 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
|
|
|
221
224
|
id: getTabId(tab.value),
|
|
222
225
|
'aria-selected': selected,
|
|
223
226
|
...(context ? { 'aria-controls': getPanelId(tab.value) } : {})
|
|
224
|
-
}), children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
|
|
227
|
+
}), children: _jsxs("span", { className: "hc-segmented-tabs-tab-label inline-flex items-center gap-1.5", children: [_jsx("span", { className: "inline-flex shrink-0 items-center px-1.5", children: _jsx("span", { className: `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));
|
|
225
228
|
}) }), editable && (_jsx(SegmentedTabsVisibilityMenu, { tabs: editableTabs, visibleTabValues: visibleTabValues, onToggle: handleVisibilityToggle }))] }));
|
|
226
229
|
}
|
|
@@ -17,7 +17,9 @@ export interface TabItem<T extends string> {
|
|
|
17
17
|
*/
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
/**
|
|
20
|
-
* When true,
|
|
20
|
+
* When true, shows an accent dot in the reserved indicator slot to the left
|
|
21
|
+
* of the label. The slot stays visible (transparent) when false so tab width
|
|
22
|
+
* stays stable across the group.
|
|
21
23
|
*/
|
|
22
24
|
indicator?: boolean;
|
|
23
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
|
|
@@ -7,5 +7,5 @@ export function SidebarLayout({ sidebar, children, className }) {
|
|
|
7
7
|
const outer = className
|
|
8
8
|
? `hc-sidebar-layout flex min-h-0 flex-1 flex-col ${className}`
|
|
9
9
|
: 'hc-sidebar-layout flex min-h-0 flex-1 flex-col';
|
|
10
|
-
return (_jsx("div", { className: outer, children: _jsxs("div", { className: "flex min-h-0 flex-1", children: [sidebar, _jsx("div", { className: "flex-1 overflow-y-auto p-6 pt-0!", children: children })] }) }));
|
|
10
|
+
return (_jsx("div", { className: outer, children: _jsxs("div", { className: "hc-sidebar-layout-body flex min-h-0 flex-1", children: [sidebar, _jsx("div", { className: "hc-sidebar-layout-content flex-1 overflow-y-auto p-6 pt-0!", children: children })] }) }));
|
|
11
11
|
}
|
|
@@ -18,5 +18,5 @@ function sizeClasses(size) {
|
|
|
18
18
|
export function Spinner({ size = 'md', label, className }) {
|
|
19
19
|
const wrapperBase = 'hc-spinner inline-flex items-center justify-center';
|
|
20
20
|
const wrapperClasses = className ? `${wrapperBase} ${className}` : wrapperBase;
|
|
21
|
-
return (_jsx("span", { className: wrapperClasses, role: label ? 'status' : undefined, "aria-label": label, children: _jsxs("svg", { className: `${sizeClasses(size)} animate-spin text-accent`, viewBox: "0 0 24 24", fill: "none", "aria-hidden": label ? true : undefined, children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
|
|
21
|
+
return (_jsx("span", { className: wrapperClasses, role: label ? 'status' : undefined, "aria-label": label, children: _jsxs("svg", { className: `${sizeClasses(size)} hc-spinner-icon animate-spin text-accent`, viewBox: "0 0 24 24", fill: "none", "aria-hidden": label ? true : undefined, children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
|
|
22
22
|
}
|
|
@@ -10,5 +10,5 @@ import { FaIcon } from '../FaIcon/index.js';
|
|
|
10
10
|
* @param tabIndex - Tab order index; use with roving tabindex on the tab label.
|
|
11
11
|
*/
|
|
12
12
|
export function TabCloseButton({ ariaLabel, onClick, title = 'Close tab', tabIndex }) {
|
|
13
|
-
return (_jsx("button", { type: "button", className: "hc-tab-close-button inline-flex
|
|
13
|
+
return (_jsx("button", { type: "button", className: "hc-tab-close-button inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center self-center rounded-full border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text focus-visible:bg-selection focus-visible:text-text app-no-drag", title: title, "aria-label": ariaLabel, tabIndex: tabIndex, onClick: onClick, children: _jsx(FaIcon, { icon: faXmark, className: "hc-tab-close-button-icon h-3.5 w-3.5" }) }));
|
|
14
14
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEhG;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,cAAc,gIACoG,CAAC;AAEhI;;GAEG;AACH,eAAO,MAAM,cAAc,2DAA2D,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,mBAAmB,8EAC6C,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAuBtC,UAAU,UAAU;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAoB,EAAE,SAAS,EAAE,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAwB5F;AAED,UAAU,iBAAkB,SAAQ,cAAc,CAAC,uBAAuB,CAAC;IACzE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEhG;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,cAAc,gIACoG,CAAC;AAEhI;;GAEG;AACH,eAAO,MAAM,cAAc,2DAA2D,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,mBAAmB,8EAC6C,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAuBtC,UAAU,UAAU;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAoB,EAAE,SAAS,EAAE,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAwB5F;AAED,UAAU,iBAAkB,SAAQ,cAAc,CAAC,uBAAuB,CAAC;IACzE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAQ5F;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAW1F;AAED,UAAU,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,KAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAU9B;AAED,UAAU,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAUvF"}
|
|
@@ -48,9 +48,9 @@ export function Table({ children, variant = 'bordered', className }) {
|
|
|
48
48
|
const tableClasses = className ? `${tableBase} ${className}` : tableBase;
|
|
49
49
|
return createElement(TableVariantContext.Provider, { value: variant }, createElement('table', { className: tableClasses }, children));
|
|
50
50
|
}
|
|
51
|
-
const wrapperBase = 'hc-table overflow-hidden rounded-
|
|
51
|
+
const wrapperBase = 'hc-table overflow-hidden rounded-lg border border-separator';
|
|
52
52
|
const wrapperClasses = className ? `${wrapperBase} ${className}` : wrapperBase;
|
|
53
|
-
return createElement(TableVariantContext.Provider, { value: variant }, createElement('div', { className: wrapperClasses }, createElement('table', { className: 'w-full border-collapse' }, children)));
|
|
53
|
+
return createElement(TableVariantContext.Provider, { value: variant }, createElement('div', { className: wrapperClasses }, createElement('table', { className: 'hc-table-element w-full border-collapse' }, children)));
|
|
54
54
|
}
|
|
55
55
|
/**
|
|
56
56
|
* Table header section wrapper.
|
|
@@ -59,7 +59,8 @@ export function Table({ children, variant = 'bordered', className }) {
|
|
|
59
59
|
* @param className - Extra classes appended after any section preset.
|
|
60
60
|
*/
|
|
61
61
|
export function TableHeader({ children, className, ...rest }) {
|
|
62
|
-
|
|
62
|
+
const classes = mergeClasses('hc-table-header', className);
|
|
63
|
+
return (_jsx("thead", { className: classes, ...rest, children: children }));
|
|
63
64
|
}
|
|
64
65
|
/**
|
|
65
66
|
* Table body section wrapper.
|
|
@@ -69,7 +70,7 @@ export function TableHeader({ children, className, ...rest }) {
|
|
|
69
70
|
*/
|
|
70
71
|
export function TableBody({ children, className, ...rest }) {
|
|
71
72
|
const variant = useContext(TableVariantContext);
|
|
72
|
-
const base = variant === 'bordered' ? '[&_tr:last-child_td]:border-b-0' : '';
|
|
73
|
+
const base = variant === 'bordered' ? 'hc-table-body [&_tr:last-child_td]:border-b-0' : 'hc-table-body';
|
|
73
74
|
const classes = mergeClasses(base, className);
|
|
74
75
|
return (_jsx("tbody", { className: classes, ...rest, children: children }));
|
|
75
76
|
}
|
|
@@ -82,7 +83,7 @@ export function TableBody({ children, className, ...rest }) {
|
|
|
82
83
|
export function TableHead({ children, className, scope = 'col', ...rest }) {
|
|
83
84
|
const variant = useContext(TableVariantContext);
|
|
84
85
|
const base = variant === 'loose' ? tableHeadClassLoose : tableHeadClass;
|
|
85
|
-
const classes = mergeClasses(base
|
|
86
|
+
const classes = mergeClasses(`hc-table-head ${base}`, className);
|
|
86
87
|
return (_jsx("th", { scope: scope, className: classes, ...rest, children: children }));
|
|
87
88
|
}
|
|
88
89
|
/**
|
|
@@ -94,6 +95,6 @@ export function TableHead({ children, className, scope = 'col', ...rest }) {
|
|
|
94
95
|
export function TableCell({ children, className, ...rest }) {
|
|
95
96
|
const variant = useContext(TableVariantContext);
|
|
96
97
|
const base = variant === 'loose' ? tableCellClassLoose : tableCellClass;
|
|
97
|
-
const classes = mergeClasses(base
|
|
98
|
+
const classes = mergeClasses(`hc-table-cell ${base}`, className);
|
|
98
99
|
return (_jsx("td", { className: classes, ...rest, children: children }));
|
|
99
100
|
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
|
+
import type { AriaAttributes, JSX, ReactNode, RefObject } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Declarative action rendered as an icon button in a sidebar toolbar.
|
|
5
|
+
*/
|
|
6
|
+
export interface ToolbarAction {
|
|
7
|
+
/**
|
|
8
|
+
* Stable React key for this action.
|
|
9
|
+
*/
|
|
10
|
+
id: string;
|
|
11
|
+
/**
|
|
12
|
+
* Font Awesome icon shown inside the action button.
|
|
13
|
+
*/
|
|
14
|
+
icon: IconDefinition;
|
|
15
|
+
/**
|
|
16
|
+
* Accessible name for the control.
|
|
17
|
+
*/
|
|
18
|
+
label: string;
|
|
19
|
+
/**
|
|
20
|
+
* Native tooltip text; defaults to `label`.
|
|
21
|
+
*/
|
|
22
|
+
title?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Called when the user activates the action button.
|
|
25
|
+
*/
|
|
26
|
+
onClick: () => void;
|
|
27
|
+
/**
|
|
28
|
+
* When true, the action button is inactive.
|
|
29
|
+
*/
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Exposes toggle state for popup actions such as history menus.
|
|
33
|
+
*/
|
|
34
|
+
ariaExpanded?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Exposes pressed state for toggle actions such as visibility switches.
|
|
37
|
+
*/
|
|
38
|
+
ariaPressed?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Indicates the action opens a popup, for example `"menu"`.
|
|
41
|
+
*/
|
|
42
|
+
ariaHaspopup?: AriaAttributes['aria-haspopup'];
|
|
43
|
+
/**
|
|
44
|
+
* Optional popover content anchored below this action button.
|
|
45
|
+
*/
|
|
46
|
+
popover?: ReactNode;
|
|
47
|
+
/**
|
|
48
|
+
* Ref attached to the action button for portaled popover positioning.
|
|
49
|
+
*/
|
|
50
|
+
buttonRef?: RefObject<HTMLButtonElement | null>;
|
|
51
|
+
}
|
|
52
|
+
interface Props {
|
|
53
|
+
/**
|
|
54
|
+
* Icon actions rendered in the toolbar.
|
|
55
|
+
*/
|
|
56
|
+
actions: ToolbarAction[];
|
|
57
|
+
/**
|
|
58
|
+
* Accessible name for the toolbar landmark.
|
|
59
|
+
*/
|
|
60
|
+
ariaLabel?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Extra classes merged onto the outer toolbar wrapper.
|
|
63
|
+
*/
|
|
64
|
+
className?: string;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Top-of-sidebar toolbar with left-aligned icon actions.
|
|
68
|
+
*
|
|
69
|
+
* @param actions - Declarative icon actions rendered on the left.
|
|
70
|
+
* @param ariaLabel - Accessible name for the toolbar landmark.
|
|
71
|
+
* @param className - Extra classes merged onto the outer wrapper.
|
|
72
|
+
*/
|
|
73
|
+
export declare function Toolbar({ actions, ariaLabel, className }: Props): JSX.Element;
|
|
74
|
+
export {};
|
|
75
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +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,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvE;;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,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAqB,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyCzF"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
|
|
2
|
+
import { FaIcon } from '../FaIcon/index.js';
|
|
3
|
+
/**
|
|
4
|
+
* Tailwind classes for inactive toolbar icon action buttons.
|
|
5
|
+
*/
|
|
6
|
+
const TOOLBAR_ACTION_BUTTON_INACTIVE = 'hc-toolbar-action inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text focus-visible:bg-selection focus-visible:text-text disabled:cursor-not-allowed disabled:opacity-50 app-no-drag';
|
|
7
|
+
/**
|
|
8
|
+
* Tailwind classes for pressed toolbar toggles, matching footer layout icon buttons.
|
|
9
|
+
*/
|
|
10
|
+
const TOOLBAR_ACTION_BUTTON_ACTIVE = 'hc-toolbar-action inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-surface text-text shadow-sm focus-visible:bg-surface focus-visible:text-text disabled:cursor-not-allowed disabled:opacity-50 app-no-drag';
|
|
11
|
+
/**
|
|
12
|
+
* Resolves toolbar button classes for a declarative action.
|
|
13
|
+
*
|
|
14
|
+
* @param action - Toolbar action metadata.
|
|
15
|
+
*/
|
|
16
|
+
function toolbarActionButton(action) {
|
|
17
|
+
return action.ariaPressed === true
|
|
18
|
+
? TOOLBAR_ACTION_BUTTON_ACTIVE
|
|
19
|
+
: TOOLBAR_ACTION_BUTTON_INACTIVE;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Top-of-sidebar toolbar with left-aligned icon actions.
|
|
23
|
+
*
|
|
24
|
+
* @param actions - Declarative icon actions rendered on the left.
|
|
25
|
+
* @param ariaLabel - Accessible name for the toolbar landmark.
|
|
26
|
+
* @param className - Extra classes merged onto the outer wrapper.
|
|
27
|
+
*/
|
|
28
|
+
export function Toolbar({ actions, ariaLabel = 'Toolbar', className }) {
|
|
29
|
+
const wrapperClassName = className
|
|
30
|
+
? `hc-toolbar flex shrink-0 items-center border-b border-separator bg-sidebar-toolbar px-2 py-2 app-no-drag ${className}`
|
|
31
|
+
: 'hc-toolbar flex shrink-0 items-center border-b border-separator bg-sidebar-toolbar px-2 py-2 app-no-drag';
|
|
32
|
+
return (_jsx("div", { role: "toolbar", "aria-label": ariaLabel, className: wrapperClassName, children: _jsx("div", { className: "hc-toolbar-actions flex items-center gap-1", children: actions.map((action) => {
|
|
33
|
+
const title = action.title ?? action.label;
|
|
34
|
+
return (_jsxs("div", { className: "hc-toolbar-action-wrap relative", children: [_jsx("button", { type: "button", ref: action.buttonRef, className: toolbarActionButton(action), 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: action.ariaPressed === true
|
|
35
|
+
? 'hc-toolbar-action-icon h-4 w-4'
|
|
36
|
+
: 'hc-toolbar-action-icon h-3.5 w-3.5' }) }), action.popover] }, action.id));
|
|
37
|
+
}) }) }));
|
|
38
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAYnE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAc,EACd,gBAAgB,EAChB,cAAc,EACd,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,MAAM,EACP,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAYnE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAc,EACd,gBAAgB,EAChB,cAAc,EACd,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,MAAM,EACP,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqTrB"}
|
|
@@ -163,20 +163,22 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
|
|
|
163
163
|
const tooltipContent = tooltip ? getVariableTooltipContent(tooltip.key, variables) : null;
|
|
164
164
|
return (_jsxs("div", { className: wrapperClassName
|
|
165
165
|
? `hc-variable-input relative min-w-0 ${wrapperClassName}`
|
|
166
|
-
: 'hc-variable-input relative min-w-0 flex-1', children: [_jsx("div", { ref: backdropRef, "aria-hidden": true, className: "pointer-events-none absolute inset-0 overflow-hidden whitespace-nowrap px-2.5 py-1.5 text-[16px] text-inherit", children: safeValue ? (tokens.map((token, index) => token.key ? (_jsx("span", { ref: (el) => {
|
|
166
|
+
: 'hc-variable-input relative min-w-0 flex-1', children: [_jsx("div", { ref: backdropRef, "aria-hidden": true, className: "hc-variable-input-backdrop pointer-events-none absolute inset-0 overflow-hidden whitespace-nowrap px-2.5 py-1.5 text-[16px] text-inherit", children: safeValue ? (tokens.map((token, index) => token.key ? (_jsx("span", { ref: (el) => {
|
|
167
167
|
if (el)
|
|
168
168
|
spanRefs.current.set(index, el);
|
|
169
169
|
else
|
|
170
170
|
spanRefs.current.delete(index);
|
|
171
|
-
}, className: "text-[#32D2E2]", children: token.text }, index)) : (_jsx("span", { children: token.text }, index)))) : (_jsx("span", { className: "text-muted", children: placeholder })) }), _jsx(Input, { ref: inputRef, id: id, variant: "plain", role: source ? 'combobox' : undefined, "aria-autocomplete": source ? 'list' : undefined, "aria-expanded": source ? autocompleteOpen : undefined, "aria-controls": source && autocompleteOpen ? listboxId : undefined, "aria-activedescendant": source && autocompleteOpen && autocompleteActiveIndex >= 0
|
|
171
|
+
}, className: "hc-variable-input-token hc-variable-input-token-variable text-[#32D2E2]", children: token.text }, index)) : (_jsx("span", { className: "hc-variable-input-token", children: token.text }, index)))) : (_jsx("span", { className: "hc-variable-input-placeholder text-muted", children: placeholder })) }), _jsx(Input, { ref: inputRef, id: id, variant: "plain", role: source ? 'combobox' : undefined, "aria-autocomplete": source ? 'list' : undefined, "aria-expanded": source ? autocompleteOpen : undefined, "aria-controls": source && autocompleteOpen ? listboxId : undefined, "aria-activedescendant": source && autocompleteOpen && autocompleteActiveIndex >= 0
|
|
172
172
|
? `${listboxId}-option-${autocompleteActiveIndex}`
|
|
173
|
-
: undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": tooltip ? tooltipId : undefined, className: `relative w-full min-w-0 border-none bg-transparent px-2.5 py-1.5 text-[16px] text-transparent caret-text focus-visible:shadow-none ${className}`, type: "text", placeholder: placeholder, value: safeValue, onChange: (e) => {
|
|
173
|
+
: undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": tooltip ? tooltipId : undefined, className: `hc-variable-input-field relative w-full min-w-0 border-none bg-transparent px-2.5 py-1.5 text-[16px] text-transparent caret-text focus-visible:shadow-none ${className}`, type: "text", placeholder: placeholder, value: safeValue, onChange: (e) => {
|
|
174
174
|
onChange(e.target.value);
|
|
175
175
|
queueMicrotask(updateTooltipFromCaret);
|
|
176
176
|
}, onFocus: () => {
|
|
177
177
|
openAutocomplete();
|
|
178
178
|
updateTooltipFromCaret();
|
|
179
|
-
}, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: scheduleHide }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { id: tooltipId, role: "tooltip", className: "pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-
|
|
179
|
+
}, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: scheduleHide }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-lg border border-separator bg-surface px-4 py-3 text-[14px] text-text shadow-md after:pointer-events-auto after:absolute after:-bottom-2 after:left-0 after:right-0 after:h-2 after:content-['']", style: { top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx("span", { className: tooltipContent.muted
|
|
180
|
+
? 'hc-variable-input-tooltip-text text-muted'
|
|
181
|
+
: 'hc-variable-input-tooltip-text', children: tooltipContent.text }), onEditVariable && (_jsx("button", { type: "button", className: "hc-variable-input-tooltip-edit -mx-1 self-start rounded px-1 py-0.5 text-[14px] text-accent hover:underline app-no-drag", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
|
|
180
182
|
onEditVariable();
|
|
181
183
|
setTooltip(null);
|
|
182
184
|
}, children: "Edit value" }))] }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoHtF"}
|
|
@@ -39,5 +39,5 @@ export function VariableTable({ variables, onChange, description }) {
|
|
|
39
39
|
}
|
|
40
40
|
onChange(variables.filter((_, i) => i !== index));
|
|
41
41
|
};
|
|
42
|
-
return (_jsxs("div", { className: "hc-variable-table", children: [description && _jsx("p", { className: "mb-3 text-[14px] text-muted", children: description }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { children: "Default" }), _jsx(TableHead, { className: "w-14 text-center", children: "Share" }), _jsx(TableHead, { className: "w-7 p-0 text-center" })] }) }), _jsx(TableBody, { children: variables.map((variable, index) => (_jsxs("tr", { children: [_jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.key, placeholder: "variable", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateVariable(index, { key: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.value, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onChange: (e) => updateVariable(index, { value: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.defaultValue, placeholder: "default", "aria-label": `Default, row ${index + 1}`, onChange: (e) => updateVariable(index, { defaultValue: e.target.value }) }) }), _jsx(TableCell, { className: "w-14 text-center", children: _jsx(Checkbox, { checked: variable.share, onChange: (e) => updateVariable(index, { share: e.target.checked }), "aria-label": `Include value in export, row ${index + 1}`, title: "Include value in export" }) }), _jsx(TableCell, { className: "w-7 p-0 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeVariable(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }), _jsxs(Button, { type: "button", variant: "toolbar", className: "inline-flex items-center gap-1 self-start", onClick: addVariable, children: [_jsx(FaIcon, { icon: faPlus, className: "h-3 w-3" }), "Add variable"] })] })] }));
|
|
42
|
+
return (_jsxs("div", { className: "hc-variable-table", children: [description && (_jsx("p", { className: "hc-variable-table-description mb-3 text-[14px] text-muted", children: description })), _jsxs("div", { className: "hc-variable-table-content flex flex-col gap-1.5", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { children: "Default" }), _jsx(TableHead, { className: "w-14 text-center", children: "Share" }), _jsx(TableHead, { className: "w-7 p-0 text-center" })] }) }), _jsx(TableBody, { children: variables.map((variable, index) => (_jsxs("tr", { children: [_jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.key, placeholder: "variable", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateVariable(index, { key: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.value, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onChange: (e) => updateVariable(index, { value: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.defaultValue, placeholder: "default", "aria-label": `Default, row ${index + 1}`, onChange: (e) => updateVariable(index, { defaultValue: e.target.value }) }) }), _jsx(TableCell, { className: "w-14 text-center", children: _jsx(Checkbox, { checked: variable.share, onChange: (e) => updateVariable(index, { share: e.target.checked }), "aria-label": `Include value in export, row ${index + 1}`, title: "Include value in export" }) }), _jsx(TableCell, { className: "w-7 p-0 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeVariable(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }), _jsxs(Button, { type: "button", variant: "toolbar", className: "hc-variable-table-add inline-flex items-center gap-1 self-start", onClick: addVariable, children: [_jsx(FaIcon, { icon: faPlus, className: "h-3 w-3" }), "Add variable"] })] })] }));
|
|
43
43
|
}
|
|
@@ -10,6 +10,6 @@ const segmentFocusVisible = 'focus-visible:outline focus-visible:outline-2 focus
|
|
|
10
10
|
*/
|
|
11
11
|
export function segment(active) {
|
|
12
12
|
return active
|
|
13
|
-
? `cursor-pointer rounded-
|
|
14
|
-
: `cursor-pointer rounded-
|
|
13
|
+
? `cursor-pointer rounded-md border-none bg-selection px-3 py-1 text-[15px] text-text app-no-drag ${segmentFocusVisible}`
|
|
14
|
+
: `cursor-pointer rounded-md border-none bg-transparent px-3 py-1 text-[15px] text-muted hover:text-text app-no-drag ${segmentFocusVisible}`;
|
|
15
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACzE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACzE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+BzE"}
|