newspack-components 4.6.2 → 4.7.0-alpha.1

package/dist/esm/drawer/root.js

@@ -0,0 +1,342 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * WordPress dependencies.
+ */
+import { Modal, Popover, SlotFillProvider } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
+import { Children, forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import useConfirmDialog from '../hooks/use-confirm-dialog';
+import { DrawerContext } from './context';
+import Body from './body';
+import Content from './content';
+import Divider from './divider';
+import useExitAnimation from './use-exit-animation';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = 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 ? __('You have unsaved changes that will be lost. Discard changes?', 'newspack-plugin') : _ref$confirmCloseMess,
+    _ref$confirmButtonTex = _ref.confirmButtonText,
+    confirmButtonText = _ref$confirmButtonTex === void 0 ? __('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 = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var titleRef = useRef(null);
+  var titlesRef = useRef([]);
+  var registerTitle = 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(_toConsumableArray(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);
+  }, []);
+  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]);
+  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 = useConfirmDialog({
+      message: confirmCloseMessage,
+      confirmButtonText: confirmButtonText,
+      // Hidden, but still the dialog's accessible name.
+      title: __('Unsaved changes', 'newspack-plugin'),
+      hideTitle: true
+    }),
+    confirmDialog = _useConfirmDialog.confirmDialog,
+    ownRequestConfirm = _useConfirmDialog.requestConfirm,
+    ownCancelConfirm = _useConfirmDialog.cancelConfirm;
+  var confirm = requestConfirm || ownRequestConfirm;
+  var requestClose = 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 = useRef({
+    isOpen: isOpen,
+    isDirty: isDirty,
+    onRequestClose: onRequestClose
+  });
+  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 = useCallback(function () {
+    var current = dismissRef.current;
+    if (current.isOpen && !current.isDirty) {
+      current.onRequestClose();
+    }
+  }, []);
+  var onKeyDown = 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 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    node = _useState4[0],
+    setNode = _useState4[1];
+  var frameRefs = useMergeRefs([setNode, forwardedRef]);
+  var _useExitAnimation = useExitAnimation(isOpen, node),
+    isRendered = _useExitAnimation.isRendered,
+    isExiting = _useExitAnimation.isExiting;
+  var openerRef = useRef(null);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_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 = useRef(false);
+  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.
+  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 = useRef(false);
+  // On commit, not after paint: a release in the gap would close a drawer that
+  // has just turned dirty.
+  var requestCloseRef = useRef(requestClose);
+  useLayoutEffect(function () {
+    requestCloseRef.current = requestClose;
+  }, [requestClose]);
+  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 = 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__*/_jsx(Body, {
+        children: run
+      }, "body-".concat(bodyIndex++)));
+      run = [];
+    }
+  };
+  Children.toArray(children).forEach(function (child) {
+    if (isValidElement(child) && (child.type === Content || child.type === Divider)) {
+      run.push(child);
+    } else {
+      flushRun();
+      grouped.push(child);
+    }
+  });
+  flushRun();
+  return /*#__PURE__*/_jsx(DrawerContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(Modal, {
+      __experimentalHideHeader: true,
+      ref: frameRefs,
+      className: classnames('newspack-drawer', sizeClassMap[size] || sizeClassMap.medium, isExiting && 'is-exiting', className),
+      overlayClassName: classnames('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__*/_jsxs(SlotFillProvider, {
+        children: [grouped, !requestConfirm && confirmDialog, /*#__PURE__*/_jsx(Popover.Slot, {})]
+      })
+    })
+  });
+});
+export default Root;