newspack-components 4.3.0 → 4.4.0-alpha.1

package/dist/cjs/wizard/index.js

@@ -4,7 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
@@ -17,38 +19,49 @@ var _store = _interopRequireWildcard(require("./store"));
 var _WizardSnackbar = _interopRequireDefault(require("./components/WizardSnackbar"));
 var _WizardError = _interopRequireDefault(require("./components/WizardError"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2["default"])(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.
- */
-
-/**
+ */ /**
  * WordPress dependencies.
+ */ /**
+ * Internal dependencies
  */
+(0, _store["default"])();
 
 /**
- * Internal dependencies
+ * 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.
  */
-
-(0, _store.default)();
-const {
-  HashRouter,
-  Redirect,
-  Route,
-  Switch,
-  useLocation
-} = _router.default;
+var ICON_REGISTRY = {
+  chevronLeft: _icons.chevronLeft,
+  category: _icons.category,
+  moreVertical: _icons.moreVertical
+};
+var resolveIcon = function resolveIcon(icon) {
+  if (typeof icon === 'string') {
+    return ICON_REGISTRY[icon] || null;
+  }
+  return icon;
+};
+var HashRouter = _router["default"].HashRouter,
+  Redirect = _router["default"].Redirect,
+  Route = _router["default"].Route,
+  Switch = _router["default"].Switch,
+  useLocation = _router["default"].useLocation;
 
 /**
  * Reset the header data when a new section is rendered.
  */
-const ResetHeaderData = () => {
-  const location = useLocation();
-  const {
-    resetHeaderData
-  } = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE);
-  (0, _element.useEffect)(() => {
+var ResetHeaderData = function ResetHeaderData() {
+  var location = useLocation();
+  var _useDispatch = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
+    resetHeaderData = _useDispatch.resetHeaderData;
+  (0, _element.useEffect)(function () {
     resetHeaderData();
+    window.scrollTo(0, 0);
   }, [location.pathname, resetHeaderData]);
   return null;
 };
@@ -74,58 +87,87 @@ 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 = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).isLoading());
-  const isQuietLoading = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).isQuietLoading());
-  const headerData = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).getHeaderData());
-  const notices = (0, _data.useSelect)(select => select(_store.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 = (0, _data.useSelect)(function (select) {
+    return select(_store.WIZARD_STORE_NAMESPACE).isLoading();
+  });
+  var isQuietLoading = (0, _data.useSelect)(function (select) {
+    return select(_store.WIZARD_STORE_NAMESPACE).isQuietLoading();
+  });
+  var headerData = (0, _data.useSelect)(function (select) {
+    return select(_store.WIZARD_STORE_NAMESPACE).getHeaderData();
+  });
+  var notices = (0, _data.useSelect)(function (select) {
+    return select(_store.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.
-  (0, _data.useSelect)(select => isInitialFetchTriggered && select(_store.WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
-  let displayedSections = sections.filter(section => !section.isHidden);
-  const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = (0, _element.useState)(requiredPlugins.length === 0);
+  (0, _data.useSelect)(function (select) {
+    return isInitialFetchTriggered && select(_store.WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug);
+  });
+  var displayedSections = sections.filter(function (section) {
+    return !section.isHidden;
+  });
+  var _useState = (0, _element.useState)(requiredPlugins.length === 0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    pluginRequirementsSatisfied = _useState2[0],
+    setPluginRequirementsSatisfied = _useState2[1];
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin');
     displayedSections = [{
       path: '/',
-      render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
-        plugins: requiredPlugins,
-        onStatus: ({
-          complete
-        }) => setPluginRequirementsSatisfied(complete)
-      })
+      render: function render() {
+        return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
+      className: (0, _classnames["default"])(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
         'newspack-wizard__is-loading-quiet': isQuietLoading,
         'newspack-wizard__fixed-header': fixedHeader
       }),
@@ -166,70 +208,90 @@ const Wizard = ({
                 })]
               })]
             })
-          }), actions?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "newspack-wizard__header__actions",
-            children: [mainActions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
-              icon: _icons.moreVertical,
-              label: (0, _i18n.__)('More', 'newspack-plugin'),
-              children: () => moreActions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-                icon: action.icon,
+            children: [mainActions.map(function (action, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+              className: (moreActions === null || moreActions === void 0 ? void 0 : moreActions.length) === 0 ? 'newspack-wizard__header__actions__more--primary-only' : '',
+              icon: _icons.moreVertical,
+              label: (0, _i18n.__)('More', 'newspack-plugin'),
+              popoverProps: {
+                className: 'newspack-wizard__header__actions__more'
+              },
+              children: function children() {
+                return actions.map(function (action, index) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
           items: displayedSections,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError.default, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResetHeaderData, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
-          children: [sections.map((section, index) => {
-            var _section$exact;
-            const SectionComponent = section.render;
-            const sectionProps = section.props || {};
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Route, {
-              exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
-              path: section.path,
-              render: routerProps => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _classnames.default)('newspack-wizard__content', className),
-                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(SectionComponent, {
-                  ...routerProps,
-                  ...sectionProps,
-                  ...sharedProps
-                })]
-              })
-            }, index);
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
-            to: displayedSections[0].path
-          })]
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResetHeaderData, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-wizard__main",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
+            children: [routedSections.map(function (section, index) {
+              var _section$exact;
+              var SectionComponent = section.render;
+              var sectionProps = section.props || {};
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(Route, {
+                exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
+                path: section.path,
+                render: function render(routerProps) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    className: (0, _classnames["default"])('newspack-wizard__content', className, {
+                      'newspack-wizard__content--full-width': section.fullWidth
+                    }),
+                    children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(SectionComponent, _objectSpread(_objectSpread(_objectSpread({}, routerProps), sectionProps), sharedProps))]
+                  });
+                }
+              }, index);
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
+              to: displayedSections[0].path
+            })]
+          })
         })]
-      }), notices?.length > 0 && notices.map((notice, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSnackbar.default, {
-        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__*/(0, _jsxRuntime.jsx)(_WizardSnackbar["default"], {
+          type: notice.type,
+          id: notice.id,
+          actions: notice.actions,
+          children: notice.message
+        }, notice.id || index);
+      })]
     }), !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Footer, {
       simple: hasSimpleFooter
     })]
   });
 };
-var _default = exports.default = (0, _element.forwardRef)(Wizard);
+var _default = exports["default"] = (0, _element.forwardRef)(Wizard);