@flipdish/ui-library 0.29.0 → 0.30.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/components/atoms/Input/index.cjs +3 -1
- package/dist/components/atoms/Input/index.cjs.map +1 -1
- package/dist/components/atoms/Input/index.d.ts +5 -1
- package/dist/components/atoms/Input/index.d.ts.map +1 -1
- package/dist/components/atoms/Input/index.js +3 -1
- package/dist/components/atoms/Input/index.js.map +1 -1
- package/dist/components/molecules/Select/components/combobox.cjs +3 -1
- package/dist/components/molecules/Select/components/combobox.cjs.map +1 -1
- package/dist/components/molecules/Select/components/combobox.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/combobox.js +3 -1
- package/dist/components/molecules/Select/components/combobox.js.map +1 -1
- package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts +12 -5
- package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.cjs +12 -17
- package/dist/components/organisms/ApplicationHeader/index.cjs.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.d.ts +9 -5
- package/dist/components/organisms/ApplicationHeader/index.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.js +12 -18
- package/dist/components/organisms/ApplicationHeader/index.js.map +1 -1
- package/dist/components/organisms/Calendar/index.cjs +3 -3
- package/dist/components/organisms/Calendar/index.cjs.map +1 -1
- package/dist/components/organisms/Calendar/index.js +3 -3
- package/dist/components/organisms/Calendar/index.js.map +1 -1
- package/dist/components/organisms/CommandMenu/commandMenu.utils.cjs +0 -21
- package/dist/components/organisms/CommandMenu/commandMenu.utils.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/commandMenu.utils.d.ts +0 -9
- package/dist/components/organisms/CommandMenu/commandMenu.utils.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/commandMenu.utils.js +1 -21
- package/dist/components/organisms/CommandMenu/commandMenu.utils.js.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-input.cjs +2 -2
- package/dist/components/organisms/CommandMenu/components/command-input.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-input.d.ts +3 -2
- package/dist/components/organisms/CommandMenu/components/command-input.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-input.js +2 -2
- package/dist/components/organisms/CommandMenu/components/command-input.js.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.cjs +15 -2
- package/dist/components/organisms/CommandMenu/components/command-menu-item.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.d.ts +9 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.js +15 -2
- package/dist/components/organisms/CommandMenu/components/command-menu-item.js.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-shortcut.cjs +2 -2
- package/dist/components/organisms/CommandMenu/components/command-shortcut.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-shortcut.d.ts +1 -0
- package/dist/components/organisms/CommandMenu/components/command-shortcut.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-shortcut.js +2 -2
- package/dist/components/organisms/CommandMenu/components/command-shortcut.js.map +1 -1
- package/dist/components/organisms/CommandMenu/index.cjs +65 -29
- package/dist/components/organisms/CommandMenu/index.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/index.d.ts +29 -2
- package/dist/components/organisms/CommandMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/index.js +69 -33
- package/dist/components/organisms/CommandMenu/index.js.map +1 -1
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.cjs +9 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.cjs.map +1 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.d.ts +3 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.d.ts.map +1 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.js +7 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.js.map +1 -0
- package/dist/components/organisms/DatePicker/components/input-date.cjs +3 -1
- package/dist/components/organisms/DatePicker/components/input-date.cjs.map +1 -1
- package/dist/components/organisms/DatePicker/components/input-date.d.ts +5 -1
- package/dist/components/organisms/DatePicker/components/input-date.d.ts.map +1 -1
- package/dist/components/organisms/DatePicker/components/input-date.js +3 -1
- package/dist/components/organisms/DatePicker/components/input-date.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.cjs +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.d.ts +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.js +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.cjs +15 -5
- package/dist/components/organisms/SidebarNavigation/index.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.d.ts +3 -2
- package/dist/components/organisms/SidebarNavigation/index.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.js +15 -5
- package/dist/components/organisms/SidebarNavigation/index.js.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.cjs +9 -4
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.cjs.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.d.ts.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.js +10 -5
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.js.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.cjs +8 -2
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.cjs.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.d.ts.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.js +8 -2
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.js.map +1 -1
- package/dist/components/organisms/TextEditor/textEditor.utils.cjs +3 -0
- package/dist/components/organisms/TextEditor/textEditor.utils.cjs.map +1 -1
- package/dist/components/organisms/TextEditor/textEditor.utils.d.ts +4 -0
- package/dist/components/organisms/TextEditor/textEditor.utils.d.ts.map +1 -1
- package/dist/components/organisms/TextEditor/textEditor.utils.js +3 -1
- package/dist/components/organisms/TextEditor/textEditor.utils.js.map +1 -1
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs +24 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs.map +1 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.d.ts +22 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.d.ts.map +1 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.js +22 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.js.map +1 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.cjs +54 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.cjs.map +1 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.d.ts +11 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.d.ts.map +1 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.js +52 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.js.map +1 -0
- package/dist/hooks/usePlatform/index.cjs +22 -0
- package/dist/hooks/usePlatform/index.cjs.map +1 -0
- package/dist/hooks/usePlatform/index.d.ts +22 -0
- package/dist/hooks/usePlatform/index.d.ts.map +1 -0
- package/dist/hooks/usePlatform/index.js +20 -0
- package/dist/hooks/usePlatform/index.js.map +1 -0
- package/dist/native/hooks/usePlatform/index.d.ts +12 -0
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs +222 -15
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs.map +1 -1
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.d.ts +60 -5
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.d.ts.map +1 -1
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.js +215 -15
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.js.map +1 -1
- package/dist/utilities/__internal__/platformUtils/platform.utils.cjs +26 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.cjs.map +1 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.d.ts +10 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.d.ts.map +1 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.js +23 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.js.map +1 -0
- package/package.json +1 -1
|
@@ -6,47 +6,67 @@ var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
8
|
var reactHotkeysHook = require('react-hotkeys-hook');
|
|
9
|
+
var useHotkeyHint = require('../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
|
|
10
|
+
var useKeySequences = require('../../../hooks/__internal__/useKeySequences/useKeySequences.cjs');
|
|
9
11
|
var children_utils = require('../../../utilities/__internal__/childrenUtils/children.utils.cjs');
|
|
10
12
|
var hotkeys_utils = require('../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
|
|
13
|
+
var log_utils = require('../../../utilities/__internal__/logUtils/log.utils.cjs');
|
|
11
14
|
var commandMenu_utils = require('./commandMenu.utils.cjs');
|
|
12
15
|
var commandInput = require('./components/command-input.cjs');
|
|
13
16
|
var commandMenuFooter = require('./components/command-menu-footer.cjs');
|
|
14
17
|
var commandMenuHeader = require('./components/command-menu-header.cjs');
|
|
15
18
|
var commandMenuItem = require('./components/command-menu-item.cjs');
|
|
19
|
+
var commandMenuLinkContext = require('./providers/command-menu-link-context.cjs');
|
|
16
20
|
|
|
21
|
+
const DEFAULT_SHORTCUT = '⌘/';
|
|
17
22
|
const CommandMenuContext = React.createContext({
|
|
18
23
|
hasFooter: false,
|
|
19
24
|
flatItems: [],
|
|
20
25
|
selectedKeys: new Set(),
|
|
21
26
|
setSelectedKeys: () => { },
|
|
22
27
|
});
|
|
23
|
-
const CommandMenuRoot = ({ items, children, dialogClassName, overlayClassName, filter, inputValue, defaultItems, onInputChange, onSelectionChange, sensitivity = 'base', placeholder = 'Search', defaultSelectedKeys, shortcut =
|
|
28
|
+
const CommandMenuRoot = ({ items, children, dialogClassName, overlayClassName, filter, inputValue, defaultItems, onInputChange, onSelectionChange, sensitivity = 'base', placeholder = 'Search', defaultSelectedKeys, shortcut = DEFAULT_SHORTCUT, closeOnNavigate = true, labels, 'data-testid': dataTestId, ...otherProps }) => {
|
|
24
29
|
const inputRef = React.useRef(null);
|
|
30
|
+
// Present when the menu is used inside `CommandMenu.Trigger`, which owns the open state instead of `isOpen`.
|
|
31
|
+
const triggerState = React.useContext(reactAriaComponents.OverlayTriggerStateContext);
|
|
32
|
+
const isOpen = otherProps.isOpen ?? triggerState?.isOpen ?? false;
|
|
33
|
+
const close = () => {
|
|
34
|
+
// Inside a Trigger the trigger owns the state, even when `onOpenChange` is passed just to observe it.
|
|
35
|
+
if (otherProps.isOpen === undefined && triggerState)
|
|
36
|
+
triggerState.close();
|
|
37
|
+
otherProps.onOpenChange?.(false);
|
|
38
|
+
};
|
|
39
|
+
const hotkey = shortcut ? hotkeys_utils.normalizeHotkey(shortcut) : '';
|
|
40
|
+
const shortcutHint = useHotkeyHint.useHotkeyHint(shortcut);
|
|
25
41
|
const { contains } = reactAriaComponents.useFilter({ sensitivity });
|
|
26
42
|
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'command-menu', rootName: 'command-menu' });
|
|
27
43
|
const [selectedKeys, setSelectedKeys] = React.useState(defaultSelectedKeys ?? new Set());
|
|
28
44
|
// Flatten the items and register hotkeys for items with shortcut keys.
|
|
29
45
|
const resolvedItems = items ?? defaultItems ?? [];
|
|
30
46
|
const flatItems = resolvedItems.flatMap((group) => group.items);
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}));
|
|
40
|
-
|
|
41
|
-
const
|
|
47
|
+
const disabledKeys = new Set(otherProps.disabledKeys);
|
|
48
|
+
const itemHotkeys = flatItems
|
|
49
|
+
.filter((item) => !item.isDisabled && !disabledKeys.has(item.id))
|
|
50
|
+
.map((item) => ({ item, steps: hotkeys_utils.toHotkeySteps(item.shortcutKeys ?? []) }))
|
|
51
|
+
.filter(({ steps }) => steps.length > 0)
|
|
52
|
+
.map(({ item, steps }) => ({ item, steps, kind: hotkeys_utils.getItemHotkeyKind(steps) }));
|
|
53
|
+
const hotkeysOfKind = (kind) => itemHotkeys.filter((itemHotkey) => itemHotkey.kind === kind);
|
|
54
|
+
// Registering a hotkey twice would run the handler twice for one keypress.
|
|
55
|
+
const uniqueHotkeys = (kind) => [...new Set(hotkeysOfKind(kind).map(({ steps }) => steps[0]))];
|
|
56
|
+
const typedHotkeys = hotkeysOfKind('typed');
|
|
57
|
+
const hasUnsupportedHotkey = hotkeysOfKind('unsupported').length > 0;
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (!hasUnsupportedHotkey)
|
|
60
|
+
return;
|
|
61
|
+
log_utils.warnOnce('CommandMenu:unsupported-shortcut', "CommandMenu: an item's `shortcutKeys` is drawn but can never be triggered. A sequence cannot contain a modifier (['⌘k', 'p']) and a modifier needs a key (['⌘']).");
|
|
62
|
+
}, [hasUnsupportedHotkey]);
|
|
63
|
+
const selectItemForHotkey = (keyboardEvent, hotkeysEvent) => {
|
|
42
64
|
keyboardEvent.preventDefault();
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
//
|
|
48
|
-
// vendored `parseHotkey` never produces. A full deep-equality check on the
|
|
49
|
-
// whole object would therefore always fail, even for a matching hotkey.
|
|
65
|
+
const match = itemHotkeys.find(({ kind, steps }) => {
|
|
66
|
+
if (kind !== 'combination' && kind !== 'guarded')
|
|
67
|
+
return false;
|
|
68
|
+
const parsedHotkey = hotkeys_utils.parseHotkey(steps[0]);
|
|
69
|
+
// `hotkeysEvent` carries fields (e.g. `metadata`) the vendored parser never produces, so compare only the identifying ones.
|
|
50
70
|
return (parsedHotkey.hotkey.trim().toLowerCase() === hotkeysEvent.hotkey?.trim().toLowerCase() &&
|
|
51
71
|
parsedHotkey.isSequence === hotkeysEvent.isSequence &&
|
|
52
72
|
parsedHotkey.alt === hotkeysEvent.alt &&
|
|
@@ -56,21 +76,37 @@ const CommandMenuRoot = ({ items, children, dialogClassName, overlayClassName, f
|
|
|
56
76
|
parsedHotkey.mod === hotkeysEvent.mod &&
|
|
57
77
|
commandMenu_utils.isDeepEqual(parsedHotkey.keys, hotkeysEvent.keys));
|
|
58
78
|
});
|
|
59
|
-
if (
|
|
60
|
-
onSelectionChange?.(new Set([item.id]));
|
|
61
|
-
}
|
|
62
|
-
//
|
|
63
|
-
reactHotkeysHook.useHotkeys(
|
|
79
|
+
if (match)
|
|
80
|
+
onSelectionChange?.(new Set([match.item.id]));
|
|
81
|
+
};
|
|
82
|
+
// Combinations held with ⌘/Ctrl/Alt cannot be mistaken for typing, so they also work inside the search input.
|
|
83
|
+
reactHotkeysHook.useHotkeys(uniqueHotkeys('combination'), selectItemForHotkey, {
|
|
84
|
+
enableOnFormTags: true,
|
|
85
|
+
// react-aria re-dispatches a key typed in the search input onto the list; once handled, skip the copy.
|
|
86
|
+
ignoreEventWhen: (event) => event.defaultPrevented,
|
|
87
|
+
});
|
|
88
|
+
// Everything typing could produce (Shift+A, `?`, G then P) is ignored in fields so it never hijacks text entry.
|
|
89
|
+
reactHotkeysHook.useHotkeys(uniqueHotkeys('guarded'), selectItemForHotkey, { ignoreEventWhen: (event) => event.defaultPrevented || hotkeys_utils.isTypingInField(event) });
|
|
90
|
+
useKeySequences.useKeySequences(typedHotkeys.map(({ steps }) => steps.map(hotkeys_utils.hotkeyCharacter)), (index) => onSelectionChange?.(new Set([typedHotkeys[index].item.id])));
|
|
91
|
+
// The shortcut only returns focus to the search input while the menu is open; opening is the app's job.
|
|
92
|
+
reactHotkeysHook.useHotkeys(hotkey, () => inputRef.current?.focus(), {
|
|
93
|
+
enabled: Boolean(hotkey) && isOpen,
|
|
94
|
+
preventDefault: true,
|
|
95
|
+
enableOnFormTags: true,
|
|
96
|
+
enableOnContentEditable: true,
|
|
97
|
+
// A rich-text editor inside the menu may bind the same key; if it handled the event, leave it alone.
|
|
98
|
+
ignoreEventWhen: (event) => event.defaultPrevented,
|
|
99
|
+
}, [isOpen]);
|
|
64
100
|
// Determine if the command menu has a footer.
|
|
65
101
|
const hasFooter = React.useMemo(() => children_utils.flattenChildren(children).some((child) => React.isValidElement(child) && child.type === commandMenuFooter.CommandMenuFooter), [children]);
|
|
66
|
-
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(CommandMenuContext.Provider, { value: { hasFooter, flatItems, selectedKeys, setSelectedKeys, onSelectionChange, items, ...otherProps }, children: jsxRuntime.jsx(CommandDialog, { isOpen: otherProps.isOpen, onOpenChange: otherProps.onOpenChange, className: overlayClassName, dialogClassName: dialogClassName, "data-testid": rootTestId, children: jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { inputValue, onInputChange, filter: filter === false ? undefined : filter || contains, children: [jsxRuntime.jsx(reactAriaComponents.TextField, { "aria-label":
|
|
102
|
+
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(CommandMenuContext.Provider, { value: { hasFooter, flatItems, selectedKeys, setSelectedKeys, onSelectionChange, items, resultsLabel: labels?.results, ...otherProps }, children: jsxRuntime.jsx(commandMenuLinkContext.CommandMenuLinkContext.Provider, { value: closeOnNavigate ? close : undefined, children: jsxRuntime.jsx(CommandDialog, { isOpen: otherProps.isOpen, onOpenChange: otherProps.onOpenChange, className: overlayClassName, dialogClassName: dialogClassName, label: labels?.dialog, "data-testid": rootTestId, children: jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { inputValue, onInputChange, filter: filter === false ? undefined : filter || contains, children: [jsxRuntime.jsx(reactAriaComponents.TextField, { "aria-label": labels?.search ?? 'Search', children: jsxRuntime.jsx(commandInput.CommandInput, { autoFocus: true, shortcutHint: shortcutHint, placeholder: placeholder, ref: inputRef, className: "relative outline-hidden! after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-border-secondary" }) }), children] }) }) }) }) }));
|
|
67
103
|
};
|
|
68
|
-
const CommandDialog = ({ className, dialogClassName, children, 'data-testid': dataTestId, ...comboboxProps }) => {
|
|
69
|
-
return (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { ...comboboxProps, isDismissable: true, className: (state) => cx.cx('fixed inset-0 z-50 flex min-h-full items-start justify-center overflow-y-auto bg-overlay/70 p-4 text-center backdrop-blur md:pt-16 xl:pt-[clamp(64px,10vh,243px)]', state.isEntering && 'duration-300 ease-out animate-in fade-in', state.isExiting && 'duration-200 ease-in animate-out fade-out', typeof className === 'function' ? className(state) : className), children: (state) => (jsxRuntime.jsx(reactAriaComponents.Modal, { className: (state) => cx.cx('flex max-h-full w-160 flex-col overflow-hidden rounded-xl bg-primary text-left align-middle shadow-xl', state.isEntering && 'duration-300 ease-out animate-in zoom-in-95', state.isExiting && 'duration-200 ease-in animate-out zoom-out-95', typeof dialogClassName === 'function' ? dialogClassName(state) : dialogClassName), children: jsxRuntime.jsx(reactAriaComponents.Dialog, { "aria-label":
|
|
104
|
+
const CommandDialog = ({ className, dialogClassName, children, label = 'Command menu', 'data-testid': dataTestId, ...comboboxProps }) => {
|
|
105
|
+
return (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { ...comboboxProps, isDismissable: true, className: (state) => cx.cx('fixed inset-0 z-50 flex min-h-full items-start justify-center overflow-y-auto bg-overlay/70 p-4 text-center backdrop-blur md:pt-16 xl:pt-[clamp(64px,10vh,243px)]', state.isEntering && 'duration-300 ease-out animate-in fade-in', state.isExiting && 'duration-200 ease-in animate-out fade-out', typeof className === 'function' ? className(state) : className), children: (state) => (jsxRuntime.jsx(reactAriaComponents.Modal, { className: (state) => cx.cx('flex max-h-full w-160 flex-col overflow-hidden rounded-xl bg-primary text-left align-middle shadow-xl', state.isEntering && 'duration-300 ease-out animate-in zoom-in-95', state.isExiting && 'duration-200 ease-in animate-out zoom-out-95', typeof dialogClassName === 'function' ? dialogClassName(state) : dialogClassName), children: jsxRuntime.jsx(reactAriaComponents.Dialog, { "aria-label": label, "data-testid": dataTestId, className: "relative flex min-h-0 flex-1 flex-col outline-hidden", children: typeof children === 'function' ? children(state) : children }) })) }));
|
|
70
106
|
};
|
|
71
107
|
const CommandMenuList = ({ className, selectionMode = 'single', ...props }) => {
|
|
72
|
-
const { hasFooter, emptyState, ...listBoxProps } = React.useContext(CommandMenuContext);
|
|
73
|
-
return (jsxRuntime.jsx(reactAriaComponents.ListBox, { "aria-label":
|
|
108
|
+
const { hasFooter, emptyState, resultsLabel, ...listBoxProps } = React.useContext(CommandMenuContext);
|
|
109
|
+
return (jsxRuntime.jsx(reactAriaComponents.ListBox, { "aria-label": resultsLabel ?? 'Command menu results', ...props, ...listBoxProps, renderEmptyState: () => emptyState, selectionMode: selectionMode, onSelectionChange: (key) => {
|
|
74
110
|
listBoxProps.onSelectionChange?.(key);
|
|
75
111
|
listBoxProps.setSelectedKeys(key);
|
|
76
112
|
}, className: (state) => cx.cx('flex max-h-106 flex-1 scroll-py-10 flex-col gap-2 overflow-auto focus:outline-hidden', hasFooter && 'scroll-pb-22 pb-13', !state.isEmpty && 'pt-2', typeof className === 'function' ? className(state) : className) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"sourcesContent":[null],"names":["createContext","useRef","useFilter","useResolvedTestId","useState","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"sourcesContent":[null],"names":["createContext","useRef","useContext","OverlayTriggerStateContext","normalizeHotkey","useHotkeyHint","useFilter","useResolvedTestId","useState","toHotkeySteps","getItemHotkeyKind","useEffect","warnOnce","parseHotkey","isDeepEqual","useHotkeys","isTypingInField","useKeySequences","hotkeyCharacter","useMemo","flattenChildren","isValidElement","CommandMenuFooter","_jsx","TestIdProvider","CommandMenuLinkContext","_jsxs","AriaAutocomplete","AriaTextField","CommandInput","AriaModalOverlay","cx","AriaModal","AriaDialog","AriaListBox","AriaListBoxSection","CommandMenuHeader","AriaCollection","Fragment","CommandDropdownMenuItem","AriaDialogTrigger"],"mappings":"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"}
|
|
@@ -8,6 +8,15 @@ export type CommandMenuGroupType = {
|
|
|
8
8
|
title?: string;
|
|
9
9
|
items: CommandDropdownMenuItemProps[];
|
|
10
10
|
};
|
|
11
|
+
/** Accessible names for the menu's parts. Override them to localise the menu. */
|
|
12
|
+
export interface CommandMenuLabels {
|
|
13
|
+
/** Name of the dialog. @default "Command menu" */
|
|
14
|
+
dialog?: string;
|
|
15
|
+
/** Name of the search input. @default "Search" */
|
|
16
|
+
search?: string;
|
|
17
|
+
/** Name of the results list. @default "Command menu results" */
|
|
18
|
+
results?: string;
|
|
19
|
+
}
|
|
11
20
|
export interface CommandMenuRootProps extends Omit<ListBoxProps<CommandMenuGroupType>, 'children' | 'selectedKeys' | 'className'>, Omit<AutocompleteProps, 'filter'>, DialogTriggerProps {
|
|
12
21
|
placeholder?: string;
|
|
13
22
|
emptyState?: ReactNode;
|
|
@@ -16,7 +25,23 @@ export interface CommandMenuRootProps extends Omit<ListBoxProps<CommandMenuGroup
|
|
|
16
25
|
items?: CommandMenuGroupType[];
|
|
17
26
|
defaultItems?: CommandMenuGroupType[];
|
|
18
27
|
sensitivity?: 'base' | 'accent' | 'case' | 'variant' | undefined;
|
|
28
|
+
/**
|
|
29
|
+
* Shortcut that moves focus back to the search input while the menu is open, shown as a hint beside
|
|
30
|
+
* it. The key that opens the menu belongs to the app (register it with `useHotkeys` next to the
|
|
31
|
+
* `isOpen` state), as in Untitled UI's examples. Accepts `react-hotkeys-hook` syntax, where `mod` is ⌘
|
|
32
|
+
* on macOS and Ctrl elsewhere, or the `⌘/` shorthand, which answers to Ctrl outside macOS too.
|
|
33
|
+
* Pass `null` to disable it and hide the hint.
|
|
34
|
+
* @default "⌘/"
|
|
35
|
+
*/
|
|
19
36
|
shortcut?: string | null;
|
|
37
|
+
/**
|
|
38
|
+
* Closes the menu when an item with an `href` is activated. Link items navigate without firing
|
|
39
|
+
* `onSelectionChange`, so this is how the menu gets out of the way.
|
|
40
|
+
* @default true
|
|
41
|
+
*/
|
|
42
|
+
closeOnNavigate?: boolean;
|
|
43
|
+
/** Accessible names for the dialog, search input and results list. English by default. */
|
|
44
|
+
labels?: CommandMenuLabels;
|
|
20
45
|
filter?: false | AutocompleteProps['filter'];
|
|
21
46
|
/**
|
|
22
47
|
* Overrides the root `data-testid`. Defaults to `fd-command-menu`. Items derive
|
|
@@ -24,12 +49,14 @@ export interface CommandMenuRootProps extends Omit<ListBoxProps<CommandMenuGroup
|
|
|
24
49
|
*/
|
|
25
50
|
'data-testid'?: string;
|
|
26
51
|
}
|
|
27
|
-
declare const CommandMenuRoot: ({ items, children, dialogClassName, overlayClassName, filter, inputValue, defaultItems, onInputChange, onSelectionChange, sensitivity, placeholder, defaultSelectedKeys, shortcut, "data-testid": dataTestId, ...otherProps }: CommandMenuRootProps) => import("react").JSX.Element;
|
|
52
|
+
declare const CommandMenuRoot: ({ items, children, dialogClassName, overlayClassName, filter, inputValue, defaultItems, onInputChange, onSelectionChange, sensitivity, placeholder, defaultSelectedKeys, shortcut, closeOnNavigate, labels, "data-testid": dataTestId, ...otherProps }: CommandMenuRootProps) => import("react").JSX.Element;
|
|
28
53
|
interface CommandMenuProps extends ModalOverlayProps {
|
|
29
54
|
dialogClassName?: ModalOverlayProps['className'];
|
|
55
|
+
/** Accessible name of the dialog. @default "Command menu" */
|
|
56
|
+
label?: string;
|
|
30
57
|
'data-testid'?: string;
|
|
31
58
|
}
|
|
32
|
-
export declare const CommandDialog: ({ className, dialogClassName, children, "data-testid": dataTestId, ...comboboxProps }: CommandMenuProps) => import("react").JSX.Element;
|
|
59
|
+
export declare const CommandDialog: ({ className, dialogClassName, children, label, "data-testid": dataTestId, ...comboboxProps }: CommandMenuProps) => import("react").JSX.Element;
|
|
33
60
|
interface CommandMenuListProps extends Omit<ListBoxProps<CommandMenuGroupType>, 'items'> {
|
|
34
61
|
}
|
|
35
62
|
export declare const CommandMenuList: ({ className, selectionMode, ...props }: CommandMenuListProps) => import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC9I,OAAO,EAEL,UAAU,IAAI,cAAc,EAE5B,aAAa,IAAI,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,50 +1,70 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
3
3
|
import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
4
|
-
import { createContext, useRef, useState, useMemo, isValidElement,
|
|
5
|
-
import { ModalOverlay, Modal, Dialog, useFilter, Autocomplete, TextField, ListBox, ListBoxSection, Collection, DialogTrigger } from 'react-aria-components';
|
|
4
|
+
import { createContext, useRef, useContext, useState, useEffect, useMemo, isValidElement, Fragment } from 'react';
|
|
5
|
+
import { ModalOverlay, Modal, Dialog, OverlayTriggerStateContext, useFilter, Autocomplete, TextField, ListBox, ListBoxSection, Collection, DialogTrigger } from 'react-aria-components';
|
|
6
6
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
7
|
+
import { useHotkeyHint } from '../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.js';
|
|
8
|
+
import { useKeySequences } from '../../../hooks/__internal__/useKeySequences/useKeySequences.js';
|
|
7
9
|
import { flattenChildren } from '../../../utilities/__internal__/childrenUtils/children.utils.js';
|
|
8
|
-
import { parseHotkey } from '../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
|
|
9
|
-
import {
|
|
10
|
+
import { normalizeHotkey, toHotkeySteps, getItemHotkeyKind, isTypingInField, hotkeyCharacter, parseHotkey } from '../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
|
|
11
|
+
import { warnOnce } from '../../../utilities/__internal__/logUtils/log.utils.js';
|
|
12
|
+
import { isDeepEqual } from './commandMenu.utils.js';
|
|
10
13
|
import { CommandInput } from './components/command-input.js';
|
|
11
14
|
import { CommandMenuFooter } from './components/command-menu-footer.js';
|
|
12
15
|
import { CommandMenuHeader } from './components/command-menu-header.js';
|
|
13
16
|
import { CommandDropdownMenuItem } from './components/command-menu-item.js';
|
|
17
|
+
import { CommandMenuLinkContext } from './providers/command-menu-link-context.js';
|
|
14
18
|
|
|
19
|
+
const DEFAULT_SHORTCUT = '⌘/';
|
|
15
20
|
const CommandMenuContext = createContext({
|
|
16
21
|
hasFooter: false,
|
|
17
22
|
flatItems: [],
|
|
18
23
|
selectedKeys: new Set(),
|
|
19
24
|
setSelectedKeys: () => { },
|
|
20
25
|
});
|
|
21
|
-
const CommandMenuRoot = ({ items, children, dialogClassName, overlayClassName, filter, inputValue, defaultItems, onInputChange, onSelectionChange, sensitivity = 'base', placeholder = 'Search', defaultSelectedKeys, shortcut =
|
|
26
|
+
const CommandMenuRoot = ({ items, children, dialogClassName, overlayClassName, filter, inputValue, defaultItems, onInputChange, onSelectionChange, sensitivity = 'base', placeholder = 'Search', defaultSelectedKeys, shortcut = DEFAULT_SHORTCUT, closeOnNavigate = true, labels, 'data-testid': dataTestId, ...otherProps }) => {
|
|
22
27
|
const inputRef = useRef(null);
|
|
28
|
+
// Present when the menu is used inside `CommandMenu.Trigger`, which owns the open state instead of `isOpen`.
|
|
29
|
+
const triggerState = useContext(OverlayTriggerStateContext);
|
|
30
|
+
const isOpen = otherProps.isOpen ?? triggerState?.isOpen ?? false;
|
|
31
|
+
const close = () => {
|
|
32
|
+
// Inside a Trigger the trigger owns the state, even when `onOpenChange` is passed just to observe it.
|
|
33
|
+
if (otherProps.isOpen === undefined && triggerState)
|
|
34
|
+
triggerState.close();
|
|
35
|
+
otherProps.onOpenChange?.(false);
|
|
36
|
+
};
|
|
37
|
+
const hotkey = shortcut ? normalizeHotkey(shortcut) : '';
|
|
38
|
+
const shortcutHint = useHotkeyHint(shortcut);
|
|
23
39
|
const { contains } = useFilter({ sensitivity });
|
|
24
40
|
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'command-menu', rootName: 'command-menu' });
|
|
25
41
|
const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys ?? new Set());
|
|
26
42
|
// Flatten the items and register hotkeys for items with shortcut keys.
|
|
27
43
|
const resolvedItems = items ?? defaultItems ?? [];
|
|
28
44
|
const flatItems = resolvedItems.flatMap((group) => group.items);
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}));
|
|
38
|
-
|
|
39
|
-
const
|
|
45
|
+
const disabledKeys = new Set(otherProps.disabledKeys);
|
|
46
|
+
const itemHotkeys = flatItems
|
|
47
|
+
.filter((item) => !item.isDisabled && !disabledKeys.has(item.id))
|
|
48
|
+
.map((item) => ({ item, steps: toHotkeySteps(item.shortcutKeys ?? []) }))
|
|
49
|
+
.filter(({ steps }) => steps.length > 0)
|
|
50
|
+
.map(({ item, steps }) => ({ item, steps, kind: getItemHotkeyKind(steps) }));
|
|
51
|
+
const hotkeysOfKind = (kind) => itemHotkeys.filter((itemHotkey) => itemHotkey.kind === kind);
|
|
52
|
+
// Registering a hotkey twice would run the handler twice for one keypress.
|
|
53
|
+
const uniqueHotkeys = (kind) => [...new Set(hotkeysOfKind(kind).map(({ steps }) => steps[0]))];
|
|
54
|
+
const typedHotkeys = hotkeysOfKind('typed');
|
|
55
|
+
const hasUnsupportedHotkey = hotkeysOfKind('unsupported').length > 0;
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
if (!hasUnsupportedHotkey)
|
|
58
|
+
return;
|
|
59
|
+
warnOnce('CommandMenu:unsupported-shortcut', "CommandMenu: an item's `shortcutKeys` is drawn but can never be triggered. A sequence cannot contain a modifier (['⌘k', 'p']) and a modifier needs a key (['⌘']).");
|
|
60
|
+
}, [hasUnsupportedHotkey]);
|
|
61
|
+
const selectItemForHotkey = (keyboardEvent, hotkeysEvent) => {
|
|
40
62
|
keyboardEvent.preventDefault();
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
//
|
|
46
|
-
// vendored `parseHotkey` never produces. A full deep-equality check on the
|
|
47
|
-
// whole object would therefore always fail, even for a matching hotkey.
|
|
63
|
+
const match = itemHotkeys.find(({ kind, steps }) => {
|
|
64
|
+
if (kind !== 'combination' && kind !== 'guarded')
|
|
65
|
+
return false;
|
|
66
|
+
const parsedHotkey = parseHotkey(steps[0]);
|
|
67
|
+
// `hotkeysEvent` carries fields (e.g. `metadata`) the vendored parser never produces, so compare only the identifying ones.
|
|
48
68
|
return (parsedHotkey.hotkey.trim().toLowerCase() === hotkeysEvent.hotkey?.trim().toLowerCase() &&
|
|
49
69
|
parsedHotkey.isSequence === hotkeysEvent.isSequence &&
|
|
50
70
|
parsedHotkey.alt === hotkeysEvent.alt &&
|
|
@@ -54,21 +74,37 @@ const CommandMenuRoot = ({ items, children, dialogClassName, overlayClassName, f
|
|
|
54
74
|
parsedHotkey.mod === hotkeysEvent.mod &&
|
|
55
75
|
isDeepEqual(parsedHotkey.keys, hotkeysEvent.keys));
|
|
56
76
|
});
|
|
57
|
-
if (
|
|
58
|
-
onSelectionChange?.(new Set([item.id]));
|
|
59
|
-
}
|
|
60
|
-
//
|
|
61
|
-
useHotkeys(
|
|
77
|
+
if (match)
|
|
78
|
+
onSelectionChange?.(new Set([match.item.id]));
|
|
79
|
+
};
|
|
80
|
+
// Combinations held with ⌘/Ctrl/Alt cannot be mistaken for typing, so they also work inside the search input.
|
|
81
|
+
useHotkeys(uniqueHotkeys('combination'), selectItemForHotkey, {
|
|
82
|
+
enableOnFormTags: true,
|
|
83
|
+
// react-aria re-dispatches a key typed in the search input onto the list; once handled, skip the copy.
|
|
84
|
+
ignoreEventWhen: (event) => event.defaultPrevented,
|
|
85
|
+
});
|
|
86
|
+
// Everything typing could produce (Shift+A, `?`, G then P) is ignored in fields so it never hijacks text entry.
|
|
87
|
+
useHotkeys(uniqueHotkeys('guarded'), selectItemForHotkey, { ignoreEventWhen: (event) => event.defaultPrevented || isTypingInField(event) });
|
|
88
|
+
useKeySequences(typedHotkeys.map(({ steps }) => steps.map(hotkeyCharacter)), (index) => onSelectionChange?.(new Set([typedHotkeys[index].item.id])));
|
|
89
|
+
// The shortcut only returns focus to the search input while the menu is open; opening is the app's job.
|
|
90
|
+
useHotkeys(hotkey, () => inputRef.current?.focus(), {
|
|
91
|
+
enabled: Boolean(hotkey) && isOpen,
|
|
92
|
+
preventDefault: true,
|
|
93
|
+
enableOnFormTags: true,
|
|
94
|
+
enableOnContentEditable: true,
|
|
95
|
+
// A rich-text editor inside the menu may bind the same key; if it handled the event, leave it alone.
|
|
96
|
+
ignoreEventWhen: (event) => event.defaultPrevented,
|
|
97
|
+
}, [isOpen]);
|
|
62
98
|
// Determine if the command menu has a footer.
|
|
63
99
|
const hasFooter = useMemo(() => flattenChildren(children).some((child) => isValidElement(child) && child.type === CommandMenuFooter), [children]);
|
|
64
|
-
return (jsx(TestIdProvider, { value: rootTestId, children: jsx(CommandMenuContext.Provider, { value: { hasFooter, flatItems, selectedKeys, setSelectedKeys, onSelectionChange, items, ...otherProps }, children: jsx(CommandDialog, { isOpen: otherProps.isOpen, onOpenChange: otherProps.onOpenChange, className: overlayClassName, dialogClassName: dialogClassName, "data-testid": rootTestId, children: jsxs(Autocomplete, { inputValue, onInputChange, filter: filter === false ? undefined : filter || contains, children: [jsx(TextField, { "aria-label":
|
|
100
|
+
return (jsx(TestIdProvider, { value: rootTestId, children: jsx(CommandMenuContext.Provider, { value: { hasFooter, flatItems, selectedKeys, setSelectedKeys, onSelectionChange, items, resultsLabel: labels?.results, ...otherProps }, children: jsx(CommandMenuLinkContext.Provider, { value: closeOnNavigate ? close : undefined, children: jsx(CommandDialog, { isOpen: otherProps.isOpen, onOpenChange: otherProps.onOpenChange, className: overlayClassName, dialogClassName: dialogClassName, label: labels?.dialog, "data-testid": rootTestId, children: jsxs(Autocomplete, { inputValue, onInputChange, filter: filter === false ? undefined : filter || contains, children: [jsx(TextField, { "aria-label": labels?.search ?? 'Search', children: jsx(CommandInput, { autoFocus: true, shortcutHint: shortcutHint, placeholder: placeholder, ref: inputRef, className: "relative outline-hidden! after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-border-secondary" }) }), children] }) }) }) }) }));
|
|
65
101
|
};
|
|
66
|
-
const CommandDialog = ({ className, dialogClassName, children, 'data-testid': dataTestId, ...comboboxProps }) => {
|
|
67
|
-
return (jsx(ModalOverlay, { ...comboboxProps, isDismissable: true, className: (state) => cx('fixed inset-0 z-50 flex min-h-full items-start justify-center overflow-y-auto bg-overlay/70 p-4 text-center backdrop-blur md:pt-16 xl:pt-[clamp(64px,10vh,243px)]', state.isEntering && 'duration-300 ease-out animate-in fade-in', state.isExiting && 'duration-200 ease-in animate-out fade-out', typeof className === 'function' ? className(state) : className), children: (state) => (jsx(Modal, { className: (state) => cx('flex max-h-full w-160 flex-col overflow-hidden rounded-xl bg-primary text-left align-middle shadow-xl', state.isEntering && 'duration-300 ease-out animate-in zoom-in-95', state.isExiting && 'duration-200 ease-in animate-out zoom-out-95', typeof dialogClassName === 'function' ? dialogClassName(state) : dialogClassName), children: jsx(Dialog, { "aria-label":
|
|
102
|
+
const CommandDialog = ({ className, dialogClassName, children, label = 'Command menu', 'data-testid': dataTestId, ...comboboxProps }) => {
|
|
103
|
+
return (jsx(ModalOverlay, { ...comboboxProps, isDismissable: true, className: (state) => cx('fixed inset-0 z-50 flex min-h-full items-start justify-center overflow-y-auto bg-overlay/70 p-4 text-center backdrop-blur md:pt-16 xl:pt-[clamp(64px,10vh,243px)]', state.isEntering && 'duration-300 ease-out animate-in fade-in', state.isExiting && 'duration-200 ease-in animate-out fade-out', typeof className === 'function' ? className(state) : className), children: (state) => (jsx(Modal, { className: (state) => cx('flex max-h-full w-160 flex-col overflow-hidden rounded-xl bg-primary text-left align-middle shadow-xl', state.isEntering && 'duration-300 ease-out animate-in zoom-in-95', state.isExiting && 'duration-200 ease-in animate-out zoom-out-95', typeof dialogClassName === 'function' ? dialogClassName(state) : dialogClassName), children: jsx(Dialog, { "aria-label": label, "data-testid": dataTestId, className: "relative flex min-h-0 flex-1 flex-col outline-hidden", children: typeof children === 'function' ? children(state) : children }) })) }));
|
|
68
104
|
};
|
|
69
105
|
const CommandMenuList = ({ className, selectionMode = 'single', ...props }) => {
|
|
70
|
-
const { hasFooter, emptyState, ...listBoxProps } = useContext(CommandMenuContext);
|
|
71
|
-
return (jsx(ListBox, { "aria-label":
|
|
106
|
+
const { hasFooter, emptyState, resultsLabel, ...listBoxProps } = useContext(CommandMenuContext);
|
|
107
|
+
return (jsx(ListBox, { "aria-label": resultsLabel ?? 'Command menu results', ...props, ...listBoxProps, renderEmptyState: () => emptyState, selectionMode: selectionMode, onSelectionChange: (key) => {
|
|
72
108
|
listBoxProps.onSelectionChange?.(key);
|
|
73
109
|
listBoxProps.setSelectedKeys(key);
|
|
74
110
|
}, className: (state) => cx('flex max-h-106 flex-1 scroll-py-10 flex-col gap-2 overflow-auto focus:outline-hidden', hasFooter && 'scroll-pb-22 pb-13', !state.isEmpty && 'pt-2', typeof className === 'function' ? className(state) : className) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaAutocomplete","AriaTextField","AriaModalOverlay","AriaModal","AriaDialog","AriaListBox","AriaListBoxSection","AriaCollection","AriaDialogTrigger"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaAutocomplete","AriaTextField","AriaModalOverlay","AriaModal","AriaDialog","AriaListBox","AriaListBoxSection","AriaCollection","AriaDialogTrigger"],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
/** Called by a link item when it is activated, so the menu can close as the app navigates. `undefined` leaves the menu open. */
|
|
6
|
+
const CommandMenuLinkContext = React.createContext(undefined);
|
|
7
|
+
|
|
8
|
+
exports.CommandMenuLinkContext = CommandMenuLinkContext;
|
|
9
|
+
//# sourceMappingURL=command-menu-link-context.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"command-menu-link-context.cjs","sources":["../../../../../src/components/organisms/CommandMenu/providers/command-menu-link-context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAEA;MACa,sBAAsB,GAAGA,mBAAa,CAA2B,SAAS;;;;"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/** Called by a link item when it is activated, so the menu can close as the app navigates. `undefined` leaves the menu open. */
|
|
2
|
+
export declare const CommandMenuLinkContext: import("react").Context<(() => void) | undefined>;
|
|
3
|
+
//# sourceMappingURL=command-menu-link-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"command-menu-link-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/CommandMenu/providers/command-menu-link-context.ts"],"names":[],"mappings":"AAEA,gIAAgI;AAChI,eAAO,MAAM,sBAAsB,iCAAwB,IAAI,cAAyB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
|
|
3
|
+
/** Called by a link item when it is activated, so the menu can close as the app navigates. `undefined` leaves the menu open. */
|
|
4
|
+
const CommandMenuLinkContext = createContext(undefined);
|
|
5
|
+
|
|
6
|
+
export { CommandMenuLinkContext };
|
|
7
|
+
//# sourceMappingURL=command-menu-link-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"command-menu-link-context.js","sources":["../../../../../src/components/organisms/CommandMenu/providers/command-menu-link-context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;MACa,sBAAsB,GAAG,aAAa,CAA2B,SAAS;;;;"}
|
|
@@ -8,9 +8,11 @@ var cx = require('@flipdish/ui-library/utilities/cx');
|
|
|
8
8
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
9
9
|
var React = require('react');
|
|
10
10
|
var reactAriaComponents = require('react-aria-components');
|
|
11
|
+
var useHotkeyHint = require('../../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
|
|
11
12
|
|
|
12
13
|
const DateFieldContext = React.createContext({});
|
|
13
14
|
const InputDateBase = ({ tooltip, shortcut, groupRef, size = 'md', isInvalid, isDisabled, icon: Icon, wrapperClassName, tooltipClassName, iconClassName, ...inputProps }) => {
|
|
15
|
+
const shortcutLabel = useHotkeyHint.useHotkeyHint(shortcut === true ? 'mod+k' : shortcut || null);
|
|
14
16
|
// Check if the input has a leading icon or tooltip
|
|
15
17
|
const hasTrailingIcon = tooltip || isInvalid;
|
|
16
18
|
const hasLeadingIcon = Icon;
|
|
@@ -50,7 +52,7 @@ const InputDateBase = ({ tooltip, shortcut, groupRef, size = 'md', isInvalid, is
|
|
|
50
52
|
// The placeholder segment.
|
|
51
53
|
segment.isPlaceholder && 'text-placeholder uppercase',
|
|
52
54
|
// The separator "/" segment.
|
|
53
|
-
segment.type === 'literal' && 'text-fg-quaternary') })) }), tooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { title: tooltip, placement: "top", children: jsxRuntime.jsx(Tooltip.TooltipTrigger, { className: cx.cx('absolute cursor-pointer text-fg-quaternary transition duration-200 group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName), children: jsxRuntime.jsx(uiIcons.HelpCircle, { className: "size-4 stroke-[2.25px]" }) }) })), jsxRuntime.jsx(uiIcons.InfoCircle, { className: cx.cx('pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName) }), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8', sizes[inputSize].shortcut), children: jsxRuntime.jsx("span", { "aria-hidden": "true", className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children:
|
|
55
|
+
segment.type === 'literal' && 'text-fg-quaternary') })) }), tooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { title: tooltip, placement: "top", children: jsxRuntime.jsx(Tooltip.TooltipTrigger, { className: cx.cx('absolute cursor-pointer text-fg-quaternary transition duration-200 group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName), children: jsxRuntime.jsx(uiIcons.HelpCircle, { className: "size-4 stroke-[2.25px]" }) }) })), jsxRuntime.jsx(uiIcons.InfoCircle, { className: cx.cx('pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName) }), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8', sizes[inputSize].shortcut), children: jsxRuntime.jsx("span", { "aria-hidden": "true", className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children: shortcutLabel }) }))] }));
|
|
54
56
|
};
|
|
55
57
|
|
|
56
58
|
exports.InputDateBase = InputDateBase;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-date.cjs","sources":["../../../../../src/components/organisms/DatePicker/components/input-date.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useTestIdPrefix","joinTestId","sortCx","cx","_jsxs","AriaGroup","_jsx","AriaDateInput","AriaDateSegment","Tooltip","TooltipTrigger","HelpCircle","InfoCircle"],"mappings":"
|
|
1
|
+
{"version":3,"file":"input-date.cjs","sources":["../../../../../src/components/organisms/DatePicker/components/input-date.tsx"],"sourcesContent":[null],"names":["createContext","useHotkeyHint","useContext","useTestIdPrefix","joinTestId","sortCx","cx","_jsxs","AriaGroup","_jsx","AriaDateInput","AriaDateSegment","Tooltip","TooltipTrigger","HelpCircle","InfoCircle"],"mappings":"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"}
|
|
@@ -17,7 +17,11 @@ export interface InputDateBaseProps extends Omit<AriaDateInputProps, 'children'>
|
|
|
17
17
|
wrapperClassName?: string;
|
|
18
18
|
/** Class name for the tooltip. */
|
|
19
19
|
tooltipClassName?: string;
|
|
20
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* Keyboard shortcut to display. `true` shows the search shortcut (⌘K on macOS, Ctrl K elsewhere). A
|
|
22
|
+
* shortcut (`⌘J`, `mod+j`, `Ctrl+J`) is drawn for the user's platform; text that is not a shortcut is shown
|
|
23
|
+
* as written.
|
|
24
|
+
*/
|
|
21
25
|
shortcut?: string | boolean;
|
|
22
26
|
ref?: Ref<HTMLInputElement>;
|
|
23
27
|
groupRef?: Ref<HTMLDivElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-date.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/DatePicker/components/input-date.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,aAAa,EAAiB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AACrH,OAAO,KAAK,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAEL,KAAK,cAAc,IAAI,kBAAkB,EAIzC,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"input-date.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/DatePicker/components/input-date.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,aAAa,EAAiB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AACrH,OAAO,KAAK,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAEL,KAAK,cAAc,IAAI,kBAAkB,EAIzC,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAW/B,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC9E,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,GAAI,4IAY3B,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAC,gCAsI5C,CAAC;AAEF,UAAU,UACR,SAAQ,kBAAkB,CAAC,SAAS,CAAC,EACnC,IAAI,CACF,kBAAkB,EAClB,KAAK,GAAG,MAAM,GAAG,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAC1I;IACH,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,GAAI,iMAiBvB,UAAU,gCAyCZ,CAAC"}
|