@wordpress/commands 1.32.0 → 1.32.1-next.b8c8708f3.0

package/README.md

@@ -196,7 +196,7 @@ _Usage_
 
 ```js
 import { useCommands } from '@wordpress/commands';
-import { plus, edit } from '@wordpress/icons';
+import { plus, pencil } from '@wordpress/icons';
 
 useCommands( [
 	{
@@ -211,7 +211,7 @@ useCommands( [
 	{
 		name: 'myplugin/edit-posts',
 		label: __( 'Edit posts' ),
-		icon: edit,
+		icon: pencil,
 		callback: ( { close } ) => {
 			document.location.href = 'edit.php';
 			close();

package/build/components/command-menu.js

@@ -1,291 +1,306 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var command_menu_exports = {};
+__export(command_menu_exports, {
+  CommandMenu: () => CommandMenu,
+  CommandMenuGroup: () => CommandMenuGroup,
+  CommandMenuLoaderWrapper: () => CommandMenuLoaderWrapper
 });
-exports.CommandMenu = CommandMenu;
-exports.CommandMenuGroup = CommandMenuGroup;
-exports.CommandMenuLoaderWrapper = CommandMenuLoaderWrapper;
-var _cmdk = require("cmdk");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _data = require("@wordpress/data");
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
-var _icons = require("@wordpress/icons");
-var _store = require("../store");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const inputLabel = (0, _i18n.__)('Search commands and settings');
-function CommandMenuLoader({
-  name,
-  search,
-  hook,
-  setLoader,
-  close
-}) {
-  var _hook;
-  const {
-    isLoading,
-    commands = []
-  } = (_hook = hook({
-    search
-  })) !== null && _hook !== void 0 ? _hook : {};
-  (0, _element.useEffect)(() => {
+module.exports = __toCommonJS(command_menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cmdk = require("cmdk");
+var import_clsx = __toESM(require("clsx"));
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_keyboard_shortcuts = require("@wordpress/keyboard-shortcuts");
+var import_icons = require("@wordpress/icons");
+var import_store = require("../store");
+const inputLabel = (0, import_i18n.__)("Search commands and settings");
+function CommandMenuLoader({ name, search, hook, setLoader, close }) {
+  const { isLoading, commands = [] } = hook({ search }) ?? {};
+  (0, import_element.useEffect)(() => {
     setLoader(name, isLoading);
   }, [setLoader, name, isLoading]);
   if (!commands.length) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: commands.map(command => {
-      var _command$searchLabel;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cmdk.Command.Item, {
-        value: (_command$searchLabel = command.searchLabel) !== null && _command$searchLabel !== void 0 ? _command$searchLabel : command.label,
-        keywords: command.keywords,
-        onSelect: () => command.callback({
-          close
-        }),
-        id: command.name,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: commands.map((command) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_cmdk.Command.Item,
+    {
+      value: command.searchLabel ?? command.label,
+      keywords: command.keywords,
+      onSelect: () => command.callback({ close }),
+      id: command.name,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_components.__experimentalHStack,
+        {
           alignment: "left",
-          className: (0, _clsx.default)('commands-command-menu__item', {
-            'has-icon': command.icon
+          className: (0, import_clsx.default)("commands-command-menu__item", {
+            "has-icon": command.icon
           }),
-          children: [command.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-            icon: command.icon
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextHighlight, {
-              text: command.label,
-              highlight: search
-            })
-          })]
-        })
-      }, command.name);
-    })
-  });
+          children: [
+            command.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: command.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.TextHighlight,
+              {
+                text: command.label,
+                highlight: search
+              }
+            ) })
+          ]
+        }
+      )
+    },
+    command.name
+  )) });
 }
-function CommandMenuLoaderWrapper({
-  hook,
-  search,
-  setLoader,
-  close
-}) {
-  // The "hook" prop is actually a custom React hook
-  // so to avoid breaking the rules of hooks
-  // the CommandMenuLoaderWrapper component need to be
-  // remounted on each hook prop change
-  // We use the key state to make sure we do that properly.
-  const currentLoaderRef = (0, _element.useRef)(hook);
-  const [key, setKey] = (0, _element.useState)(0);
-  (0, _element.useEffect)(() => {
+function CommandMenuLoaderWrapper({ hook, search, setLoader, close }) {
+  const currentLoaderRef = (0, import_element.useRef)(hook);
+  const [key, setKey] = (0, import_element.useState)(0);
+  (0, import_element.useEffect)(() => {
     if (currentLoaderRef.current !== hook) {
       currentLoaderRef.current = hook;
-      setKey(prevKey => prevKey + 1);
+      setKey((prevKey) => prevKey + 1);
     }
   }, [hook]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CommandMenuLoader, {
-    hook: currentLoaderRef.current,
-    search: search,
-    setLoader: setLoader,
-    close: close
-  }, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CommandMenuLoader,
+    {
+      hook: currentLoaderRef.current,
+      search,
+      setLoader,
+      close
+    },
+    key
+  );
 }
-function CommandMenuGroup({
-  isContextual,
-  search,
-  setLoader,
-  close
-}) {
-  const {
-    commands,
-    loaders
-  } = (0, _data.useSelect)(select => {
-    const {
-      getCommands,
-      getCommandLoaders
-    } = select(_store.store);
-    return {
-      commands: getCommands(isContextual),
-      loaders: getCommandLoaders(isContextual)
-    };
-  }, [isContextual]);
+function CommandMenuGroup({ isContextual, search, setLoader, close }) {
+  const { commands, loaders } = (0, import_data.useSelect)(
+    (select) => {
+      const { getCommands, getCommandLoaders } = select(import_store.store);
+      return {
+        commands: getCommands(isContextual),
+        loaders: getCommandLoaders(isContextual)
+      };
+    },
+    [isContextual]
+  );
   if (!commands.length && !loaders.length) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_cmdk.Command.Group, {
-    children: [commands.map(command => {
-      var _command$searchLabel2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cmdk.Command.Item, {
-        value: (_command$searchLabel2 = command.searchLabel) !== null && _command$searchLabel2 !== void 0 ? _command$searchLabel2 : command.label,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command.Group, { children: [
+    commands.map((command) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_cmdk.Command.Item,
+      {
+        value: command.searchLabel ?? command.label,
         keywords: command.keywords,
-        onSelect: () => command.callback({
-          close
-        }),
+        onSelect: () => command.callback({ close }),
         id: command.name,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-          alignment: "left",
-          className: (0, _clsx.default)('commands-command-menu__item', {
-            'has-icon': command.icon
-          }),
-          children: [command.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-            icon: command.icon
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextHighlight, {
-              text: command.label,
-              highlight: search
-            })
-          })]
-        })
-      }, command.name);
-    }), loaders.map(loader => /*#__PURE__*/(0, _jsxRuntime.jsx)(CommandMenuLoaderWrapper, {
-      hook: loader.hook,
-      search: search,
-      setLoader: setLoader,
-      close: close
-    }, loader.name))]
-  });
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.__experimentalHStack,
+          {
+            alignment: "left",
+            className: (0, import_clsx.default)("commands-command-menu__item", {
+              "has-icon": command.icon
+            }),
+            children: [
+              command.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: command.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.TextHighlight,
+                {
+                  text: command.label,
+                  highlight: search
+                }
+              ) })
+            ]
+          }
+        )
+      },
+      command.name
+    )),
+    loaders.map((loader) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CommandMenuLoaderWrapper,
+      {
+        hook: loader.hook,
+        search,
+        setLoader,
+        close
+      },
+      loader.name
+    ))
+  ] });
 }
-function CommandInput({
-  isOpen,
-  search,
-  setSearch
-}) {
-  const commandMenuInput = (0, _element.useRef)();
-  const _value = (0, _cmdk.useCommandState)(state => state.value);
-  const selectedItemId = (0, _element.useMemo)(() => {
-    const item = document.querySelector(`[cmdk-item=""][data-value="${_value}"]`);
-    return item?.getAttribute('id');
+function CommandInput({ isOpen, search, setSearch }) {
+  const commandMenuInput = (0, import_element.useRef)();
+  const _value = (0, import_cmdk.useCommandState)((state) => state.value);
+  const selectedItemId = (0, import_element.useMemo)(() => {
+    const item = document.querySelector(
+      `[cmdk-item=""][data-value="${_value}"]`
+    );
+    return item?.getAttribute("id");
   }, [_value]);
-  (0, _element.useEffect)(() => {
-    // Focus the command palette input when mounting the modal.
+  (0, import_element.useEffect)(() => {
     if (isOpen) {
       commandMenuInput.current.focus();
     }
   }, [isOpen]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cmdk.Command.Input, {
-    ref: commandMenuInput,
-    value: search,
-    onValueChange: setSearch,
-    placeholder: inputLabel,
-    "aria-activedescendant": selectedItemId,
-    icon: search
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_cmdk.Command.Input,
+    {
+      ref: commandMenuInput,
+      value: search,
+      onValueChange: setSearch,
+      placeholder: inputLabel,
+      "aria-activedescendant": selectedItemId,
+      icon: search
+    }
+  );
 }
-
-/**
- * @ignore
- */
 function CommandMenu() {
-  const {
-    registerShortcut
-  } = (0, _data.useDispatch)(_keyboardShortcuts.store);
-  const [search, setSearch] = (0, _element.useState)('');
-  const isOpen = (0, _data.useSelect)(select => select(_store.store).isOpen(), []);
-  const {
-    open,
-    close
-  } = (0, _data.useDispatch)(_store.store);
-  const [loaders, setLoaders] = (0, _element.useState)({});
-  (0, _element.useEffect)(() => {
+  const { registerShortcut } = (0, import_data.useDispatch)(import_keyboard_shortcuts.store);
+  const [search, setSearch] = (0, import_element.useState)("");
+  const isOpen = (0, import_data.useSelect)(
+    (select) => select(import_store.store).isOpen(),
+    []
+  );
+  const { open, close } = (0, import_data.useDispatch)(import_store.store);
+  const [loaders, setLoaders] = (0, import_element.useState)({});
+  (0, import_element.useEffect)(() => {
     registerShortcut({
-      name: 'core/commands',
-      category: 'global',
-      description: (0, _i18n.__)('Open the command palette.'),
+      name: "core/commands",
+      category: "global",
+      description: (0, import_i18n.__)("Open the command palette."),
       keyCombination: {
-        modifier: 'primary',
-        character: 'k'
+        modifier: "primary",
+        character: "k"
       }
     });
   }, [registerShortcut]);
-  (0, _keyboardShortcuts.useShortcut)('core/commands', /** @type {import('react').KeyboardEventHandler} */
-  event => {
-    // Bails to avoid obscuring the effect of the preceding handler(s).
-    if (event.defaultPrevented) {
-      return;
-    }
-    event.preventDefault();
-    if (isOpen) {
-      close();
-    } else {
-      open();
+  (0, import_keyboard_shortcuts.useShortcut)(
+    "core/commands",
+    /** @type {import('react').KeyboardEventHandler} */
+    (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      if (isOpen) {
+        close();
+      } else {
+        open();
+      }
+    },
+    {
+      bindGlobal: true
     }
-  }, {
-    bindGlobal: true
-  });
-  const setLoader = (0, _element.useCallback)((name, value) => setLoaders(current => ({
-    ...current,
-    [name]: value
-  })), []);
+  );
+  const setLoader = (0, import_element.useCallback)(
+    (name, value) => setLoaders((current) => ({
+      ...current,
+      [name]: value
+    })),
+    []
+  );
   const closeAndReset = () => {
-    setSearch('');
+    setSearch("");
     close();
   };
   if (!isOpen) {
     return false;
   }
-  const onKeyDown = event => {
+  const onKeyDown = (event) => {
     if (
-    // Ignore keydowns from IMEs
-    event.nativeEvent.isComposing ||
-    // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
-    // is `isComposing=false`, even though it's technically still part of the composition.
-    // These can only be detected by keyCode.
-    event.keyCode === 229) {
+      // Ignore keydowns from IMEs
+      event.nativeEvent.isComposing || // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+      // is `isComposing=false`, even though it's technically still part of the composition.
+      // These can only be detected by keyCode.
+      event.keyCode === 229
+    ) {
       event.preventDefault();
     }
   };
   const isLoading = Object.values(loaders).some(Boolean);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
-    className: "commands-command-menu",
-    overlayClassName: "commands-command-menu__overlay",
-    onRequestClose: closeAndReset,
-    __experimentalHideHeader: true,
-    contentLabel: (0, _i18n.__)('Command palette'),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "commands-command-menu__container",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_cmdk.Command, {
-        label: inputLabel,
-        onKeyDown: onKeyDown,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "commands-command-menu__header",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CommandInput, {
-            search: search,
-            setSearch: setSearch,
-            isOpen: isOpen
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-            icon: _icons.search
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_cmdk.Command.List, {
-          label: (0, _i18n.__)('Command suggestions'),
-          children: [search && !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cmdk.Command.Empty, {
-            children: (0, _i18n.__)('No results found.')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CommandMenuGroup, {
-            search: search,
-            setLoader: setLoader,
-            close: closeAndReset,
-            isContextual: true
-          }), search && /*#__PURE__*/(0, _jsxRuntime.jsx)(CommandMenuGroup, {
-            search: search,
-            setLoader: setLoader,
-            close: closeAndReset
-          })]
-        })]
-      })
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Modal,
+    {
+      className: "commands-command-menu",
+      overlayClassName: "commands-command-menu__overlay",
+      onRequestClose: closeAndReset,
+      __experimentalHideHeader: true,
+      contentLabel: (0, import_i18n.__)("Command palette"),
+      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, onKeyDown, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "commands-command-menu__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icons.Icon,
+            {
+              className: "commands-command-menu__header-search-icon",
+              icon: import_icons.search
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CommandInput,
+            {
+              search,
+              setSearch,
+              isOpen
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command.List, { label: (0, import_i18n.__)("Command suggestions"), children: [
+          search && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Empty, { children: (0, import_i18n.__)("No results found.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CommandMenuGroup,
+            {
+              search,
+              setLoader,
+              close: closeAndReset,
+              isContextual: true
+            }
+          ),
+          search && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CommandMenuGroup,
+            {
+              search,
+              setLoader,
+              close: closeAndReset
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
 }
-//# sourceMappingURL=command-menu.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CommandMenu,
+  CommandMenuGroup,
+  CommandMenuLoaderWrapper
+});
+//# sourceMappingURL=command-menu.js.map