newspack-components 2.2.1 → 3.0.0-alpha.2

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

@@ -1,223 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * External dependencies
- */
-import debounce from 'lodash/debounce';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { FormTokenField, Spinner } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * An multi-selecting, api-driven autocomplete input suitable for use in block attributes.
- */
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class AutocompleteTokenField extends Component {
-  constructor(props) {
-    super(props);
-    /**
-     * If the component has tokens passed in props, it should fetch info after it mounts.
-     */
-    _defineProperty(this, "isFetchingInfoOnLoad", () => {
-      const {
-        tokens,
-        fetchSavedInfo
-      } = this.props;
-      return Boolean(tokens.length && fetchSavedInfo);
-    });
-    this.state = {
-      suggestions: [],
-      validValues: {},
-      loading: this.isFetchingInfoOnLoad()
-    };
-    this.debouncedUpdateSuggestions = debounce(this.updateSuggestions, 500);
-  }
-  /**
-   * When the component loads, fetch information about the tokens so we can populate
-   * the tokens with the correct labels.
-   */
-  componentDidMount() {
-    if (this.isFetchingInfoOnLoad()) {
-      const {
-        tokens,
-        fetchSavedInfo
-      } = this.props;
-      fetchSavedInfo(tokens).then(results => {
-        const {
-          validValues
-        } = this.state;
-        results.forEach(suggestion => {
-          validValues[suggestion.value] = suggestion.label;
-        });
-        this.setState({
-          validValues,
-          loading: false
-        });
-      });
-    }
-  }
-
-  /**
-   * 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
-    } = this.state;
-    return values.reduce((accumulator, value) => {
-      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 => {
-          if (validValues[key] === label) {
-            acc.push({
-              value: key,
-              label
-            });
-          }
-        });
-        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
-    }, () => {
-      const request = fetchSuggestions(input);
-      request.then(suggestions => {
-        // A fetch Promise doesn't have an abort option. It's mimicked by
-        // comparing the request reference in on the instance, which is
-        // reset or deleted on subsequent requests or unmounting.
-        if (this.suggestionsRequest !== request) {
-          return;
-        }
-        const currentSuggestions = [...suggestions];
-        const currentValidValues = {};
-        suggestions.forEach(suggestion => {
-          currentValidValues[suggestion.value] = suggestion.label;
-        });
-        this.setState({
-          suggestions: currentSuggestions,
-          validValues: currentValidValues,
-          loading: false
-        });
-      }).catch(() => {
-        if (this.suggestionsRequest === request) {
-          this.setState({
-            loading: false
-          });
-        }
-      });
-      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,
-      label = '',
-      maxLength
-    } = this.props;
-    const {
-      suggestions,
-      loading
-    } = this.state;
-    return _jsxs("div", {
-      className: "newspack-autocomplete-tokenfield",
-      children: [_jsx(FormTokenField, {
-        value: this.getTokens(),
-        suggestions: suggestions.map(suggestion => suggestion.label),
-        onChange: tokens => this.handleOnChange(tokens),
-        onInputChange: input => this.debouncedUpdateSuggestions(input),
-        label: label,
-        maxLength: maxLength
-      }), loading && _jsx(Spinner, {}), help && _jsx("p", {
-        className: "newspack-autocomplete-tokenfield__help",
-        children: help
-      })]
-    });
-  }
-}
-export default AutocompleteTokenField;

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

@@ -1,289 +0,0 @@
-/**
- * WordPress dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { Button, CheckboxControl, SelectControl, Spinner } from '@wordpress/components';
-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;
-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,
-    // If passed, will use this function to fetch saved data.
-    fetchSuggestions = false,
-    // If passed, will use this function to fetch suggestions data.
-    help = __('Begin typing search term, click autocomplete result to select.', 'newspack'),
-    hideHelp = false,
-    // If true, all help text will be hidden.
-    label = __('Search', 'newspack'),
-    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 = __('item', 'newspack'),
-    // String to describe the data being shown.
-    postTypeLabelPlural = __('items', 'newspack'),
-    // 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.
-  } = _ref;
-  const [isLoading, setIsLoading] = useState(true);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const [suggestions, setSuggestions] = useState([]);
-  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) {
-        setSuggestions(_suggestions);
-      }
-    }).finally(() => setIsLoading(false));
-  }, [postTypeToSearch]);
-
-  /**
-   * Fetch more suggestions.
-   */
-  useEffect(() => {
-    if (isLoadingMore) {
-      handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
-        if (0 < _suggestions.length) {
-          setSuggestions(suggestions.concat(_suggestions));
-        }
-      }).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,
-        include: postIds.join(','),
-        _fields: 'id,title'
-      })
-    });
-    return posts.map(post => ({
-      value: parseInt(post.id),
-      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;
-    let searchSlug = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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 apiFetch({
-      parse: false,
-      path: 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);
-
-    // Format suggestions for FormTokenField display.
-    return posts.reduce((acc, post) => {
-      acc.push({
-        value: parseInt(post.id),
-        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.
-    _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);
-      } else {
-        // Otherwise, add it.
-        selections.push(_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.
-    sprintf(__('Selected %s', 'newspack'), postTypeLabel);
-    return _jsxs("div", {
-      className: "newspack-autocomplete-with-suggestions__selected-items",
-      children: [_jsxs("p", {
-        className: "newspack-autocomplete-with-suggestions__label",
-        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, {
-        className: "newspack-autocomplete-with-suggestions__selected-item-button",
-        isTertiary: true,
-        onClick: () => onChange(selections.filter(_selection => _selection.value !== selection.value)),
-        children: selection.label
-      }, selection.value))]
-    });
-  };
-
-  /**
-   * Render post type select dropdown.
-   */
-  const renderPostTypeSelect = () => {
-    return _jsx(SelectControl, {
-      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 => ({
-        label: postTypeOption.label,
-        value: postTypeOption.slug
-      })),
-      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) && _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", {
-        className: "newspack-autocomplete-with-suggestions__suggestions-spinner",
-        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)
-      }), _jsxs("div", {
-        className: className,
-        children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && _jsx(Button, {
-          disabled: isLoadingMore,
-          isSecondary: true,
-          onClick: () => setIsLoadingMore(true),
-          children: isLoadingMore ? __('Loading…', 'newspack') : __('Load more', 'newspack')
-        })]
-      })]
-    });
-  };
-  return _jsxs("div", {
-    className: classNames.join(' '),
-    children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), _jsx(AutocompleteTokenField, {
-      tokens: [],
-      onChange: handleOnChange,
-      fetchSuggestions: async search => handleFetchSuggestions(search, 0, postTypeToSearch),
-      fetchSavedInfo: postIds => handleFetchSaved(postIds),
-      label: label,
-      help: !hideHelp && help,
-      returnFullObjects: true
-    }), renderSuggestions()]
-  });
-};
-export default AutocompleteWithSuggestions;

package/dist/esm/button/index.js

@@ -1,48 +0,0 @@
-/**
- * Button
- */
-
-/**
- * WordPress dependencies.
- */
-import { Button as BaseComponent } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Router from '../proxied-imports/router';
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const {
-  useHistory
-} = Router;
-const Button = _ref => {
-  let {
-    href,
-    onClick,
-    ...otherProps
-  } = _ref;
-  const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false);
-
-  // If both onClick and href are present, await the onClick action an then redirect.
-  if (href && onClick) {
-    otherProps.onClick = async () => {
-      setIsAwaitingOnClick(true);
-      await onClick();
-      setIsAwaitingOnClick(false);
-      history.push(href.replace('#', ''));
-    };
-  } else {
-    otherProps.href = href;
-    otherProps.onClick = onClick;
-  }
-  if (isAwaitingOnClick) {
-    otherProps.disabled = true;
-  }
-  return _jsx(BaseComponent, {
-    ...otherProps
-  });
-};
-export default Button;

package/dist/esm/button/style.scss

@@ -1,11 +0,0 @@
-/**
- * Button
- */
-
-.components-button {
-	&.is-destructive {
-		&:hover:not( :disabled ) {
-			box-shadow: none;
-		}
-	}
-}

package/dist/esm/button-card/index.js

@@ -1,65 +0,0 @@
-/**
- * Button Card
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Grid } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class ButtonCard extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      chevron,
-      className,
-      desc,
-      grouped,
-      icon,
-      isDestructive,
-      isPressed,
-      isSmall,
-      title,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
-    return _jsxs("a", {
-      className: classes,
-      ...otherProps,
-      children: [icon && _jsx(Icon, {
-        icon: icon,
-        height: 48,
-        width: 48
-      }), _jsxs(Grid, {
-        noMargin: true,
-        columns: 1,
-        gutter: 8,
-        children: [title && _jsx("h3", {
-          children: title
-        }), desc && _jsx("p", {
-          children: desc
-        })]
-      }), chevron && _jsx(Icon, {
-        icon: chevronRight,
-        height: 24,
-        width: 24
-      })]
-    });
-  }
-}
-export default ButtonCard;