newspack-components 2.0.3 → 2.2.0

package/dist/cjs/autocomplete-tokenfield/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _lodash = require("lodash");
-
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * External dependencies
  */
@@ -33,10 +25,12 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
 /**
  * An multi-selecting, api-driven autocomplete input suitable for use in block attributes.
- */
-class AutocompleteTokenField extends _element.Component {
+ */class AutocompleteTokenField extends _element.Component {
   constructor(props) {
     super(props);
+    /**
+     * If the component has tokens passed in props, it should fetch info after it mounts.
+     */
     (0, _defineProperty2.default)(this, "isFetchingInfoOnLoad", () => {
       const {
         tokens,
@@ -49,13 +43,8 @@ class AutocompleteTokenField extends _element.Component {
       validValues: {},
       loading: this.isFetchingInfoOnLoad()
     };
-    this.debouncedUpdateSuggestions = (0, _lodash.debounce)(this.updateSuggestions, 500);
+    this.debouncedUpdateSuggestions = (0, _debounce.default)(this.updateSuggestions, 500);
   }
-  /**
-   * If the component has tokens passed in props, it should fetch info after it mounts.
-   */
-
-
   /**
    * When the component loads, fetch information about the tokens so we can populate
    * the tokens with the correct labels.
@@ -80,23 +69,21 @@ class AutocompleteTokenField extends _element.Component {
       });
     }
   }
+
   /**
    * Clean up any unfinished autocomplete api call requests.
    */
-
-
   componentWillUnmount() {
     delete this.suggestionsRequest;
     this.debouncedUpdateSuggestions.cancel();
   }
+
   /**
    * Get a list of labels for input values.
    *
    * @param {Array} values Array of values (ids, etc.).
    * @return {Array} array of valid labels corresponding to the values.
    */
-
-
   getLabelsForValues(values) {
     const {
       validValues
@@ -105,31 +92,26 @@ class AutocompleteTokenField extends _element.Component {
       if (!value) {
         return accumulator;
       }
-
       if (value.label) {
         return [...accumulator, value.label];
       }
-
       return validValues[value] ? [...accumulator, validValues[value]] : accumulator;
     }, []);
   }
+
   /**
    * Get a list of values for input labels.
    *
    * @param {Array} labels Array of labels from the tokens.
    * @return {Array} Array of valid values corresponding to the labels.
    */
-
-
   getValuesForLabels(labels) {
     const {
       returnFullObjects
     } = this.props; // If this prop is passed, return both the value and label. Otherwise, return just the label.
-
     const {
       validValues
     } = this.state;
-
     if (returnFullObjects) {
       return labels.reduce((acc, label) => {
         Object.keys(validValues).forEach(key => {
@@ -143,25 +125,21 @@ class AutocompleteTokenField extends _element.Component {
         return acc;
       }, []);
     }
-
     return labels.map(label => Object.keys(validValues).find(key => validValues[key] === label));
   }
+
   /**
    * Refresh the autocomplete dropdown.
    *
    * @param {string} input Input to fetch suggestions for
    */
-
-
   updateSuggestions(input) {
     const {
       fetchSuggestions
     } = this.props;
-
     if (!fetchSuggestions) {
       return;
     }
-
     this.setState({
       loading: true
     }, () => {
@@ -173,7 +151,6 @@ class AutocompleteTokenField extends _element.Component {
         if (this.suggestionsRequest !== request) {
           return;
         }
-
         const currentSuggestions = [...suggestions];
         const currentValidValues = {};
         suggestions.forEach(suggestion => {
@@ -194,37 +171,34 @@ class AutocompleteTokenField extends _element.Component {
       this.suggestionsRequest = request;
     });
   }
+
   /**
    * When a token is selected, we need to convert the string label into a recognized value suitable for saving as an attribute.
    *
    * @param {Array} tokenStrings An array of token label strings.
    */
-
-
   handleOnChange(tokenStrings) {
     const {
       onChange
     } = this.props;
     onChange(this.getValuesForLabels(tokenStrings));
   }
+
   /**
    * To populate the tokens, we need to convert the values into a human-readable label.
    *
    * @return {Array} An array of token label strings.
    */
-
-
   getTokens() {
     const {
       tokens
     } = this.props;
     return this.getLabelsForValues(tokens);
   }
+
   /**
    * Render.
    */
-
-
   render() {
     const {
       help,
@@ -250,8 +224,6 @@ class AutocompleteTokenField extends _element.Component {
       })]
     });
   }
-
 }
-
 var _default = AutocompleteTokenField;
 exports.default = _default;

package/dist/cjs/autocomplete-tokenfield/style.scss

@@ -2,16 +2,16 @@
  * Autocomplete Token Field
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-autocomplete-tokenfield {
 	position: relative;
 
 	.components-spinner {
+		margin: 8px;
 		position: absolute;
-		right: 1rem;
-		top: 1rem;
+		right: 0;
+		top: calc( 1.4em + 8px );
 	}
 
 	/* Workaround for hard-coded help text in FormTokenField. */
@@ -27,7 +27,7 @@
 	}
 
 	.newspack-autocomplete-tokenfield__help {
-		color: $gray-700;
+		color: wp-colors.$gray-700;
 		font-size: inherit;
 		margin-top: 0;
 	}
@@ -38,6 +38,6 @@
 	}
 
 	.components-button:focus:not( :disabled ) {
-		box-shadow: inset 0 0 0 2px $primary-500;
+		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
 	}
 }

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

@@ -1,36 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-
 var _components = require("@wordpress/components");
-
 var _htmlEntities = require("@wordpress/html-entities");
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _url = require("@wordpress/url");
-
 var _ = require("../");
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * WordPress dependencies
  */
 const __ = _i18n.__,
-      _x = _i18n._x;
-
+  _x = _i18n._x;
+/**
+ * External dependencies.
+ */
 const AutocompleteWithSuggestions = _ref => {
   let {
     fetchSavedPosts = false,
@@ -63,7 +54,6 @@ const AutocompleteWithSuggestions = _ref => {
     selectedPost = 0,
     // Legacy prop when single-select was the only option.
     suggestionsToFetch = 10 // Number of suggestions to fetch per query.
-
   } = _ref;
   const [isLoading, setIsLoading] = (0, _element.useState)(true);
   const [isLoadingMore, setIsLoadingMore] = (0, _element.useState)(false);
@@ -71,20 +61,17 @@ const AutocompleteWithSuggestions = _ref => {
   const [maxSuggestions, setMaxSuggestions] = (0, _element.useState)(0);
   const [postTypeToSearch, setPostTypeToSearch] = (0, _element.useState)(postTypes[0].slug);
   const classNames = ['newspack-autocomplete-with-suggestions'];
-
   if (hideHelp) {
     classNames.push('hide-help');
   }
+
   /**
    * Fetch recent posts to show as suggestions.
    */
-
-
   (0, _element.useEffect)(() => {
     if (onPostTypeChange) {
       onPostTypeChange(postTypeToSearch);
     }
-
     setIsLoading(true);
     handleFetchSuggestions(null, 0, postTypeToSearch).then(_suggestions => {
       if (0 < _suggestions.length) {
@@ -92,10 +79,10 @@ const AutocompleteWithSuggestions = _ref => {
       }
     }).finally(() => setIsLoading(false));
   }, [postTypeToSearch]);
+
   /**
    * Fetch more suggestions.
    */
-
   (0, _element.useEffect)(() => {
     if (isLoadingMore) {
       handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
@@ -105,17 +92,16 @@ const AutocompleteWithSuggestions = _ref => {
       }).finally(() => setIsLoadingMore(false));
     }
   }, [isLoadingMore]);
+
   /**
    * If passed a `fetchSavedPosts` prop, use that, otherwise, build it based on the selected post type.
    */
-
   const handleFetchSaved = fetchSavedPosts ? fetchSavedPosts : async function () {
     let postIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let searchSlug = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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,
@@ -128,10 +114,10 @@ const AutocompleteWithSuggestions = _ref => {
       label: (0, _htmlEntities.decodeEntities)(post.title) || __('(no title)', 'newspack')
     }));
   };
+
   /**
    * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
    */
-
   const handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : async function () {
     let search = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -139,7 +125,6 @@ const AutocompleteWithSuggestions = _ref => {
     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, {
@@ -151,32 +136,33 @@ const AutocompleteWithSuggestions = _ref => {
     });
     const total = parseInt(response.headers.get('x-wp-total') || 0);
     const posts = await response.json();
-    setMaxSuggestions(total); // Format suggestions for FormTokenField display.
+    setMaxSuggestions(total);
 
+    // Format suggestions for FormTokenField display.
     return posts.reduce((acc, post) => {
       acc.push({
         value: parseInt(post.id),
-        label: (0, _htmlEntities.decodeEntities)(post === null || post === void 0 ? void 0 : post.title.rendered) || __('(no title)', 'newspack')
+        label: (0, _htmlEntities.decodeEntities)(post?.title.rendered) || __('(no title)', 'newspack')
       });
       return acc;
     }, []);
   };
+
   /**
    * Intercept onChange callback so we can decide whether to allow multiple selections.
    */
-
   const 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]; // Loop through new selections to determine whether to add or remove them.
+    // Handle legacy `selectedPost` prop.
+    const selections = selectedPost ? [...selectedItems, selectedPost] : [...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));
-
       if (-1 < existingSelection) {
         // If the selection is already selected, remove it.
         selections.splice(existingSelection, 1);
@@ -184,23 +170,25 @@ const AutocompleteWithSuggestions = _ref => {
         // Otherwise, add it.
         selections.push(_selection);
       }
-    }); // Include currently selected post type in selection results.
-
+    });
 
-    onChange(selections.map(selection => ({ ...selection,
+    // Include currently selected post type in selection results.
+    onChange(selections.map(selection => ({
+      ...selection,
       postType: postTypeToSearch
     })));
   };
+
   /**
    * Render selected item(s) for this component. Clicking on a selection deselects it.
    */
-
-
   const renderSelections = () => {
     // Handle legacy `selectedPost` prop.
     const selections = selectedPost ? [...selectedItems, selectedPost] : selectedItems;
-    const selectedMessage = multiSelect ? (0, _i18n.sprintf)( // Translators: %1: the length of selections. %2: the selection leabel.
-    __('%1$s %2$s selected', 'newspack'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) : // Translators: %s: The label for the selection.
+    const selectedMessage = multiSelect ? (0, _i18n.sprintf)(
+    // Translators: %1: the length of selections. %2: the selection leabel.
+    __('%1$s %2$s selected', 'newspack'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) :
+    // Translators: %s: The label for the selection.
     (0, _i18n.sprintf)(__('Selected %s', 'newspack'), postTypeLabel);
     return (0, _jsxRuntime.jsxs)("div", {
       className: "newspack-autocomplete-with-suggestions__selected-items",
@@ -209,6 +197,7 @@ const AutocompleteWithSuggestions = _ref => {
         children: [selectedMessage, 1 < selections.length && _x(' – ', 'separator character', 'newspack'), 1 < selections.length && (0, _jsxRuntime.jsx)(_components.Button, {
           onClick: () => onChange([]),
           isLink: true,
+          isDestructive: true,
           children: __('Clear all', 'newspack')
         })]
       }), selections.map(selection => (0, _jsxRuntime.jsx)(_components.Button, {
@@ -219,14 +208,14 @@ const AutocompleteWithSuggestions = _ref => {
       }, selection.value))]
     });
   };
+
   /**
    * Render post type select dropdown.
    */
-
-
   const renderPostTypeSelect = () => {
     return (0, _jsxRuntime.jsx)(_components.SelectControl, {
-      label: (0, _i18n.sprintf)( // Translators: %s: The name of the type.
+      label: (0, _i18n.sprintf)(
+      // Translators: %s: The name of the type.
       __('%s type', 'newspack'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
       value: postTypeToSearch,
       options: postTypes.map(postTypeOption => ({
@@ -236,35 +225,32 @@ const AutocompleteWithSuggestions = _ref => {
       onChange: _postType => setPostTypeToSearch(_postType)
     });
   };
+
   /**
    * Render a single suggestion object that can be clicked to select it immediately.
    *
    * @param {Object} suggestion Suggestion object with value and label keys.
    */
-
-
   const renderSuggestion = suggestion => {
     if (multiSelect) {
       const selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
-      const isSelected = !!selections.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value));
+      const isSelected = !!selections.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label);
       return (0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: isSelected,
         onChange: () => handleOnChange([suggestion]),
         label: suggestion.label
       }, suggestion.value);
     }
-
     return (0, _jsxRuntime.jsx)(_components.Button, {
       isLink: true,
       onClick: () => handleOnChange([suggestion]),
       children: suggestion.label
     }, suggestion.value);
   };
+
   /**
    * Render a list of suggestions that can be clicked to select instead of searching by title.
    */
-
-
   const renderSuggestions = () => {
     if (isLoading) {
       return (0, _jsxRuntime.jsx)("div", {
@@ -272,18 +258,14 @@ const AutocompleteWithSuggestions = _ref => {
         children: (0, _jsxRuntime.jsx)(_components.Spinner, {})
       });
     }
-
     if (0 === suggestions.length) {
       return null;
     }
-
     const className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
     return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [!hideHelp && (0, _jsxRuntime.jsx)("p", {
         className: "newspack-autocomplete-with-suggestions__label",
-        children:
-        /* Translators: %s: the name of a post type. */
-        (0, _i18n.sprintf)(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
+        children: /* Translators: %s: the name of a post type. */(0, _i18n.sprintf)(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
       }), (0, _jsxRuntime.jsxs)("div", {
         className: className,
         children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && (0, _jsxRuntime.jsx)(_components.Button, {
@@ -295,7 +277,6 @@ const AutocompleteWithSuggestions = _ref => {
       })]
     });
   };
-
   return (0, _jsxRuntime.jsxs)("div", {
     className: classNames.join(' '),
     children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), (0, _jsxRuntime.jsx)(_.AutocompleteTokenField, {
@@ -309,6 +290,5 @@ const AutocompleteWithSuggestions = _ref => {
     }), renderSuggestions()]
   });
 };
-
 var _default = AutocompleteWithSuggestions;
 exports.default = _default;

package/dist/cjs/autocomplete-with-suggestions/style.scss

@@ -2,8 +2,7 @@
 * Styles for AutocompleteWithSuggestions component.
 */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-autocomplete-with-suggestions {
 	width: 100%;
@@ -18,8 +17,9 @@
 	}
 
 	.components-spinner {
+		margin: 8px;
 		right: 0;
-		top: 2em;
+		top: calc( 1.4em + 8px );
 	}
 
 	.components-select-control__input {
@@ -27,19 +27,19 @@
 	}
 
 	.components-input-control__backdrop {
-		border-color: $gray-900 !important;
+		border-color: wp-colors.$gray-700 !important;
 	}
 
 	.newspack-autocomplete-with-suggestions__label,
 	.components-form-token-field__label,
 	.components-input-control__label,
 	.components-checkbox-control__label {
-		color: $gray-900 !important;
+		color: wp-colors.$gray-900 !important;
 	}
 
 	&__suggestions-spinner {
-		background: $gray-100;
-		border: 1px solid $gray-900;
+		background: wp-colors.$gray-100;
+		border: 1px solid wp-colors.$gray-700;
 		border-radius: 2px;
 		cursor: progress;
 		margin: 16px 0;
@@ -49,21 +49,23 @@
 			display: block;
 			margin: 0 auto;
 			position: relative;
+			right: auto;
 			top: 0;
 		}
 	}
 
 	.newspack-autocomplete-tokenfield__help {
 		font-size: inherit;
+		margin-bottom: 8px !important;
 	}
 
 	.components-form-token-field {
 		&__input-container {
-			border-color: $gray-900;
+			border-color: wp-colors.$gray-700;
 		}
 
 		&__suggestions-list {
-			border-top-color: $gray-900;
+			border-top-color: wp-colors.$gray-700;
 			margin: 4px -4px -2px;
 		}
 
@@ -74,32 +76,30 @@
 
 	p.newspack-autocomplete-with-suggestions__label {
 		font-size: inherit;
-		margin-bottom: 4px;
+		margin: 0 0 8px;
 	}
 
 	&__selected-items {
-		border-bottom: 1px solid $gray-300;
+		border-bottom: 1px solid wp-colors.$gray-700;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
 		margin-bottom: 16px;
 		padding-bottom: 12px;
 
-		.newspack-autocomplete-with-suggestions__label {
-			font-weight: bold;
-
-			.components-button.is-link {
-				color: $alert-red;
-				font-weight: normal;
-			}
+		p.newspack-autocomplete-with-suggestions__label {
+			flex: 0 0 100%;
+			margin: 0;
 		}
 	}
 
 	&__selected-item-button.components-button.is-tertiary {
-		background-color: $gray-300;
+		background-color: wp-colors.$gray-300;
 		border-radius: 2px;
-		color: #1e1e1e;
+		color: wp-colors.$gray-900;
 		font-size: 13px;
 		height: auto;
-		margin-bottom: 4px;
-		margin-right: 4px;
+		margin: 0;
 		padding-left: 8px;
 		padding-right: 8px;
 
@@ -117,7 +117,7 @@
 	&__search-suggestions,
 	&__search-suggestions-multiselect {
 		border-radius: 2px;
-		border: 1px solid $gray-900;
+		border: 1px solid wp-colors.$gray-700;
 		max-height: 178px;
 		overflow-x: visible;
 		overflow-y: auto;
@@ -129,14 +129,14 @@
 			margin: auto;
 
 			&.is-link {
-				color: $gray-900;
+				color: wp-colors.$gray-900;
 				padding: 8px;
 				text-decoration: none;
 				width: 100%;
 
 				&:active:not( :disabled ),
 				&:hover:not( :disabled ) {
-					background: $gray-900;
+					background: wp-colors.$gray-900;
 					background: var( --wp-admin-theme-color );
 					color: white;
 				}
@@ -151,7 +151,7 @@
 
 	&__search-suggestions {
 		border-radius: 2px;
-		border: 1px solid $gray-900;
+		border: 1px solid wp-colors.$gray-700;
 		padding: 0;
 
 		.components-button {
@@ -159,7 +159,7 @@
 
 			&:focus:not( :disabled ) {
 				border-radius: 0;
-				box-shadow: inset 0 0 0 1.5px $gray-900;
+				box-shadow: inset 0 0 0 1.5px wp-colors.$gray-900;
 				box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
 			}