newspack-components 4.6.2 → 4.7.0-alpha.1

package/dist/cjs/drawer/root.js

@@ -0,0 +1,350 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _components = require("@wordpress/components");
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useConfirmDialog2 = _interopRequireDefault(require("../hooks/use-confirm-dialog"));
+var _context = require("./context");
+var _body = _interopRequireDefault(require("./body"));
+var _content = _interopRequireDefault(require("./content"));
+var _divider = _interopRequireDefault(require("./divider"));
+var _useExitAnimation2 = _interopRequireDefault(require("./use-exit-animation"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var sizeClassMap = {
+  small: 'newspack-drawer--size-small',
+  medium: 'newspack-drawer--size-medium',
+  large: 'newspack-drawer--size-large',
+  'x-large': 'newspack-drawer--size-x-large',
+  full: 'newspack-drawer--size-full'
+};
+var captureOptions = {
+  capture: true
+};
+var Root = (0, _element.forwardRef)(function Root(_ref, forwardedRef) {
+  var _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    onRequestClose = _ref.onRequestClose,
+    _ref$isDirty = _ref.isDirty,
+    isDirty = _ref$isDirty === void 0 ? false : _ref$isDirty,
+    _ref$confirmCloseMess = _ref.confirmCloseMessage,
+    confirmCloseMessage = _ref$confirmCloseMess === void 0 ? (0, _i18n.__)('You have unsaved changes that will be lost. Discard changes?', 'newspack-plugin') : _ref$confirmCloseMess,
+    _ref$confirmButtonTex = _ref.confirmButtonText,
+    confirmButtonText = _ref$confirmButtonTex === void 0 ? (0, _i18n.__)('Discard Changes', 'newspack-plugin') : _ref$confirmButtonTex,
+    requestConfirm = _ref.requestConfirm,
+    contentLabel = _ref.contentLabel,
+    describedBy = _ref.describedBy,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var _useState = (0, _element.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var titleRef = (0, _element.useRef)(null);
+  var titlesRef = (0, _element.useRef)([]);
+  var registerTitle = (0, _element.useCallback)(function (info, forId) {
+    var _titlesRef$current;
+    if (info) {
+      var at = titlesRef.current.findIndex(function (entry) {
+        return entry.id === info.id;
+      });
+      if (at === -1) {
+        titlesRef.current = [].concat((0, _toConsumableArray2["default"])(titlesRef.current), [info]);
+      } else {
+        titlesRef.current = titlesRef.current.map(function (entry) {
+          return entry.id === info.id ? info : entry;
+        });
+      }
+    } else if (forId) {
+      titlesRef.current = titlesRef.current.filter(function (entry) {
+        return entry.id !== forId;
+      });
+    } else {
+      titlesRef.current = [];
+    }
+    var current = (_titlesRef$current = titlesRef.current[titlesRef.current.length - 1]) !== null && _titlesRef$current !== void 0 ? _titlesRef$current : null;
+    titleRef.current = current;
+    setTitle(current);
+  }, []);
+  (0, _element.useEffect)(function () {
+    if ('production' === process.env.NODE_ENV || !isOpen) {
+      return;
+    }
+    if (!titleRef.current && !contentLabel) {
+      // eslint-disable-next-line no-console
+      console.warn('Drawer: render a Drawer.Title or pass `contentLabel`. Without one the panel has no accessible name.');
+    }
+  }, [isOpen, title, contentLabel]);
+  (0, _element.useEffect)(function () {
+    if ('production' === process.env.NODE_ENV || sizeClassMap[size]) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn("Drawer: unknown size \"".concat(size, "\", falling back to medium. Use one of ").concat(Object.keys(sizeClassMap).join(', '), "."));
+  }, [size]);
+
+  // No `when`: it installs a history.block guard that fights the wizard's own.
+  var _useConfirmDialog = (0, _useConfirmDialog2["default"])({
+      message: confirmCloseMessage,
+      confirmButtonText: confirmButtonText,
+      // Hidden, but still the dialog's accessible name.
+      title: (0, _i18n.__)('Unsaved changes', 'newspack-plugin'),
+      hideTitle: true
+    }),
+    confirmDialog = _useConfirmDialog.confirmDialog,
+    ownRequestConfirm = _useConfirmDialog.requestConfirm,
+    ownCancelConfirm = _useConfirmDialog.cancelConfirm;
+  var confirm = requestConfirm || ownRequestConfirm;
+  var requestClose = (0, _element.useCallback)(function () {
+    if (!isOpen) {
+      return;
+    }
+    if (isDirty) {
+      var prompted = true;
+      confirm(function () {
+        prompted = false;
+        onRequestClose();
+      });
+      if ('production' !== process.env.NODE_ENV && !prompted) {
+        // eslint-disable-next-line no-console
+        console.warn('Drawer: `requestConfirm` closed the panel without prompting, so `isDirty` is set while its own `when` is not. ' + 'Unsaved changes are being discarded silently. Drive both from the same state.');
+      }
+      return;
+    }
+    onRequestClose();
+  }, [isOpen, isDirty, confirm, onRequestClose]);
+
+  // Core fills its dismisser ref in a passive effect and siblings call it from
+  // theirs, so a closure would go stale by tree order. Layout effects run first.
+  var dismissRef = (0, _element.useRef)({
+    isOpen: isOpen,
+    isDirty: isDirty,
+    onRequestClose: onRequestClose
+  });
+  (0, _element.useLayoutEffect)(function () {
+    dismissRef.current = {
+      isOpen: isOpen,
+      isDirty: isDirty,
+      onRequestClose: onRequestClose
+    };
+  });
+
+  // Core calls this as another Modal mounts. A dirty panel cannot answer: its own
+  // confirmation would land under that Modal, and a delegated one is that Modal.
+  var dismiss = (0, _element.useCallback)(function () {
+    var current = dismissRef.current;
+    if (current.isOpen && !current.isDirty) {
+      current.onRequestClose();
+    }
+  }, []);
+  var onKeyDown = (0, _element.useCallback)(function (event) {
+    var _event$nativeEvent;
+    // Cancelling a CJK composition raises an Escape of its own.
+    if ((_event$nativeEvent = event.nativeEvent) !== null && _event$nativeEvent !== void 0 && _event$nativeEvent.isComposing || 229 === event.keyCode) {
+      return;
+    }
+    if ('Escape' !== event.key && 'Escape' !== event.code || event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    requestClose();
+  }, [requestClose]);
+  var _useState3 = (0, _element.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    node = _useState4[0],
+    setNode = _useState4[1];
+  var frameRefs = (0, _compose.useMergeRefs)([setNode, forwardedRef]);
+  var _useExitAnimation = (0, _useExitAnimation2["default"])(isOpen, node),
+    isRendered = _useExitAnimation.isRendered,
+    isExiting = _useExitAnimation.isExiting;
+  var openerRef = (0, _element.useRef)(null);
+  var _useState5 = (0, _element.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    wasOpenForFocus = _useState6[0],
+    setWasOpenForFocus = _useState6[1];
+  if (wasOpenForFocus !== isOpen) {
+    setWasOpenForFocus(isOpen);
+    if (isOpen) {
+      // eslint-disable-next-line @wordpress/no-global-active-element
+      openerRef.current = typeof document === 'undefined' ? null : document.activeElement;
+    } else {
+      // During render, so it is gone in the commit that starts the exit rather
+      // than holding focus while the panel goes inert. Only ours to withdraw.
+      ownCancelConfirm();
+    }
+  }
+  var movedFocusOut = (0, _element.useRef)(false);
+  (0, _element.useEffect)(function () {
+    var frame = node === null || node === void 0 ? void 0 : node.querySelector('.components-modal__frame');
+    if (!frame) {
+      if (node && 'production' !== process.env.NODE_ENV) {
+        // eslint-disable-next-line no-console
+        console.warn('Drawer: no .components-modal__frame inside the overlay. Focus return and `inert` are both off. ' + 'Check this against the installed @wordpress/components.');
+      }
+      return;
+    }
+    if (isExiting) {
+      // Focus goes home before `inert` blurs it, unless parked elsewhere:
+      // reclaiming it from a sibling frame would take it from an open modal.
+      var active = frame.ownerDocument.activeElement;
+      if (frame.contains(active) || !active || active === frame.ownerDocument.body) {
+        movedFocusOut.current = true;
+        var opener = openerRef.current;
+        if (opener !== null && opener !== void 0 && opener.isConnected) {
+          var _opener$focus;
+          (_opener$focus = opener.focus) === null || _opener$focus === void 0 || _opener$focus.call(opener);
+        }
+      }
+      frame.toggleAttribute('inert', true);
+      return;
+    }
+    frame.toggleAttribute('inert', false);
+    // Reopened mid-exit: the same Modal instance, so focus-on-mount never re-runs.
+    var restore = movedFocusOut.current;
+    movedFocusOut.current = false;
+    if (restore && frame.isConnected && !frame.contains(frame.ownerDocument.activeElement)) {
+      frame.focus({
+        preventScroll: true
+      });
+    }
+  }, [node, isExiting]);
+
+  // Reduced motion has no exit to hand focus back during.
+  (0, _element.useLayoutEffect)(function () {
+    if (!isRendered) {
+      return;
+    }
+    return function () {
+      var _opener$focus2;
+      var opener = openerRef.current;
+      if (!(opener !== null && opener !== void 0 && opener.isConnected)) {
+        return;
+      }
+      var active = opener.ownerDocument.activeElement;
+      if (active && active !== opener.ownerDocument.body && active.isConnected) {
+        return;
+      }
+      (_opener$focus2 = opener.focus) === null || _opener$focus2 === void 0 || _opener$focus2.call(opener);
+    };
+  }, [isRendered]);
+  var pressedOverlay = (0, _element.useRef)(false);
+  // On commit, not after paint: a release in the gap would close a drawer that
+  // has just turned dirty.
+  var requestCloseRef = (0, _element.useRef)(requestClose);
+  (0, _element.useLayoutEffect)(function () {
+    requestCloseRef.current = requestClose;
+  }, [requestClose]);
+  (0, _element.useEffect)(function () {
+    if (!node) {
+      return;
+    }
+    var ownerDocument = node.ownerDocument;
+    pressedOverlay.current = false;
+    var onPointerDown = function onPointerDown(event) {
+      pressedOverlay.current = 0 === event.button && event.target === node;
+      if (pressedOverlay.current) {
+        // Touch and pen capture implicitly, reporting the release on the overlay.
+        if ('function' === typeof node.hasPointerCapture && node.hasPointerCapture(event.pointerId)) {
+          node.releasePointerCapture(event.pointerId);
+        }
+        event.preventDefault();
+      }
+    };
+    var onPointerUp = function onPointerUp(event) {
+      var closes = pressedOverlay.current && 0 === event.button && event.target === node;
+      pressedOverlay.current = false;
+      if (closes) {
+        requestCloseRef.current();
+      }
+    };
+    var onPointerCancel = function onPointerCancel() {
+      pressedOverlay.current = false;
+    };
+    node.addEventListener('pointerdown', onPointerDown);
+    ownerDocument.addEventListener('pointerup', onPointerUp, captureOptions);
+    ownerDocument.addEventListener('pointercancel', onPointerCancel, captureOptions);
+    return function () {
+      pressedOverlay.current = false;
+      node.removeEventListener('pointerdown', onPointerDown);
+      ownerDocument.removeEventListener('pointerup', onPointerUp, captureOptions);
+      ownerDocument.removeEventListener('pointercancel', onPointerCancel, captureOptions);
+    };
+  }, [node]);
+  var contextValue = (0, _element.useMemo)(function () {
+    return {
+      requestClose: requestClose,
+      title: title,
+      setTitle: registerTitle
+    };
+  }, [requestClose, title, registerTitle]);
+  if (!isRendered) {
+    return null;
+  }
+  var grouped = [];
+  var run = [];
+  var bodyIndex = 0;
+  var flushRun = function flushRun() {
+    if (run.length) {
+      grouped.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_body["default"], {
+        children: run
+      }, "body-".concat(bodyIndex++)));
+      run = [];
+    }
+  };
+  _element.Children.toArray(children).forEach(function (child) {
+    if ((0, _element.isValidElement)(child) && (child.type === _content["default"] || child.type === _divider["default"])) {
+      run.push(child);
+    } else {
+      flushRun();
+      grouped.push(child);
+    }
+  });
+  flushRun();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.DrawerContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
+      __experimentalHideHeader: true,
+      ref: frameRefs,
+      className: (0, _classnames["default"])('newspack-drawer', sizeClassMap[size] || sizeClassMap.medium, isExiting && 'is-exiting', className),
+      overlayClassName: (0, _classnames["default"])('newspack-drawer__overlay', isExiting && 'is-exiting'),
+      style: style,
+      contentLabel: title ? undefined : contentLabel,
+      aria: {
+        labelledby: title ? title.id : undefined,
+        describedby: describedBy
+      },
+      shouldCloseOnEsc: false,
+      shouldCloseOnClickOutside: false,
+      onRequestClose: dismiss,
+      onKeyDown: onKeyDown,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.SlotFillProvider, {
+        children: [grouped, !requestConfirm && confirmDialog, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover.Slot, {})]
+      })
+    })
+  });
+});
+var _default = exports["default"] = Root;