newspack-components 2.2.1 → 3.0.0-alpha.1

package/dist/cjs/text-control/index.js

@@ -24,48 +24,38 @@ const __ = _i18n.__;
 /**
  * External dependencies
  */
-class TextControl extends _element.Component {
-  constructor(props) {
-    super(props);
-    this.wrapperRef = (0, _element.createRef)();
-  }
-  componentDidMount() {
-    if (this.wrapperRef.current) {
-      const labelEl = this.wrapperRef.current.querySelector('label');
-      if (labelEl) {
-        labelEl.setAttribute('data-required-text', __('(required)', 'newspack'));
-      }
+const TextControl = ({
+  className = '',
+  required = false,
+  isWide = false,
+  withMargin = true,
+  ...otherProps
+}) => {
+  const wrapperRef = (0, _element.useRef)(null);
+  (0, _element.useEffect)(() => {
+    if (wrapperRef.current === null) {
+      return;
     }
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      required,
-      isWide,
-      withMargin = true,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-text-control', {
-      'newspack-text-control--wide': isWide
-    }, {
-      'newspack-text-control--with-margin': withMargin
-    }, className);
-    return required ? (0, _jsxRuntime.jsx)("div", {
-      ref: this.wrapperRef,
-      className: "newspack-text-control--required",
-      children: (0, _jsxRuntime.jsx)(_components.TextControl, {
-        className: classes,
-        required: required,
-        ...otherProps
-      })
-    }) : (0, _jsxRuntime.jsx)(_components.TextControl, {
+    const labelEl = wrapperRef.current.querySelector('label');
+    if (labelEl) {
+      labelEl.setAttribute('data-required-text', __('(required)', 'newspack-plugin'));
+    }
+  }, [wrapperRef.current]);
+  const classes = (0, _classnames.default)('newspack-text-control', {
+    'newspack-text-control--wide': isWide,
+    'newspack-text-control--with-margin': withMargin
+  }, className);
+  return required ? (0, _jsxRuntime.jsx)("div", {
+    ref: wrapperRef,
+    className: "newspack-text-control--required",
+    children: (0, _jsxRuntime.jsx)(_components.TextControl, {
       className: classes,
+      required: required,
       ...otherProps
-    });
-  }
-}
-var _default = TextControl;
-exports.default = _default;
+    })
+  }) : (0, _jsxRuntime.jsx)(_components.TextControl, {
+    className: classes,
+    ...otherProps
+  });
+};
+var _default = exports.default = TextControl;

package/dist/cjs/utils/index.js

@@ -10,22 +10,19 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * WordPress dependencies.
  */
 
-const InteractiveDiv = _ref => {
-  let {
-    style = {},
-    ...props
-  } = _ref;
-  return (0, _jsxRuntime.jsx)("div", {
-    tabIndex: "0",
-    role: "button",
-    onKeyDown: event => _keycodes.ENTER === event.keyCode && props.onClick(),
-    style: {
-      cursor: 'pointer',
-      ...style
-    },
-    ...props
-  });
-};
+const InteractiveDiv = ({
+  style = {},
+  ...props
+}) => (0, _jsxRuntime.jsx)("div", {
+  tabIndex: "0",
+  role: "button",
+  onKeyDown: event => _keycodes.ENTER === event.keyCode && props.onClick(),
+  style: {
+    cursor: 'pointer',
+    ...style
+  },
+  ...props
+});
 const confirmAction = message => {
   // eslint-disable-next-line no-alert
   if (confirm(message)) {
@@ -33,8 +30,7 @@ const confirmAction = message => {
   }
   return false;
 };
-var _default = {
+var _default = exports.default = {
   InteractiveDiv,
   confirmAction
-};
-exports.default = _default;
+};

package/dist/cjs/waiting/index.js

@@ -49,5 +49,4 @@ class Waiting extends _element.Component {
     });
   }
 }
-var _default = Waiting;
-exports.default = _default;
+var _default = exports.default = Waiting;

package/dist/cjs/web-preview/index.js

@@ -71,21 +71,21 @@ class WebPreview extends _element.Component {
                   }),
                   variant: 'desktop' === device && 'primary',
                   icon: _icons.desktop,
-                  label: __('Preview Desktop Size', 'newspack')
+                  label: __('Preview Desktop Size', 'newspack-plugin')
                 }), (0, _jsxRuntime.jsx)(_components.Button, {
                   onClick: () => this.setState({
                     device: 'tablet'
                   }),
                   variant: 'tablet' === device && 'primary',
                   icon: _icons.tablet,
-                  label: __('Preview Tablet Size', 'newspack')
+                  label: __('Preview Tablet Size', 'newspack-plugin')
                 }), (0, _jsxRuntime.jsx)(_components.Button, {
                   onClick: () => this.setState({
                     device: 'phone'
                   }),
                   variant: 'phone' === device && 'primary',
                   icon: _icons.mobile,
-                  label: __('Preview Phone Size', 'newspack')
+                  label: __('Preview Phone Size', 'newspack-plugin')
                 })]
               })
             }), (0, _jsxRuntime.jsx)("div", {
@@ -99,7 +99,7 @@ class WebPreview extends _element.Component {
                   });
                 },
                 icon: _icons.closeSmall,
-                label: __('Close Preview', 'newspack')
+                label: __('Close Preview', 'newspack-plugin')
               })
             })]
           }), (0, _jsxRuntime.jsxs)("div", {
@@ -108,7 +108,7 @@ class WebPreview extends _element.Component {
               className: "newspack-web-preview__is-waiting",
               children: [(0, _jsxRuntime.jsx)(_.Waiting, {
                 isLeft: true
-              }), __('Loading…', 'newspack')]
+              }), __('Loading…', 'newspack-plugin')]
             }), (0, _jsxRuntime.jsx)("iframe", {
               ref: this.iframeRef,
               title: "web-preview",
@@ -182,8 +182,7 @@ class WebPreview extends _element.Component {
 }
 WebPreview.defaultProps = {
   url: '//newspack.com',
-  label: __('Preview', 'newspack'),
+  label: __('Preview', 'newspack-plugin'),
   onLoad: () => {}
 };
-var _default = WebPreview;
-exports.default = _default;
+var _default = exports.default = WebPreview;

package/dist/cjs/with-wizard/index.js

@@ -120,7 +120,7 @@ function withWizard(WrappedComponent, requiredPlugins) {
             children: (0, _jsxRuntime.jsx)(_.Button, {
               isPrimary: true,
               href: fallbackURL,
-              children: __('Return to Dashboard', 'newspack')
+              children: __('Return to Dashboard', 'newspack-plugin')
             })
           })]
         });
@@ -151,10 +151,9 @@ function withWizard(WrappedComponent, requiredPlugins) {
       /**
        * Called when plugin installation is complete. Updates state and calls onWizardReady on the wrapped component.
        */
-      (0, _defineProperty2.default)(this, "pluginInstallationStatus", _ref => {
-        let {
-          complete
-        } = _ref;
+      (0, _defineProperty2.default)(this, "pluginInstallationStatus", ({
+        complete
+      }) => {
         if (this.state.loading) {
           this.doneLoading();
         }
@@ -240,7 +239,7 @@ function withWizard(WrappedComponent, requiredPlugins) {
                   children: [(0, _jsxRuntime.jsx)(_.Button, {
                     isLink: true,
                     href: newspack_urls.dashboard,
-                    label: __('Return to Dashboard', 'newspack'),
+                    label: __('Return to Dashboard', 'newspack-plugin'),
                     showTooltip: true,
                     icon: _icons.home,
                     iconSize: 36,
@@ -249,7 +248,7 @@ function withWizard(WrappedComponent, requiredPlugins) {
                     })
                   }), (0, _jsxRuntime.jsx)("div", {
                     children: (0, _jsxRuntime.jsx)("h2", {
-                      children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack')
+                      children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin')
                     })
                   })]
                 })

package/dist/cjs/with-wizard-screen/index.js

@@ -25,10 +25,9 @@ const __ = _i18n.__;
 /**
  * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
  */
-function withWizardScreen(WrappedComponent) {
-  let {
-    hidePrimaryButton
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function withWizardScreen(WrappedComponent, {
+  hidePrimaryButton
+} = {}) {
   const WrappedWithWizardScreen = props => {
     const {
       className,
@@ -48,25 +47,22 @@ function withWizardScreen(WrappedComponent) {
     const SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? _.Handoff : _.Button;
     const shouldRenderPrimaryButton = buttonText && buttonAction;
     const shouldRenderSecondaryButton = secondaryButtonText && secondaryButtonAction;
-    const renderPrimaryButton = function () {
-      let overridingProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return retrievedButtonProps.plugin ? (0, _jsxRuntime.jsx)(_.Handoff, {
-        isPrimary: true,
-        ...retrievedButtonProps,
-        ...overridingProps,
-        children: buttonText
-      }) : (0, _jsxRuntime.jsx)(_.Button, {
-        isPrimary: !buttonDisabled,
-        isSecondary: !!buttonDisabled,
-        disabled: buttonDisabled
-        // Allow overridingProps to set children.
-        // eslint-disable-next-line react/no-children-prop
-        ,
-        children: buttonText,
-        ...retrievedButtonProps,
-        ...overridingProps
-      });
-    };
+    const renderPrimaryButton = (overridingProps = {}) => retrievedButtonProps.plugin ? (0, _jsxRuntime.jsx)(_.Handoff, {
+      isPrimary: true,
+      ...retrievedButtonProps,
+      ...overridingProps,
+      children: buttonText
+    }) : (0, _jsxRuntime.jsx)(_.Button, {
+      isPrimary: !buttonDisabled,
+      isSecondary: !!buttonDisabled,
+      disabled: buttonDisabled
+      // Allow overridingProps to set children.
+      // eslint-disable-next-line react/no-children-prop
+      ,
+      children: buttonText,
+      ...retrievedButtonProps,
+      ...overridingProps
+    });
     return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [newspack_aux_data.is_debug_mode && (0, _jsxRuntime.jsx)(_.Notice, {
         debugMode: true
@@ -79,7 +75,7 @@ function withWizardScreen(WrappedComponent) {
             children: [(0, _jsxRuntime.jsx)(_.Button, {
               isLink: true,
               href: newspack_urls.dashboard,
-              label: __('Return to Dashboard', 'newspack'),
+              label: __('Return to Dashboard', 'newspack-plugin'),
               showTooltip: true,
               icon: _icons.category,
               iconSize: 36,

package/dist/cjs/wizard/components/WizardError.js

@@ -16,12 +16,11 @@ const __ = _i18n.__;
 /**
  * Internal dependencies.
  */
-const parseError = _ref => {
-  let {
-    data,
-    message,
-    code
-  } = _ref;
+const parseError = ({
+  data,
+  message,
+  code
+}) => {
   let level = 'fatal';
   if (!!data && 'level' in data) {
     level = data.level;
@@ -58,7 +57,7 @@ const WizardError = () => {
         children: (0, _jsxRuntime.jsx)(_.Button, {
           isPrimary: true,
           href: fallbackURL,
-          children: __('Return to Dashboard', 'newspack')
+          children: __('Return to Dashboard', 'newspack-plugin')
         })
       })]
     });
@@ -70,5 +69,4 @@ const WizardError = () => {
     rawHTML: true
   });
 };
-var _default = WizardError;
-exports.default = _default;
+var _default = exports.default = WizardError;

package/dist/cjs/wizard/index.js

@@ -34,17 +34,16 @@ const {
   Route,
   Switch
 } = _router.default;
-const Wizard = _ref => {
-  let {
-    sections = [],
-    apiSlug,
-    headerText,
-    subHeaderText,
-    hasSimpleFooter,
-    className,
-    renderAboveSections,
-    requiredPlugins = []
-  } = _ref;
+const Wizard = ({
+  sections = [],
+  apiSlug,
+  headerText,
+  subHeaderText,
+  hasSimpleFooter,
+  className,
+  renderAboveSections,
+  requiredPlugins = []
+}) => {
   const isLoading = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).isLoading());
   const isQuietLoading = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).isQuietLoading());
 
@@ -54,17 +53,14 @@ const Wizard = _ref => {
   let displayedSections = sections.filter(section => !section.isHidden);
   const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = (0, _element.useState)(requiredPlugins.length === 0);
   if (!pluginRequirementsSatisfied) {
-    headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack');
+    headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
     displayedSections = [{
       path: '/',
       render: () => (0, _jsxRuntime.jsx)(_.PluginInstaller, {
         plugins: requiredPlugins,
-        onStatus: _ref2 => {
-          let {
-            complete
-          } = _ref2;
-          return setPluginRequirementsSatisfied(complete);
-        }
+        onStatus: ({
+          complete
+        }) => setPluginRequirementsSatisfied(complete)
       })
     }];
   }
@@ -86,7 +82,7 @@ const Wizard = _ref => {
               children: [(0, _jsxRuntime.jsx)(_.Button, {
                 isLink: true,
                 href: newspack_urls.dashboard,
-                label: __('Return to Dashboard', 'newspack'),
+                label: __('Return to Dashboard', 'newspack-plugin'),
                 showTooltip: true,
                 icon: _icons.category,
                 iconSize: 36,
@@ -127,5 +123,4 @@ const Wizard = _ref => {
 };
 Wizard.useWizardData = _utils.useWizardData;
 Wizard.STORE_NAMESPACE = _store.WIZARD_STORE_NAMESPACE;
-var _default = Wizard;
-exports.default = _default;
+var _default = exports.default = Wizard;

package/dist/cjs/wizard/store/index.js

@@ -19,8 +19,7 @@ var _utils = require("./utils.js");
  * WordPress dependencies.
  */
 
-const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
-exports.WIZARD_STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
+const WIZARD_STORE_NAMESPACE = exports.WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 const DEFAULT_STATE = {
   isLoading: true,
   isQuietLoading: false,
@@ -34,12 +33,10 @@ const DEFAULT_STATE = {
  * unless the state was cloned first.
  */
 const clone = objectToClone => JSON.parse(JSON.stringify(objectToClone));
-const reducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_STATE;
-  let {
-    type,
-    payload = {}
-  } = arguments.length > 1 ? arguments[1] : undefined;
+const reducer = (state = DEFAULT_STATE, {
+  type,
+  payload = {}
+}) => {
   switch (type) {
     case 'START_LOADING_DATA':
       if (payload.isQuietLoading) {
@@ -80,36 +77,38 @@ const actions = {
   updateWizardSettings: (0, _utils.createAction)('UPDATE_WIZARD_SETTINGS'),
   setError: (0, _utils.createAction)('SET_ERROR'),
   // Async actions. These will not show up in Redux devtools.
-  saveWizardSettings(_ref) {
-    let {
-      slug,
-      section = '',
-      payloadPath = false,
-      updatePayload = null
-    } = _ref;
-    return function* () {
-      // Optionally data can be updated before saving - an immediate update case
-      // (without an explicit "save" action).
-      if (updatePayload) {
-        yield actions.updateWizardSettings({
-          slug,
-          ...updatePayload
-        });
-      }
-      const wizardState = (0, _data.select)(WIZARD_STORE_NAMESPACE).getWizardAPIData(slug);
-      const updatedData = yield actions.fetchFromAPI({
-        path: `/newspack/v1/wizard/${slug}/${section}`,
-        method: 'POST',
-        data: payloadPath ? (0, _get.default)(wizardState, payloadPath) : wizardState,
-        isQuietFetch: true
+  *saveWizardSettings({
+    slug,
+    section = '',
+    payloadPath = false,
+    auxData = {},
+    updatePayload = null
+  }) {
+    // Optionally data can be updated before saving - an immediate update case
+    // (without an explicit "save" action).
+    if (updatePayload) {
+      yield actions.updateWizardSettings({
+        slug,
+        ...updatePayload
       });
-      if (!(0, _isEmpty.default)(updatedData) && !updatedData.error) {
-        return actions.setAPIDataForWizard({
-          slug,
-          data: updatedData
-        });
-      }
-    }();
+    }
+    const wizardState = (0, _data.select)(WIZARD_STORE_NAMESPACE).getWizardAPIData(slug);
+    const data = payloadPath ? (0, _get.default)(wizardState, payloadPath) : wizardState;
+    const updatedData = yield actions.fetchFromAPI({
+      path: `/newspack/v1/wizard/${slug}/${section}`,
+      method: 'POST',
+      data: {
+        ...data,
+        ...auxData
+      },
+      isQuietFetch: true
+    });
+    if (!(0, _isEmpty.default)(updatedData) && !updatedData.error) {
+      return actions.setAPIDataForWizard({
+        slug,
+        data: updatedData
+      });
+    }
   },
   *wizardApiFetch(fetchConfig) {
     // Just a proxy to fetchFromAPI, but it has to be a generator.

package/dist/cjs/wizard/store/utils.js

@@ -19,8 +19,5 @@ const createAction = type => payload => ({
   payload
 });
 exports.createAction = createAction;
-const useWizardData = function (wizardName) {
-  let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return (0, _data.useSelect)(select => select(_.WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
-};
+const useWizardData = (wizardName, defaultValue = {}) => (0, _data.useSelect)(select => select(_.WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
 exports.useWizardData = useWizardData;

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

@@ -20,11 +20,10 @@ 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";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 class ActionCard extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "state", {
       expanded: false
     });

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

@@ -18,8 +18,7 @@ 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";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 class AutocompleteTokenField extends Component {
   constructor(props) {
     super(props);
@@ -65,6 +64,31 @@ class AutocompleteTokenField extends Component {
     }
   }
 
+  /**
+   * When the component updates, fetch information about the tokens so we can populate
+   * the tokens with the correct labels.
+   */
+  componentDidUpdate(prevProps) {
+    const {
+      tokens,
+      fetchSavedInfo
+    } = this.props;
+    if (tokens !== prevProps.tokens && this.isFetchingInfoOnLoad()) {
+      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.
    */
@@ -111,8 +135,10 @@ class AutocompleteTokenField extends Component {
       return labels.reduce((acc, label) => {
         Object.keys(validValues).forEach(key => {
           if (validValues[key] === label) {
+            // Preserve numeric or string type of values. Object.keys will convert numbers to strings.
+            const value = isNaN(parseInt(key)) ? key.toString() : parseInt(key);
             acc.push({
-              value: key,
+              value,
               label
             });
           }
@@ -120,7 +146,7 @@ class AutocompleteTokenField extends Component {
         return acc;
       }, []);
     }
-    return labels.map(label => Object.keys(validValues).find(key => validValues[key] === label));
+    return labels.map(label => Object.keys(validValues).map(key => isNaN(parseInt(key)) ? key.toString() : parseInt(key)).find(key => validValues[key] === label));
   }
 
   /**
@@ -146,14 +172,16 @@ class AutocompleteTokenField extends Component {
         if (this.suggestionsRequest !== request) {
           return;
         }
+        const {
+          validValues
+        } = this.state;
         const currentSuggestions = [...suggestions];
-        const currentValidValues = {};
         suggestions.forEach(suggestion => {
-          currentValidValues[suggestion.value] = suggestion.label;
+          validValues[suggestion.value] = suggestion.label;
         });
         this.setState({
           suggestions: currentSuggestions,
-          validValues: currentValidValues,
+          validValues,
           loading: false
         });
       }).catch(() => {
@@ -198,22 +226,31 @@ class AutocompleteTokenField extends Component {
     const {
       help,
       label = '',
+      placeholder = '',
       maxLength
     } = this.props;
     const {
       suggestions,
       loading
     } = this.state;
+    const classNames = ['newspack-autocomplete-tokenfield__input-container'];
+    if (label) {
+      classNames.push('has-label');
+    }
     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", {
+      children: [_jsxs("div", {
+        className: classNames.join(' '),
+        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,
+          placeholder: placeholder
+        }), loading && _jsx(Spinner, {})]
+      }), help && _jsx("p", {
         className: "newspack-autocomplete-tokenfield__help",
         children: help
       })]

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

@@ -5,13 +5,19 @@
 @use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-autocomplete-tokenfield {
-	position: relative;
-
 	.components-spinner {
-		margin: 8px;
+		margin: 0;
 		position: absolute;
-		right: 0;
-		top: calc( 1.4em + 8px );
+		right: 8px;
+		top: 8px;
+	}
+
+	&__input-container {
+		position: relative;
+
+		&.has-label .components-spinner {
+			top: 32px;
+		}
 	}
 
 	/* Workaround for hard-coded help text in FormTokenField. */