newspack-components 4.6.3 → 4.7.0-alpha.2

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

@@ -0,0 +1,52 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * WordPress dependencies.
+ */
+import { useReducedMotion } from '@wordpress/compose';
+import { useEffect, useState } from '@wordpress/element';
+
+// Covers an animationend that never arrives.
+var EXIT_FALLBACK_MS = 400;
+function useExitAnimation(isOpen, node) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExiting = _useState2[0],
+    setIsExiting = _useState2[1];
+  var _useState3 = useState(isOpen),
+    _useState4 = _slicedToArray(_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 = useReducedMotion();
+
+  // During render: a commit later the panel would leave the DOM and remount.
+  if (wasOpen !== isOpen) {
+    setWasOpen(isOpen);
+    setIsExiting(!isOpen && !prefersReducedMotion);
+  }
+  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
+  };
+}
+export default useExitAnimation;

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

@@ -29,6 +29,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * 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,
@@ -53,12 +56,20 @@ function useConfirmDialog(options) {
       callback();
     }
   }, []);
+  var cancelConfirm = useCallback(function () {
+    return setPendingAction(null);
+  }, []);
   var confirmDialog = /*#__PURE__*/_jsx(ConfirmDialog, _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);
@@ -67,7 +78,8 @@ function useConfirmDialog(options) {
   }));
   return {
     confirmDialog: confirmDialog,
-    requestConfirm: requestConfirm
+    requestConfirm: requestConfirm,
+    cancelConfirm: cancelConfirm
   };
 }
 export default useConfirmDialog;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies.
  */
-import { useEffect, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -34,7 +34,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
@@ -45,11 +46,14 @@ function useUnsavedChangesDialog(_ref) {
   var _useConfirmDialog = useConfirmDialog({
       when: when,
       message: __('You have unsaved changes that will be lost. Discard changes?', 'newspack-plugin'),
-      confirmButtonText: __('Discard changes', 'newspack-plugin'),
+      confirmButtonText: __('Discard Changes', 'newspack-plugin'),
+      // Hidden, but still the dialog's accessible name.
+      title: __('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.
@@ -128,9 +132,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 = useCallback(function () {
+    isNavigatingRef.current = true;
+  }, []);
   return {
     confirmDialog: confirmDialog,
-    requestConfirm: requestConfirm
+    requestConfirm: requestConfirm,
+    cancelConfirm: cancelConfirm,
+    allowNextUnload: allowNextUnload
   };
 }
 export default useUnsavedChangesDialog;

package/dist/esm/index.js

@@ -19,6 +19,7 @@ export { default as ConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as DataViews } from './dataviews';
 export { default as Divider } from './divider';
+export { default as Drawer } from './drawer';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';
@@ -31,6 +32,7 @@ export { default as Modal } from './modal';
 export { default as NewspackIcon } from './newspack-icon';
 export { default as Notice } from './notice';
 export { default as Page } from './page';
+export { default as PageControl } from './page-control';
 export { default as PluginInstaller } from './plugin-installer';
 export { default as PluginSettings } from './plugin-settings';
 export { default as PluginToggle } from './plugin-toggle';
@@ -44,10 +46,12 @@ export { default as StepsList } from './steps-list';
 export { default as StepsListItem } from './steps-list-item';
 export { default as StyleCard } from './style-card';
 export { default as TabbedNavigation } from './tabbed-navigation';
+export { default as TableCard } from './table-card';
 export { default as TextControl } from './text-control';
 export { default as Waiting } from './waiting';
 export { default as WebPreview } from './web-preview';
 export { default as Wizard } from './wizard';
+export { WizardBanner } from './wizard';
 export { default as withWizard } from './with-wizard';
 export { default as withWizardScreen } from './with-wizard-screen';
 export { default as Router } from './proxied-imports/router';

package/dist/esm/page/index.js

@@ -39,7 +39,7 @@ import './style.scss';
  *                                          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.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";

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

@@ -0,0 +1,82 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+/**
+ * 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
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { AutocompleteWithSuggestions } from '../';
+
+/**
+ * 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.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+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: decodeEntities(item.label)
+    }) : null;
+  };
+  var _useState = useState(normalize(selected)),
+    _useState2 = _slicedToArray(_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.
+  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__*/_jsx("fieldset", {
+    disabled: disabled,
+    className: "newspack-page-control",
+    children: /*#__PURE__*/_jsx(AutocompleteWithSuggestions, {
+      label: label,
+      help: help,
+      postTypes: [{
+        slug: 'page',
+        label: __('Page', 'newspack-plugin')
+      }],
+      postTypeLabel: __('page', 'newspack-plugin'),
+      postTypeLabelPlural: __('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) : '');
+      }
+    })
+  });
+};
+export default PageControl;

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

@@ -17,13 +17,17 @@ import { CheckboxControl } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { ActionCard, Button, Grid, Notice, SelectControl, TextControl } from '../';
+import { ActionCard, Button, Grid, Notice, PageControl, SelectControl, TextControl } from '../';
 import './style.scss';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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;
   }
@@ -84,6 +88,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) {
@@ -122,7 +128,7 @@ var SettingsSection = function SettingsSection(props) {
         onUpdate();
         setSaveDisabled(true);
       },
-      children: __('Save Settings', 'newspack')
+      children: __('Save Settings', 'newspack-plugin')
     })),
     children: (active || active === null) && /*#__PURE__*/_jsxs(Fragment, {
       children: [(error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/_jsx(Notice, {

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

@@ -36,6 +36,7 @@ import classnames from 'classnames';
  * @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.
@@ -67,6 +68,8 @@ var SectionHeader = function SectionHeader(_ref) {
     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,
@@ -93,7 +96,7 @@ var SectionHeader = function SectionHeader(_ref) {
       }, 250);
     }
   }, []);
-  var classes = classnames('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 = classnames('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`
@@ -156,7 +159,7 @@ var SectionHeader = function SectionHeader(_ref) {
         className: "newspack-section-header__icon",
         children: /*#__PURE__*/_jsx(Icon, {
           icon: icon,
-          size: 48
+          size: size === 'small' ? 24 : 48
         })
       }), backNav ? /*#__PURE__*/_jsxs(HStack, {
         alignment: "left",

package/dist/esm/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/esm/table-card/index.js

@@ -0,0 +1,60 @@
+/**
+ * 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
+ */
+import { Card, Stack } from '@wordpress/ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** `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';
+};
+export default 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__*/_jsxs(Card.Root, {
+    className: className,
+    children: [(hasTitle || hasActions) && /*#__PURE__*/_jsxs(Card.Header, {
+      render: hasActions ? /*#__PURE__*/_jsx(Stack, {
+        direction: "row",
+        justify: hasTitle ? 'space-between' : 'end',
+        align: "center"
+      }) : undefined,
+      children: [hasTitle && /*#__PURE__*/_jsx(Card.Title, {
+        render: /*#__PURE__*/_jsx(TitleTag, {
+          id: titleId
+        }),
+        children: title
+      }), hasActions && /*#__PURE__*/_jsx(Stack, {
+        direction: "row",
+        gap: "sm",
+        align: "center",
+        children: actions
+      })]
+    }), /*#__PURE__*/_jsxs(Card.Content, {
+      render: /*#__PURE__*/_jsx(Stack, {
+        direction: "column",
+        gap: "lg"
+      }),
+      children: [before, /*#__PURE__*/_jsx(Card.FullBleed, {
+        children: children
+      }), after]
+    })]
+  });
+}

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

@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import TableCard from '.';
+
+// @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.
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('TableCard', function () {
+  it('renders the table children inside the card', function () {
+    render(/*#__PURE__*/_jsx(TableCard, {
+      children: /*#__PURE__*/_jsx("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(screen.getByRole('table', {
+      name: 'Prices'
+    })).toBeInTheDocument();
+  });
+  it('renders the title as a real heading carrying the given id', function () {
+    var _render = render(/*#__PURE__*/_jsx(TableCard, {
+        title: "Price schedule",
+        titleId: "tc-title",
+        children: /*#__PURE__*/_jsx("table", {
+          "aria-label": "Prices"
+        })
+      })),
+      rerender = _render.rerender;
+    expect(screen.getByRole('heading', {
+      level: 3,
+      name: 'Price schedule'
+    })).toHaveAttribute('id', 'tc-title');
+    rerender(/*#__PURE__*/_jsx(TableCard, {
+      title: "Price schedule",
+      heading: 2,
+      children: /*#__PURE__*/_jsx("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(screen.getByRole('heading', {
+      level: 2,
+      name: 'Price schedule'
+    })).toBeInTheDocument();
+    rerender(/*#__PURE__*/_jsx(TableCard, {
+      children: /*#__PURE__*/_jsx("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+  it('treats 0 as a renderable title and the empty string as none', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(TableCard, {
+        title: 0,
+        children: /*#__PURE__*/_jsx("table", {
+          "aria-label": "Prices"
+        })
+      })),
+      rerender = _render2.rerender;
+    expect(screen.getByRole('heading', {
+      level: 3,
+      name: '0'
+    })).toBeInTheDocument();
+    rerender(/*#__PURE__*/_jsx(TableCard, {
+      title: "",
+      children: /*#__PURE__*/_jsx("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+  it('renders header actions alongside the title', function () {
+    render(/*#__PURE__*/_jsx(TableCard, {
+      title: "Price Schedule",
+      actions: /*#__PURE__*/_jsx("button", {
+        children: "Add Price"
+      }),
+      children: /*#__PURE__*/_jsx("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    var heading = screen.getByRole('heading', {
+      level: 3,
+      name: 'Price Schedule'
+    });
+    var action = 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 = render(/*#__PURE__*/_jsx(TableCard, {
+        actions: /*#__PURE__*/_jsx("button", {
+          children: "Add Price"
+        }),
+        children: /*#__PURE__*/_jsx("table", {
+          "aria-label": "Prices"
+        })
+      })),
+      rerender = _render3.rerender;
+    expect(screen.getByRole('button', {
+      name: 'Add Price'
+    })).toBeInTheDocument();
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    rerender(/*#__PURE__*/_jsx(TableCard, {
+      title: false,
+      actions: false,
+      children: /*#__PURE__*/_jsx("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+  it('orders before, table, after within the card body', function () {
+    render(/*#__PURE__*/_jsx(TableCard, {
+      before: /*#__PURE__*/_jsx("p", {
+        children: "Stats row"
+      }),
+      after: /*#__PURE__*/_jsx("button", {
+        children: "See More"
+      }),
+      children: /*#__PURE__*/_jsx("table", {
+        "aria-label": "Prices"
+      })
+    }));
+    var before = screen.getByText('Stats row');
+    var after = screen.getByRole('button', {
+      name: 'See More'
+    });
+    var table = 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/esm/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,