newspack-components 2.0.3 → 2.2.0

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

@@ -7,18 +7,17 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useState } from '@wordpress/element';
 import { __ as alias__, _x as alias_x, sprintf } from '@wordpress/i18n';
 const __ = alias__,
-      _x = alias_x;
+  _x = alias_x;
 import { addQueryArgs } from '@wordpress/url';
+
 /**
  * External dependencies.
  */
-
 import { AutocompleteTokenField } from '../';
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-
 const AutocompleteWithSuggestions = _ref => {
   let {
     fetchSavedPosts = false,
@@ -51,7 +50,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] = useState(true);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -59,20 +57,17 @@ const AutocompleteWithSuggestions = _ref => {
   const [maxSuggestions, setMaxSuggestions] = useState(0);
   const [postTypeToSearch, setPostTypeToSearch] = useState(postTypes[0].slug);
   const classNames = ['newspack-autocomplete-with-suggestions'];
-
   if (hideHelp) {
     classNames.push('hide-help');
   }
+
   /**
    * Fetch recent posts to show as suggestions.
    */
-
-
   useEffect(() => {
     if (onPostTypeChange) {
       onPostTypeChange(postTypeToSearch);
     }
-
     setIsLoading(true);
     handleFetchSuggestions(null, 0, postTypeToSearch).then(_suggestions => {
       if (0 < _suggestions.length) {
@@ -80,10 +75,10 @@ const AutocompleteWithSuggestions = _ref => {
       }
     }).finally(() => setIsLoading(false));
   }, [postTypeToSearch]);
+
   /**
    * Fetch more suggestions.
    */
-
   useEffect(() => {
     if (isLoadingMore) {
       handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
@@ -93,17 +88,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 apiFetch({
       path: addQueryArgs('/wp/v2/' + endpoint, {
         per_page: 100,
@@ -116,10 +110,10 @@ const AutocompleteWithSuggestions = _ref => {
       label: 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;
@@ -127,7 +121,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 apiFetch({
       parse: false,
       path: addQueryArgs('/wp/v2/' + endpoint, {
@@ -139,32 +132,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: decodeEntities(post === null || post === void 0 ? void 0 : post.title.rendered) || __('(no title)', 'newspack')
+        label: 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);
@@ -172,23 +166,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 ? 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 ? 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.
     sprintf(__('Selected %s', 'newspack'), postTypeLabel);
     return _jsxs("div", {
       className: "newspack-autocomplete-with-suggestions__selected-items",
@@ -197,6 +193,7 @@ const AutocompleteWithSuggestions = _ref => {
         children: [selectedMessage, 1 < selections.length && _x(' – ', 'separator character', 'newspack'), 1 < selections.length && _jsx(Button, {
           onClick: () => onChange([]),
           isLink: true,
+          isDestructive: true,
           children: __('Clear all', 'newspack')
         })]
       }), selections.map(selection => _jsx(Button, {
@@ -207,14 +204,14 @@ const AutocompleteWithSuggestions = _ref => {
       }, selection.value))]
     });
   };
+
   /**
    * Render post type select dropdown.
    */
-
-
   const renderPostTypeSelect = () => {
     return _jsx(SelectControl, {
-      label: sprintf( // Translators: %s: The name of the type.
+      label: sprintf(
+      // Translators: %s: The name of the type.
       __('%s type', 'newspack'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
       value: postTypeToSearch,
       options: postTypes.map(postTypeOption => ({
@@ -224,35 +221,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 _jsx(CheckboxControl, {
         checked: isSelected,
         onChange: () => handleOnChange([suggestion]),
         label: suggestion.label
       }, suggestion.value);
     }
-
     return _jsx(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 _jsx("div", {
@@ -260,18 +254,14 @@ const AutocompleteWithSuggestions = _ref => {
         children: _jsx(Spinner, {})
       });
     }
-
     if (0 === suggestions.length) {
       return null;
     }
-
     const className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
     return _jsxs(_Fragment, {
       children: [!hideHelp && _jsx("p", {
         className: "newspack-autocomplete-with-suggestions__label",
-        children:
-        /* Translators: %s: the name of a post type. */
-        sprintf(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
+        children: /* Translators: %s: the name of a post type. */sprintf(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
       }), _jsxs("div", {
         className: className,
         children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && _jsx(Button, {
@@ -283,7 +273,6 @@ const AutocompleteWithSuggestions = _ref => {
       })]
     });
   };
-
   return _jsxs("div", {
     className: classNames.join(' '),
     children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), _jsx(AutocompleteTokenField, {
@@ -297,5 +286,4 @@ const AutocompleteWithSuggestions = _ref => {
     }), renderSuggestions()]
   });
 };
-
 export default AutocompleteWithSuggestions;

package/dist/esm/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 );
 			}
 

package/dist/esm/button/index.js

@@ -7,34 +7,26 @@
  */
 import { Button as BaseComponent } from '@wordpress/components';
 import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import Router from '../proxied-imports/router';
 import './style.scss';
-/**
- * External dependencies
- */
-
-import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const {
   useHistory
 } = Router;
-
 const Button = _ref => {
   let {
-    className,
-    isQuaternary,
     href,
     onClick,
     ...otherProps
   } = _ref;
   const history = useHistory();
   const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false);
-  const classes = classnames('newspack-button', isQuaternary && 'is-quaternary', className); // If both onClick and href are present, await the onClick action an then redirect.
 
+  // If both onClick and href are present, await the onClick action an then redirect.
   if (href && onClick) {
     otherProps.onClick = async () => {
       setIsAwaitingOnClick(true);
@@ -46,15 +38,11 @@ const Button = _ref => {
     otherProps.href = href;
     otherProps.onClick = onClick;
   }
-
   if (isAwaitingOnClick) {
     otherProps.disabled = true;
   }
-
   return _jsx(BaseComponent, {
-    className: classes,
     ...otherProps
   });
 };
-
 export default Button;