newspack-components 4.3.0 → 4.4.0-alpha.1

package/dist/esm/wizard/index.js

@@ -1,3 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
 /**
  * External dependencies.
  */
@@ -10,7 +14,7 @@ import { DropdownMenu, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { category, moreVertical } from '@wordpress/icons';
+import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -22,24 +26,39 @@ import WizardSnackbar from './components/WizardSnackbar';
 import WizardError from './components/WizardError';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 registerStore();
-const {
-  HashRouter,
-  Redirect,
-  Route,
-  Switch,
-  useLocation
-} = Router;
+
+/**
+ * Icon registry for resolving icon name strings passed through the data store.
+ * React elements from @wordpress/icons can't cross webpack entry point boundaries
+ * because each bundle has its own copy of the icon primitives.
+ */
+var ICON_REGISTRY = {
+  chevronLeft: chevronLeft,
+  category: category,
+  moreVertical: moreVertical
+};
+var resolveIcon = function resolveIcon(icon) {
+  if (typeof icon === 'string') {
+    return ICON_REGISTRY[icon] || null;
+  }
+  return icon;
+};
+var HashRouter = Router.HashRouter,
+  Redirect = Router.Redirect,
+  Route = Router.Route,
+  Switch = Router.Switch,
+  useLocation = Router.useLocation;
 
 /**
  * Reset the header data when a new section is rendered.
  */
-const ResetHeaderData = () => {
-  const location = useLocation();
-  const {
-    resetHeaderData
-  } = useDispatch(WIZARD_STORE_NAMESPACE);
-  useEffect(() => {
+var ResetHeaderData = function ResetHeaderData() {
+  var location = useLocation();
+  var _useDispatch = useDispatch(WIZARD_STORE_NAMESPACE),
+    resetHeaderData = _useDispatch.resetHeaderData;
+  useEffect(function () {
     resetHeaderData();
+    window.scrollTo(0, 0);
   }, [location.pathname, resetHeaderData]);
   return null;
 };
@@ -65,54 +84,83 @@ const ResetHeaderData = () => {
  * @param {WizardProps} props
  * @return {JSX.Element} Wizard component
  */
-const Wizard = ({
-  sections = [],
-  headerText,
-  apiSlug,
-  sharedProps = {},
-  subHeaderText,
-  hasSimpleFooter,
-  className,
-  renderAboveSections,
-  requiredPlugins = [],
-  isInitialFetchTriggered = true,
-  fixedHeader = false
-}, ref) => {
-  const isLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isLoading());
-  const isQuietLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isQuietLoading());
-  const headerData = useSelect(select => select(WIZARD_STORE_NAMESPACE).getHeaderData());
-  const notices = useSelect(select => select(WIZARD_STORE_NAMESPACE).getNotices());
-  const {
-    actions,
-    backNav,
-    badges,
-    sectionDescription,
-    sectionName,
-    sectionTitle,
-    sectionPrimaryAction,
-    sectionSecondaryAction
-  } = headerData;
-  const mainActions = actions?.filter(action => action.type === 'primary' || action.type === 'secondary');
-  const moreActions = actions?.filter(action => action.type === 'more');
+var Wizard = function Wizard(_ref, ref) {
+  var _ref$sections = _ref.sections,
+    sections = _ref$sections === void 0 ? [] : _ref$sections,
+    headerText = _ref.headerText,
+    apiSlug = _ref.apiSlug,
+    _ref$sharedProps = _ref.sharedProps,
+    sharedProps = _ref$sharedProps === void 0 ? {} : _ref$sharedProps,
+    subHeaderText = _ref.subHeaderText,
+    hasSimpleFooter = _ref.hasSimpleFooter,
+    className = _ref.className,
+    renderAboveSections = _ref.renderAboveSections,
+    _ref$requiredPlugins = _ref.requiredPlugins,
+    requiredPlugins = _ref$requiredPlugins === void 0 ? [] : _ref$requiredPlugins,
+    _ref$isInitialFetchTr = _ref.isInitialFetchTriggered,
+    isInitialFetchTriggered = _ref$isInitialFetchTr === void 0 ? true : _ref$isInitialFetchTr,
+    _ref$fixedHeader = _ref.fixedHeader,
+    fixedHeader = _ref$fixedHeader === void 0 ? false : _ref$fixedHeader;
+  var isLoading = useSelect(function (select) {
+    return select(WIZARD_STORE_NAMESPACE).isLoading();
+  });
+  var isQuietLoading = useSelect(function (select) {
+    return select(WIZARD_STORE_NAMESPACE).isQuietLoading();
+  });
+  var headerData = useSelect(function (select) {
+    return select(WIZARD_STORE_NAMESPACE).getHeaderData();
+  });
+  var notices = useSelect(function (select) {
+    return select(WIZARD_STORE_NAMESPACE).getNotices();
+  });
+  var actions = headerData.actions,
+    backNav = headerData.backNav,
+    badges = headerData.badges,
+    sectionDescription = headerData.sectionDescription,
+    sectionMenu = headerData.sectionMenu,
+    sectionName = headerData.sectionName,
+    sectionTitle = headerData.sectionTitle,
+    sectionPrimaryAction = headerData.sectionPrimaryAction,
+    sectionSecondaryAction = headerData.sectionSecondaryAction;
+  var mainActions = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
+    return action.type === 'primary' || action.type === 'secondary';
+  });
+  var moreActions = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
+    return action.type === 'more';
+  });
 
   // Trigger initial data fetch. Some sections might not use the wizard data,
   // but for consistency, fetching is triggered regardless of the section.
-  useSelect(select => isInitialFetchTriggered && select(WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
-  let displayedSections = sections.filter(section => !section.isHidden);
-  const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = useState(requiredPlugins.length === 0);
+  useSelect(function (select) {
+    return isInitialFetchTriggered && select(WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug);
+  });
+  var displayedSections = sections.filter(function (section) {
+    return !section.isHidden;
+  });
+  var _useState = useState(requiredPlugins.length === 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    pluginRequirementsSatisfied = _useState2[0],
+    setPluginRequirementsSatisfied = _useState2[1];
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
     displayedSections = [{
       path: '/',
-      render: () => /*#__PURE__*/_jsx(PluginInstaller, {
-        plugins: requiredPlugins,
-        onStatus: ({
-          complete
-        }) => setPluginRequirementsSatisfied(complete)
-      })
+      render: function render() {
+        return /*#__PURE__*/_jsx(PluginInstaller, {
+          plugins: requiredPlugins,
+          onStatus: function onStatus(_ref2) {
+            var complete = _ref2.complete;
+            return setPluginRequirementsSatisfied(complete);
+          }
+        });
+      }
     }];
   }
-  const urlWithoutHash = window.location.href.split('#')[0];
+
+  // When plugins are required but not yet satisfied, `displayedSections` is replaced with
+  // the PluginInstaller. Use it for routing so the installer actually mounts and runs.
+  var routedSections = pluginRequirementsSatisfied ? sections : displayedSections;
+  var urlWithoutHash = window.location.href.split('#')[0];
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     children: [/*#__PURE__*/_jsxs("div", {
@@ -157,67 +205,87 @@ const Wizard = ({
                 })]
               })]
             })
-          }), actions?.length > 0 && /*#__PURE__*/_jsxs("div", {
+          }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/_jsxs("div", {
             className: "newspack-wizard__header__actions",
-            children: [mainActions.map((action, index) => /*#__PURE__*/_jsx(Button, {
-              icon: action.icon,
-              variant: action.type,
-              onClick: action.action,
-              disabled: action.disabled || false,
-              isDestructive: action.destructive || false,
-              children: action.label
-            }, index)), moreActions.length > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
-              icon: moreVertical,
-              label: __('More', 'newspack-plugin'),
-              children: () => moreActions.map((action, index) => /*#__PURE__*/_jsx(MenuItem, {
-                icon: action.icon,
+            children: [mainActions.map(function (action, index) {
+              return /*#__PURE__*/_jsx(Button, {
+                className: "newspack-wizard__header__actions__main",
+                href: action.href,
+                icon: resolveIcon(action.icon),
+                variant: action.type,
                 onClick: action.action,
                 disabled: action.disabled || false,
                 isDestructive: action.destructive || false,
                 children: action.label
-              }, index))
+              }, index);
+            }), /*#__PURE__*/_jsx(DropdownMenu, {
+              className: (moreActions === null || moreActions === void 0 ? void 0 : moreActions.length) === 0 ? 'newspack-wizard__header__actions__more--primary-only' : '',
+              icon: moreVertical,
+              label: __('More', 'newspack-plugin'),
+              popoverProps: {
+                className: 'newspack-wizard__header__actions__more'
+              },
+              children: function children() {
+                return actions.map(function (action, index) {
+                  return /*#__PURE__*/_jsx(MenuItem, {
+                    className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__header__actions__more__main' : 'newspack-wizard__header__actions__more__more',
+                    icon: action.icon,
+                    href: action.href,
+                    onClick: action.action,
+                    disabled: action.disabled || false,
+                    isDestructive: action.destructive || false,
+                    children: action.label
+                  }, index);
+                });
+              }
             })]
           })]
         }), displayedSections.length > 1 && /*#__PURE__*/_jsx(TabbedNavigation, {
           items: displayedSections,
           children: /*#__PURE__*/_jsx(WizardError, {})
-        }), /*#__PURE__*/_jsx(HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/_jsx(ResetHeaderData, {}), /*#__PURE__*/_jsxs(Switch, {
-          children: [sections.map((section, index) => {
-            var _section$exact;
-            const SectionComponent = section.render;
-            const sectionProps = section.props || {};
-            return /*#__PURE__*/_jsx(Route, {
-              exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
-              path: section.path,
-              render: routerProps => /*#__PURE__*/_jsxs("div", {
-                className: classnames('newspack-wizard__content', className),
-                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/_jsx(SectionHeader, {
-                  className: "newspack-wizard__section-header",
-                  backNav: backNav || section.backNav,
-                  title: sectionTitle || section.title,
-                  description: sectionDescription || section.description,
-                  badges: badges || section.badges,
-                  primaryAction: sectionPrimaryAction || section.primaryAction,
-                  secondaryAction: sectionSecondaryAction || section.secondaryAction,
-                  heading: 1,
-                  noMargin: true
-                }), /*#__PURE__*/_jsx(SectionComponent, {
-                  ...routerProps,
-                  ...sectionProps,
-                  ...sharedProps
-                })]
-              })
-            }, index);
-          }), /*#__PURE__*/_jsx(Redirect, {
-            to: displayedSections[0].path
-          })]
+        }), /*#__PURE__*/_jsx(HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/_jsx(ResetHeaderData, {}), /*#__PURE__*/_jsx("div", {
+          className: "newspack-wizard__main",
+          children: /*#__PURE__*/_jsxs(Switch, {
+            children: [routedSections.map(function (section, index) {
+              var _section$exact;
+              var SectionComponent = section.render;
+              var sectionProps = section.props || {};
+              return /*#__PURE__*/_jsx(Route, {
+                exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
+                path: section.path,
+                render: function render(routerProps) {
+                  return /*#__PURE__*/_jsxs("div", {
+                    className: classnames('newspack-wizard__content', className, {
+                      'newspack-wizard__content--full-width': section.fullWidth
+                    }),
+                    children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/_jsx(SectionHeader, {
+                      className: "newspack-wizard__section-header",
+                      backNav: backNav || section.backNav,
+                      title: sectionTitle || section.title,
+                      description: sectionDescription || section.description,
+                      badges: badges || section.badges,
+                      menu: sectionMenu || section.menu,
+                      primaryAction: sectionPrimaryAction || section.primaryAction,
+                      secondaryAction: sectionSecondaryAction || section.secondaryAction,
+                      heading: 1,
+                      noMargin: true
+                    }), /*#__PURE__*/_jsx(SectionComponent, _objectSpread(_objectSpread(_objectSpread({}, routerProps), sectionProps), sharedProps))]
+                  });
+                }
+              }, index);
+            }), /*#__PURE__*/_jsx(Redirect, {
+              to: displayedSections[0].path
+            })]
+          })
         })]
-      }), notices?.length > 0 && notices.map((notice, index) => /*#__PURE__*/_jsx(WizardSnackbar, {
-        type: notice.type,
-        id: notice.id,
-        actions: notice.actions,
-        children: notice.message
-      }, notice.id || index))]
+      }), (notices === null || notices === void 0 ? void 0 : notices.length) > 0 && notices.map(function (notice, index) {
+        return /*#__PURE__*/_jsx(WizardSnackbar, {
+          type: notice.type,
+          id: notice.id,
+          actions: notice.actions,
+          children: notice.message
+        }, notice.id || index);
+      })]
     }), !isLoading && /*#__PURE__*/_jsx(Footer, {
       simple: hasSimpleFooter
     })]