newspack-components 4.6.2 → 4.7.0-alpha.1

package/dist/cjs/drawer/use-exit-animation.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies.
+ */
+
+// Covers an animationend that never arrives.
+var EXIT_FALLBACK_MS = 400;
+function useExitAnimation(isOpen, node) {
+  var _useState = (0, _element.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isExiting = _useState2[0],
+    setIsExiting = _useState2[1];
+  var _useState3 = (0, _element.useState)(isOpen),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    wasOpen = _useState4[0],
+    setWasOpen = _useState4[1];
+
+  // The stylesheet zeroes the animation here, so animationend never fires and the
+  // fallback would hold a visible panel for 400ms.
+  var prefersReducedMotion = (0, _compose.useReducedMotion)();
+
+  // During render: a commit later the panel would leave the DOM and remount.
+  if (wasOpen !== isOpen) {
+    setWasOpen(isOpen);
+    setIsExiting(!isOpen && !prefersReducedMotion);
+  }
+  (0, _element.useEffect)(function () {
+    if (!isExiting) {
+      return;
+    }
+    // Keyed on the name: animationend bubbles from anything else animating.
+    var finish = function finish(event) {
+      if (event !== null && event !== void 0 && event.animationName && 'newspack-drawer-slide-out' !== event.animationName) {
+        return;
+      }
+      setIsExiting(false);
+    };
+    var timer = setTimeout(finish, EXIT_FALLBACK_MS);
+    node === null || node === void 0 || node.addEventListener('animationend', finish);
+    return function () {
+      clearTimeout(timer);
+      node === null || node === void 0 || node.removeEventListener('animationend', finish);
+    };
+  }, [isExiting, node]);
+  return {
+    isRendered: isOpen || isExiting,
+    isExiting: isExiting
+  };
+}
+var _default = exports["default"] = useExitAnimation;

package/dist/cjs/hooks/use-confirm-dialog.js

@@ -35,6 +35,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  *
  * The `confirmDialog` element must be rendered somewhere in the component's
  * JSX for the dialog to appear.
+ *
+ * `cancelConfirm()` withdraws a pending request without invoking its callback,
+ * for when whatever raised the prompt goes away on its own.
  */
 function useConfirmDialog(options) {
   var message = options.message,
@@ -59,12 +62,20 @@ function useConfirmDialog(options) {
       callback();
     }
   }, []);
+  var cancelConfirm = (0, _element.useCallback)(function () {
+    return setPendingAction(null);
+  }, []);
   var confirmDialog = /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmDialog["default"], _objectSpread(_objectSpread({}, dialogProps), {}, {
     when: when,
     isOpen: !!pendingAction,
     onConfirm: function onConfirm() {
-      pendingAction === null || pendingAction === void 0 || pendingAction();
-      setPendingAction(null);
+      // Cleared either way: a throwing callback would otherwise leave the
+      // dialog permanently unraisable for this instance.
+      try {
+        pendingAction === null || pendingAction === void 0 || pendingAction();
+      } finally {
+        setPendingAction(null);
+      }
     },
     onCancel: function onCancel() {
       return setPendingAction(null);
@@ -73,7 +84,8 @@ function useConfirmDialog(options) {
   }));
   return {
     confirmDialog: confirmDialog,
-    requestConfirm: requestConfirm
+    requestConfirm: requestConfirm,
+    cancelConfirm: cancelConfirm
   };
 }
 var _default = exports["default"] = useConfirmDialog;

package/dist/cjs/hooks/use-unsaved-changes-dialog.js

@@ -42,7 +42,8 @@ function isSameOriginNavigation(link) {
  * messaging, intercepts same-origin link clicks so the dialog fires instead
  * of a silent navigation, and adds a `beforeunload` listener as the last-resort
  * guard for refresh / tab-close (browser-native, cannot be styled). The
- * returned `confirmDialog` element must be rendered in JSX.
+ * returned `confirmDialog` element must be rendered in JSX, and `requestConfirm`
+ * and `cancelConfirm` behave as `useConfirmDialog` documents them.
  *
  * Single-consumer constraint: the click handler is attached at the document
  * level in capture phase. Two simultaneously-active instances will both fire
@@ -53,11 +54,14 @@ function useUnsavedChangesDialog(_ref) {
   var _useConfirmDialog = (0, _useConfirmDialog2["default"])({
       when: when,
       message: (0, _i18n.__)('You have unsaved changes that will be lost. Discard changes?', 'newspack-plugin'),
-      confirmButtonText: (0, _i18n.__)('Discard changes', 'newspack-plugin'),
+      confirmButtonText: (0, _i18n.__)('Discard Changes', 'newspack-plugin'),
+      // Hidden, but still the dialog's accessible name.
+      title: (0, _i18n.__)('Unsaved changes', 'newspack-plugin'),
       hideTitle: true
     }),
     confirmDialog = _useConfirmDialog.confirmDialog,
-    requestConfirm = _useConfirmDialog.requestConfirm;
+    requestConfirm = _useConfirmDialog.requestConfirm,
+    cancelConfirm = _useConfirmDialog.cancelConfirm;
 
   // Tracks navigation the user has already approved via our custom dialog so
   // the beforeunload guard doesn't fire a second native prompt on top of it.
@@ -136,9 +140,20 @@ function useUnsavedChangesDialog(_ref) {
       return window.removeEventListener('beforeunload', handler);
     };
   }, [when]);
+
+  // Escape hatch for an action that navigates on its own — a handoff that
+  // POSTs and then assigns `window.location` — once the dialog has already
+  // been confirmed. Left armed, the beforeunload guard would draw a second,
+  // native prompt on top of it. Call it immediately before navigating, so a
+  // failed action leaves the guard in place.
+  var allowNextUnload = (0, _element.useCallback)(function () {
+    isNavigatingRef.current = true;
+  }, []);
   return {
     confirmDialog: confirmDialog,
-    requestConfirm: requestConfirm
+    requestConfirm: requestConfirm,
+    cancelConfirm: cancelConfirm,
+    allowNextUnload: allowNextUnload
   };
 }
 var _default = exports["default"] = useUnsavedChangesDialog;

package/dist/cjs/index.js

@@ -130,6 +130,12 @@ Object.defineProperty(exports, "Divider", {
     return _divider["default"];
   }
 });
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function get() {
+    return _drawer["default"];
+  }
+});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
@@ -208,6 +214,12 @@ Object.defineProperty(exports, "Page", {
     return _page["default"];
   }
 });
+Object.defineProperty(exports, "PageControl", {
+  enumerable: true,
+  get: function get() {
+    return _pageControl["default"];
+  }
+});
 Object.defineProperty(exports, "PluginInstaller", {
   enumerable: true,
   get: function get() {
@@ -292,6 +304,12 @@ Object.defineProperty(exports, "TabbedNavigation", {
     return _tabbedNavigation["default"];
   }
 });
+Object.defineProperty(exports, "TableCard", {
+  enumerable: true,
+  get: function get() {
+    return _tableCard["default"];
+  }
+});
 Object.defineProperty(exports, "TextControl", {
   enumerable: true,
   get: function get() {
@@ -316,6 +334,12 @@ Object.defineProperty(exports, "Wizard", {
     return _wizard["default"];
   }
 });
+Object.defineProperty(exports, "WizardBanner", {
+  enumerable: true,
+  get: function get() {
+    return _wizard.WizardBanner;
+  }
+});
 Object.defineProperty(exports, "espProviderOrder", {
   enumerable: true,
   get: function get() {
@@ -380,6 +404,7 @@ var _confirmDialog = _interopRequireDefault(require("./confirm-dialog"));
 var _customSelectControl = _interopRequireDefault(require("./custom-select-control"));
 var _dataviews = _interopRequireDefault(require("./dataviews"));
 var _divider = _interopRequireDefault(require("./divider"));
+var _drawer = _interopRequireDefault(require("./drawer"));
 var _formTokenField = _interopRequireDefault(require("./form-token-field"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _handoff = _interopRequireDefault(require("./handoff"));
@@ -392,6 +417,7 @@ var _modal = _interopRequireDefault(require("./modal"));
 var _newspackIcon = _interopRequireDefault(require("./newspack-icon"));
 var _notice = _interopRequireDefault(require("./notice"));
 var _page = _interopRequireDefault(require("./page"));
+var _pageControl = _interopRequireDefault(require("./page-control"));
 var _pluginInstaller = _interopRequireDefault(require("./plugin-installer"));
 var _pluginSettings = _interopRequireDefault(require("./plugin-settings"));
 var _pluginToggle = _interopRequireDefault(require("./plugin-toggle"));
@@ -405,10 +431,11 @@ var _stepsList = _interopRequireDefault(require("./steps-list"));
 var _stepsListItem = _interopRequireDefault(require("./steps-list-item"));
 var _styleCard = _interopRequireDefault(require("./style-card"));
 var _tabbedNavigation = _interopRequireDefault(require("./tabbed-navigation"));
+var _tableCard = _interopRequireDefault(require("./table-card"));
 var _textControl = _interopRequireDefault(require("./text-control"));
 var _waiting = _interopRequireDefault(require("./waiting"));
 var _webPreview = _interopRequireDefault(require("./web-preview"));
-var _wizard = _interopRequireDefault(require("./wizard"));
+var _wizard = _interopRequireWildcard(require("./wizard"));
 var _withWizard = _interopRequireDefault(require("./with-wizard"));
 var _withWizardScreen = _interopRequireDefault(require("./with-wizard-screen"));
 var _router = _interopRequireDefault(require("./proxied-imports/router"));

package/dist/cjs/page/index.js

@@ -49,7 +49,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *                                          inside its active tab panel — or, when no visible tab
  *                                          owns the route, as a sibling of the panels.
  * @param {string} [props.className]
- * @param {*}      props.children
+ * @param {*}      [props.children]
  * @return {JSX.Element} Page component.
  */var Page = function Page(_ref) {
   var _breadcrumbItems;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _element = require("@wordpress/element");
+var _htmlEntities = require("@wordpress/html-entities");
+var _i18n = require("@wordpress/i18n");
+var _ = require("../");
+var _jsxRuntime = require("react/jsx-runtime");
+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; } /**
+ * Page Control.
+ *
+ * A single-page selector backed by an autocomplete search, for settings that point at a
+ * page without enumerating every page the site has.
+ */ /**
+ * WordPress dependencies
+ */ /**
+ * Internal dependencies
+ */ /**
+ * Render a single-page selector.
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.label    Field label.
+ * @param {string}   props.help     Help text.
+ * @param {boolean}  props.disabled Whether the field is disabled (e.g. while saving).
+ * @param {Object}   props.selected The saved page as `{ label, value }`, if any.
+ * @param {Function} props.onChange Called with the selected page ID, or '' when cleared.
+ */
+var PageControl = function PageControl(_ref) {
+  var label = _ref.label,
+    help = _ref.help,
+    disabled = _ref.disabled,
+    selected = _ref.selected,
+    _onChange = _ref.onChange;
+  // Titles arrive HTML-encoded from the server, while the autocomplete decodes the
+  // suggestions it fetches. Decode here so the saved page and the search results below
+  // it render the same way.
+  var normalize = function normalize(item) {
+    return item ? _objectSpread(_objectSpread({}, item), {}, {
+      label: (0, _htmlEntities.decodeEntities)(item.label)
+    }) : null;
+  };
+  var _useState = (0, _element.useState)(normalize(selected)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  // Settings are fetched after this control first renders, so adopt the saved page
+  // whenever it arrives or changes rather than only on mount.
+  (0, _element.useEffect)(function () {
+    setSelectedItem(normalize(selected));
+  }, [selected === null || selected === void 0 ? void 0 : selected.value, selected === null || selected === void 0 ? void 0 : selected.label]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+    disabled: disabled,
+    className: "newspack-page-control",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.AutocompleteWithSuggestions, {
+      label: label,
+      help: help,
+      postTypes: [{
+        slug: 'page',
+        label: (0, _i18n.__)('Page', 'newspack-plugin')
+      }],
+      postTypeLabel: (0, _i18n.__)('page', 'newspack-plugin'),
+      postTypeLabelPlural: (0, _i18n.__)('pages', 'newspack-plugin'),
+      selectedItems: selectedItem ? [selectedItem] : [],
+      onChange: function onChange(items) {
+        if (disabled) {
+          return;
+        }
+        var item = items && items.length ? items[items.length - 1] : null;
+        setSelectedItem(normalize(item));
+        _onChange(item ? String(item.value) : '');
+      }
+    })
+  });
+};
+var _default = exports["default"] = PageControl;

package/dist/cjs/plugin-settings/SettingsSection.js

@@ -26,6 +26,10 @@ var isSelectControl = function isSelectControl(setting) {
   return Array.isArray(setting.options) && setting.options.length;
 };
 var getControlComponent = function getControlComponent(setting) {
+  // An explicit `control` overrides the control implied by the setting's data type.
+  if ('page' === setting.control) {
+    return _.PageControl;
+  }
   if (isSelectControl(setting)) {
     return _.SelectControl;
   }
@@ -86,6 +90,8 @@ var SettingsSection = function SettingsSection(props) {
         };
       })) || null,
       value: setting.value,
+      // Only page controls consume `selected`; keep it off every other control's props.
+      selected: 'page' === setting.control ? setting.selected || null : null,
       multiple: isSelectControl(setting) && setting.multiple ? true : null,
       checked: setting.type === 'boolean' ? !!setting.value : null,
       onChange: function onChange(value) {
@@ -124,7 +130,7 @@ var SettingsSection = function SettingsSection(props) {
         onUpdate();
         setSaveDisabled(true);
       },
-      children: (0, _i18n.__)('Save Settings', 'newspack')
+      children: (0, _i18n.__)('Save Settings', 'newspack-plugin')
     })),
     children: (active || active === null) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
       children: [(error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {

package/dist/cjs/section-header/index.js

@@ -46,6 +46,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
  * @property {boolean}            [noMargin=false]   - Indicates if the header should have no margin.
  * @property {boolean}            [pageHeader=false] - Indicates if the header is used as a page header.
+ * @property {string}             [size='default']   - Size variant, either 'default' or 'small'. Scales the title, and the icon with it, independently of `pageHeader`.
  * @property {string}             title              - The title of the section.
  * @property {?string}            [id=null]          - Optional ID for the header element.
  * @property {?string|Function|*} [children=null]    - Optional children to display in the header.
@@ -75,6 +76,8 @@ var _jsxRuntime = require("react/jsx-runtime");
     noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
     _ref$pageHeader = _ref.pageHeader,
     pageHeader = _ref$pageHeader === void 0 ? false : _ref$pageHeader,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
     title = _ref.title,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? null : _ref$id,
@@ -101,7 +104,7 @@ var _jsxRuntime = require("react/jsx-runtime");
       }, 250);
     }
   }, []);
-  var classes = (0, _classnames["default"])('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header');
+  var classes = (0, _classnames["default"])('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header', size === 'small' && 'newspack-section-header--small');
 
   // The breadcrumb `Page` owns the single page `<h1>`, so a `pageHeader` section
   // is a secondary heading: its level follows `heading` (default 2). `pageHeader`
@@ -164,7 +167,7 @@ var _jsxRuntime = require("react/jsx-runtime");
         className: "newspack-section-header__icon",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
           icon: icon,
-          size: 48
+          size: size === 'small' ? 24 : 48
         })
       }), backNav ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
         alignment: "left",

package/dist/cjs/section-header/style.scss

@@ -95,6 +95,31 @@
 		@include wp-mixins.heading-x-large();
 	}
 
+	&#{&}--small {
+		.newspack-section-header__title {
+			@include wp-mixins.heading-large();
+		}
+	}
+
+	&__icon {
+		background-color: var(--wp-admin-theme-color-lighter-10);
+		border-radius: 100%;
+		display: grid;
+		height: 80px;
+		margin-bottom: 8px !important;
+		width: 80px;
+		place-items: center;
+		svg {
+			fill: var(--wp-admin-theme-color);
+		}
+	}
+
+	&#{&}--small .newspack-section-header__icon {
+		height: wp-vars.$grid-unit-50;
+		margin-bottom: wp-vars.$grid-unit-05 !important;
+		width: wp-vars.$grid-unit-50;
+	}
+
 	&__title-container {
 		align-items: center;
 		display: flex;
@@ -154,17 +179,5 @@
 		> p {
 			text-align: center;
 		}
-		.newspack-section-header__icon {
-			background-color: var(--wp-admin-theme-color-lighter-10);
-			border-radius: 100%;
-			display: grid;
-			height: 80px;
-			margin-bottom: 8px !important;
-			width: 80px;
-			place-items: center;
-			svg {
-				fill: var(--wp-admin-theme-color);
-			}
-		}
 	}
 }

package/dist/cjs/table-card/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TableCard;
+var _ui = require("@wordpress/ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * TableCard
+ *
+ * The DataViews-in-a-card composition from @wordpress/ui. Which card edges the
+ * table touches follows upstream first/last-child rules, so it changes with the
+ * slots present — the README spells the combinations out.
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/** `0` is a renderable slot value; the falsy leftovers of `cond && <X />` are not. */
+var isRenderable = function isRenderable(node) {
+  return node !== undefined && node !== null && node !== '' && typeof node !== 'boolean';
+};
+function TableCard(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 3 : _ref$heading,
+    actions = _ref.actions,
+    before = _ref.before,
+    after = _ref.after,
+    className = _ref.className,
+    children = _ref.children;
+  var TitleTag = "h".concat(heading);
+  var hasTitle = isRenderable(title);
+  var hasActions = isRenderable(actions);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Card.Root, {
+    className: className,
+    children: [(hasTitle || hasActions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Card.Header, {
+      render: hasActions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+        direction: "row",
+        justify: hasTitle ? 'space-between' : 'end',
+        align: "center"
+      }) : undefined,
+      children: [hasTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Card.Title, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleTag, {
+          id: titleId
+        }),
+        children: title
+      }), hasActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+        direction: "row",
+        gap: "sm",
+        align: "center",
+        children: actions
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Card.Content, {
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+        direction: "column",
+        gap: "lg"
+      }),
+      children: [before, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Card.FullBleed, {
+        children: children
+      }), after]
+    })]
+  });
+}

package/dist/cjs/table-card/index.test.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+// @wordpress/ui injects no CSS under Jest, so the layout this component exists
+// for (full bleed, edge bumps, the content gap) is invisible here; slot order
+// and heading semantics are the assertable contract.
+describe('TableCard', function () {
+  it('renders the table children inside the card', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(_react.screen.getByRole('table', {
+      name: 'Prices'
+    })).toBeInTheDocument();
+  });
+  it('renders the title as a real heading carrying the given id', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        title: "Price schedule",
+        titleId: "tc-title",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+          "aria-label": "Prices"
+        })
+      })),
+      rerender = _render.rerender;
+    expect(_react.screen.getByRole('heading', {
+      level: 3,
+      name: 'Price schedule'
+    })).toHaveAttribute('id', 'tc-title');
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      title: "Price schedule",
+      heading: 2,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 2,
+      name: 'Price schedule'
+    })).toBeInTheDocument();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(_react.screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+  it('treats 0 as a renderable title and the empty string as none', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        title: 0,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+          "aria-label": "Prices"
+        })
+      })),
+      rerender = _render2.rerender;
+    expect(_react.screen.getByRole('heading', {
+      level: 3,
+      name: '0'
+    })).toBeInTheDocument();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      title: "",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(_react.screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+  it('renders header actions alongside the title', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      title: "Price Schedule",
+      actions: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        children: "Add Price"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    var heading = _react.screen.getByRole('heading', {
+      level: 3,
+      name: 'Price Schedule'
+    });
+    var action = _react.screen.getByRole('button', {
+      name: 'Add Price'
+    });
+    expect(heading.parentElement).toContainElement(action);
+  });
+  it('renders a header for actions alone, and none for boolean slot leftovers', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        actions: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          children: "Add Price"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+          "aria-label": "Prices"
+        })
+      })),
+      rerender = _render3.rerender;
+    expect(_react.screen.getByRole('button', {
+      name: 'Add Price'
+    })).toBeInTheDocument();
+    expect(_react.screen.queryByRole('heading')).not.toBeInTheDocument();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      title: false,
+      actions: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(_react.screen.queryByRole('heading')).not.toBeInTheDocument();
+    expect(_react.screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+  it('orders before, table, after within the card body', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      before: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Stats row"
+      }),
+      after: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        children: "See More"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    var before = _react.screen.getByText('Stats row');
+    var after = _react.screen.getByRole('button', {
+      name: 'See More'
+    });
+    var table = _react.screen.getByRole('table', {
+      name: 'Prices'
+    });
+    // Walk the table up to the card body's direct child, so extra upstream
+    // wrappers cannot silently repoint the comparison.
+    var body = before.parentElement;
+    var tableWrap = table;
+    while (tableWrap.parentElement !== body) {
+      tableWrap = tableWrap.parentElement;
+    }
+    var order = Array.from(body.children);
+    expect(order.indexOf(before)).toBeLessThan(order.indexOf(tableWrap));
+    expect(order.indexOf(tableWrap)).toBeLessThan(order.indexOf(after));
+  });
+});

package/dist/cjs/with-wizard-screen/style.scss

@@ -18,6 +18,14 @@
 
 	color: wp-colors.$gray-900;
 
+	// Full-width dividers span 100vw, which overspills the admin content area
+	// (admin menu offset + scrollbar) and triggers horizontal scrolling; clip
+	// (not hidden) so no scroll container is created. Scoped off __content,
+	// which can be a constrained centered column.
+	&:not(.newspack-wizard__content) {
+		overflow-x: clip;
+	}
+
 	// Headings
 	h1,
 	h2,