newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/dist/cjs/autocomplete-with-suggestions/index.js

@@ -4,7 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _components = require("@wordpress/components");
 var _htmlEntities = require("@wordpress/html-entities");
@@ -14,52 +18,69 @@ var _url = require("@wordpress/url");
 var _ = require("../");
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } /**
  * WordPress dependencies
- */
-
-/**
+ */ /**
  * External dependencies.
  */
-
-const AutocompleteWithSuggestions = ({
-  fetchSavedPosts = false,
-  // If passed, will use this function to fetch saved data.
-  fetchSuggestions = false,
-  // If passed, will use this function to fetch suggestions data.
-  help = (0, _i18n.__)('Begin typing search term, click autocomplete result to select.', 'newspack-plugin'),
-  hideHelp = false,
-  // If true, all help text will be hidden.
-  label = (0, _i18n.__)('Search', 'newspack-plugin'),
-  maxItemsToSuggest = 0,
-  // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
-  multiSelect = false,
-  // If true, component can select multiple values at once.
-  onChange = false,
-  // Function to call when selections change.
-  onPostTypeChange = false,
-  // Funciton to call when the post type selector is changed.
-  postTypes = [{
-    slug: 'post',
-    label: 'Post'
-  }],
-  // If passed, will render a selector to change the post type queried for suggestions.
-  postTypeLabel = (0, _i18n.__)('item', 'newspack-plugin'),
-  // String to describe the data being shown.
-  postTypeLabelPlural = (0, _i18n.__)('items', 'newspack-plugin'),
-  // Plural string to describe the data being shown.
-  selectedItems = [],
-  // Array of saved items.
-  selectedPost = 0,
-  // Legacy prop when single-select was the only option.
-  suggestionsToFetch = 10 // Number of suggestions to fetch per query.
-}) => {
-  const [isLoading, setIsLoading] = (0, _element.useState)(true);
-  const [isLoadingMore, setIsLoadingMore] = (0, _element.useState)(false);
-  const [suggestions, setSuggestions] = (0, _element.useState)([]);
-  const [maxSuggestions, setMaxSuggestions] = (0, _element.useState)(0);
-  const [postTypeToSearch, setPostTypeToSearch] = (0, _element.useState)(postTypes[0].slug);
-  const classNames = ['newspack-autocomplete-with-suggestions'];
+var AutocompleteWithSuggestions = function AutocompleteWithSuggestions(_ref) {
+  var _ref$fetchSavedPosts = _ref.fetchSavedPosts,
+    fetchSavedPosts = _ref$fetchSavedPosts === void 0 ? false : _ref$fetchSavedPosts,
+    _ref$fetchSuggestions = _ref.fetchSuggestions,
+    fetchSuggestions = _ref$fetchSuggestions === void 0 ? false : _ref$fetchSuggestions,
+    _ref$help = _ref.help,
+    help = _ref$help === void 0 ? (0, _i18n.__)('Begin typing search term, click autocomplete result to select.', 'newspack-plugin') : _ref$help,
+    _ref$hideHelp = _ref.hideHelp,
+    hideHelp = _ref$hideHelp === void 0 ? false : _ref$hideHelp,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? (0, _i18n.__)('Search', 'newspack-plugin') : _ref$label,
+    _ref$maxItemsToSugges = _ref.maxItemsToSuggest,
+    maxItemsToSuggest = _ref$maxItemsToSugges === void 0 ? 0 : _ref$maxItemsToSugges,
+    _ref$multiSelect = _ref.multiSelect,
+    multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? false : _ref$onChange,
+    _ref$onPostTypeChange = _ref.onPostTypeChange,
+    onPostTypeChange = _ref$onPostTypeChange === void 0 ? false : _ref$onPostTypeChange,
+    _ref$postTypes = _ref.postTypes,
+    postTypes = _ref$postTypes === void 0 ? [{
+      slug: 'post',
+      label: 'Post'
+    }] : _ref$postTypes,
+    _ref$postTypeLabel = _ref.postTypeLabel,
+    postTypeLabel = _ref$postTypeLabel === void 0 ? (0, _i18n.__)('item', 'newspack-plugin') : _ref$postTypeLabel,
+    _ref$postTypeLabelPlu = _ref.postTypeLabelPlural,
+    postTypeLabelPlural = _ref$postTypeLabelPlu === void 0 ? (0, _i18n.__)('items', 'newspack-plugin') : _ref$postTypeLabelPlu,
+    _ref$selectedItems = _ref.selectedItems,
+    selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
+    _ref$selectedPost = _ref.selectedPost,
+    selectedPost = _ref$selectedPost === void 0 ? 0 : _ref$selectedPost,
+    _ref$suggestionsToFet = _ref.suggestionsToFetch,
+    suggestionsToFetch = _ref$suggestionsToFet === void 0 ? 10 : _ref$suggestionsToFet;
+  var _useState = (0, _element.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = (0, _element.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isLoadingMore = _useState4[0],
+    setIsLoadingMore = _useState4[1];
+  var _useState5 = (0, _element.useState)([]),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    suggestions = _useState6[0],
+    setSuggestions = _useState6[1];
+  var _useState7 = (0, _element.useState)(0),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    maxSuggestions = _useState8[0],
+    setMaxSuggestions = _useState8[1];
+  var _useState9 = (0, _element.useState)(postTypes[0].slug),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    postTypeToSearch = _useState0[0],
+    setPostTypeToSearch = _useState0[1];
+  var classNames = ['newspack-autocomplete-with-suggestions'];
   if (hideHelp) {
     classNames.push('hide-help');
   }
@@ -67,96 +88,143 @@ const AutocompleteWithSuggestions = ({
   /**
    * Fetch recent posts to show as suggestions.
    */
-  (0, _element.useEffect)(() => {
+  (0, _element.useEffect)(function () {
     if (onPostTypeChange) {
       onPostTypeChange(postTypeToSearch);
     }
     setIsLoading(true);
-    handleFetchSuggestions(null, 0, postTypeToSearch).then(_suggestions => {
+    handleFetchSuggestions(null, 0, postTypeToSearch).then(function (_suggestions) {
       if (0 < _suggestions.length) {
         setSuggestions(_suggestions);
       }
-    }).finally(() => setIsLoading(false));
+    })["finally"](function () {
+      return setIsLoading(false);
+    });
   }, [postTypeToSearch]);
 
   /**
    * Fetch more suggestions.
    */
-  (0, _element.useEffect)(() => {
+  (0, _element.useEffect)(function () {
     if (isLoadingMore) {
-      handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
+      handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(function (_suggestions) {
         if (0 < _suggestions.length) {
           setSuggestions(suggestions.concat(_suggestions));
         }
-      }).finally(() => setIsLoadingMore(false));
+      })["finally"](function () {
+        return setIsLoadingMore(false);
+      });
     }
   }, [isLoadingMore]);
 
   /**
    * If passed a `fetchSavedPosts` prop, use that, otherwise, build it based on the selected post type.
    */
-  const handleFetchSaved = fetchSavedPosts ? fetchSavedPosts : async (postIds = [], searchSlug = null) => {
-    const postTypeSlug = searchSlug || postTypeToSearch;
-    const endpoint = 'post' === postTypeSlug || 'page' === postTypeSlug ? postTypeSlug + 's' // Default post type endpoints are plural.
-    : postTypeSlug; // Custom post type endpoints are singular.
-    const posts = await (0, _apiFetch.default)({
-      path: (0, _url.addQueryArgs)('/wp/v2/' + endpoint, {
-        per_page: 100,
-        include: postIds.join(','),
-        _fields: 'id,title'
-      })
-    });
-    return posts.map(post => ({
-      value: parseInt(post.id),
-      label: (0, _htmlEntities.decodeEntities)(post.title) || (0, _i18n.__)('(no title)', 'newspack-plugin')
-    }));
-  };
+  var handleFetchSaved = fetchSavedPosts ? fetchSavedPosts : /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee() {
+    var postIds,
+      searchSlug,
+      postTypeSlug,
+      endpoint,
+      posts,
+      _args = arguments;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          postIds = _args.length > 0 && _args[0] !== undefined ? _args[0] : [];
+          searchSlug = _args.length > 1 && _args[1] !== undefined ? _args[1] : null;
+          postTypeSlug = searchSlug || postTypeToSearch;
+          endpoint = 'post' === postTypeSlug || 'page' === postTypeSlug ? postTypeSlug + 's' // Default post type endpoints are plural.
+          : postTypeSlug; // Custom post type endpoints are singular.
+          _context.n = 1;
+          return (0, _apiFetch["default"])({
+            path: (0, _url.addQueryArgs)('/wp/v2/' + endpoint, {
+              per_page: 100,
+              include: postIds.join(','),
+              _fields: 'id,title'
+            })
+          });
+        case 1:
+          posts = _context.v;
+          return _context.a(2, posts.map(function (post) {
+            return {
+              value: parseInt(post.id),
+              label: (0, _htmlEntities.decodeEntities)(post.title) || (0, _i18n.__)('(no title)', 'newspack-plugin')
+            };
+          }));
+      }
+    }, _callee);
+  }));
 
   /**
    * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
    */
-  const handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : async (search = null, offset = 0, searchSlug = null) => {
-    const postTypeSlug = searchSlug || postTypeToSearch;
-    const endpoint = 'post' === postTypeSlug || 'page' === postTypeSlug ? postTypeSlug + 's' // Default post type endpoints are plural.
-    : postTypeSlug; // Custom post type endpoints are singular.
-    const response = await (0, _apiFetch.default)({
-      parse: false,
-      path: (0, _url.addQueryArgs)('/wp/v2/' + endpoint, {
-        search,
-        offset,
-        per_page: suggestionsToFetch,
-        _fields: 'id,title'
-      })
-    });
-    const total = parseInt(response.headers.get('x-wp-total') || 0);
-    const posts = await response.json();
-    setMaxSuggestions(total);
+  var handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var search,
+      offset,
+      searchSlug,
+      postTypeSlug,
+      endpoint,
+      response,
+      total,
+      posts,
+      _args2 = arguments;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          search = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : null;
+          offset = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : 0;
+          searchSlug = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : null;
+          postTypeSlug = searchSlug || postTypeToSearch;
+          endpoint = 'post' === postTypeSlug || 'page' === postTypeSlug ? postTypeSlug + 's' // Default post type endpoints are plural.
+          : postTypeSlug; // Custom post type endpoints are singular.
+          _context2.n = 1;
+          return (0, _apiFetch["default"])({
+            parse: false,
+            path: (0, _url.addQueryArgs)('/wp/v2/' + endpoint, {
+              search: search,
+              offset: offset,
+              per_page: suggestionsToFetch,
+              _fields: 'id,title'
+            })
+          });
+        case 1:
+          response = _context2.v;
+          total = parseInt(response.headers.get('x-wp-total') || 0);
+          _context2.n = 2;
+          return response.json();
+        case 2:
+          posts = _context2.v;
+          setMaxSuggestions(total);
 
-    // Format suggestions for FormTokenField display.
-    return posts.reduce((acc, post) => {
-      acc.push({
-        value: parseInt(post.id),
-        label: (0, _htmlEntities.decodeEntities)(post?.title.rendered) || (0, _i18n.__)('(no title)', 'newspack-plugin')
-      });
-      return acc;
-    }, []);
-  };
+          // Format suggestions for FormTokenField display.
+          return _context2.a(2, posts.reduce(function (acc, post) {
+            acc.push({
+              value: parseInt(post.id),
+              label: (0, _htmlEntities.decodeEntities)(post === null || post === void 0 ? void 0 : post.title.rendered) || (0, _i18n.__)('(no title)', 'newspack-plugin')
+            });
+            return acc;
+          }, []));
+      }
+    }, _callee2);
+  }));
 
   /**
    * Intercept onChange callback so we can decide whether to allow multiple selections.
    */
-  const handleOnChange = _selections => {
+  var handleOnChange = function handleOnChange(_selections) {
     // If only allowing one selection, just return the one selected item.
     if (!multiSelect) {
       return onChange(_selections);
     }
 
     // Handle legacy `selectedPost` prop.
-    const selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
+    var selections = selectedPost ? [].concat((0, _toConsumableArray2["default"])(selectedItems), [selectedPost]) : (0, _toConsumableArray2["default"])(selectedItems);
 
     // Loop through new selections to determine whether to add or remove them.
-    _selections.forEach(_selection => {
-      const existingSelection = selections.findIndex(selection => parseInt(selection.value) === parseInt(_selection.value));
+    _selections.forEach(function (_selection) {
+      var existingSelection = selections.findIndex(function (selection) {
+        return parseInt(selection.value) === parseInt(_selection.value);
+      });
       if (-1 < existingSelection) {
         // If the selection is already selected, remove it.
         selections.splice(existingSelection, 1);
@@ -167,19 +235,20 @@ const AutocompleteWithSuggestions = ({
     });
 
     // Include currently selected post type in selection results.
-    onChange(selections.map(selection => ({
-      ...selection,
-      postType: postTypeToSearch
-    })));
+    onChange(selections.map(function (selection) {
+      return _objectSpread(_objectSpread({}, selection), {}, {
+        postType: postTypeToSearch
+      });
+    }));
   };
 
   /**
    * Render selected item(s) for this component. Clicking on a selection deselects it.
    */
-  const renderSelections = () => {
+  var renderSelections = function renderSelections() {
     // Handle legacy `selectedPost` prop.
-    const selections = selectedPost ? [...selectedItems, selectedPost] : selectedItems;
-    const selectedMessage = multiSelect ? (0, _i18n.sprintf)(
+    var selections = selectedPost ? [].concat((0, _toConsumableArray2["default"])(selectedItems), [selectedPost]) : selectedItems;
+    var selectedMessage = multiSelect ? (0, _i18n.sprintf)(
     // Translators: %1: the length of selections. %2: the selection leabel.
     (0, _i18n.__)('%1$s %2$s selected', 'newspack-plugin'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) : (0, _i18n.sprintf)(
     // Translators: %s: The label for the selection.
@@ -189,34 +258,46 @@ const AutocompleteWithSuggestions = ({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "newspack-autocomplete-with-suggestions__label",
         children: [selectedMessage, 1 < selections.length && (0, _i18n._x)(' – ', 'separator character', 'newspack-plugin'), 1 < selections.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          onClick: () => onChange([]),
+          onClick: function onClick() {
+            return onChange([]);
+          },
           isLink: true,
           isDestructive: true,
           children: (0, _i18n.__)('Clear all', 'newspack-plugin')
         })]
-      }), selections.map(selection => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        className: "newspack-autocomplete-with-suggestions__selected-item-button",
-        isTertiary: true,
-        onClick: () => onChange(selections.filter(_selection => _selection.value !== selection.value)),
-        children: selection.label
-      }, selection.value))]
+      }), selections.map(function (selection) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          className: "newspack-autocomplete-with-suggestions__selected-item-button",
+          isTertiary: true,
+          onClick: function onClick() {
+            return onChange(selections.filter(function (_selection) {
+              return _selection.value !== selection.value;
+            }));
+          },
+          children: selection.label
+        }, selection.value);
+      })]
     });
   };
 
   /**
    * Render post type select dropdown.
    */
-  const renderPostTypeSelect = () => {
+  var renderPostTypeSelect = function renderPostTypeSelect() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
       label: (0, _i18n.sprintf)(
       // Translators: %s: The name of the type.
       (0, _i18n.__)('%s type', 'newspack-plugin'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
       value: postTypeToSearch,
-      options: postTypes.map(postTypeOption => ({
-        label: postTypeOption.label,
-        value: postTypeOption.slug
-      })),
-      onChange: _postType => setPostTypeToSearch(_postType)
+      options: postTypes.map(function (postTypeOption) {
+        return {
+          label: postTypeOption.label,
+          value: postTypeOption.slug
+        };
+      }),
+      onChange: function onChange(_postType) {
+        return setPostTypeToSearch(_postType);
+      }
     });
   };
 
@@ -225,19 +306,25 @@ const AutocompleteWithSuggestions = ({
    *
    * @param {Object} suggestion Suggestion object with value and label keys.
    */
-  const renderSuggestion = suggestion => {
+  var renderSuggestion = function renderSuggestion(suggestion) {
     if (multiSelect) {
-      const selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
-      const isSelected = !!selections.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label);
+      var selections = selectedPost ? [].concat((0, _toConsumableArray2["default"])(selectedItems), [selectedPost]) : (0, _toConsumableArray2["default"])(selectedItems);
+      var isSelected = !!selections.find(function (_selection) {
+        return parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label;
+      });
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: isSelected,
-        onChange: () => handleOnChange([suggestion]),
+        onChange: function onChange() {
+          return handleOnChange([suggestion]);
+        },
         label: suggestion.label
       }, suggestion.value);
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
       isLink: true,
-      onClick: () => handleOnChange([suggestion]),
+      onClick: function onClick() {
+        return handleOnChange([suggestion]);
+      },
       children: suggestion.label
     }, suggestion.value);
   };
@@ -245,11 +332,11 @@ const AutocompleteWithSuggestions = ({
   /**
    * Render a list of suggestions that can be clicked to select instead of searching by title.
    */
-  const renderSuggestions = () => {
+  var renderSuggestions = function renderSuggestions() {
     if (0 === suggestions.length) {
       return null;
     }
-    const className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
+    var className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [!hideHelp && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: "newspack-autocomplete-with-suggestions__label",
@@ -259,7 +346,9 @@ const AutocompleteWithSuggestions = ({
         children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           disabled: isLoadingMore,
           isSecondary: true,
-          onClick: () => setIsLoadingMore(true),
+          onClick: function onClick() {
+            return setIsLoadingMore(true);
+          },
           children: isLoadingMore ? (0, _i18n.__)('Loading…', 'newspack-plugin') : (0, _i18n.__)('Load more', 'newspack-plugin')
         })]
       })]
@@ -270,8 +359,22 @@ const AutocompleteWithSuggestions = ({
     children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.AutocompleteTokenField, {
       tokens: [],
       onChange: handleOnChange,
-      fetchSuggestions: async search => handleFetchSuggestions(search, 0, postTypeToSearch),
-      fetchSavedInfo: postIds => handleFetchSaved(postIds),
+      fetchSuggestions: (/*#__PURE__*/function () {
+        var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee3(search) {
+          return _regenerator().w(function (_context3) {
+            while (1) switch (_context3.n) {
+              case 0:
+                return _context3.a(2, handleFetchSuggestions(search, 0, postTypeToSearch));
+            }
+          }, _callee3);
+        }));
+        return function (_x2) {
+          return _ref4.apply(this, arguments);
+        };
+      }()),
+      fetchSavedInfo: function fetchSavedInfo(postIds) {
+        return handleFetchSaved(postIds);
+      },
       label: label,
       loading: isLoading,
       help: !hideHelp && help,
@@ -279,4 +382,4 @@ const AutocompleteWithSuggestions = ({
     }), renderSuggestions()]
   });
 };
-var _default = exports.default = AutocompleteWithSuggestions;
+var _default = exports["default"] = AutocompleteWithSuggestions;

package/dist/cjs/badge/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Badge component
+ */
+var Badge = function Badge(_ref) {
+  var text = _ref.text,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 'default' : _ref$level;
+  var classes = (0, _classnames["default"])('newspack-badge', "is-".concat(level));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: classes,
+    children: text
+  });
+};
+var _default = exports["default"] = Badge;

package/dist/cjs/badge/style.scss

@@ -0,0 +1,36 @@
+/**
+ * Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+$badge-colors: (
+	"info": colors.$primary-600,
+	"warning": wp-colors.$alert-yellow,
+	"error": wp-colors.$alert-red,
+	"success": wp-colors.$alert-green,
+);
+
+.newspack-badge {
+	background-color: color-mix(in srgb, wp-colors.$white 90%, var(--base-color));
+	border-radius: 2px;
+	color: color-mix(in srgb, wp-colors.$black 50%, var(--base-color));
+	display: block;
+	flex: 0 0 auto;
+	font-size: 12px;
+	line-height: 1.5;
+	padding: 1px 4px;
+
+	&:where(.is-default) {
+		background-color: wp-colors.$gray-100;
+		color: wp-colors.$gray-800;
+	}
+
+	// Generate color variants
+	@each $type, $color in $badge-colors {
+		&.is-#{$type} {
+			--base-color: #{$color};
+		}
+	}
+}

package/dist/cjs/box-contrast/index.js

@@ -1,49 +1,53 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _color = require("../utils/color");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["hexColor", "isInverted", "children"];
 /**
  * Box Contrast
  *
  * can be used to dynamically assign black or white color/background-color based on a hex color.
  * Black/white can be assigned to either text or background-color.
  */
-
 /**
  * Dependencies
  */
-
 /**
  * Box Contrast component
  *
  * @return JSX.Element
- */const BoxContrast = ({
-  hexColor,
-  isInverted = false,
-  children,
-  ...props
-}) => {
-  let contrastColor;
+ */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BoxContrast = function BoxContrast(_ref) {
+  var hexColor = _ref.hexColor,
+    _ref$isInverted = _ref.isInverted,
+    isInverted = _ref$isInverted === void 0 ? false : _ref$isInverted,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contrastColor;
   if (hexColor === '#f0f0f0') {
     contrastColor = '#1e1e1e';
   } else {
     contrastColor = (0, _color.getContrast)(hexColor);
   }
-  const style = isInverted ? {
+  var style = isInverted ? {
     color: hexColor,
     backgoundColor: contrastColor
   } : {
     backgroundColor: hexColor,
     color: contrastColor
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
     style: style,
     children: children
-  });
+  }));
 };
-var _default = exports.default = BoxContrast;
+var _default = exports["default"] = BoxContrast;