newspack-components 4.10.0-alpha.1 → 4.11.0

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

@@ -0,0 +1,514 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { Button, FormToggle, Modal, Notice, Spinner, Tooltip, VisuallyHidden, __experimentalConfirmDialog as ConfirmDialog // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
+import { Icon, chevronDown, chevronUp, close, dragHandle } from '@wordpress/icons';
+import { Badge, Card } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export var moveItem = function moveItem(items, from, to) {
+  if (from === to || from < 0 || to < 0 || from >= items.length || to >= items.length) {
+    return items;
+  }
+  var next = _toConsumableArray(items);
+  var _next$splice = next.splice(from, 1),
+    _next$splice2 = _slicedToArray(_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.
+export var 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 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. */
+  __('%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 ? __('Turn on at least one item to save.', 'newspack-plugin') : _ref$noneOnHelp;
+  var hasToggles = Array.isArray(enabledIds);
+  var instanceId = useInstanceId(_ReorderModal, 'newspack-reorder-modal');
+  var moveUpLabel = __('Move Up', 'newspack-plugin');
+  var moveDownLabel = __('Move Down', 'newspack-plugin');
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragIndex = _useState4[0],
+    setDragIndex = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasFetchError = _useState6[0],
+    setHasFetchError = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isConfirmingDiscard = _useState8[0],
+    setIsConfirmingDiscard = _useState8[1];
+  var listRef = useRef(null);
+  var overlayRef = useRef(null);
+  var pendingFocus = useRef(null);
+  var closeRef = useRef(null);
+  var preDragItems = useRef(null);
+  var dragBlocked = useRef(false);
+  var captureOverlay = 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 = useRef(ids);
+  var openedEnabled = useRef(hasToggles ? enabledIds : []);
+  var _useState9 = useState(function () {
+      return new Set(openedEnabled.current);
+    }),
+    _useState0 = _slicedToArray(_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;
+    });
+  };
+  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] || __('(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);
+      speak(sprintf(/* translators: %d: number of items in the list. */
+      _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.
+  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);
+    speak(sprintf(/* translators: 1: title of the moved item. 2: its new position. 3: total number of items. */
+    __('%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();
+  };
+  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.
+  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.
+  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__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Modal, {
+      ref: captureOverlay,
+      title: title,
+      onRequestClose: requestClose,
+      onKeyDown: handleKeyDown,
+      isDismissible: false,
+      shouldCloseOnEsc: false,
+      shouldCloseOnClickOutside: false,
+      headerActions: /*#__PURE__*/_jsx(Button, {
+        size: "compact",
+        icon: close,
+        label: __('Close', 'newspack-plugin'),
+        onClick: requestClose
+      }),
+      size: "medium",
+      className: "newspack-reorder-modal",
+      aria: {
+        describedby: description ? "".concat(instanceId, "-description") : undefined
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "newspack-reorder-modal__body",
+        "aria-busy": !items,
+        children: [description && /*#__PURE__*/_jsx("p", {
+          id: "".concat(instanceId, "-description"),
+          className: "newspack-reorder-modal__description",
+          children: description
+        }), !items && /*#__PURE__*/_jsxs("div", {
+          className: "newspack-reorder-modal__loading",
+          children: [/*#__PURE__*/_jsx(Spinner, {}), /*#__PURE__*/_jsx("span", {
+            className: "screen-reader-text",
+            children: __('Loading content…', 'newspack-plugin')
+          })]
+        }), items && hasFetchError && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Notice, {
+            status: "error",
+            isDismissible: false,
+            className: "newspack-reorder-modal__notice",
+            children: __('The content could not be loaded, so the order cannot be saved.', 'newspack-plugin')
+          }), /*#__PURE__*/_jsx("div", {
+            className: "newspack-reorder-modal__footer",
+            children: /*#__PURE__*/_jsx(Button, {
+              variant: "tertiary",
+              onClick: requestClose,
+              children: __('Cancel', 'newspack-plugin')
+            })
+          })]
+        }), items && !hasFetchError && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("ul", {
+            className: "newspack-reorder-modal__list",
+            role: "list",
+            ref: listRef,
+            children: items.map(function (item, index) {
+              return /*#__PURE__*/_jsxs(Card.Root, {
+                render: /*#__PURE__*/_jsx("li", {}),
+                "data-item-id": item.id,
+                className: classnames('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__*/_jsx("span", {
+                  className: "newspack-reorder-modal__grip",
+                  "aria-hidden": "true",
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    icon: dragHandle
+                  })
+                }), /*#__PURE__*/_jsxs("span", {
+                  className: "newspack-reorder-modal__move",
+                  children: [/*#__PURE__*/_jsx(Button, {
+                    icon: 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__*/_jsx(Button, {
+                    icon: 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__*/_jsxs(Card.Content, {
+                  className: "newspack-reorder-modal__content",
+                  children: [/*#__PURE__*/_jsx("span", {
+                    className: "newspack-reorder-modal__title",
+                    title: item.label,
+                    children: item.label
+                  }), item.badge && /*#__PURE__*/_jsxs("span", {
+                    className: "newspack-reorder-modal__badge",
+                    children: [item.badge.tooltip ? /*#__PURE__*/_jsx(Tooltip, {
+                      text: item.badge.tooltip,
+                      children: /*#__PURE__*/_jsx("span", {
+                        "aria-hidden": "true",
+                        tabIndex: -1,
+                        children: /*#__PURE__*/_jsx(Badge, {
+                          intent: "draft",
+                          children: item.badge.label
+                        })
+                      })
+                    }) : /*#__PURE__*/_jsx("span", {
+                      "aria-hidden": "true",
+                      children: /*#__PURE__*/_jsx(Badge, {
+                        intent: "draft",
+                        children: item.badge.label
+                      })
+                    }), /*#__PURE__*/_jsx(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__*/_jsx("span", {
+                  className: "newspack-reorder-modal__toggle",
+                  children: /*#__PURE__*/_jsx(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__*/_jsxs("div", {
+            className: "newspack-reorder-modal__footer",
+            children: [/*#__PURE__*/_jsx(Button, {
+              variant: "tertiary",
+              onClick: requestClose,
+              children: __('Cancel', 'newspack-plugin')
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "primary",
+              disabled: !isDirty || isNoneOn,
+              accessibleWhenDisabled: true
+              // A button with visible children shows a tooltip only when asked and labelled.
+              ,
+              label: __('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(_toConsumableArray(order.filter(function (id) {
+                    return enabled.has(id);
+                  })), _toConsumableArray(enabledWithoutRow)));
+                } else {
+                  onSave(order);
+                }
+              },
+              children: __('Save', 'newspack-plugin')
+            })]
+          })]
+        })]
+      })
+    }), isConfirmingDiscard && /*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: true,
+      contentLabel: hasToggles ? __('Discard the changes?', 'newspack-plugin') : __('Discard the new order?', 'newspack-plugin'),
+      confirmButtonText: __('Discard', 'newspack-plugin'),
+      cancelButtonText: __('Keep editing', 'newspack-plugin'),
+      onConfirm: onClose,
+      onCancel: function onCancel() {
+        return setIsConfirmingDiscard(false);
+      },
+      children: hasToggles ? __('The changes you made will be lost.', 'newspack-plugin') : __('The order you set will be lost.', 'newspack-plugin')
+    })]
+  });
+};
+export default _ReorderModal;