@wordpress/commands 1.39.1-next.v.202602091733.0 → 1.40.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/CHANGELOG.md +4 -0
- package/README.md +16 -0
- package/build/components/command-menu.cjs +80 -39
- package/build/components/command-menu.cjs.map +2 -2
- package/build/hooks/use-command-loader.cjs +3 -1
- package/build/hooks/use-command-loader.cjs.map +2 -2
- package/build/hooks/use-command.cjs +3 -0
- package/build/hooks/use-command.cjs.map +2 -2
- package/build/store/actions.cjs +18 -2
- package/build/store/actions.cjs.map +2 -2
- package/build/store/reducer.cjs +2 -0
- package/build/store/reducer.cjs.map +2 -2
- package/build-module/components/command-menu.mjs +82 -40
- package/build-module/components/command-menu.mjs.map +2 -2
- package/build-module/hooks/use-command-loader.mjs +3 -1
- package/build-module/hooks/use-command-loader.mjs.map +2 -2
- package/build-module/hooks/use-command.mjs +3 -0
- package/build-module/hooks/use-command.mjs.map +2 -2
- package/build-module/store/actions.mjs +18 -2
- package/build-module/store/actions.mjs.map +2 -2
- package/build-module/store/reducer.mjs +2 -0
- package/build-module/store/reducer.mjs.map +2 -2
- package/build-style/style-rtl.css +27 -2
- package/build-style/style.css +27 -2
- package/package.json +11 -10
- package/src/components/command-menu.js +115 -29
- package/src/components/style.scss +34 -2
- package/src/hooks/use-command-loader.js +3 -0
- package/src/hooks/use-command.js +6 -0
- package/src/store/actions.js +44 -8
- package/src/store/reducer.js +2 -0
|
@@ -7,7 +7,9 @@ import {
|
|
|
7
7
|
useEffect,
|
|
8
8
|
useRef,
|
|
9
9
|
useCallback,
|
|
10
|
-
useMemo
|
|
10
|
+
useMemo,
|
|
11
|
+
isValidElement,
|
|
12
|
+
Component
|
|
11
13
|
} from "@wordpress/element";
|
|
12
14
|
import { __ } from "@wordpress/i18n";
|
|
13
15
|
import {
|
|
@@ -20,13 +22,33 @@ import {
|
|
|
20
22
|
store as keyboardShortcutsStore,
|
|
21
23
|
useShortcut
|
|
22
24
|
} from "@wordpress/keyboard-shortcuts";
|
|
23
|
-
import { Icon, search as inputIcon } from "@wordpress/icons";
|
|
25
|
+
import { Icon, search as inputIcon, arrowRight } from "@wordpress/icons";
|
|
24
26
|
import { store as commandsStore } from "../store/index.mjs";
|
|
25
27
|
import { unlock } from "../lock-unlock.mjs";
|
|
26
28
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
27
29
|
var { withIgnoreIMEEvents } = unlock(componentsPrivateApis);
|
|
28
30
|
var inputLabel = __("Search commands and settings");
|
|
29
|
-
|
|
31
|
+
var CATEGORY_ICONS = {
|
|
32
|
+
view: arrowRight
|
|
33
|
+
};
|
|
34
|
+
var CATEGORY_LABELS = {
|
|
35
|
+
command: __("Command"),
|
|
36
|
+
view: __("View"),
|
|
37
|
+
edit: __("Edit"),
|
|
38
|
+
action: __("Action"),
|
|
39
|
+
workflow: __("Workflow")
|
|
40
|
+
};
|
|
41
|
+
function isValidIcon(icon) {
|
|
42
|
+
return !!icon && (typeof icon === "string" || isValidElement(icon) || typeof icon === "function" || icon instanceof Component);
|
|
43
|
+
}
|
|
44
|
+
function CommandMenuLoader({
|
|
45
|
+
name,
|
|
46
|
+
search,
|
|
47
|
+
hook,
|
|
48
|
+
setLoader,
|
|
49
|
+
close,
|
|
50
|
+
category
|
|
51
|
+
}) {
|
|
30
52
|
const { isLoading, commands = [] } = hook({ search }) ?? {};
|
|
31
53
|
useEffect(() => {
|
|
32
54
|
setLoader(name, isLoading);
|
|
@@ -34,37 +56,53 @@ function CommandMenuLoader({ name, search, hook, setLoader, close }) {
|
|
|
34
56
|
if (!commands.length) {
|
|
35
57
|
return null;
|
|
36
58
|
}
|
|
37
|
-
return /* @__PURE__ */ jsx(Fragment, { children: commands.map((command) =>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
return /* @__PURE__ */ jsx(Fragment, { children: commands.map((command) => {
|
|
60
|
+
const commandCategory = command.category ?? category;
|
|
61
|
+
return /* @__PURE__ */ jsx(
|
|
62
|
+
Command.Item,
|
|
63
|
+
{
|
|
64
|
+
value: command.searchLabel ?? command.label,
|
|
65
|
+
keywords: command.keywords,
|
|
66
|
+
onSelect: () => command.callback({ close }),
|
|
67
|
+
id: command.name,
|
|
68
|
+
children: /* @__PURE__ */ jsxs(
|
|
69
|
+
HStack,
|
|
70
|
+
{
|
|
71
|
+
alignment: "left",
|
|
72
|
+
className: clsx("commands-command-menu__item", {
|
|
73
|
+
"has-icon": CATEGORY_ICONS[commandCategory] || command.icon
|
|
74
|
+
}),
|
|
75
|
+
children: [
|
|
76
|
+
CATEGORY_ICONS[commandCategory] && /* @__PURE__ */ jsx(
|
|
77
|
+
Icon,
|
|
78
|
+
{
|
|
79
|
+
icon: CATEGORY_ICONS[commandCategory]
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
!CATEGORY_ICONS[commandCategory] && isValidIcon(command.icon) && /* @__PURE__ */ jsx(Icon, { icon: command.icon }),
|
|
83
|
+
/* @__PURE__ */ jsx("span", { className: "commands-command-menu__item-label", children: /* @__PURE__ */ jsx(
|
|
84
|
+
TextHighlight,
|
|
85
|
+
{
|
|
86
|
+
text: command.label,
|
|
87
|
+
highlight: search
|
|
88
|
+
}
|
|
89
|
+
) }),
|
|
90
|
+
CATEGORY_LABELS[commandCategory] && /* @__PURE__ */ jsx("span", { className: "commands-command-menu__item-category", children: CATEGORY_LABELS[commandCategory] })
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
)
|
|
94
|
+
},
|
|
95
|
+
command.name
|
|
96
|
+
);
|
|
97
|
+
}) });
|
|
66
98
|
}
|
|
67
|
-
function CommandMenuLoaderWrapper({
|
|
99
|
+
function CommandMenuLoaderWrapper({
|
|
100
|
+
hook,
|
|
101
|
+
search,
|
|
102
|
+
setLoader,
|
|
103
|
+
close,
|
|
104
|
+
category
|
|
105
|
+
}) {
|
|
68
106
|
const currentLoaderRef = useRef(hook);
|
|
69
107
|
const [key, setKey] = useState(0);
|
|
70
108
|
useEffect(() => {
|
|
@@ -79,7 +117,8 @@ function CommandMenuLoaderWrapper({ hook, search, setLoader, close }) {
|
|
|
79
117
|
hook: currentLoaderRef.current,
|
|
80
118
|
search,
|
|
81
119
|
setLoader,
|
|
82
|
-
close
|
|
120
|
+
close,
|
|
121
|
+
category
|
|
83
122
|
},
|
|
84
123
|
key
|
|
85
124
|
);
|
|
@@ -111,17 +150,18 @@ function CommandMenuGroup({ isContextual, search, setLoader, close }) {
|
|
|
111
150
|
{
|
|
112
151
|
alignment: "left",
|
|
113
152
|
className: clsx("commands-command-menu__item", {
|
|
114
|
-
"has-icon": command.icon
|
|
153
|
+
"has-icon": CATEGORY_ICONS[command.category] || command.icon
|
|
115
154
|
}),
|
|
116
155
|
children: [
|
|
117
|
-
command.icon && /* @__PURE__ */ jsx(Icon, { icon: command.icon }),
|
|
156
|
+
CATEGORY_ICONS[command.category] ? /* @__PURE__ */ jsx(Icon, { icon: CATEGORY_ICONS[command.category] }) : command.icon && /* @__PURE__ */ jsx(Icon, { icon: command.icon }),
|
|
118
157
|
/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
|
|
119
158
|
TextHighlight,
|
|
120
159
|
{
|
|
121
160
|
text: command.label,
|
|
122
161
|
highlight: search
|
|
123
162
|
}
|
|
124
|
-
) })
|
|
163
|
+
) }),
|
|
164
|
+
CATEGORY_LABELS[command.category] && /* @__PURE__ */ jsx("span", { className: "commands-command-menu__item-category", children: CATEGORY_LABELS[command.category] })
|
|
125
165
|
]
|
|
126
166
|
}
|
|
127
167
|
)
|
|
@@ -134,7 +174,8 @@ function CommandMenuGroup({ isContextual, search, setLoader, close }) {
|
|
|
134
174
|
hook: loader.hook,
|
|
135
175
|
search,
|
|
136
176
|
setLoader,
|
|
137
|
-
close
|
|
177
|
+
close,
|
|
178
|
+
category: loader.category
|
|
138
179
|
},
|
|
139
180
|
loader.name
|
|
140
181
|
))
|
|
@@ -187,7 +228,7 @@ function CommandMenu() {
|
|
|
187
228
|
}, [registerShortcut]);
|
|
188
229
|
useShortcut(
|
|
189
230
|
"core/commands",
|
|
190
|
-
/** @type {
|
|
231
|
+
/** @type {React.KeyboardEventHandler} */
|
|
191
232
|
withIgnoreIMEEvents((event) => {
|
|
192
233
|
if (event.defaultPrevented) {
|
|
193
234
|
return;
|
|
@@ -271,6 +312,7 @@ function CommandMenu() {
|
|
|
271
312
|
export {
|
|
272
313
|
CommandMenu,
|
|
273
314
|
CommandMenuGroup,
|
|
274
|
-
CommandMenuLoaderWrapper
|
|
315
|
+
CommandMenuLoaderWrapper,
|
|
316
|
+
isValidIcon
|
|
275
317
|
};
|
|
276
318
|
//# sourceMappingURL=command-menu.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/command-menu.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { Command, useCommandState } from 'cmdk';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tTextHighlight,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport {\n\tstore as keyboardShortcutsStore,\n\tuseShortcut,\n} from '@wordpress/keyboard-shortcuts';\nimport { Icon, search as inputIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\nconst { withIgnoreIMEEvents } = unlock( componentsPrivateApis );\n\nconst inputLabel = __( 'Search commands and settings' );\n\nfunction CommandMenuLoader( { name, search, hook, setLoader, close } ) {\n\tconst { isLoading, commands = [] } = hook( { search } ) ?? {};\n\tuseEffect( () => {\n\t\tsetLoader( name, isLoading );\n\t}, [ setLoader, name, isLoading ] );\n\n\tif ( ! commands.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t<Command.Item\n\t\t\t\t\tkey={ command.name }\n\t\t\t\t\tvalue={ command.searchLabel ?? command.label }\n\t\t\t\t\tkeywords={ command.keywords }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\tid={ command.name }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName={ clsx( 'commands-command-menu__item', {\n\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ command.icon && <Icon icon={ command.icon } /> }\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Command.Item>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\nexport function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {\n\t// The \"hook\" prop is actually a custom React hook\n\t// so to avoid breaking the rules of hooks\n\t// the CommandMenuLoaderWrapper component need to be\n\t// remounted on each hook prop change\n\t// We use the key state to make sure we do that properly.\n\tconst currentLoaderRef = useRef( hook );\n\tconst [ key, setKey ] = useState( 0 );\n\tuseEffect( () => {\n\t\tif ( currentLoaderRef.current !== hook ) {\n\t\t\tcurrentLoaderRef.current = hook;\n\t\t\tsetKey( ( prevKey ) => prevKey + 1 );\n\t\t}\n\t}, [ hook ] );\n\n\treturn (\n\t\t<CommandMenuLoader\n\t\t\tkey={ key }\n\t\t\thook={ currentLoaderRef.current }\n\t\t\tsearch={ search }\n\t\t\tsetLoader={ setLoader }\n\t\t\tclose={ close }\n\t\t/>\n\t);\n}\n\nexport function CommandMenuGroup( { isContextual, search, setLoader, close } ) {\n\tconst { commands, loaders } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCommands, getCommandLoaders } = select( commandsStore );\n\t\t\treturn {\n\t\t\t\tcommands: getCommands( isContextual ),\n\t\t\t\tloaders: getCommandLoaders( isContextual ),\n\t\t\t};\n\t\t},\n\t\t[ isContextual ]\n\t);\n\n\tif ( ! commands.length && ! loaders.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Command.Group>\n\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t<Command.Item\n\t\t\t\t\tkey={ command.name }\n\t\t\t\t\tvalue={ command.searchLabel ?? command.label }\n\t\t\t\t\tkeywords={ command.keywords }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\tid={ command.name }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName={ clsx( 'commands-command-menu__item', {\n\t\t\t\t\t\t\t'has-icon': command.icon,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ command.icon && <Icon icon={ command.icon } /> }\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Command.Item>\n\t\t\t) ) }\n\t\t\t{ loaders.map( ( loader ) => (\n\t\t\t\t<CommandMenuLoaderWrapper\n\t\t\t\t\tkey={ loader.name }\n\t\t\t\t\thook={ loader.hook }\n\t\t\t\t\tsearch={ search }\n\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\tclose={ close }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Command.Group>\n\t);\n}\n\nfunction CommandInput( { isOpen, search, setSearch } ) {\n\tconst commandMenuInput = useRef();\n\tconst _value = useCommandState( ( state ) => state.value );\n\tconst selectedItemId = useMemo( () => {\n\t\tconst item = document.querySelector(\n\t\t\t`[cmdk-item=\"\"][data-value=\"${ _value }\"]`\n\t\t);\n\t\treturn item?.getAttribute( 'id' );\n\t}, [ _value ] );\n\tuseEffect( () => {\n\t\t// Focus the command palette input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\treturn (\n\t\t<Command.Input\n\t\t\tref={ commandMenuInput }\n\t\t\tvalue={ search }\n\t\t\tonValueChange={ setSearch }\n\t\t\tplaceholder={ inputLabel }\n\t\t\taria-activedescendant={ selectedItemId }\n\t\t/>\n\t);\n}\n\n/**\n * @ignore\n */\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst isOpen = useSelect(\n\t\t( select ) => select( commandsStore ).isOpen(),\n\t\t[]\n\t);\n\tconst { open, close } = useDispatch( commandsStore );\n\tconst [ loaders, setLoaders ] = useState( {} );\n\n\tuseEffect( () => {\n\t\tregisterShortcut( {\n\t\t\tname: 'core/commands',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Open the command palette.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 'k',\n\t\t\t},\n\t\t} );\n\t}, [ registerShortcut ] );\n\n\tuseShortcut(\n\t\t'core/commands',\n\t\t/** @type {import('react').KeyboardEventHandler} */\n\t\twithIgnoreIMEEvents( ( event ) => {\n\t\t\t// Bails to avoid obscuring the effect of the preceding handler(s).\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tevent.preventDefault();\n\t\t\tif ( isOpen ) {\n\t\t\t\tclose();\n\t\t\t} else {\n\t\t\t\topen();\n\t\t\t}\n\t\t} ),\n\t\t{\n\t\t\tbindGlobal: true,\n\t\t}\n\t);\n\n\tconst setLoader = useCallback(\n\t\t( name, value ) =>\n\t\t\tsetLoaders( ( current ) => ( {\n\t\t\t\t...current,\n\t\t\t\t[ name ]: value,\n\t\t\t} ) ),\n\t\t[]\n\t);\n\tconst closeAndReset = () => {\n\t\tsetSearch( '' );\n\t\tclose();\n\t};\n\n\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\n\tconst isLoading = Object.values( loaders ).some( Boolean );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"commands-command-menu\"\n\t\t\toverlayClassName=\"commands-command-menu__overlay\"\n\t\t\tonRequestClose={ closeAndReset }\n\t\t\t__experimentalHideHeader\n\t\t\tcontentLabel={ __( 'Command palette' ) }\n\t\t>\n\t\t\t<div className=\"commands-command-menu__container\">\n\t\t\t\t<Command label={ inputLabel }>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"commands-command-menu__header-search-icon\"\n\t\t\t\t\t\t\ticon={ inputIcon }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<CommandInput\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetSearch={ setSearch }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Command.List label={ __( 'Command suggestions' ) }>\n\t\t\t\t\t\t{ search && ! isLoading && (\n\t\t\t\t\t\t\t<Command.Empty>\n\t\t\t\t\t\t\t\t{ __( 'No results found.' ) }\n\t\t\t\t\t\t\t</Command.Empty>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\tisContextual\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Command.List>\n\t\t\t\t</Command>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,SAAS,uBAAuB;AACzC,OAAO,UAAU;AAKjB,SAAS,WAAW,mBAAmB;AACvC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,eAAe;AAAA,OACT;AACP;AAAA,EACC,SAAS;AAAA,EACT;AAAA,OACM;AACP,SAAS,MAAM,UAAU,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { Command, useCommandState } from 'cmdk';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseCallback,\n\tuseMemo,\n\tisValidElement,\n\tComponent,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tTextHighlight,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport {\n\tstore as keyboardShortcutsStore,\n\tuseShortcut,\n} from '@wordpress/keyboard-shortcuts';\nimport { Icon, search as inputIcon, arrowRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\nconst { withIgnoreIMEEvents } = unlock( componentsPrivateApis );\n\nconst inputLabel = __( 'Search commands and settings' );\n\n/**\n * Icons enforced per command category.\n * Categories listed here will always use the specified icon,\n * ignoring whatever icon the command itself provides.\n */\nconst CATEGORY_ICONS = {\n\tview: arrowRight,\n};\n\n/**\n * Translatable labels for command categories.\n */\nconst CATEGORY_LABELS = {\n\tcommand: __( 'Command' ),\n\tview: __( 'View' ),\n\tedit: __( 'Edit' ),\n\taction: __( 'Action' ),\n\tworkflow: __( 'Workflow' ),\n};\n\n/**\n * Function that checks if the parameter is a valid icon.\n * Taken from @wordpress/blocks/src/api/utils.js and copied\n * in case requirements diverge and to avoid a dependency on @wordpress/blocks.\n *\n * @param {*} icon Parameter to be checked.\n *\n * @return {boolean} True if the parameter is a valid icon and false otherwise.\n */\n\nexport function isValidIcon( icon ) {\n\treturn (\n\t\t!! icon &&\n\t\t( typeof icon === 'string' ||\n\t\t\tisValidElement( icon ) ||\n\t\t\ttypeof icon === 'function' ||\n\t\t\ticon instanceof Component )\n\t);\n}\n\nfunction CommandMenuLoader( {\n\tname,\n\tsearch,\n\thook,\n\tsetLoader,\n\tclose,\n\tcategory,\n} ) {\n\tconst { isLoading, commands = [] } = hook( { search } ) ?? {};\n\tuseEffect( () => {\n\t\tsetLoader( name, isLoading );\n\t}, [ setLoader, name, isLoading ] );\n\n\tif ( ! commands.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ commands.map( ( command ) => {\n\t\t\t\tconst commandCategory = command.category ?? category;\n\t\t\t\treturn (\n\t\t\t\t\t<Command.Item\n\t\t\t\t\t\tkey={ command.name }\n\t\t\t\t\t\tvalue={ command.searchLabel ?? command.label }\n\t\t\t\t\t\tkeywords={ command.keywords }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t\tid={ command.name }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\t\tclassName={ clsx( 'commands-command-menu__item', {\n\t\t\t\t\t\t\t\t'has-icon':\n\t\t\t\t\t\t\t\t\tCATEGORY_ICONS[ commandCategory ] ||\n\t\t\t\t\t\t\t\t\tcommand.icon,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ CATEGORY_ICONS[ commandCategory ] && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ CATEGORY_ICONS[ commandCategory ] }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ! CATEGORY_ICONS[ commandCategory ] &&\n\t\t\t\t\t\t\t\tisValidIcon( command.icon ) && (\n\t\t\t\t\t\t\t\t\t<Icon icon={ command.icon } />\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<span className=\"commands-command-menu__item-label\">\n\t\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{ CATEGORY_LABELS[ commandCategory ] && (\n\t\t\t\t\t\t\t\t<span className=\"commands-command-menu__item-category\">\n\t\t\t\t\t\t\t\t\t{ CATEGORY_LABELS[ commandCategory ] }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Command.Item>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nexport function CommandMenuLoaderWrapper( {\n\thook,\n\tsearch,\n\tsetLoader,\n\tclose,\n\tcategory,\n} ) {\n\t// The \"hook\" prop is actually a custom React hook\n\t// so to avoid breaking the rules of hooks\n\t// the CommandMenuLoaderWrapper component need to be\n\t// remounted on each hook prop change\n\t// We use the key state to make sure we do that properly.\n\tconst currentLoaderRef = useRef( hook );\n\tconst [ key, setKey ] = useState( 0 );\n\tuseEffect( () => {\n\t\tif ( currentLoaderRef.current !== hook ) {\n\t\t\tcurrentLoaderRef.current = hook;\n\t\t\tsetKey( ( prevKey ) => prevKey + 1 );\n\t\t}\n\t}, [ hook ] );\n\n\treturn (\n\t\t<CommandMenuLoader\n\t\t\tkey={ key }\n\t\t\thook={ currentLoaderRef.current }\n\t\t\tsearch={ search }\n\t\t\tsetLoader={ setLoader }\n\t\t\tclose={ close }\n\t\t\tcategory={ category }\n\t\t/>\n\t);\n}\n\nexport function CommandMenuGroup( { isContextual, search, setLoader, close } ) {\n\tconst { commands, loaders } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCommands, getCommandLoaders } = select( commandsStore );\n\t\t\treturn {\n\t\t\t\tcommands: getCommands( isContextual ),\n\t\t\t\tloaders: getCommandLoaders( isContextual ),\n\t\t\t};\n\t\t},\n\t\t[ isContextual ]\n\t);\n\n\tif ( ! commands.length && ! loaders.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Command.Group>\n\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t<Command.Item\n\t\t\t\t\tkey={ command.name }\n\t\t\t\t\tvalue={ command.searchLabel ?? command.label }\n\t\t\t\t\tkeywords={ command.keywords }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\tid={ command.name }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName={ clsx( 'commands-command-menu__item', {\n\t\t\t\t\t\t\t'has-icon':\n\t\t\t\t\t\t\t\tCATEGORY_ICONS[ command.category ] ||\n\t\t\t\t\t\t\t\tcommand.icon,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ CATEGORY_ICONS[ command.category ] ? (\n\t\t\t\t\t\t\t<Icon icon={ CATEGORY_ICONS[ command.category ] } />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tcommand.icon && <Icon icon={ command.icon } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ CATEGORY_LABELS[ command.category ] && (\n\t\t\t\t\t\t\t<span className=\"commands-command-menu__item-category\">\n\t\t\t\t\t\t\t\t{ CATEGORY_LABELS[ command.category ] }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</Command.Item>\n\t\t\t) ) }\n\t\t\t{ loaders.map( ( loader ) => (\n\t\t\t\t<CommandMenuLoaderWrapper\n\t\t\t\t\tkey={ loader.name }\n\t\t\t\t\thook={ loader.hook }\n\t\t\t\t\tsearch={ search }\n\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\tclose={ close }\n\t\t\t\t\tcategory={ loader.category }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Command.Group>\n\t);\n}\n\nfunction CommandInput( { isOpen, search, setSearch } ) {\n\tconst commandMenuInput = useRef();\n\tconst _value = useCommandState( ( state ) => state.value );\n\tconst selectedItemId = useMemo( () => {\n\t\tconst item = document.querySelector(\n\t\t\t`[cmdk-item=\"\"][data-value=\"${ _value }\"]`\n\t\t);\n\t\treturn item?.getAttribute( 'id' );\n\t}, [ _value ] );\n\tuseEffect( () => {\n\t\t// Focus the command palette input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\treturn (\n\t\t<Command.Input\n\t\t\tref={ commandMenuInput }\n\t\t\tvalue={ search }\n\t\t\tonValueChange={ setSearch }\n\t\t\tplaceholder={ inputLabel }\n\t\t\taria-activedescendant={ selectedItemId }\n\t\t/>\n\t);\n}\n\n/**\n * @ignore\n */\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst isOpen = useSelect(\n\t\t( select ) => select( commandsStore ).isOpen(),\n\t\t[]\n\t);\n\tconst { open, close } = useDispatch( commandsStore );\n\tconst [ loaders, setLoaders ] = useState( {} );\n\n\tuseEffect( () => {\n\t\tregisterShortcut( {\n\t\t\tname: 'core/commands',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Open the command palette.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 'k',\n\t\t\t},\n\t\t} );\n\t}, [ registerShortcut ] );\n\n\tuseShortcut(\n\t\t'core/commands',\n\t\t/** @type {React.KeyboardEventHandler} */\n\t\twithIgnoreIMEEvents( ( event ) => {\n\t\t\t// Bails to avoid obscuring the effect of the preceding handler(s).\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tevent.preventDefault();\n\t\t\tif ( isOpen ) {\n\t\t\t\tclose();\n\t\t\t} else {\n\t\t\t\topen();\n\t\t\t}\n\t\t} ),\n\t\t{\n\t\t\tbindGlobal: true,\n\t\t}\n\t);\n\n\tconst setLoader = useCallback(\n\t\t( name, value ) =>\n\t\t\tsetLoaders( ( current ) => ( {\n\t\t\t\t...current,\n\t\t\t\t[ name ]: value,\n\t\t\t} ) ),\n\t\t[]\n\t);\n\tconst closeAndReset = () => {\n\t\tsetSearch( '' );\n\t\tclose();\n\t};\n\n\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\n\tconst isLoading = Object.values( loaders ).some( Boolean );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"commands-command-menu\"\n\t\t\toverlayClassName=\"commands-command-menu__overlay\"\n\t\t\tonRequestClose={ closeAndReset }\n\t\t\t__experimentalHideHeader\n\t\t\tcontentLabel={ __( 'Command palette' ) }\n\t\t>\n\t\t\t<div className=\"commands-command-menu__container\">\n\t\t\t\t<Command label={ inputLabel }>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"commands-command-menu__header-search-icon\"\n\t\t\t\t\t\t\ticon={ inputIcon }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<CommandInput\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetSearch={ setSearch }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Command.List label={ __( 'Command suggestions' ) }>\n\t\t\t\t\t\t{ search && ! isLoading && (\n\t\t\t\t\t\t\t<Command.Empty>\n\t\t\t\t\t\t\t\t{ __( 'No results found.' ) }\n\t\t\t\t\t\t\t</Command.Empty>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\tisContextual\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Command.List>\n\t\t\t\t</Command>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,8 @@ function useCommandLoader(loader) {
|
|
|
11
11
|
registerCommandLoader({
|
|
12
12
|
name: loader.name,
|
|
13
13
|
hook: loader.hook,
|
|
14
|
-
context: loader.context
|
|
14
|
+
context: loader.context,
|
|
15
|
+
category: loader.category
|
|
15
16
|
});
|
|
16
17
|
return () => {
|
|
17
18
|
unregisterCommandLoader(loader.name);
|
|
@@ -20,6 +21,7 @@ function useCommandLoader(loader) {
|
|
|
20
21
|
loader.name,
|
|
21
22
|
loader.hook,
|
|
22
23
|
loader.context,
|
|
24
|
+
loader.category,
|
|
23
25
|
loader.disabled,
|
|
24
26
|
registerCommandLoader,
|
|
25
27
|
unregisterCommandLoader
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/use-command-loader.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Attach a command loader to the command palette. Used for dynamic commands.\n *\n * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.\n *\n * @example\n * ```js\n * import { __ } from '@wordpress/i18n';\n * import { addQueryArgs } from '@wordpress/url';\n * import { useCommandLoader } from '@wordpress/commands';\n * import { page } from '@wordpress/icons';\n * import { useSelect } from '@wordpress/data';\n * import { store as coreStore } from '@wordpress/core-data';\n * import { useMemo } from '@wordpress/element';\n *\n * function usePageSearchCommandLoader( { search } ) {\n * // Retrieve the pages for the \"search\" term.\n * const { records, isLoading } = useSelect(\n * ( select ) => {\n * const { getEntityRecords } = select( coreStore );\n * const query = {\n * search: !! search ? search : undefined,\n * per_page: 10,\n * orderby: search ? 'relevance' : 'date',\n * };\n * return {\n * records: getEntityRecords( 'postType', 'page', query ),\n * isLoading: ! select( coreStore ).hasFinishedResolution(\n * 'getEntityRecords',\n * [ 'postType', 'page', query ]\n * ),\n * };\n * },\n * [ search ]\n * );\n *\n * // Create the commands.\n * const commands = useMemo( () => {\n * return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {\n * return {\n * name: record.title?.rendered + ' ' + record.id,\n * label: record.title?.rendered\n * ? record.title?.rendered\n * : __( '(no title)' ),\n * icon: page,\n * callback: ( { close } ) => {\n * const args = {\n * \t\t\t\t\t\t\tp: '/page',\n * \t\t\t\t\t\t\tpostId: record.id,\n * };\n * document.location = addQueryArgs( 'site-editor.php', args );\n * close();\n * },\n * };\n * } );\n * }, [ records ] );\n *\n * return {\n * commands,\n * isLoading,\n * };\n * }\n *\n * useCommandLoader( {\n * name: 'myplugin/page-search',\n * hook: usePageSearchCommandLoader,\n * } );\n * ```\n */\nexport default function useCommandLoader( loader ) {\n\tconst { registerCommandLoader, unregisterCommandLoader } =\n\t\tuseDispatch( commandsStore );\n\tuseEffect( () => {\n\t\tif ( loader.disabled ) {\n\t\t\treturn;\n\t\t}\n\t\tregisterCommandLoader( {\n\t\t\tname: loader.name,\n\t\t\thook: loader.hook,\n\t\t\tcontext: loader.context,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommandLoader( loader.name );\n\t\t};\n\t}, [\n\t\tloader.name,\n\t\tloader.hook,\n\t\tloader.context,\n\t\tloader.disabled,\n\t\tregisterCommandLoader,\n\t\tunregisterCommandLoader,\n\t] );\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAK5B,SAAS,SAAS,qBAAqB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Attach a command loader to the command palette. Used for dynamic commands.\n *\n * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.\n *\n * @example\n * ```js\n * import { __ } from '@wordpress/i18n';\n * import { addQueryArgs } from '@wordpress/url';\n * import { useCommandLoader } from '@wordpress/commands';\n * import { page } from '@wordpress/icons';\n * import { useSelect } from '@wordpress/data';\n * import { store as coreStore } from '@wordpress/core-data';\n * import { useMemo } from '@wordpress/element';\n *\n * function usePageSearchCommandLoader( { search } ) {\n * // Retrieve the pages for the \"search\" term.\n * const { records, isLoading } = useSelect(\n * ( select ) => {\n * const { getEntityRecords } = select( coreStore );\n * const query = {\n * search: !! search ? search : undefined,\n * per_page: 10,\n * orderby: search ? 'relevance' : 'date',\n * };\n * return {\n * records: getEntityRecords( 'postType', 'page', query ),\n * isLoading: ! select( coreStore ).hasFinishedResolution(\n * 'getEntityRecords',\n * [ 'postType', 'page', query ]\n * ),\n * };\n * },\n * [ search ]\n * );\n *\n * // Create the commands.\n * const commands = useMemo( () => {\n * return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {\n * return {\n * name: record.title?.rendered + ' ' + record.id,\n * label: record.title?.rendered\n * ? record.title?.rendered\n * : __( '(no title)' ),\n * icon: page,\n * category: 'edit',\n * callback: ( { close } ) => {\n * const args = {\n * \t\t\t\t\t\t\tp: '/page',\n * \t\t\t\t\t\t\tpostId: record.id,\n * };\n * document.location = addQueryArgs( 'site-editor.php', args );\n * close();\n * },\n * };\n * } );\n * }, [ records ] );\n *\n * return {\n * commands,\n * isLoading,\n * };\n * }\n *\n * useCommandLoader( {\n * name: 'myplugin/page-search',\n * hook: usePageSearchCommandLoader,\n * } );\n * ```\n */\nexport default function useCommandLoader( loader ) {\n\tconst { registerCommandLoader, unregisterCommandLoader } =\n\t\tuseDispatch( commandsStore );\n\tuseEffect( () => {\n\t\tif ( loader.disabled ) {\n\t\t\treturn;\n\t\t}\n\t\tregisterCommandLoader( {\n\t\t\tname: loader.name,\n\t\t\thook: loader.hook,\n\t\t\tcontext: loader.context,\n\t\t\tcategory: loader.category,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommandLoader( loader.name );\n\t\t};\n\t}, [\n\t\tloader.name,\n\t\tloader.hook,\n\t\tloader.context,\n\t\tloader.category,\n\t\tloader.disabled,\n\t\tregisterCommandLoader,\n\t\tunregisterCommandLoader,\n\t] );\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAK5B,SAAS,SAAS,qBAAqB;AAwExB,SAAR,iBAAmC,QAAS;AAClD,QAAM,EAAE,uBAAuB,wBAAwB,IACtD,YAAa,aAAc;AAC5B,YAAW,MAAM;AAChB,QAAK,OAAO,UAAW;AACtB;AAAA,IACD;AACA,0BAAuB;AAAA,MACtB,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,SAAS,OAAO;AAAA,MAChB,UAAU,OAAO;AAAA,IAClB,CAAE;AACF,WAAO,MAAM;AACZ,8BAAyB,OAAO,IAAK;AAAA,IACtC;AAAA,EACD,GAAG;AAAA,IACF,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACD,CAAE;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,6 +15,7 @@ function useCommand(command) {
|
|
|
15
15
|
registerCommand({
|
|
16
16
|
name: command.name,
|
|
17
17
|
context: command.context,
|
|
18
|
+
category: command.category,
|
|
18
19
|
label: command.label,
|
|
19
20
|
searchLabel: command.searchLabel,
|
|
20
21
|
icon: command.icon,
|
|
@@ -30,6 +31,7 @@ function useCommand(command) {
|
|
|
30
31
|
command.searchLabel,
|
|
31
32
|
command.icon,
|
|
32
33
|
command.context,
|
|
34
|
+
command.category,
|
|
33
35
|
command.keywords,
|
|
34
36
|
command.disabled,
|
|
35
37
|
registerCommand,
|
|
@@ -60,6 +62,7 @@ function useCommands(commands) {
|
|
|
60
62
|
registerCommand({
|
|
61
63
|
name: command.name,
|
|
62
64
|
context: command.context,
|
|
65
|
+
category: command.category,
|
|
63
66
|
label: command.label,
|
|
64
67
|
searchLabel: command.searchLabel,
|
|
65
68
|
icon: command.icon,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/use-command.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Attach a command to the command palette. Used for static commands.\n *\n * @param {import('../store/actions').WPCommandConfig} command command config.\n *\n * @example\n * ```js\n * import { useCommand } from '@wordpress/commands';\n * import { plus } from '@wordpress/icons';\n *\n * useCommand( {\n * name: 'myplugin/my-command-name',\n * label: __( 'Add new post' ),\n *\t icon: plus,\n * callback: ({ close }) => {\n * document.location.href = 'post-new.php';\n * close();\n * },\n * } );\n * ```\n */\nexport function useCommand( command ) {\n\tconst { registerCommand, unregisterCommand } = useDispatch( commandsStore );\n\tconst currentCallbackRef = useRef( command.callback );\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = command.callback;\n\t}, [ command.callback ] );\n\n\tuseEffect( () => {\n\t\tif ( command.disabled ) {\n\t\t\treturn;\n\t\t}\n\t\tregisterCommand( {\n\t\t\tname: command.name,\n\t\t\tcontext: command.context,\n\t\t\tlabel: command.label,\n\t\t\tsearchLabel: command.searchLabel,\n\t\t\ticon: command.icon,\n\t\t\tkeywords: command.keywords,\n\t\t\tcallback: ( ...args ) => currentCallbackRef.current( ...args ),\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.searchLabel,\n\t\tcommand.icon,\n\t\tcommand.context,\n\t\tcommand.keywords,\n\t\tcommand.disabled,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n\n/**\n * Attach multiple commands to the command palette. Used for static commands.\n *\n * @param {import('../store/actions').WPCommandConfig[]} commands Array of command configs.\n *\n * @example\n * ```js\n * import { useCommands } from '@wordpress/commands';\n * import { plus, pencil } from '@wordpress/icons';\n *\n * useCommands( [\n * {\n * name: 'myplugin/add-post',\n * label: __( 'Add new post' ),\n * icon: plus,\n * callback: ({ close }) => {\n * document.location.href = 'post-new.php';\n * close();\n * },\n * },\n * {\n * name: 'myplugin/edit-posts',\n * label: __( 'Edit posts' ),\n * icon: pencil,\n * callback: ({ close }) => {\n * document.location.href = 'edit.php';\n * close();\n * },\n * },\n * ] );\n * ```\n */\nexport function useCommands( commands ) {\n\tconst { registerCommand, unregisterCommand } = useDispatch( commandsStore );\n\tconst currentCallbacksRef = useRef( {} );\n\n\tuseEffect( () => {\n\t\tif ( ! commands ) {\n\t\t\treturn;\n\t\t}\n\t\tcommands.forEach( ( command ) => {\n\t\t\tif ( command.callback ) {\n\t\t\t\tcurrentCallbacksRef.current[ command.name ] = command.callback;\n\t\t\t}\n\t\t} );\n\t}, [ commands ] );\n\n\tuseEffect( () => {\n\t\tif ( ! commands ) {\n\t\t\treturn;\n\t\t}\n\t\tcommands.forEach( ( command ) => {\n\t\t\tif ( command.disabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tregisterCommand( {\n\t\t\t\tname: command.name,\n\t\t\t\tcontext: command.context,\n\t\t\t\tlabel: command.label,\n\t\t\t\tsearchLabel: command.searchLabel,\n\t\t\t\ticon: command.icon,\n\t\t\t\tkeywords: command.keywords,\n\t\t\t\tcallback: ( ...args ) => {\n\t\t\t\t\tconst callback =\n\t\t\t\t\t\tcurrentCallbacksRef.current[ command.name ];\n\t\t\t\t\tif ( callback ) {\n\t\t\t\t\t\tcallback( ...args );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t} );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tcommands.forEach( ( command ) => {\n\t\t\t\tunregisterCommand( command.name );\n\t\t\t} );\n\t\t};\n\t}, [ commands, registerCommand, unregisterCommand ] );\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,WAAW,cAAc;AAClC,SAAS,mBAAmB;AAK5B,SAAS,SAAS,qBAAqB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Attach a command to the command palette. Used for static commands.\n *\n * @param {import('../store/actions').WPCommandConfig} command command config.\n *\n * @example\n * ```js\n * import { useCommand } from '@wordpress/commands';\n * import { plus } from '@wordpress/icons';\n *\n * useCommand( {\n * name: 'myplugin/my-command-name',\n * label: __( 'Add new post' ),\n *\t icon: plus,\n * category: 'command',\n * callback: ({ close }) => {\n * document.location.href = 'post-new.php';\n * close();\n * },\n * } );\n * ```\n */\nexport function useCommand( command ) {\n\tconst { registerCommand, unregisterCommand } = useDispatch( commandsStore );\n\tconst currentCallbackRef = useRef( command.callback );\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = command.callback;\n\t}, [ command.callback ] );\n\n\tuseEffect( () => {\n\t\tif ( command.disabled ) {\n\t\t\treturn;\n\t\t}\n\t\tregisterCommand( {\n\t\t\tname: command.name,\n\t\t\tcontext: command.context,\n\t\t\tcategory: command.category,\n\t\t\tlabel: command.label,\n\t\t\tsearchLabel: command.searchLabel,\n\t\t\ticon: command.icon,\n\t\t\tkeywords: command.keywords,\n\t\t\tcallback: ( ...args ) => currentCallbackRef.current( ...args ),\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.searchLabel,\n\t\tcommand.icon,\n\t\tcommand.context,\n\t\tcommand.category,\n\t\tcommand.keywords,\n\t\tcommand.disabled,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n\n/**\n * Attach multiple commands to the command palette. Used for static commands.\n *\n * @param {import('../store/actions').WPCommandConfig[]} commands Array of command configs.\n *\n * @example\n * ```js\n * import { useCommands } from '@wordpress/commands';\n * import { plus, pencil } from '@wordpress/icons';\n *\n * useCommands( [\n * {\n * name: 'myplugin/add-post',\n * label: __( 'Add new post' ),\n * icon: plus,\n * category: 'command',\n * callback: ({ close }) => {\n * document.location.href = 'post-new.php';\n * close();\n * },\n * },\n * {\n * name: 'myplugin/edit-posts',\n * label: __( 'Edit posts' ),\n * icon: pencil,\n * category: 'view',\n * callback: ({ close }) => {\n * document.location.href = 'edit.php';\n * close();\n * },\n * },\n * ] );\n * ```\n */\nexport function useCommands( commands ) {\n\tconst { registerCommand, unregisterCommand } = useDispatch( commandsStore );\n\tconst currentCallbacksRef = useRef( {} );\n\n\tuseEffect( () => {\n\t\tif ( ! commands ) {\n\t\t\treturn;\n\t\t}\n\t\tcommands.forEach( ( command ) => {\n\t\t\tif ( command.callback ) {\n\t\t\t\tcurrentCallbacksRef.current[ command.name ] = command.callback;\n\t\t\t}\n\t\t} );\n\t}, [ commands ] );\n\n\tuseEffect( () => {\n\t\tif ( ! commands ) {\n\t\t\treturn;\n\t\t}\n\t\tcommands.forEach( ( command ) => {\n\t\t\tif ( command.disabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tregisterCommand( {\n\t\t\t\tname: command.name,\n\t\t\t\tcontext: command.context,\n\t\t\t\tcategory: command.category,\n\t\t\t\tlabel: command.label,\n\t\t\t\tsearchLabel: command.searchLabel,\n\t\t\t\ticon: command.icon,\n\t\t\t\tkeywords: command.keywords,\n\t\t\t\tcallback: ( ...args ) => {\n\t\t\t\t\tconst callback =\n\t\t\t\t\t\tcurrentCallbacksRef.current[ command.name ];\n\t\t\t\t\tif ( callback ) {\n\t\t\t\t\t\tcallback( ...args );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t} );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tcommands.forEach( ( command ) => {\n\t\t\t\tunregisterCommand( command.name );\n\t\t\t} );\n\t\t};\n\t}, [ commands, registerCommand, unregisterCommand ] );\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,WAAW,cAAc;AAClC,SAAS,mBAAmB;AAK5B,SAAS,SAAS,qBAAqB;AAwBhC,SAAS,WAAY,SAAU;AACrC,QAAM,EAAE,iBAAiB,kBAAkB,IAAI,YAAa,aAAc;AAC1E,QAAM,qBAAqB,OAAQ,QAAQ,QAAS;AACpD,YAAW,MAAM;AAChB,uBAAmB,UAAU,QAAQ;AAAA,EACtC,GAAG,CAAE,QAAQ,QAAS,CAAE;AAExB,YAAW,MAAM;AAChB,QAAK,QAAQ,UAAW;AACvB;AAAA,IACD;AACA,oBAAiB;AAAA,MAChB,MAAM,QAAQ;AAAA,MACd,SAAS,QAAQ;AAAA,MACjB,UAAU,QAAQ;AAAA,MAClB,OAAO,QAAQ;AAAA,MACf,aAAa,QAAQ;AAAA,MACrB,MAAM,QAAQ;AAAA,MACd,UAAU,QAAQ;AAAA,MAClB,UAAU,IAAK,SAAU,mBAAmB,QAAS,GAAG,IAAK;AAAA,IAC9D,CAAE;AACF,WAAO,MAAM;AACZ,wBAAmB,QAAQ,IAAK;AAAA,IACjC;AAAA,EACD,GAAG;AAAA,IACF,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACD,CAAE;AACH;AAoCO,SAAS,YAAa,UAAW;AACvC,QAAM,EAAE,iBAAiB,kBAAkB,IAAI,YAAa,aAAc;AAC1E,QAAM,sBAAsB,OAAQ,CAAC,CAAE;AAEvC,YAAW,MAAM;AAChB,QAAK,CAAE,UAAW;AACjB;AAAA,IACD;AACA,aAAS,QAAS,CAAE,YAAa;AAChC,UAAK,QAAQ,UAAW;AACvB,4BAAoB,QAAS,QAAQ,IAAK,IAAI,QAAQ;AAAA,MACvD;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAChB,QAAK,CAAE,UAAW;AACjB;AAAA,IACD;AACA,aAAS,QAAS,CAAE,YAAa;AAChC,UAAK,QAAQ,UAAW;AACvB;AAAA,MACD;AACA,sBAAiB;AAAA,QAChB,MAAM,QAAQ;AAAA,QACd,SAAS,QAAQ;AAAA,QACjB,UAAU,QAAQ;AAAA,QAClB,OAAO,QAAQ;AAAA,QACf,aAAa,QAAQ;AAAA,QACrB,MAAM,QAAQ;AAAA,QACd,UAAU,QAAQ;AAAA,QAClB,UAAU,IAAK,SAAU;AACxB,gBAAM,WACL,oBAAoB,QAAS,QAAQ,IAAK;AAC3C,cAAK,UAAW;AACf,qBAAU,GAAG,IAAK;AAAA,UACnB;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH,CAAE;AAEF,WAAO,MAAM;AACZ,eAAS,QAAS,CAAE,YAAa;AAChC,0BAAmB,QAAQ,IAAK;AAAA,MACjC,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAE,UAAU,iBAAiB,iBAAkB,CAAE;AACrD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
// packages/commands/src/store/actions.js
|
|
2
|
+
var REGISTERABLE_CATEGORIES = /* @__PURE__ */ new Set([
|
|
3
|
+
"command",
|
|
4
|
+
"view",
|
|
5
|
+
"edit",
|
|
6
|
+
"action"
|
|
7
|
+
]);
|
|
2
8
|
function registerCommand(config) {
|
|
9
|
+
let { category } = config;
|
|
10
|
+
if (!category || !REGISTERABLE_CATEGORIES.has(category)) {
|
|
11
|
+
category = "action";
|
|
12
|
+
}
|
|
3
13
|
return {
|
|
4
14
|
type: "REGISTER_COMMAND",
|
|
5
|
-
...config
|
|
15
|
+
...config,
|
|
16
|
+
category
|
|
6
17
|
};
|
|
7
18
|
}
|
|
8
19
|
function unregisterCommand(name) {
|
|
@@ -12,9 +23,14 @@ function unregisterCommand(name) {
|
|
|
12
23
|
};
|
|
13
24
|
}
|
|
14
25
|
function registerCommandLoader(config) {
|
|
26
|
+
let { category } = config;
|
|
27
|
+
if (!category || !REGISTERABLE_CATEGORIES.has(category)) {
|
|
28
|
+
category = "action";
|
|
29
|
+
}
|
|
15
30
|
return {
|
|
16
31
|
type: "REGISTER_COMMAND_LOADER",
|
|
17
|
-
...config
|
|
32
|
+
...config,
|
|
33
|
+
category
|
|
18
34
|
};
|
|
19
35
|
}
|
|
20
36
|
function unregisterCommandLoader(name) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/store/actions.js"],
|
|
4
|
-
"sourcesContent": ["/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */\n\n/**\n * Configuration of a registered keyboard shortcut.\n *\n * @typedef {Object} WPCommandConfig\n *\n * @property {string}
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */\n\n/**\n * @typedef {'command'|'view'|'edit'|'workflow'|'action'} WPCommandCategory\n */\n\n/**\n * Command categories allowed via registerCommand.\n * The 'workflow' category is reserved for internal use\n * and cannot be registered through this API.\n *\n * @type {Set<WPCommandCategory>}\n */\nconst REGISTERABLE_CATEGORIES = new Set( [\n\t'command',\n\t'view',\n\t'edit',\n\t'action',\n] );\n\n/**\n * Configuration of a registered keyboard shortcut.\n *\n * @typedef {Object} WPCommandConfig\n *\n * @property {string} name Command name.\n * @property {string} label Command label.\n * @property {string=} searchLabel Command search label.\n * @property {string=} context Command context.\n * @property {WPCommandCategory=} category Command category.\n * @property {React.JSX.Element} icon Command icon.\n * @property {Function} callback Command callback.\n * @property {boolean} disabled Whether to disable the command.\n * @property {string[]=} keywords Command keywords for search matching.\n */\n\n/**\n * @typedef {(search: string) => WPCommandConfig[]} WPCommandLoaderHook hoo\n */\n\n/**\n * Command loader config.\n *\n * @typedef {Object} WPCommandLoaderConfig\n *\n * @property {string} name Command loader name.\n * @property {string=} context Command loader context.\n * @property {WPCommandCategory=} category Command loader category.\n * @property {WPCommandLoaderHook} hook Command loader hook.\n * @property {boolean} disabled Whether to disable the command loader.\n */\n\n/**\n * Returns an action object used to register a new command.\n *\n * @param {WPCommandConfig} config Command config.\n *\n * @return {Object} action.\n */\nexport function registerCommand( config ) {\n\tlet { category } = config;\n\n\t// Defaults to 'action' if no category is provided or if the category is invalid. Future versions will emit a warning.\n\tif ( ! category || ! REGISTERABLE_CATEGORIES.has( category ) ) {\n\t\tcategory = 'action';\n\t}\n\n\treturn {\n\t\ttype: 'REGISTER_COMMAND',\n\t\t...config,\n\t\tcategory,\n\t};\n}\n\n/**\n * Returns an action object used to unregister a command.\n *\n * @param {string} name Command name.\n *\n * @return {Object} action.\n */\nexport function unregisterCommand( name ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND',\n\t\tname,\n\t};\n}\n\n/**\n * Register command loader.\n *\n * @param {WPCommandLoaderConfig} config Command loader config.\n *\n * @return {Object} action.\n */\nexport function registerCommandLoader( config ) {\n\tlet { category } = config;\n\n\t// Defaults to 'action' if no category is provided or if the category is invalid. Future versions will emit a warning.\n\tif ( ! category || ! REGISTERABLE_CATEGORIES.has( category ) ) {\n\t\tcategory = 'action';\n\t}\n\n\treturn {\n\t\ttype: 'REGISTER_COMMAND_LOADER',\n\t\t...config,\n\t\tcategory,\n\t};\n}\n\n/**\n * Unregister command loader hook.\n *\n * @param {string} name Command loader name.\n *\n * @return {Object} action.\n */\nexport function unregisterCommandLoader( name ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND_LOADER',\n\t\tname,\n\t};\n}\n\n/**\n * Opens the command palette.\n *\n * @return {Object} action.\n */\nexport function open() {\n\treturn {\n\t\ttype: 'OPEN',\n\t};\n}\n\n/**\n * Closes the command palette.\n *\n * @return {Object} action.\n */\nexport function close() {\n\treturn {\n\t\ttype: 'CLOSE',\n\t};\n}\n"],
|
|
5
|
+
"mappings": ";AAaA,IAAM,0BAA0B,oBAAI,IAAK;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAyCK,SAAS,gBAAiB,QAAS;AACzC,MAAI,EAAE,SAAS,IAAI;AAGnB,MAAK,CAAE,YAAY,CAAE,wBAAwB,IAAK,QAAS,GAAI;AAC9D,eAAW;AAAA,EACZ;AAEA,SAAO;AAAA,IACN,MAAM;AAAA,IACN,GAAG;AAAA,IACH;AAAA,EACD;AACD;AASO,SAAS,kBAAmB,MAAO;AACzC,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACD;AACD;AASO,SAAS,sBAAuB,QAAS;AAC/C,MAAI,EAAE,SAAS,IAAI;AAGnB,MAAK,CAAE,YAAY,CAAE,wBAAwB,IAAK,QAAS,GAAI;AAC9D,eAAW;AAAA,EACZ;AAEA,SAAO;AAAA,IACN,MAAM;AAAA,IACN,GAAG;AAAA,IACH;AAAA,EACD;AACD;AASO,SAAS,wBAAyB,MAAO;AAC/C,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACD;AACD;AAOO,SAAS,OAAO;AACtB,SAAO;AAAA,IACN,MAAM;AAAA,EACP;AACD;AAOO,SAAS,QAAQ;AACvB,SAAO;AAAA,IACN,MAAM;AAAA,EACP;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,6 +10,7 @@ function commands(state = {}, action) {
|
|
|
10
10
|
label: action.label,
|
|
11
11
|
searchLabel: action.searchLabel,
|
|
12
12
|
context: action.context,
|
|
13
|
+
category: action.category,
|
|
13
14
|
callback: action.callback,
|
|
14
15
|
icon: action.icon,
|
|
15
16
|
keywords: action.keywords
|
|
@@ -30,6 +31,7 @@ function commandLoaders(state = {}, action) {
|
|
|
30
31
|
[action.name]: {
|
|
31
32
|
name: action.name,
|
|
32
33
|
context: action.context,
|
|
34
|
+
category: action.category,
|
|
33
35
|
hook: action.hook
|
|
34
36
|
}
|
|
35
37
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/store/reducer.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tlabel: action.label,\n\t\t\t\t\tsearchLabel: action.searchLabel,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\ticon: action.icon,\n\t\t\t\t\tkeywords: action.keywords,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\thook: action.hook,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command palette open state.\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction isOpen( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'OPEN':\n\t\t\treturn true;\n\t\tcase 'CLOSE':\n\t\t\treturn false;\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command palette's active context.\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction context( state = 'root', action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_CONTEXT':\n\t\t\treturn action.context;\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n\tisOpen,\n\tcontext,\n} );\n\nexport default reducer;\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,uBAAuB;AAUhC,SAAS,SAAU,QAAQ,CAAC,GAAG,QAAS;AACvC,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,OAAO,OAAO;AAAA,UACd,aAAa,OAAO;AAAA,UACpB,SAAS,OAAO;AAAA,UAChB,UAAU,OAAO;AAAA,UACjB,MAAM,OAAO;AAAA,UACb,UAAU,OAAO;AAAA,QAClB;AAAA,MACD;AAAA,IACD,KAAK,sBAAsB;AAC1B,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,GAAG,GAAG,eAAe,IAAI;AAClD,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,eAAgB,QAAQ,CAAC,GAAG,QAAS;AAC7C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,SAAS,OAAO;AAAA,UAChB,MAAM,OAAO;AAAA,QACd;AAAA,MACD;AAAA,IACD,KAAK,6BAA6B;AACjC,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,GAAG,GAAG,eAAe,IAAI;AAClD,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,OAAQ,QAAQ,OAAO,QAAS;AACxC,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,IACR,KAAK;AACJ,aAAO;AAAA,EACT;AAEA,SAAO;AACR;AAUA,SAAS,QAAS,QAAQ,QAAQ,QAAS;AAC1C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO,OAAO;AAAA,EAChB;AAEA,SAAO;AACR;AAEA,IAAM,UAAU,gBAAiB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAEF,IAAO,kBAAQ;",
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tlabel: action.label,\n\t\t\t\t\tsearchLabel: action.searchLabel,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\tcategory: action.category,\n\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\ticon: action.icon,\n\t\t\t\t\tkeywords: action.keywords,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\tcategory: action.category,\n\t\t\t\t\thook: action.hook,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command palette open state.\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction isOpen( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'OPEN':\n\t\t\treturn true;\n\t\tcase 'CLOSE':\n\t\t\treturn false;\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command palette's active context.\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction context( state = 'root', action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_CONTEXT':\n\t\t\treturn action.context;\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n\tisOpen,\n\tcontext,\n} );\n\nexport default reducer;\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,uBAAuB;AAUhC,SAAS,SAAU,QAAQ,CAAC,GAAG,QAAS;AACvC,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,OAAO,OAAO;AAAA,UACd,aAAa,OAAO;AAAA,UACpB,SAAS,OAAO;AAAA,UAChB,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB,MAAM,OAAO;AAAA,UACb,UAAU,OAAO;AAAA,QAClB;AAAA,MACD;AAAA,IACD,KAAK,sBAAsB;AAC1B,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,GAAG,GAAG,eAAe,IAAI;AAClD,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,eAAgB,QAAQ,CAAC,GAAG,QAAS;AAC7C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,OAAO,IAAK,GAAG;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,SAAS,OAAO;AAAA,UAChB,UAAU,OAAO;AAAA,UACjB,MAAM,OAAO;AAAA,QACd;AAAA,MACD;AAAA,IACD,KAAK,6BAA6B;AACjC,YAAM,EAAE,CAAE,OAAO,IAAK,GAAG,GAAG,GAAG,eAAe,IAAI;AAClD,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,OAAQ,QAAQ,OAAO,QAAS;AACxC,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO;AAAA,IACR,KAAK;AACJ,aAAO;AAAA,EACT;AAEA,SAAO;AACR;AAUA,SAAS,QAAS,QAAQ,QAAQ,QAAS;AAC1C,UAAS,OAAO,MAAO;AAAA,IACtB,KAAK;AACJ,aAAO,OAAO;AAAA,EAChB;AAEA,SAAO;AACR;AAEA,IAAM,UAAU,gBAAiB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAEF,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
.commands-command-menu .components-modal__content {
|
|
123
123
|
margin: 0;
|
|
124
124
|
padding: 0;
|
|
125
|
+
overflow: hidden;
|
|
125
126
|
}
|
|
126
127
|
|
|
127
128
|
.commands-command-menu__overlay {
|
|
@@ -132,6 +133,7 @@
|
|
|
132
133
|
.commands-command-menu__header {
|
|
133
134
|
display: flex;
|
|
134
135
|
align-items: center;
|
|
136
|
+
gap: 8px;
|
|
135
137
|
padding: 0 16px;
|
|
136
138
|
}
|
|
137
139
|
.commands-command-menu__header .components-button {
|
|
@@ -162,7 +164,7 @@
|
|
|
162
164
|
color: #1e1e1e;
|
|
163
165
|
margin: 0;
|
|
164
166
|
font-size: 15px;
|
|
165
|
-
line-height:
|
|
167
|
+
line-height: 24px;
|
|
166
168
|
border-radius: 0;
|
|
167
169
|
}
|
|
168
170
|
.commands-command-menu__container [cmdk-input]::placeholder {
|
|
@@ -198,6 +200,7 @@
|
|
|
198
200
|
min-height: 40px;
|
|
199
201
|
padding: 4px;
|
|
200
202
|
padding-right: 40px;
|
|
203
|
+
padding-left: 16px;
|
|
201
204
|
}
|
|
202
205
|
.commands-command-menu__container [cmdk-item] > .has-icon {
|
|
203
206
|
padding-right: 8px;
|
|
@@ -205,6 +208,14 @@
|
|
|
205
208
|
.commands-command-menu__container [cmdk-root] > [cmdk-list] {
|
|
206
209
|
max-height: 368px;
|
|
207
210
|
overflow: auto;
|
|
211
|
+
scroll-padding-top: 8px;
|
|
212
|
+
scroll-padding-bottom: 8px;
|
|
213
|
+
}
|
|
214
|
+
.commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-group-items]:not(:empty)), .commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-empty]) {
|
|
215
|
+
border-top: 1px solid #ddd;
|
|
216
|
+
}
|
|
217
|
+
.commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-group-items]:not(:empty)) {
|
|
218
|
+
padding-top: 8px;
|
|
208
219
|
}
|
|
209
220
|
.commands-command-menu__container [cmdk-root] > [cmdk-list] [cmdk-list-sizer] > [cmdk-group]:last-child [cmdk-group-items]:not(:empty) {
|
|
210
221
|
padding-bottom: 8px;
|
|
@@ -227,12 +238,26 @@
|
|
|
227
238
|
position: relative;
|
|
228
239
|
}
|
|
229
240
|
|
|
230
|
-
.commands-command-menu__item
|
|
241
|
+
.commands-command-menu__item-label {
|
|
231
242
|
display: inline-block;
|
|
232
243
|
overflow: hidden;
|
|
233
244
|
text-overflow: ellipsis;
|
|
234
245
|
white-space: nowrap;
|
|
235
246
|
flex: 1;
|
|
247
|
+
min-width: 0;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.commands-command-menu__item-category {
|
|
251
|
+
flex: 0 0 auto;
|
|
252
|
+
margin-right: auto;
|
|
253
|
+
padding-right: 24px;
|
|
254
|
+
color: #757575;
|
|
255
|
+
font-size: 13px;
|
|
256
|
+
line-height: 1.4;
|
|
257
|
+
text-align: left;
|
|
258
|
+
}
|
|
259
|
+
[aria-selected=true] .commands-command-menu__item-category, [cmdk-item]:active .commands-command-menu__item-category {
|
|
260
|
+
color: rgba(255, 255, 255, 0.8);
|
|
236
261
|
}
|
|
237
262
|
|
|
238
263
|
.commands-command-menu__item mark {
|
package/build-style/style.css
CHANGED
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
.commands-command-menu .components-modal__content {
|
|
123
123
|
margin: 0;
|
|
124
124
|
padding: 0;
|
|
125
|
+
overflow: hidden;
|
|
125
126
|
}
|
|
126
127
|
|
|
127
128
|
.commands-command-menu__overlay {
|
|
@@ -132,6 +133,7 @@
|
|
|
132
133
|
.commands-command-menu__header {
|
|
133
134
|
display: flex;
|
|
134
135
|
align-items: center;
|
|
136
|
+
gap: 8px;
|
|
135
137
|
padding: 0 16px;
|
|
136
138
|
}
|
|
137
139
|
.commands-command-menu__header .components-button {
|
|
@@ -162,7 +164,7 @@
|
|
|
162
164
|
color: #1e1e1e;
|
|
163
165
|
margin: 0;
|
|
164
166
|
font-size: 15px;
|
|
165
|
-
line-height:
|
|
167
|
+
line-height: 24px;
|
|
166
168
|
border-radius: 0;
|
|
167
169
|
}
|
|
168
170
|
.commands-command-menu__container [cmdk-input]::placeholder {
|
|
@@ -198,6 +200,7 @@
|
|
|
198
200
|
min-height: 40px;
|
|
199
201
|
padding: 4px;
|
|
200
202
|
padding-left: 40px;
|
|
203
|
+
padding-right: 16px;
|
|
201
204
|
}
|
|
202
205
|
.commands-command-menu__container [cmdk-item] > .has-icon {
|
|
203
206
|
padding-left: 8px;
|
|
@@ -205,6 +208,14 @@
|
|
|
205
208
|
.commands-command-menu__container [cmdk-root] > [cmdk-list] {
|
|
206
209
|
max-height: 368px;
|
|
207
210
|
overflow: auto;
|
|
211
|
+
scroll-padding-top: 8px;
|
|
212
|
+
scroll-padding-bottom: 8px;
|
|
213
|
+
}
|
|
214
|
+
.commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-group-items]:not(:empty)), .commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-empty]) {
|
|
215
|
+
border-top: 1px solid #ddd;
|
|
216
|
+
}
|
|
217
|
+
.commands-command-menu__container [cmdk-root] > [cmdk-list]:has([cmdk-group-items]:not(:empty)) {
|
|
218
|
+
padding-top: 8px;
|
|
208
219
|
}
|
|
209
220
|
.commands-command-menu__container [cmdk-root] > [cmdk-list] [cmdk-list-sizer] > [cmdk-group]:last-child [cmdk-group-items]:not(:empty) {
|
|
210
221
|
padding-bottom: 8px;
|
|
@@ -227,12 +238,26 @@
|
|
|
227
238
|
position: relative;
|
|
228
239
|
}
|
|
229
240
|
|
|
230
|
-
.commands-command-menu__item
|
|
241
|
+
.commands-command-menu__item-label {
|
|
231
242
|
display: inline-block;
|
|
232
243
|
overflow: hidden;
|
|
233
244
|
text-overflow: ellipsis;
|
|
234
245
|
white-space: nowrap;
|
|
235
246
|
flex: 1;
|
|
247
|
+
min-width: 0;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.commands-command-menu__item-category {
|
|
251
|
+
flex: 0 0 auto;
|
|
252
|
+
margin-left: auto;
|
|
253
|
+
padding-left: 24px;
|
|
254
|
+
color: #757575;
|
|
255
|
+
font-size: 13px;
|
|
256
|
+
line-height: 1.4;
|
|
257
|
+
text-align: right;
|
|
258
|
+
}
|
|
259
|
+
[aria-selected=true] .commands-command-menu__item-category, [cmdk-item]:active .commands-command-menu__item-category {
|
|
260
|
+
color: rgba(255, 255, 255, 0.8);
|
|
236
261
|
}
|
|
237
262
|
|
|
238
263
|
.commands-command-menu__item mark {
|