@aivenio/aquarium 6.0.2 → 6.1.0
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/atoms.cjs +263 -232
- package/dist/atoms.mjs +258 -232
- package/dist/src/atoms/ChoiceChip/ChoiceChip.js +2 -2
- package/dist/src/atoms/CommandPalette/CommandPalette.d.ts +85 -0
- package/dist/src/atoms/CommandPalette/CommandPalette.js +33 -0
- package/dist/src/atoms/DropdownMenu/DropdownMenu.d.ts +131 -0
- package/dist/src/atoms/DropdownMenu/DropdownMenu.js +4 -4
- package/dist/src/atoms/index.d.ts +1 -0
- package/dist/src/atoms/index.js +2 -1
- package/dist/src/molecules/CommandPalette/CommandPalette.d.ts +48 -0
- package/dist/src/molecules/CommandPalette/CommandPalette.js +79 -0
- package/dist/src/molecules/CommandPalette/CommandPaletteProvider.d.ts +36 -0
- package/dist/src/molecules/CommandPalette/CommandPaletteProvider.js +119 -0
- package/dist/src/molecules/CommandPalette/rankCommands.d.ts +10 -0
- package/dist/src/molecules/CommandPalette/rankCommands.js +51 -0
- package/dist/src/molecules/CommandPalette/types.d.ts +39 -0
- package/dist/src/molecules/CommandPalette/types.js +17 -0
- package/dist/src/molecules/index.d.ts +1 -0
- package/dist/src/molecules/index.js +2 -1
- package/dist/styles.css +16 -0
- package/dist/system.cjs +1461 -1177
- package/dist/system.mjs +1467 -1163
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -24,7 +24,7 @@ const choiceChipClasses = tv({
|
|
|
24
24
|
},
|
|
25
25
|
variants: {
|
|
26
26
|
selected: {
|
|
27
|
-
true: { chip: 'text-default border-primary-default border-2' },
|
|
27
|
+
true: { chip: 'text-default border-primary-default border-2 bg-primary-default' },
|
|
28
28
|
false: { chip: 'text-muted border-default m-[1px]' },
|
|
29
29
|
},
|
|
30
30
|
dense: {
|
|
@@ -48,4 +48,4 @@ export const ChoiceChip = (_a) => {
|
|
|
48
48
|
React.createElement("input", { type: selectionMode, name: name, value: value, className: input(), checked: selected, onChange: handleChange, disabled: disabled }),
|
|
49
49
|
React.createElement("span", { className: chip() }, children)));
|
|
50
50
|
};
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
51
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hvaWNlQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DaG9pY2VDaGlwL0Nob2ljZUNoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztJQUMzQixLQUFLLEVBQUU7UUFDTCxLQUFLLEVBQUUsZ0RBQWdEO1FBQ3ZELEtBQUssRUFBRSxzQkFBc0I7UUFDN0IsSUFBSSxFQUFFO1lBQ0osa0dBQWtHO1lBQ2xHLGlHQUFpRztZQUNqRyxrSEFBa0g7U0FDbkg7S0FDRjtJQUNELFFBQVEsRUFBRTtRQUNSLFFBQVEsRUFBRTtZQUNSLElBQUksRUFBRSxFQUFFLElBQUksRUFBRSxpRUFBaUUsRUFBRTtZQUNqRixLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsbUNBQW1DLEVBQUU7U0FDckQ7UUFDRCxLQUFLLEVBQUU7WUFDTCxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsb0NBQW9DLEVBQUU7WUFDcEQsS0FBSyxFQUFFLEVBQUUsSUFBSSxFQUFFLG9DQUFvQyxFQUFFO1NBQ3REO0tBQ0Y7SUFDRCxlQUFlLEVBQUU7UUFDZixRQUFRLEVBQUUsS0FBSztRQUNmLEtBQUssRUFBRSxLQUFLO0tBQ2I7Q0FDRixDQUFDLENBQUM7QUEwRUgsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUE4QixDQUFDLEVBWXJELEVBQUUsRUFBRTtRQVppRCxFQUNwRCxRQUFRLEVBQ1IsS0FBSyxFQUNMLGFBQWEsR0FBRyxVQUFVLEVBQzFCLGNBQWMsR0FBRyxLQUFLLEVBQ3RCLE9BQU8sRUFDUCxRQUFRLEVBQ1IsSUFBSSxFQUNKLEtBQUssRUFDTCxRQUFRLEVBQ1IsWUFBWSxFQUFFLFNBQVMsT0FFeEIsRUFESSxJQUFJLGNBWDZDLDBIQVlyRCxDQURRO0lBRVAsTUFBTSxDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsR0FBRyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUUsY0FBYyxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ3RGLE1BQU0sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxHQUFHLGlCQUFpQixDQUFDLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFFdEUsTUFBTSxZQUFZLEdBQUcsR0FBRyxFQUFFO1FBQ3hCLFdBQVcsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3pCLENBQUMsQ0FBQztJQUVGLE9BQU8sQ0FDTCw2Q0FBTyxTQUFTLEVBQUUsS0FBSyxFQUFFLGdCQUFjLFNBQVMsSUFBTSxJQUFJO1FBQ3hELCtCQUNFLElBQUksRUFBRSxhQUFhLEVBQ25CLElBQUksRUFBRSxJQUFJLEVBQ1YsS0FBSyxFQUFFLEtBQUssRUFDWixTQUFTLEVBQUUsS0FBSyxFQUFFLEVBQ2xCLE9BQU8sRUFBRSxRQUFRLEVBQ2pCLFFBQVEsRUFBRSxZQUFZLEVBQ3RCLFFBQVEsRUFBRSxRQUFRLEdBQ2xCO1FBQ0YsOEJBQU0sU0FBUyxFQUFFLElBQUksRUFBRSxJQUFHLFFBQVEsQ0FBUSxDQUNwQyxDQUNULENBQUM7QUFDSixDQUFDLENBQUMifQ==
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const commandPaletteStyles: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
[key: string]: {
|
|
4
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
5
|
+
dialog?: import("tailwind-merge").ClassNameValue;
|
|
6
|
+
emptyState?: import("tailwind-merge").ClassNameValue;
|
|
7
|
+
modal?: import("tailwind-merge").ClassNameValue;
|
|
8
|
+
searchContainer?: import("tailwind-merge").ClassNameValue;
|
|
9
|
+
searchInput?: import("tailwind-merge").ClassNameValue;
|
|
10
|
+
itemIcon?: import("tailwind-merge").ClassNameValue;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
} | {
|
|
14
|
+
[x: string]: {
|
|
15
|
+
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
16
|
+
dialog?: import("tailwind-merge").ClassNameValue;
|
|
17
|
+
emptyState?: import("tailwind-merge").ClassNameValue;
|
|
18
|
+
modal?: import("tailwind-merge").ClassNameValue;
|
|
19
|
+
searchContainer?: import("tailwind-merge").ClassNameValue;
|
|
20
|
+
searchInput?: import("tailwind-merge").ClassNameValue;
|
|
21
|
+
itemIcon?: import("tailwind-merge").ClassNameValue;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
} | {}, {
|
|
25
|
+
modal: string;
|
|
26
|
+
dialog: string;
|
|
27
|
+
searchContainer: string;
|
|
28
|
+
searchInput: string;
|
|
29
|
+
itemIcon: string;
|
|
30
|
+
emptyState: string;
|
|
31
|
+
}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
|
|
32
|
+
[key: string]: {
|
|
33
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
34
|
+
dialog?: import("tailwind-merge").ClassNameValue;
|
|
35
|
+
emptyState?: import("tailwind-merge").ClassNameValue;
|
|
36
|
+
modal?: import("tailwind-merge").ClassNameValue;
|
|
37
|
+
searchContainer?: import("tailwind-merge").ClassNameValue;
|
|
38
|
+
searchInput?: import("tailwind-merge").ClassNameValue;
|
|
39
|
+
itemIcon?: import("tailwind-merge").ClassNameValue;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
} | {}>, {
|
|
43
|
+
[key: string]: {
|
|
44
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
45
|
+
dialog?: import("tailwind-merge").ClassNameValue;
|
|
46
|
+
emptyState?: import("tailwind-merge").ClassNameValue;
|
|
47
|
+
modal?: import("tailwind-merge").ClassNameValue;
|
|
48
|
+
searchContainer?: import("tailwind-merge").ClassNameValue;
|
|
49
|
+
searchInput?: import("tailwind-merge").ClassNameValue;
|
|
50
|
+
itemIcon?: import("tailwind-merge").ClassNameValue;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
} | {}, {
|
|
54
|
+
modal: string;
|
|
55
|
+
dialog: string;
|
|
56
|
+
searchContainer: string;
|
|
57
|
+
searchInput: string;
|
|
58
|
+
itemIcon: string;
|
|
59
|
+
emptyState: string;
|
|
60
|
+
}, import("tailwind-variants").TVReturnType<unknown, {
|
|
61
|
+
modal: string;
|
|
62
|
+
dialog: string;
|
|
63
|
+
searchContainer: string;
|
|
64
|
+
searchInput: string;
|
|
65
|
+
itemIcon: string;
|
|
66
|
+
emptyState: string;
|
|
67
|
+
}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
|
|
68
|
+
[key: string]: {
|
|
69
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
70
|
+
dialog?: import("tailwind-merge").ClassNameValue;
|
|
71
|
+
emptyState?: import("tailwind-merge").ClassNameValue;
|
|
72
|
+
modal?: import("tailwind-merge").ClassNameValue;
|
|
73
|
+
searchContainer?: import("tailwind-merge").ClassNameValue;
|
|
74
|
+
searchInput?: import("tailwind-merge").ClassNameValue;
|
|
75
|
+
itemIcon?: import("tailwind-merge").ClassNameValue;
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
} | {}>, unknown, unknown, undefined>>;
|
|
79
|
+
type DivProps = React.HTMLAttributes<HTMLDivElement>;
|
|
80
|
+
declare const EmptyState: React.FC<DivProps>;
|
|
81
|
+
type ComposedCommandPaletteProps = {
|
|
82
|
+
EmptyState: typeof EmptyState;
|
|
83
|
+
};
|
|
84
|
+
export declare const CommandPalette: ComposedCommandPaletteProps;
|
|
85
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React from 'react';
|
|
13
|
+
import { tv } from 'tailwind-variants';
|
|
14
|
+
// -- Styles --
|
|
15
|
+
export const commandPaletteStyles = tv({
|
|
16
|
+
slots: {
|
|
17
|
+
modal: 'w-full max-w-[640px] mx-4',
|
|
18
|
+
dialog: 'outline-none rounded max-h-[min(480px,60vh)] overflow-hidden',
|
|
19
|
+
searchContainer: 'flex items-center gap-x-3 p-5 border-b border-muted',
|
|
20
|
+
searchInput: 'outline-none grow bg-transparent [&::-webkit-search-cancel-button]:hidden',
|
|
21
|
+
itemIcon: 'text-muted group-data-[focused]:text-default',
|
|
22
|
+
emptyState: 'p-6 text-center text-muted typography-default',
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
const EmptyState = (_a) => {
|
|
26
|
+
var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
|
|
27
|
+
const { emptyState } = commandPaletteStyles();
|
|
28
|
+
return (React.createElement("div", Object.assign({}, rest, { className: emptyState({ className }) }), children || 'No commands found.'));
|
|
29
|
+
};
|
|
30
|
+
export const CommandPalette = {
|
|
31
|
+
EmptyState,
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29tbWFuZFBhbGV0dGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvQ29tbWFuZFBhbGV0dGUvQ29tbWFuZFBhbGV0dGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxlQUFlO0FBRWYsTUFBTSxDQUFDLE1BQU0sb0JBQW9CLEdBQUcsRUFBRSxDQUFDO0lBQ3JDLEtBQUssRUFBRTtRQUNMLEtBQUssRUFBRSwyQkFBMkI7UUFDbEMsTUFBTSxFQUFFLDhEQUE4RDtRQUN0RSxlQUFlLEVBQUUscURBQXFEO1FBQ3RFLFdBQVcsRUFBRSwyRUFBMkU7UUFDeEYsUUFBUSxFQUFFLDhDQUE4QztRQUN4RCxVQUFVLEVBQUUsK0NBQStDO0tBQzVEO0NBQ0YsQ0FBQyxDQUFDO0FBTUgsTUFBTSxVQUFVLEdBQXVCLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsU0FBUyxFQUFFLFFBQVEsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFDcEUsTUFBTSxFQUFFLFVBQVUsRUFBRSxHQUFHLG9CQUFvQixFQUFFLENBQUM7SUFDOUMsT0FBTyxDQUNMLDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsU0FBUyxFQUFFLENBQUMsS0FDaEQsUUFBUSxJQUFJLG9CQUFvQixDQUM3QixDQUNQLENBQUM7QUFDSixDQUFDLENBQUM7QUFRRixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQWdDO0lBQ3pELFVBQVU7Q0FDWCxDQUFDIn0=
|
|
@@ -2,6 +2,7 @@ import React, { type DOMAttributes } from 'react';
|
|
|
2
2
|
import { type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps, type MenuSectionProps as AriaMenuSectionProps } from 'react-aria-components';
|
|
3
3
|
import type { Icon } from '../../../types/IconProps';
|
|
4
4
|
type DivAttributes = React.HTMLAttributes<HTMLDivElement>;
|
|
5
|
+
export declare const dropdownMenuStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-overlay w-full flex flex-col overflow-x-hidden typography-default text-default", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-overlay w-full flex flex-col overflow-x-hidden typography-default text-default", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
|
|
5
6
|
type DropdownMenuProps<T extends object> = Omit<AriaMenuProps<T>, 'className'> & {
|
|
6
7
|
className?: string;
|
|
7
8
|
};
|
|
@@ -20,10 +21,140 @@ export declare const DropdownMenu: {
|
|
|
20
21
|
Item: ({ kind, className, icon, description, showNotification, disabled, ...props }: MenuItemProps) => React.JSX.Element;
|
|
21
22
|
EmptyStateContainer: React.FC<DivAttributes>;
|
|
22
23
|
};
|
|
24
|
+
export declare const dropdownMenuGroupStyles: import("tailwind-variants").TVReturnType<{
|
|
25
|
+
[key: string]: {
|
|
26
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
27
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
28
|
+
title?: import("tailwind-merge").ClassNameValue;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
} | {
|
|
32
|
+
[x: string]: {
|
|
33
|
+
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
34
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
35
|
+
title?: import("tailwind-merge").ClassNameValue;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
} | {}, {
|
|
39
|
+
base: string[];
|
|
40
|
+
title: string;
|
|
41
|
+
}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
|
|
42
|
+
[key: string]: {
|
|
43
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
44
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
45
|
+
title?: import("tailwind-merge").ClassNameValue;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
} | {}>, {
|
|
49
|
+
[key: string]: {
|
|
50
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
51
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
52
|
+
title?: import("tailwind-merge").ClassNameValue;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
} | {}, {
|
|
56
|
+
base: string[];
|
|
57
|
+
title: string;
|
|
58
|
+
}, import("tailwind-variants").TVReturnType<unknown, {
|
|
59
|
+
base: string[];
|
|
60
|
+
title: string;
|
|
61
|
+
}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
|
|
62
|
+
[key: string]: {
|
|
63
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
64
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
65
|
+
title?: import("tailwind-merge").ClassNameValue;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
} | {}>, unknown, unknown, undefined>>;
|
|
23
69
|
type GroupProps = Omit<AriaMenuSectionProps<object>, 'items'> & {
|
|
24
70
|
title?: React.ReactNode;
|
|
25
71
|
titleProps?: DOMAttributes<HTMLElement>;
|
|
26
72
|
};
|
|
73
|
+
export declare const dropdownMenuItemStyles: import("tailwind-variants").TVReturnType<{
|
|
74
|
+
isDisabled: {
|
|
75
|
+
true: string;
|
|
76
|
+
};
|
|
77
|
+
isFocused: {
|
|
78
|
+
true: string;
|
|
79
|
+
};
|
|
80
|
+
kind: {
|
|
81
|
+
action: string;
|
|
82
|
+
danger: string;
|
|
83
|
+
default: string;
|
|
84
|
+
};
|
|
85
|
+
}, undefined, "group flex items-center gap-x-3 p-3 outline-none cursor-pointer", import("tailwind-variants/dist/config").TVConfig<{
|
|
86
|
+
isDisabled: {
|
|
87
|
+
true: string;
|
|
88
|
+
};
|
|
89
|
+
isFocused: {
|
|
90
|
+
true: string;
|
|
91
|
+
};
|
|
92
|
+
kind: {
|
|
93
|
+
action: string;
|
|
94
|
+
danger: string;
|
|
95
|
+
default: string;
|
|
96
|
+
};
|
|
97
|
+
}, {
|
|
98
|
+
isDisabled: {
|
|
99
|
+
true: string;
|
|
100
|
+
};
|
|
101
|
+
isFocused: {
|
|
102
|
+
true: string;
|
|
103
|
+
};
|
|
104
|
+
kind: {
|
|
105
|
+
action: string;
|
|
106
|
+
danger: string;
|
|
107
|
+
default: string;
|
|
108
|
+
};
|
|
109
|
+
}>, {
|
|
110
|
+
isDisabled: {
|
|
111
|
+
true: string;
|
|
112
|
+
};
|
|
113
|
+
isFocused: {
|
|
114
|
+
true: string;
|
|
115
|
+
};
|
|
116
|
+
kind: {
|
|
117
|
+
action: string;
|
|
118
|
+
danger: string;
|
|
119
|
+
default: string;
|
|
120
|
+
};
|
|
121
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
122
|
+
isDisabled: {
|
|
123
|
+
true: string;
|
|
124
|
+
};
|
|
125
|
+
isFocused: {
|
|
126
|
+
true: string;
|
|
127
|
+
};
|
|
128
|
+
kind: {
|
|
129
|
+
action: string;
|
|
130
|
+
danger: string;
|
|
131
|
+
default: string;
|
|
132
|
+
};
|
|
133
|
+
}, undefined, "group flex items-center gap-x-3 p-3 outline-none cursor-pointer", import("tailwind-variants/dist/config").TVConfig<{
|
|
134
|
+
isDisabled: {
|
|
135
|
+
true: string;
|
|
136
|
+
};
|
|
137
|
+
isFocused: {
|
|
138
|
+
true: string;
|
|
139
|
+
};
|
|
140
|
+
kind: {
|
|
141
|
+
action: string;
|
|
142
|
+
danger: string;
|
|
143
|
+
default: string;
|
|
144
|
+
};
|
|
145
|
+
}, {
|
|
146
|
+
isDisabled: {
|
|
147
|
+
true: string;
|
|
148
|
+
};
|
|
149
|
+
isFocused: {
|
|
150
|
+
true: string;
|
|
151
|
+
};
|
|
152
|
+
kind: {
|
|
153
|
+
action: string;
|
|
154
|
+
danger: string;
|
|
155
|
+
default: string;
|
|
156
|
+
};
|
|
157
|
+
}>, unknown, unknown, undefined>>;
|
|
27
158
|
type MenuItemProps = Omit<AriaMenuItemProps, 'className'> & {
|
|
28
159
|
kind?: 'action' | 'danger' | 'default';
|
|
29
160
|
className?: string;
|
|
@@ -17,7 +17,7 @@ import { Badge } from '../../../src/molecules/Badge/Badge';
|
|
|
17
17
|
import { InlineIcon } from '../../../src/molecules/Icon/Icon';
|
|
18
18
|
import { Typography } from '../../../src/molecules/Typography/Typography';
|
|
19
19
|
import tick from '../../../src/icons/tick';
|
|
20
|
-
const dropdownMenuStyles = tv({
|
|
20
|
+
export const dropdownMenuStyles = tv({
|
|
21
21
|
base: 'bg-overlay w-full flex flex-col overflow-x-hidden typography-default text-default',
|
|
22
22
|
});
|
|
23
23
|
// Create the component using forwardRef and cast it to the component type
|
|
@@ -29,7 +29,7 @@ const MenuContainer = ({ minHeight, maxHeight = '100%', minWidth = '125px', maxW
|
|
|
29
29
|
DropdownMenu.MenuContainer = MenuContainer;
|
|
30
30
|
const ScrollableContentContainer = ({ children }) => (React.createElement("div", { className: "p-3 overflow-y-auto overflow-x-hidden" }, children));
|
|
31
31
|
DropdownMenu.ScrollableContentContainer = ScrollableContentContainer;
|
|
32
|
-
const dropdownMenuGroupStyles = tv({
|
|
32
|
+
export const dropdownMenuGroupStyles = tv({
|
|
33
33
|
slots: {
|
|
34
34
|
base: [
|
|
35
35
|
'[&:not(:first-child)]:before:content-[""] [&:not(:first-child)]:before:block',
|
|
@@ -46,7 +46,7 @@ const Group = (_a) => {
|
|
|
46
46
|
React.createElement(AriaCollection, null, children)));
|
|
47
47
|
};
|
|
48
48
|
DropdownMenu.Group = Group;
|
|
49
|
-
const dropdownMenuItemStyles = tv({
|
|
49
|
+
export const dropdownMenuItemStyles = tv({
|
|
50
50
|
base: 'group flex items-center gap-x-3 p-3 outline-none cursor-pointer',
|
|
51
51
|
variants: {
|
|
52
52
|
isDisabled: {
|
|
@@ -91,4 +91,4 @@ const EmptyStateContainer = (_a) => {
|
|
|
91
91
|
return (React.createElement("div", Object.assign({ className: clsx('border border-dashed border-default p-3', className) }, props), children));
|
|
92
92
|
};
|
|
93
93
|
DropdownMenu.EmptyStateContainer = EmptyStateContainer;
|
|
94
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
94
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHJvcGRvd25NZW51LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL0Ryb3Bkb3duTWVudS9Ecm9wZG93bk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUE2QixNQUFNLE9BQU8sQ0FBQztBQUNsRCxPQUFPLEVBQ0wsVUFBVSxJQUFJLGNBQWMsRUFDNUIsa0JBQWtCLEVBQ2xCLE1BQU0sSUFBSSxVQUFVLEVBQ3BCLElBQUksSUFBSSxRQUFRLEVBQ2hCLFFBQVEsSUFBSSxZQUFZLEVBR3hCLFdBQVcsSUFBSSxlQUFlLEdBRS9CLE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUM1QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFdkMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFakUsT0FBTyxJQUFJLE1BQU0sZ0JBQWdCLENBQUM7QUFNbEMsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsRUFBRSxDQUFDO0lBQ25DLElBQUksRUFBRSxtRkFBbUY7Q0FDMUYsQ0FBQyxDQUFDO0FBTUgsMEVBQTBFO0FBQzFFLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFtQixFQUF1RCxFQUFFLEVBQUU7UUFBM0QsRUFBRSxTQUFTLEVBQUUsUUFBUSxPQUFrQyxFQUE3QixLQUFLLGNBQS9CLHlCQUFpQyxDQUFGO0lBQzVFLE9BQU8sQ0FDTCxvQkFBQyxRQUFRLGtCQUFDLFNBQVMsRUFBRSxrQkFBa0IsQ0FBQyxFQUFFLFNBQVMsRUFBRSxDQUFDLHVCQUF1QixFQUFFLFNBQVMsQ0FBQyxFQUFFLENBQUMsSUFB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
|
|
@@ -5,6 +5,7 @@ export * from './Card/Card';
|
|
|
5
5
|
export * from './Checkbox/Checkbox';
|
|
6
6
|
export * from './Chip/Chip';
|
|
7
7
|
export * from './ChoiceChip/ChoiceChip';
|
|
8
|
+
export * from './CommandPalette/CommandPalette';
|
|
8
9
|
export * from './DataList/DataList';
|
|
9
10
|
export * from './Dialog/Dialog';
|
|
10
11
|
export * from './DropdownMenu/DropdownMenu';
|
package/dist/src/atoms/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export * from './Card/Card';
|
|
|
5
5
|
export * from './Checkbox/Checkbox';
|
|
6
6
|
export * from './Chip/Chip';
|
|
7
7
|
export * from './ChoiceChip/ChoiceChip';
|
|
8
|
+
export * from './CommandPalette/CommandPalette';
|
|
8
9
|
export * from './DataList/DataList';
|
|
9
10
|
export * from './Dialog/Dialog';
|
|
10
11
|
export * from './DropdownMenu/DropdownMenu';
|
|
@@ -27,4 +28,4 @@ export * from './Table/Table';
|
|
|
27
28
|
export * from './Toast/Toast';
|
|
28
29
|
export * from './Typography/Typography';
|
|
29
30
|
export * from './VisuallyHidden/VisuallyHidden';
|
|
30
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXRvbXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLGlDQUFpQyxDQUFDIn0=
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type MenuItemProps as AriaMenuItemProps, type MenuSectionProps as AriaMenuSectionProps } from 'react-aria-components';
|
|
3
|
+
import { type CommandPaletteProviderProps, type ShortcutConfig, useCommandPalette } from './CommandPaletteProvider';
|
|
4
|
+
import type { Icon } from '../../../types/IconProps';
|
|
5
|
+
type CommandsProps = {
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
type SectionProps<T extends object> = AriaMenuSectionProps<T> & {
|
|
9
|
+
title?: React.ReactNode;
|
|
10
|
+
className?: string;
|
|
11
|
+
};
|
|
12
|
+
declare const Section: {
|
|
13
|
+
<T extends object>({ title, items, children, ...props }: SectionProps<T>): React.JSX.Element | null;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
16
|
+
export type CommandProps = Omit<AriaMenuItemProps, 'className'> & {
|
|
17
|
+
/**
|
|
18
|
+
* The text label displayed for this command. Also used as the default search text.
|
|
19
|
+
*
|
|
20
|
+
* If two commands in the same section share the same label, pass an explicit `id` or
|
|
21
|
+
* `key` so React can keep reconciliation stable when results are re-ordered by ranking.
|
|
22
|
+
*/
|
|
23
|
+
label: string;
|
|
24
|
+
/** Optional icon displayed before the label. */
|
|
25
|
+
icon?: Icon;
|
|
26
|
+
/** Additional search terms that participate in fuzzy matching and ranking, but are not displayed. */
|
|
27
|
+
keywords?: string[];
|
|
28
|
+
/** When true, the command is visible but cannot be selected. */
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
/** When true, this command is always visible regardless of the search query. Useful for loading indicators or status messages. */
|
|
31
|
+
static?: boolean;
|
|
32
|
+
className?: string;
|
|
33
|
+
/** Callback fired when the command is selected. */
|
|
34
|
+
onAction: () => void;
|
|
35
|
+
};
|
|
36
|
+
declare const Command: {
|
|
37
|
+
({ className, icon, label, keywords, disabled, static: isStatic, ...props }: CommandProps): React.JSX.Element;
|
|
38
|
+
displayName: string;
|
|
39
|
+
};
|
|
40
|
+
type CommandPaletteComponent = {
|
|
41
|
+
Provider: React.FC<CommandPaletteProviderProps>;
|
|
42
|
+
Commands: React.FC<CommandsProps>;
|
|
43
|
+
Section: typeof Section;
|
|
44
|
+
Command: typeof Command;
|
|
45
|
+
};
|
|
46
|
+
export declare const CommandPalette: CommandPaletteComponent;
|
|
47
|
+
export { useCommandPalette };
|
|
48
|
+
export type { CommandPaletteProviderProps, ShortcutConfig };
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { useEffect } from 'react';
|
|
13
|
+
import { Collection as AriaCollection, composeRenderProps, Header as AriaHeader, MenuItem as AriaMenuItem, MenuSection as AriaMenuSection, } from 'react-aria-components';
|
|
14
|
+
import { useId } from '@react-aria/utils';
|
|
15
|
+
import { InlineIcon } from '../../../src/molecules/Icon/Icon';
|
|
16
|
+
import { commandPaletteStyles } from '../../../src/atoms/CommandPalette/CommandPalette';
|
|
17
|
+
import { dropdownMenuGroupStyles, dropdownMenuItemStyles } from '../../../src/atoms/DropdownMenu/DropdownMenu';
|
|
18
|
+
import { CommandPaletteProvider, useCommandPalette, useCommandPaletteQuery, useCommandPaletteRootContext, } from './CommandPaletteProvider';
|
|
19
|
+
import { rankChildren } from './rankCommands';
|
|
20
|
+
import { ActionTypes, FIELD_SEPARATOR, STATIC_ITEM_MARKER } from './types';
|
|
21
|
+
const Commands = ({ children }) => {
|
|
22
|
+
const id = useId();
|
|
23
|
+
const [, dispatch] = useCommandPaletteRootContext();
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
dispatch({ type: ActionTypes.Register, registration: { id, children } });
|
|
26
|
+
return () => {
|
|
27
|
+
dispatch({ type: ActionTypes.Unregister, id });
|
|
28
|
+
};
|
|
29
|
+
// We only want to register once on mount and unregister on unmount.
|
|
30
|
+
// Updates are handled by the effect below.
|
|
31
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
32
|
+
}, []);
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
dispatch({ type: ActionTypes.Update, registration: { id, children } });
|
|
35
|
+
}, [dispatch, id, children]);
|
|
36
|
+
return null;
|
|
37
|
+
};
|
|
38
|
+
Commands.displayName = 'CommandPalette.Commands';
|
|
39
|
+
const Section = (_a) => {
|
|
40
|
+
var { title, items, children } = _a, props = __rest(_a, ["title", "items", "children"]);
|
|
41
|
+
const groupStyles = dropdownMenuGroupStyles();
|
|
42
|
+
const query = useCommandPaletteQuery();
|
|
43
|
+
const renderShell = (content) => (React.createElement(AriaMenuSection, Object.assign({ className: groupStyles.base({ className: 'Aquarium-CommandPalette.Section' }) }, props),
|
|
44
|
+
title && React.createElement(AriaHeader, { className: groupStyles.title() }, title),
|
|
45
|
+
content));
|
|
46
|
+
// Dynamic collection paths — consumer controls ordering; rely on Autocomplete's filter predicate.
|
|
47
|
+
if (items || typeof children === 'function') {
|
|
48
|
+
return renderShell(items ? React.createElement(AriaCollection, { items: items }, children) : React.createElement(AriaCollection, null, children));
|
|
49
|
+
}
|
|
50
|
+
if (!query) {
|
|
51
|
+
return renderShell(React.createElement(AriaCollection, null, children));
|
|
52
|
+
}
|
|
53
|
+
const ranked = rankChildren(children, query, Command);
|
|
54
|
+
if (ranked.length === 0) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
return renderShell(React.createElement(AriaCollection, null, ranked));
|
|
58
|
+
};
|
|
59
|
+
Section.displayName = 'CommandPalette.Section';
|
|
60
|
+
const Command = (_a) => {
|
|
61
|
+
var { className, icon, label, keywords, disabled, static: isStatic } = _a, props = __rest(_a, ["className", "icon", "label", "keywords", "disabled", "static"]);
|
|
62
|
+
const styles = commandPaletteStyles();
|
|
63
|
+
const textValue = props.textValue || label || (typeof props.children === 'string' ? props.children : undefined);
|
|
64
|
+
// Join label and keywords with FIELD_SEPARATOR so the Autocomplete predicate can
|
|
65
|
+
// rank them as distinct fields (prevents subsequences from crossing the boundary).
|
|
66
|
+
const resolvedTextValue = [textValue, ...(keywords !== null && keywords !== void 0 ? keywords : [])].filter(Boolean).join(FIELD_SEPARATOR);
|
|
67
|
+
return (React.createElement(AriaMenuItem, Object.assign({ className: (values) => dropdownMenuItemStyles(Object.assign(Object.assign({}, values), { className: ['Aquarium-CommandPalette.Item', className] })), textValue: isStatic ? `${STATIC_ITEM_MARKER}${resolvedTextValue}` : resolvedTextValue, isDisabled: disabled }, props), composeRenderProps(props.children, (children) => (React.createElement(React.Fragment, null,
|
|
68
|
+
icon && React.createElement(InlineIcon, { icon: icon, className: styles.itemIcon() }),
|
|
69
|
+
React.createElement("span", { className: "grow" }, label || children))))));
|
|
70
|
+
};
|
|
71
|
+
Command.displayName = 'CommandPalette.Command';
|
|
72
|
+
export const CommandPalette = {
|
|
73
|
+
Provider: CommandPaletteProvider,
|
|
74
|
+
Commands,
|
|
75
|
+
Section,
|
|
76
|
+
Command,
|
|
77
|
+
};
|
|
78
|
+
export { useCommandPalette };
|
|
79
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29tbWFuZFBhbGV0dGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0NvbW1hbmRQYWxldHRlL0NvbW1hbmRQYWxldHRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBQ3pDLE9BQU8sRUFDTCxVQUFVLElBQUksY0FBYyxFQUM1QixrQkFBa0IsRUFDbEIsTUFBTSxJQUFJLFVBQVUsRUFDcEIsUUFBUSxJQUFJLFlBQVksRUFFeEIsV0FBVyxJQUFJLGVBQWUsR0FFL0IsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFMUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRXJELE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBQy9FLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRXRHLE9BQU8sRUFDTCxzQkFBc0IsRUFHdEIsaUJBQWlCLEVBQ2pCLHNCQUFzQixFQUN0Qiw0QkFBNEIsR0FDN0IsTUFBTSwwQkFBMEIsQ0FBQztBQUNsQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDOUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxTQUFTLENBQUM7QUFVM0UsTUFBTSxRQUFRLEdBQTRCLENBQUMsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFO0lBQ3pELE1BQU0sRUFBRSxHQUFHLEtBQUssRUFBRSxDQUFDO0lBQ25CLE1BQU0sQ0FBQyxFQUFFLFFBQVEsQ0FBQyxHQUFHLDRCQUE0QixFQUFFLENBQUM7SUFFcEQsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLFFBQVEs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
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React, { type Dispatch } from 'react';
|
|
2
|
+
import { type Actions, type State } from './types';
|
|
3
|
+
type CommandPaletteContextValue = [State, Dispatch<Actions>];
|
|
4
|
+
declare const CommandPaletteContext: React.Context<CommandPaletteContextValue | null>;
|
|
5
|
+
declare const useCommandPaletteRootContext: () => CommandPaletteContextValue;
|
|
6
|
+
export declare const useCommandPalette: () => {
|
|
7
|
+
open: () => void;
|
|
8
|
+
close: () => void;
|
|
9
|
+
toggle: () => void;
|
|
10
|
+
isOpen: boolean;
|
|
11
|
+
};
|
|
12
|
+
export { CommandPaletteContext, useCommandPaletteRootContext };
|
|
13
|
+
declare const CommandPaletteQueryContext: React.Context<string>;
|
|
14
|
+
/** Read the current palette search query. Returns '' when the palette is closed or empty. */
|
|
15
|
+
export declare const useCommandPaletteQuery: () => string;
|
|
16
|
+
export { CommandPaletteQueryContext };
|
|
17
|
+
export type ShortcutConfig = {
|
|
18
|
+
key: string;
|
|
19
|
+
metaKey?: boolean;
|
|
20
|
+
};
|
|
21
|
+
export type CommandPaletteProviderProps = {
|
|
22
|
+
/** Keyboard shortcut to toggle the palette. Pass `null` to disable the global shortcut. */
|
|
23
|
+
shortcut?: ShortcutConfig | null;
|
|
24
|
+
/** Top margin for the palette, e.g. `'15vh'` or `'100px'`. */
|
|
25
|
+
marginTop?: string;
|
|
26
|
+
/** Placeholder text for the search input. */
|
|
27
|
+
placeholder?: string;
|
|
28
|
+
/** Content to show when no commands match the search query. */
|
|
29
|
+
emptyState?: React.ReactNode;
|
|
30
|
+
/** Called when the palette opens or closes. */
|
|
31
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
32
|
+
/** Called when the search input value changes. */
|
|
33
|
+
onInputChange?: (value: string) => void;
|
|
34
|
+
children: React.ReactNode;
|
|
35
|
+
};
|
|
36
|
+
export declare const CommandPaletteProvider: React.FC<CommandPaletteProviderProps>;
|