@wordpress/commands 1.35.0 → 1.35.1-next.dc3f6d3c1.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/build/components/command-menu.js +6 -16
- package/build/components/command-menu.js.map +3 -3
- package/build-module/components/command-menu.js +8 -17
- package/build-module/components/command-menu.js.map +2 -2
- package/package.json +10 -10
- package/src/components/command-menu.js +7 -17
- package/src/components/style.scss +5 -3
|
@@ -43,7 +43,9 @@ var import_components = require("@wordpress/components");
|
|
|
43
43
|
var import_keyboard_shortcuts = require("@wordpress/keyboard-shortcuts");
|
|
44
44
|
var import_icons = require("@wordpress/icons");
|
|
45
45
|
var import_store = require("../store");
|
|
46
|
+
var import_lock_unlock = require("../lock-unlock");
|
|
46
47
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
48
|
+
var { withIgnoreIMEEvents } = (0, import_lock_unlock.unlock)(import_components.privateApis);
|
|
47
49
|
var inputLabel = (0, import_i18n.__)("Search commands and settings");
|
|
48
50
|
function CommandMenuLoader({ name, search, hook, setLoader, close }) {
|
|
49
51
|
const { isLoading, commands = [] } = hook({ search }) ?? {};
|
|
@@ -180,8 +182,7 @@ function CommandInput({ isOpen, search, setSearch }) {
|
|
|
180
182
|
value: search,
|
|
181
183
|
onValueChange: setSearch,
|
|
182
184
|
placeholder: inputLabel,
|
|
183
|
-
"aria-activedescendant": selectedItemId
|
|
184
|
-
icon: search
|
|
185
|
+
"aria-activedescendant": selectedItemId
|
|
185
186
|
}
|
|
186
187
|
);
|
|
187
188
|
}
|
|
@@ -208,7 +209,7 @@ function CommandMenu() {
|
|
|
208
209
|
(0, import_keyboard_shortcuts.useShortcut)(
|
|
209
210
|
"core/commands",
|
|
210
211
|
/** @type {import('react').KeyboardEventHandler} */
|
|
211
|
-
(event) => {
|
|
212
|
+
withIgnoreIMEEvents((event) => {
|
|
212
213
|
if (event.defaultPrevented) {
|
|
213
214
|
return;
|
|
214
215
|
}
|
|
@@ -218,7 +219,7 @@ function CommandMenu() {
|
|
|
218
219
|
} else {
|
|
219
220
|
open();
|
|
220
221
|
}
|
|
221
|
-
},
|
|
222
|
+
}),
|
|
222
223
|
{
|
|
223
224
|
bindGlobal: true
|
|
224
225
|
}
|
|
@@ -237,17 +238,6 @@ function CommandMenu() {
|
|
|
237
238
|
if (!isOpen) {
|
|
238
239
|
return false;
|
|
239
240
|
}
|
|
240
|
-
const onKeyDown = (event) => {
|
|
241
|
-
if (
|
|
242
|
-
// Ignore keydowns from IMEs
|
|
243
|
-
event.nativeEvent.isComposing || // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
|
|
244
|
-
// is `isComposing=false`, even though it's technically still part of the composition.
|
|
245
|
-
// These can only be detected by keyCode.
|
|
246
|
-
event.keyCode === 229
|
|
247
|
-
) {
|
|
248
|
-
event.preventDefault();
|
|
249
|
-
}
|
|
250
|
-
};
|
|
251
241
|
const isLoading = Object.values(loaders).some(Boolean);
|
|
252
242
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
253
243
|
import_components.Modal,
|
|
@@ -257,7 +247,7 @@ function CommandMenu() {
|
|
|
257
247
|
onRequestClose: closeAndReset,
|
|
258
248
|
__experimentalHideHeader: true,
|
|
259
249
|
contentLabel: (0, import_i18n.__)("Command palette"),
|
|
260
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "commands-command-menu__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command, { label: inputLabel,
|
|
250
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "commands-command-menu__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command, { label: inputLabel, children: [
|
|
261
251
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "commands-command-menu__header", children: [
|
|
262
252
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
263
253
|
import_icons.Icon,
|
|
@@ -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} 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';\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAyC;AACzC,kBAAiB;AAKjB,kBAAuC;AACvC,qBAMO;AACP,kBAAmB;AACnB,
|
|
6
|
-
"names": ["HStack", "clsx", "commandsStore", "keyboardShortcutsStore", "inputIcon"]
|
|
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": "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",
|
|
6
|
+
"names": ["componentsPrivateApis", "HStack", "clsx", "commandsStore", "keyboardShortcutsStore", "inputIcon"]
|
|
7
7
|
}
|
|
@@ -13,7 +13,8 @@ import { __ } from "@wordpress/i18n";
|
|
|
13
13
|
import {
|
|
14
14
|
Modal,
|
|
15
15
|
TextHighlight,
|
|
16
|
-
__experimentalHStack as HStack
|
|
16
|
+
__experimentalHStack as HStack,
|
|
17
|
+
privateApis as componentsPrivateApis
|
|
17
18
|
} from "@wordpress/components";
|
|
18
19
|
import {
|
|
19
20
|
store as keyboardShortcutsStore,
|
|
@@ -21,7 +22,9 @@ import {
|
|
|
21
22
|
} from "@wordpress/keyboard-shortcuts";
|
|
22
23
|
import { Icon, search as inputIcon } from "@wordpress/icons";
|
|
23
24
|
import { store as commandsStore } from "../store";
|
|
25
|
+
import { unlock } from "../lock-unlock";
|
|
24
26
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
27
|
+
var { withIgnoreIMEEvents } = unlock(componentsPrivateApis);
|
|
25
28
|
var inputLabel = __("Search commands and settings");
|
|
26
29
|
function CommandMenuLoader({ name, search, hook, setLoader, close }) {
|
|
27
30
|
const { isLoading, commands = [] } = hook({ search }) ?? {};
|
|
@@ -158,8 +161,7 @@ function CommandInput({ isOpen, search, setSearch }) {
|
|
|
158
161
|
value: search,
|
|
159
162
|
onValueChange: setSearch,
|
|
160
163
|
placeholder: inputLabel,
|
|
161
|
-
"aria-activedescendant": selectedItemId
|
|
162
|
-
icon: search
|
|
164
|
+
"aria-activedescendant": selectedItemId
|
|
163
165
|
}
|
|
164
166
|
);
|
|
165
167
|
}
|
|
@@ -186,7 +188,7 @@ function CommandMenu() {
|
|
|
186
188
|
useShortcut(
|
|
187
189
|
"core/commands",
|
|
188
190
|
/** @type {import('react').KeyboardEventHandler} */
|
|
189
|
-
(event) => {
|
|
191
|
+
withIgnoreIMEEvents((event) => {
|
|
190
192
|
if (event.defaultPrevented) {
|
|
191
193
|
return;
|
|
192
194
|
}
|
|
@@ -196,7 +198,7 @@ function CommandMenu() {
|
|
|
196
198
|
} else {
|
|
197
199
|
open();
|
|
198
200
|
}
|
|
199
|
-
},
|
|
201
|
+
}),
|
|
200
202
|
{
|
|
201
203
|
bindGlobal: true
|
|
202
204
|
}
|
|
@@ -215,17 +217,6 @@ function CommandMenu() {
|
|
|
215
217
|
if (!isOpen) {
|
|
216
218
|
return false;
|
|
217
219
|
}
|
|
218
|
-
const onKeyDown = (event) => {
|
|
219
|
-
if (
|
|
220
|
-
// Ignore keydowns from IMEs
|
|
221
|
-
event.nativeEvent.isComposing || // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
|
|
222
|
-
// is `isComposing=false`, even though it's technically still part of the composition.
|
|
223
|
-
// These can only be detected by keyCode.
|
|
224
|
-
event.keyCode === 229
|
|
225
|
-
) {
|
|
226
|
-
event.preventDefault();
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
220
|
const isLoading = Object.values(loaders).some(Boolean);
|
|
230
221
|
return /* @__PURE__ */ jsx(
|
|
231
222
|
Modal,
|
|
@@ -235,7 +226,7 @@ function CommandMenu() {
|
|
|
235
226
|
onRequestClose: closeAndReset,
|
|
236
227
|
__experimentalHideHeader: true,
|
|
237
228
|
contentLabel: __("Command palette"),
|
|
238
|
-
children: /* @__PURE__ */ jsx("div", { className: "commands-command-menu__container", children: /* @__PURE__ */ jsxs(Command, { label: inputLabel,
|
|
229
|
+
children: /* @__PURE__ */ jsx("div", { className: "commands-command-menu__container", children: /* @__PURE__ */ jsxs(Command, { label: inputLabel, children: [
|
|
239
230
|
/* @__PURE__ */ jsxs("div", { className: "commands-command-menu__header", children: [
|
|
240
231
|
/* @__PURE__ */ jsx(
|
|
241
232
|
Icon,
|
|
@@ -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} 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';\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
|
|
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,
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/commands",
|
|
3
|
-
"version": "1.35.0",
|
|
3
|
+
"version": "1.35.1-next.dc3f6d3c1.0",
|
|
4
4
|
"description": "Handles the commands menu.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"react-native": "src/index",
|
|
37
37
|
"wpScript": true,
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@wordpress/base-styles": "^6.11.0",
|
|
40
|
-
"@wordpress/components": "^30.8.0",
|
|
41
|
-
"@wordpress/data": "^10.35.0",
|
|
42
|
-
"@wordpress/element": "^6.35.0",
|
|
43
|
-
"@wordpress/i18n": "^6.8.0",
|
|
44
|
-
"@wordpress/icons": "^11.2.0",
|
|
45
|
-
"@wordpress/keyboard-shortcuts": "^5.35.0",
|
|
46
|
-
"@wordpress/private-apis": "^1.35.0",
|
|
39
|
+
"@wordpress/base-styles": "^6.11.1-next.dc3f6d3c1.0",
|
|
40
|
+
"@wordpress/components": "^30.8.2-next.dc3f6d3c1.0",
|
|
41
|
+
"@wordpress/data": "^10.35.1-next.dc3f6d3c1.0",
|
|
42
|
+
"@wordpress/element": "^6.35.1-next.dc3f6d3c1.0",
|
|
43
|
+
"@wordpress/i18n": "^6.8.1-next.dc3f6d3c1.0",
|
|
44
|
+
"@wordpress/icons": "^11.2.1-next.dc3f6d3c1.0",
|
|
45
|
+
"@wordpress/keyboard-shortcuts": "^5.35.1-next.dc3f6d3c1.0",
|
|
46
|
+
"@wordpress/private-apis": "^1.35.1-next.dc3f6d3c1.0",
|
|
47
47
|
"clsx": "^2.1.1",
|
|
48
48
|
"cmdk": "^1.0.0"
|
|
49
49
|
},
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "f73b5e69b34fbaccfb8c47783f4f993059ff1a41"
|
|
58
58
|
}
|
|
@@ -20,6 +20,7 @@ import {
|
|
|
20
20
|
Modal,
|
|
21
21
|
TextHighlight,
|
|
22
22
|
__experimentalHStack as HStack,
|
|
23
|
+
privateApis as componentsPrivateApis,
|
|
23
24
|
} from '@wordpress/components';
|
|
24
25
|
import {
|
|
25
26
|
store as keyboardShortcutsStore,
|
|
@@ -31,6 +32,9 @@ import { Icon, search as inputIcon } from '@wordpress/icons';
|
|
|
31
32
|
* Internal dependencies
|
|
32
33
|
*/
|
|
33
34
|
import { store as commandsStore } from '../store';
|
|
35
|
+
import { unlock } from '../lock-unlock';
|
|
36
|
+
|
|
37
|
+
const { withIgnoreIMEEvents } = unlock( componentsPrivateApis );
|
|
34
38
|
|
|
35
39
|
const inputLabel = __( 'Search commands and settings' );
|
|
36
40
|
|
|
@@ -177,7 +181,6 @@ function CommandInput( { isOpen, search, setSearch } ) {
|
|
|
177
181
|
onValueChange={ setSearch }
|
|
178
182
|
placeholder={ inputLabel }
|
|
179
183
|
aria-activedescendant={ selectedItemId }
|
|
180
|
-
icon={ search }
|
|
181
184
|
/>
|
|
182
185
|
);
|
|
183
186
|
}
|
|
@@ -210,7 +213,7 @@ export function CommandMenu() {
|
|
|
210
213
|
useShortcut(
|
|
211
214
|
'core/commands',
|
|
212
215
|
/** @type {import('react').KeyboardEventHandler} */
|
|
213
|
-
( event ) => {
|
|
216
|
+
withIgnoreIMEEvents( ( event ) => {
|
|
214
217
|
// Bails to avoid obscuring the effect of the preceding handler(s).
|
|
215
218
|
if ( event.defaultPrevented ) {
|
|
216
219
|
return;
|
|
@@ -222,7 +225,7 @@ export function CommandMenu() {
|
|
|
222
225
|
} else {
|
|
223
226
|
open();
|
|
224
227
|
}
|
|
225
|
-
},
|
|
228
|
+
} ),
|
|
226
229
|
{
|
|
227
230
|
bindGlobal: true,
|
|
228
231
|
}
|
|
@@ -245,19 +248,6 @@ export function CommandMenu() {
|
|
|
245
248
|
return false;
|
|
246
249
|
}
|
|
247
250
|
|
|
248
|
-
const onKeyDown = ( event ) => {
|
|
249
|
-
if (
|
|
250
|
-
// Ignore keydowns from IMEs
|
|
251
|
-
event.nativeEvent.isComposing ||
|
|
252
|
-
// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
|
|
253
|
-
// is `isComposing=false`, even though it's technically still part of the composition.
|
|
254
|
-
// These can only be detected by keyCode.
|
|
255
|
-
event.keyCode === 229
|
|
256
|
-
) {
|
|
257
|
-
event.preventDefault();
|
|
258
|
-
}
|
|
259
|
-
};
|
|
260
|
-
|
|
261
251
|
const isLoading = Object.values( loaders ).some( Boolean );
|
|
262
252
|
|
|
263
253
|
return (
|
|
@@ -269,7 +259,7 @@ export function CommandMenu() {
|
|
|
269
259
|
contentLabel={ __( 'Command palette' ) }
|
|
270
260
|
>
|
|
271
261
|
<div className="commands-command-menu__container">
|
|
272
|
-
<Command label={ inputLabel }
|
|
262
|
+
<Command label={ inputLabel }>
|
|
273
263
|
<div className="commands-command-menu__header">
|
|
274
264
|
<Icon
|
|
275
265
|
className="commands-command-menu__header-search-icon"
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@use "@wordpress/base-styles/variables" as *;
|
|
3
3
|
@use "@wordpress/base-styles/colors" as *;
|
|
4
4
|
|
|
5
|
-
//
|
|
5
|
+
// Here we extend the modal styles to be tighter, and to the center. Because the palette uses the modal as a container.
|
|
6
6
|
.commands-command-menu {
|
|
7
7
|
border-radius: $grid-unit-05;
|
|
8
8
|
width: calc(100% - #{$grid-unit-40});
|
|
@@ -116,11 +116,13 @@
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
[cmdk-root] > [cmdk-list] {
|
|
119
|
-
max-height:
|
|
119
|
+
max-height: $palette-max-height; // Specific to not have commands overflow oddly.
|
|
120
120
|
overflow: auto;
|
|
121
121
|
|
|
122
122
|
// Ensures there is always padding bottom on the last group, when there are commands.
|
|
123
|
-
&
|
|
123
|
+
&
|
|
124
|
+
[cmdk-list-sizer] > [cmdk-group]:last-child
|
|
125
|
+
[cmdk-group-items]:not(:empty) {
|
|
124
126
|
padding-bottom: $grid-unit-10;
|
|
125
127
|
}
|
|
126
128
|
|