newspack-components 4.10.0 → 4.11.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# newspack-components [4.11.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.10.0...newspack-components@4.11.0) (2026-10-14)
+
+
+### Features
+
+* **newsletters:** show premium lists in the subscription form ([#1291](https://github.com/Automattic/newspack-workspace/issues/1291)) ([456d762](https://github.com/Automattic/newspack-workspace/commit/456d762ba465aafc6e5be08ed47836acafaad1a6))
+
 # newspack-components [4.10.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.9.2...newspack-components@4.10.0) (2026-10-12)
 
 

package/DEVELOPMENT.md

@@ -93,6 +93,7 @@ When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64)
 - **`FormTokenField`** - Token input field for tags/categories; prefer the Newspack component over the core `FormTokenField` because it also supports a `description` prop for help text like other controls.
 - **`ImageUpload`** - Image upload and selection component
 - **`RadioControl`** - Radio button group control
+- **`ReorderModal`** - Modal for putting a short list of items in order, by dragging or with move buttons; applies on Save
 - **`TextControl`** - Text input with Newspack styling and required field support
 
 ### Content Components

package/dist/cjs/card-sortable-list/index.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _ui = require("@wordpress/ui");
-var _ = require("../");
+var _card = _interopRequireDefault(require("../card"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -388,7 +388,7 @@ var CardSortableList = function CardSortableList(_ref) {
               var _item$badge, _item$badge$intent;
               var onDraggableStart = _ref2.onDraggableStart,
                 onDraggableEnd = _ref2.onDraggableEnd;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card["default"], {
                 isSmall: true,
                 draggable: true,
                 onDragStart: onDraggableStart,
@@ -413,7 +413,10 @@ var CardSortableList = function CardSortableList(_ref) {
                 }, item.onToggleChange !== undefined && {
                   actionType: 'toggle',
                   isActive: item.toggleChecked,
-                  onToggle: item.onToggleChange
+                  onToggle: item.onToggleChange,
+                  // Names the toggle for assistive tech. The card hides this
+                  // label, since the header already shows the title.
+                  title: item.title
                 }), item.actions !== undefined && {
                   actions: item.actions
                 })

package/dist/cjs/card-sortable-list/index.test.js

@@ -47,4 +47,25 @@ describe('CardSortableList', function () {
     // An unguarded Badge would still emit an empty span, so assert on element children.
     expect(container.querySelector('h3').children).toHaveLength(0);
   });
+  it('names each toggle after its item', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      items: [{
+        id: 1,
+        title: 'Homepage',
+        toggleChecked: true,
+        onToggleChange: function onToggleChange() {}
+      }, {
+        id: 2,
+        title: 'About',
+        toggleChecked: false,
+        onToggleChange: function onToggleChange() {}
+      }]
+    }));
+    expect(_react.screen.getByRole('checkbox', {
+      name: 'Homepage'
+    })).toBeChecked();
+    expect(_react.screen.getByRole('checkbox', {
+      name: 'About'
+    })).not.toBeChecked();
+  });
 });

package/dist/cjs/card-sortable-list/style.scss

@@ -6,6 +6,14 @@ $drop-duration: 400ms; /* must match DROP_ANIMATION_DURATION in index.tsx */
 	&__item {
 		cursor: grab;
 
+		/*
+		 * Keep a card's title in the case it was written in. The block editor
+		 * sidebar uppercases every h3 (`.interface-complementary-area h3`).
+		 */
+		.newspack-card--core__header-content h3 {
+			text-transform: none;
+		}
+
 		/*
 		 * Animate items sliding to fill/make space around the dragged item.
 		 */

package/dist/cjs/index.js

@@ -250,6 +250,12 @@ Object.defineProperty(exports, "RadioControl", {
     return _radioControl["default"];
   }
 });
+Object.defineProperty(exports, "ReorderModal", {
+  enumerable: true,
+  get: function get() {
+    return _reorderModal["default"];
+  }
+});
 Object.defineProperty(exports, "Router", {
   enumerable: true,
   get: function get() {
@@ -436,6 +442,7 @@ var _pluginToggle = _interopRequireDefault(require("./plugin-toggle"));
 var _popover = _interopRequireDefault(require("./popover"));
 var _progressBar = _interopRequireDefault(require("./progress-bar"));
 var _radioControl = _interopRequireDefault(require("./radio-control"));
+var _reorderModal = _interopRequireDefault(require("./reorder-modal"));
 var _sectionHeader = _interopRequireDefault(require("./section-header"));
 var _selectControl = _interopRequireDefault(require("./select-control"));
 var _settings = _interopRequireDefault(require("./settings"));

package/dist/cjs/reorder-modal/index.js

@@ -0,0 +1,521 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveItem = exports.findOverlay = exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _i18n = require("@wordpress/i18n");
+var _a11y = require("@wordpress/a11y");
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _ui = require("@wordpress/ui");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+var moveItem = exports.moveItem = function moveItem(items, from, to) {
+  if (from === to || from < 0 || to < 0 || from >= items.length || to >= items.length) {
+    return items;
+  }
+  var next = (0, _toConsumableArray2["default"])(items);
+  var _next$splice = next.splice(from, 1),
+    _next$splice2 = (0, _slicedToArray2["default"])(_next$splice, 1),
+    moved = _next$splice2[0];
+  next.splice(to, 0, moved);
+  return next;
+};
+var OVERLAY_SELECTOR = '.components-modal__screen-overlay';
+
+// The overlay carries the dismissal handling and the drop target, and `Modal`
+// forwards its ref to it today. Deriving it from whatever node arrives keeps
+// both working if core ever forwards that ref somewhere else.
+var findOverlay = exports.findOverlay = function findOverlay(node) {
+  var _node$closest, _node$querySelector, _node$ownerDocument;
+  return (node === null || node === void 0 || (_node$closest = node.closest) === null || _node$closest === void 0 ? void 0 : _node$closest.call(node, OVERLAY_SELECTOR)) || (node === null || node === void 0 || (_node$querySelector = node.querySelector) === null || _node$querySelector === void 0 ? void 0 : _node$querySelector.call(node, OVERLAY_SELECTOR)) || (node === null || node === void 0 || (_node$ownerDocument = node.ownerDocument) === null || _node$ownerDocument === void 0 ? void 0 : _node$ownerDocument.querySelector(OVERLAY_SELECTOR)) || null;
+};
+
+// Disabled controls stay focusable here, so they report `aria-disabled` rather
+// than the native attribute.
+var isAvailable = function isAvailable(button) {
+  return !!button && !button.matches(':disabled, [aria-disabled="true"]');
+};
+
+// Speech input matches on the visible label, so it has to open the accessible
+// name. Composing both from one translated string keeps that true in every locale.
+var nameWithTitle = function nameWithTitle(label, title) {
+  return (0, _i18n.sprintf)(/* translators: keep %1$s first: it repeats the button's visible label, which speech input matches on. 1: the control's visible label. 2: title of the content being moved. */
+  (0, _i18n.__)('%1$s: %2$s', 'newspack-plugin'), label, title);
+};
+
+/**
+ * Put a short list of items in order and, optionally, choose which are on.
+ * Changes apply on Save.
+ *
+ * @param {Object}   props             Component props.
+ * @param {string}   props.title       Modal title.
+ * @param {Array}    props.ids         Item IDs, in their current order.
+ * @param {Function} props.fetchItems  Resolves the IDs to `{ value, label, badge? }`, where `badge` is `{ label, tooltip? }`.
+ * @param {Function} props.onSave      Called with the new order and, when `enabledIds` is given, the enabled IDs: those
+ *                                     on, in that order, then any from `enabledIds` the modal had no row for, kept as they were.
+ * @param {Function} props.onClose     Called when the modal closes without saving.
+ * @param {Array}    props.enabledIds  Optional. Gives each row an on/off toggle, starting on for these IDs. Save is held while none is on.
+ * @param {string}   props.description Optional. Introduces the list, above it.
+ * @param {string}   props.noneOnHelp  Why Save is held while no toggle is on.
+ */
+var _ReorderModal = function ReorderModal(_ref) {
+  var title = _ref.title,
+    ids = _ref.ids,
+    fetchItems = _ref.fetchItems,
+    onSave = _ref.onSave,
+    onClose = _ref.onClose,
+    enabledIds = _ref.enabledIds,
+    description = _ref.description,
+    _ref$noneOnHelp = _ref.noneOnHelp,
+    noneOnHelp = _ref$noneOnHelp === void 0 ? (0, _i18n.__)('Turn on at least one item to save.', 'newspack-plugin') : _ref$noneOnHelp;
+  var hasToggles = Array.isArray(enabledIds);
+  var instanceId = (0, _compose.useInstanceId)(_ReorderModal, 'newspack-reorder-modal');
+  var moveUpLabel = (0, _i18n.__)('Move Up', 'newspack-plugin');
+  var moveDownLabel = (0, _i18n.__)('Move Down', 'newspack-plugin');
+  var _useState = (0, _element.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = (0, _element.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    dragIndex = _useState4[0],
+    setDragIndex = _useState4[1];
+  var _useState5 = (0, _element.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    hasFetchError = _useState6[0],
+    setHasFetchError = _useState6[1];
+  var _useState7 = (0, _element.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isConfirmingDiscard = _useState8[0],
+    setIsConfirmingDiscard = _useState8[1];
+  var listRef = (0, _element.useRef)(null);
+  var overlayRef = (0, _element.useRef)(null);
+  var pendingFocus = (0, _element.useRef)(null);
+  var closeRef = (0, _element.useRef)(null);
+  var preDragItems = (0, _element.useRef)(null);
+  var dragBlocked = (0, _element.useRef)(false);
+  var captureOverlay = (0, _element.useCallback)(function (node) {
+    overlayRef.current = findOverlay(node);
+  }, []);
+
+  // The order the modal opened with. Snapshotted so a change to `ids` from
+  // elsewhere in the editor cannot desynchronise it from `items`.
+  var openedWith = (0, _element.useRef)(ids);
+  var openedEnabled = (0, _element.useRef)(hasToggles ? enabledIds : []);
+  var _useState9 = (0, _element.useState)(function () {
+      return new Set(openedEnabled.current);
+    }),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    enabled = _useState0[0],
+    setEnabled = _useState0[1];
+  var isReordered = !!items && items.some(function (item, index) {
+    return item.id !== openedWith.current[index];
+  });
+  var isToggled = enabled.size !== openedEnabled.current.length || openedEnabled.current.some(function (id) {
+    return !enabled.has(id);
+  });
+  var isDirty = isReordered || hasToggles && isToggled;
+  // Enabled IDs without a row can't be switched off here, so Save keeps them.
+  var enabledWithoutRow = openedEnabled.current.filter(function (id) {
+    return !openedWith.current.includes(id);
+  });
+  var isNoneOn = hasToggles && 0 === enabled.size && 0 === enabledWithoutRow.length;
+  var toggleItem = function toggleItem(id) {
+    return setEnabled(function (current) {
+      var next = new Set(current);
+      if (next.has(id)) {
+        next["delete"](id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  (0, _element.useEffect)(function () {
+    var cancelled = false;
+    var openIds = openedWith.current;
+    var withLabels = function withLabels(labels, badges) {
+      return openIds.map(function (id) {
+        return {
+          id: id,
+          label: labels[id] || (0, _i18n.__)('(no title)', 'newspack-plugin'),
+          badge: badges[id]
+        };
+      });
+    };
+    fetchItems(openIds).then(function (results) {
+      if (cancelled) {
+        return;
+      }
+      var labels = {};
+      var badges = {};
+      results.forEach(function (_ref2) {
+        var value = _ref2.value,
+          label = _ref2.label,
+          badge = _ref2.badge;
+        labels[value] = label;
+        badges[value] = badge;
+      });
+      var loaded = withLabels(labels, badges);
+      setItems(loaded);
+      (0, _a11y.speak)((0, _i18n.sprintf)(/* translators: %d: number of items in the list. */
+      (0, _i18n._n)('%d item ready to reorder.', '%d items ready to reorder.', loaded.length, 'newspack-plugin'), loaded.length));
+    })["catch"](function (error) {
+      // eslint-disable-next-line no-console
+      console.error('Newspack: could not prepare the items to reorder.', error);
+      if (!cancelled) {
+        setHasFetchError(true);
+        // Only to leave the loading state: the error view lists nothing.
+        setItems([]);
+      }
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // A chevron that reaches an end of the list stops accepting moves, so send
+  // focus to the row's other chevron.
+  (0, _element.useEffect)(function () {
+    var pending = pendingFocus.current;
+    pendingFocus.current = null;
+    if (!pending || !listRef.current) {
+      return;
+    }
+    var row = listRef.current.querySelector("[data-item-id=\"".concat(pending.id, "\"]"));
+    if (!row) {
+      return;
+    }
+    var preferred = row.querySelector("[data-direction=\"".concat(pending.direction, "\"]"));
+    var fallback = row.querySelector("[data-direction=\"".concat('up' === pending.direction ? 'down' : 'up', "\"]"));
+    if (isAvailable(preferred)) {
+      preferred.focus();
+    } else if (isAvailable(fallback)) {
+      fallback.focus();
+    }
+  }, [items]);
+  var moveTo = function moveTo(from, to, direction) {
+    var next = moveItem(items, from, to);
+    if (next === items) {
+      return;
+    }
+    pendingFocus.current = {
+      id: items[from].id,
+      direction: direction
+    };
+    setItems(next);
+    (0, _a11y.speak)((0, _i18n.sprintf)(/* translators: 1: title of the moved item. 2: its new position. 3: total number of items. */
+    (0, _i18n.__)('%1$s moved to position %2$d of %3$d.', 'newspack-plugin'), items[from].label, to + 1, items.length));
+  };
+  var requestClose = function requestClose() {
+    if (isDirty) {
+      setIsConfirmingDiscard(true);
+      return;
+    }
+    onClose();
+  };
+  (0, _element.useEffect)(function () {
+    closeRef.current = requestClose;
+  }, [requestClose]);
+  var handleKeyDown = function handleKeyDown(event) {
+    if ('Escape' !== event.key || event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    requestClose();
+  };
+
+  // `Modal` plays its exit animation before it reports a close request, which
+  // would fade the modal out and back in whenever the confirmation vetoes one.
+  // Its own dismissal handlers are off, so drive the overlay press here.
+  (0, _element.useEffect)(function () {
+    var overlay = overlayRef.current;
+    if (!overlay) {
+      return;
+    }
+    var pressedOverlay = false;
+    var onPointerDown = function onPointerDown(event) {
+      pressedOverlay = event.target === overlay;
+      if (pressedOverlay) {
+        event.preventDefault();
+      }
+    };
+    var onPointerUp = function onPointerUp(event) {
+      var dismisses = pressedOverlay && 0 === event.button && event.target === overlay;
+      pressedOverlay = false;
+      if (dismisses) {
+        closeRef.current();
+      }
+    };
+    overlay.addEventListener('pointerdown', onPointerDown);
+    overlay.addEventListener('pointerup', onPointerUp);
+    return function () {
+      overlay.removeEventListener('pointerdown', onPointerDown);
+      overlay.removeEventListener('pointerup', onPointerUp);
+    };
+  }, []);
+
+  // Rows are the only drop targets, and the frame's own padding is not one, so a
+  // release a few pixels wide of the list would report a cancelled drag and undo
+  // the reorder. Accepting the drop across the whole dialog leaves "cancelled"
+  // meaning only Escape or a release outside it.
+  (0, _element.useEffect)(function () {
+    var _overlayRef$current;
+    var frame = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector('.components-modal__frame');
+    if (!frame) {
+      return;
+    }
+    var accept = function accept(event) {
+      return event.preventDefault();
+    };
+    frame.addEventListener('dragover', accept);
+    frame.addEventListener('drop', accept);
+    return function () {
+      frame.removeEventListener('dragover', accept);
+      frame.removeEventListener('drop', accept);
+    };
+  }, []);
+  var handleDragOver = function handleDragOver(event, index) {
+    event.preventDefault();
+    if (null === dragIndex) {
+      return;
+    }
+    event.dataTransfer.dropEffect = 'move';
+    if (dragIndex === index) {
+      return;
+    }
+    setItems(moveItem(items, dragIndex, index));
+    setDragIndex(index);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
+      ref: captureOverlay,
+      title: title,
+      onRequestClose: requestClose,
+      onKeyDown: handleKeyDown,
+      isDismissible: false,
+      shouldCloseOnEsc: false,
+      shouldCloseOnClickOutside: false,
+      headerActions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        size: "compact",
+        icon: _icons.close,
+        label: (0, _i18n.__)('Close', 'newspack-plugin'),
+        onClick: requestClose
+      }),
+      size: "medium",
+      className: "newspack-reorder-modal",
+      aria: {
+        describedby: description ? "".concat(instanceId, "-description") : undefined
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-reorder-modal__body",
+        "aria-busy": !items,
+        children: [description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          id: "".concat(instanceId, "-description"),
+          className: "newspack-reorder-modal__description",
+          children: description
+        }), !items && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-reorder-modal__loading",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "screen-reader-text",
+            children: (0, _i18n.__)('Loading content…', 'newspack-plugin')
+          })]
+        }), items && hasFetchError && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
+            status: "error",
+            isDismissible: false,
+            className: "newspack-reorder-modal__notice",
+            children: (0, _i18n.__)('The content could not be loaded, so the order cannot be saved.', 'newspack-plugin')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-reorder-modal__footer",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              variant: "tertiary",
+              onClick: requestClose,
+              children: (0, _i18n.__)('Cancel', 'newspack-plugin')
+            })
+          })]
+        }), items && !hasFetchError && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+            className: "newspack-reorder-modal__list",
+            role: "list",
+            ref: listRef,
+            children: items.map(function (item, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Card.Root, {
+                render: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {}),
+                "data-item-id": item.id,
+                className: (0, _classnames["default"])('newspack-reorder-modal__item', {
+                  'is-dragging': dragIndex === index,
+                  'is-off': hasToggles && !enabled.has(item.id)
+                }),
+                draggable: true
+                // `dragstart` always fires at the draggable row, never at the
+                // chevron inside it, so the grab point is recorded separately.
+                ,
+                onPointerDown: function onPointerDown(event) {
+                  var _event$target$closest, _event$target;
+                  dragBlocked.current = !!((_event$target$closest = (_event$target = event.target).closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, 'button, input'));
+                },
+                onDragStart: function onDragStart(event) {
+                  if (dragBlocked.current) {
+                    event.preventDefault();
+                    return;
+                  }
+                  preDragItems.current = items;
+                  // Firefox and Safari will not start a drag until the payload is set.
+                  event.dataTransfer.setData('text/plain', String(item.id));
+                  event.dataTransfer.effectAllowed = 'move';
+                  setDragIndex(index);
+                },
+                onDragOver: function onDragOver(event) {
+                  return handleDragOver(event, index);
+                },
+                onDragEnd: function onDragEnd(event) {
+                  // A cancelled drag reports no drop effect: put the order back.
+                  if ('none' === event.dataTransfer.dropEffect && preDragItems.current) {
+                    setItems(preDragItems.current);
+                  }
+                  preDragItems.current = null;
+                  setDragIndex(null);
+                },
+                onDrop: function onDrop(event) {
+                  return event.preventDefault();
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "newspack-reorder-modal__grip",
+                  "aria-hidden": "true",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+                    icon: _icons.dragHandle
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  className: "newspack-reorder-modal__move",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                    icon: _icons.chevronUp,
+                    size: "small",
+                    "data-direction": "up",
+                    disabled: 0 === index,
+                    accessibleWhenDisabled: true,
+                    label: moveUpLabel,
+                    "aria-label": nameWithTitle(moveUpLabel, item.label),
+                    onClick: function onClick() {
+                      return moveTo(index, index - 1, 'up');
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                    icon: _icons.chevronDown,
+                    size: "small",
+                    "data-direction": "down",
+                    disabled: index === items.length - 1,
+                    accessibleWhenDisabled: true,
+                    label: moveDownLabel,
+                    "aria-label": nameWithTitle(moveDownLabel, item.label),
+                    onClick: function onClick() {
+                      return moveTo(index, index + 1, 'down');
+                    }
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Card.Content, {
+                  className: "newspack-reorder-modal__content",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "newspack-reorder-modal__title",
+                    title: item.label,
+                    children: item.label
+                  }), item.badge && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "newspack-reorder-modal__badge",
+                    children: [item.badge.tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+                      text: item.badge.tooltip,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        "aria-hidden": "true",
+                        tabIndex: -1,
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+                          intent: "draft",
+                          children: item.badge.label
+                        })
+                      })
+                    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      "aria-hidden": "true",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+                        intent: "draft",
+                        children: item.badge.label
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
+                      id: "".concat(instanceId, "-badge-").concat(item.id),
+                      children: item.badge.tooltip ? "".concat(item.badge.label, ": ").concat(item.badge.tooltip) : item.badge.label
+                    })]
+                  })]
+                }), hasToggles && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "newspack-reorder-modal__toggle",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormToggle, {
+                    checked: enabled.has(item.id),
+                    onChange: function onChange() {
+                      return toggleItem(item.id);
+                    },
+                    "aria-label": item.label,
+                    "aria-describedby": item.badge ? "".concat(instanceId, "-badge-").concat(item.id) : undefined
+                  })
+                })]
+              }, item.id);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-reorder-modal__footer",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              variant: "tertiary",
+              onClick: requestClose,
+              children: (0, _i18n.__)('Cancel', 'newspack-plugin')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              variant: "primary",
+              disabled: !isDirty || isNoneOn,
+              accessibleWhenDisabled: true
+              // A button with visible children shows a tooltip only when asked and labelled.
+              ,
+              label: (0, _i18n.__)('Save', 'newspack-plugin'),
+              showTooltip: isDirty && isNoneOn,
+              description: isDirty && isNoneOn ? noneOnHelp : undefined,
+              onClick: function onClick() {
+                var order = items.map(function (item) {
+                  return item.id;
+                });
+                if (hasToggles) {
+                  onSave(order, [].concat((0, _toConsumableArray2["default"])(order.filter(function (id) {
+                    return enabled.has(id);
+                  })), (0, _toConsumableArray2["default"])(enabledWithoutRow)));
+                } else {
+                  onSave(order);
+                }
+              },
+              children: (0, _i18n.__)('Save', 'newspack-plugin')
+            })]
+          })]
+        })]
+      })
+    }), isConfirmingDiscard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
+      isOpen: true,
+      contentLabel: hasToggles ? (0, _i18n.__)('Discard the changes?', 'newspack-plugin') : (0, _i18n.__)('Discard the new order?', 'newspack-plugin'),
+      confirmButtonText: (0, _i18n.__)('Discard', 'newspack-plugin'),
+      cancelButtonText: (0, _i18n.__)('Keep editing', 'newspack-plugin'),
+      onConfirm: onClose,
+      onCancel: function onCancel() {
+        return setIsConfirmingDiscard(false);
+      },
+      children: hasToggles ? (0, _i18n.__)('The changes you made will be lost.', 'newspack-plugin') : (0, _i18n.__)('The order you set will be lost.', 'newspack-plugin')
+    })]
+  });
+};
+var _default = exports["default"] = _ReorderModal;