newspack-components 4.6.2 → 4.7.0-alpha.1

package/dist/esm/drawer/index.test.js

@@ -0,0 +1,1285 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+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; }
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { useReducedMotion } from '@wordpress/compose';
+import { useLayoutEffect, useRef } from '@wordpress/element';
+
+// useMediaQuery caches one subscriber per query for the life of the module, so a
+// later matchMedia mock never reaches the hook.
+jest.mock('@wordpress/compose', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('@wordpress/compose')), {}, {
+    useReducedMotion: jest.fn(function () {
+      return false;
+    })
+  });
+});
+afterEach(function () {
+  useReducedMotion.mockReturnValue(false);
+});
+
+/**
+ * External dependencies
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter } from 'react-router-dom';
+
+/**
+ * Internal dependencies
+ */
+import Drawer from '.';
+import useConfirmDialog from '../hooks/use-confirm-dialog';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var noop = function noop() {};
+
+// Pass `contents` as an array, not a fragment: Children.toArray flattens arrays only.
+var drawerTree = function drawerTree() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$rootProps = _ref.rootProps,
+    rootProps = _ref$rootProps === void 0 ? {} : _ref$rootProps,
+    _ref$header = _ref.header,
+    header = _ref$header === void 0 ? true : _ref$header,
+    contents = _ref.contents,
+    _ref$footer = _ref.footer,
+    footer = _ref$footer === void 0 ? null : _ref$footer;
+  return /*#__PURE__*/_jsxs(Drawer.Root, _objectSpread(_objectSpread({
+    isOpen: true,
+    onRequestClose: noop
+  }, rootProps), {}, {
+    children: [header && /*#__PURE__*/_jsxs(Drawer.Header, {
+      children: [/*#__PURE__*/_jsx(Drawer.Title, {
+        children: "Drawer title"
+      }), /*#__PURE__*/_jsx(Drawer.CloseIcon, {})]
+    }), contents || /*#__PURE__*/_jsx(Drawer.Content, {
+      children: "Body"
+    }), footer]
+  }));
+};
+var renderDrawer = function renderDrawer(options) {
+  return render(drawerTree(options));
+};
+var panel = function panel() {
+  return document.querySelector('.newspack-drawer');
+};
+var overlay = function overlay() {
+  return document.querySelector('.newspack-drawer__overlay');
+};
+var closeButton = function closeButton() {
+  return screen.getByRole('button', {
+    name: 'Close Drawer title'
+  });
+};
+describe('Drawer rendering', function () {
+  it('renders nothing when closed', function () {
+    renderDrawer({
+      rootProps: {
+        isOpen: false
+      }
+    });
+    expect(panel()).not.toBeInTheDocument();
+    expect(screen.queryByText('Body')).not.toBeInTheDocument();
+  });
+  it('renders its children when open', function () {
+    renderDrawer();
+    expect(screen.getByText('Body')).toBeInTheDocument();
+  });
+  it('applies the medium size by default', function () {
+    renderDrawer();
+    expect(panel()).toHaveClass('newspack-drawer', 'newspack-drawer--size-medium');
+  });
+  it('applies the requested size', function () {
+    renderDrawer({
+      rootProps: {
+        size: 'large'
+      }
+    });
+    expect(panel()).toHaveClass('newspack-drawer--size-large');
+  });
+  it('falls back to medium and warns on a size it does not know', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    renderDrawer({
+      rootProps: {
+        size: 'xlarge'
+      }
+    });
+    expect(panel()).toHaveClass('newspack-drawer--size-medium');
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('unknown size'));
+    warn.mockRestore();
+  });
+  it('takes a ref, a style and a description', function () {
+    var ref = {
+      current: null
+    };
+    render(/*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("p", {
+        id: "drawer-description",
+        children: "What this panel is for"
+      }), drawerTree({
+        rootProps: {
+          ref: ref,
+          style: {
+            zIndex: 5
+          },
+          describedBy: 'drawer-description'
+        }
+      })]
+    }));
+    expect(ref.current).toBe(overlay());
+    expect(panel()).toHaveStyle({
+      zIndex: 5
+    });
+    expect(panel()).toHaveAttribute('aria-describedby', 'drawer-description');
+  });
+  var twoTitles = function twoTitles() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$second = _ref2.second,
+      second = _ref2$second === void 0 ? true : _ref2$second,
+      _ref2$first = _ref2.first,
+      first = _ref2$first === void 0 ? 'Drawer title' : _ref2$first;
+    return /*#__PURE__*/_jsxs(Drawer.Root, {
+      isOpen: true,
+      onRequestClose: noop,
+      children: [/*#__PURE__*/_jsxs(Drawer.Header, {
+        children: [/*#__PURE__*/_jsx(Drawer.Title, {
+          children: first
+        }), second && /*#__PURE__*/_jsx(Drawer.Title, {
+          children: "Second title"
+        })]
+      }), /*#__PURE__*/_jsx(Drawer.Content, {
+        children: "Body"
+      })]
+    });
+  };
+  var nameOf = function nameOf(heading) {
+    return screen.getByRole('heading', {
+      name: heading
+    }).id;
+  };
+  it('keeps its name when a second title unmounts', function () {
+    var _render = render(twoTitles()),
+      rerender = _render.rerender;
+    rerender(twoTitles({
+      second: false
+    }));
+    expect(panel()).toHaveAttribute('aria-labelledby', nameOf('Drawer title'));
+  });
+  it('does not promote an earlier title when its text changes', function () {
+    var _render2 = render(twoTitles()),
+      rerender = _render2.rerender;
+    expect(panel()).toHaveAttribute('aria-labelledby', nameOf('Second title'));
+    rerender(twoTitles({
+      first: 'Renamed'
+    }));
+    expect(panel()).toHaveAttribute('aria-labelledby', nameOf('Second title'));
+  });
+});
+describe('Drawer popovers', function () {
+  it('gives its children a popover slot', function () {
+    renderDrawer();
+    expect(document.querySelector('.popover-slot')).toBeInTheDocument();
+  });
+});
+describe('Drawer accessible name', function () {
+  it('names the panel by the title Drawer.Title registers', function () {
+    renderDrawer();
+    var heading = screen.getByRole('heading', {
+      name: 'Drawer title'
+    });
+    expect(panel()).toHaveAttribute('aria-labelledby', heading.id);
+    expect(screen.getByRole('dialog', {
+      name: 'Drawer title'
+    })).toBeInTheDocument();
+  });
+
+  // RTL's render() flushes passive effects inside act() and would hide the
+  // difference, so this drives React itself.
+  it('names the panel in the first painted frame', function () {
+    var wasActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
+    global.IS_REACT_ACT_ENVIRONMENT = false;
+    var container = document.body.appendChild(document.createElement('div'));
+    var root = createRoot(container);
+    try {
+      flushSync(function () {
+        return root.render(drawerTree());
+      });
+      expect(panel()).toHaveAttribute('aria-labelledby', document.querySelector('.newspack-drawer__title').id);
+      expect(document.querySelector('.newspack-drawer__dismiss')).toHaveAttribute('aria-label', 'Close Drawer title');
+    } finally {
+      flushSync(function () {
+        return root.unmount();
+      });
+      container.remove();
+      global.IS_REACT_ACT_ENVIRONMENT = wasActEnvironment;
+    }
+  });
+  it('names the panel by contentLabel when there is no title', function () {
+    renderDrawer({
+      header: false,
+      rootProps: {
+        contentLabel: 'Settings panel'
+      }
+    });
+    expect(panel()).toHaveAttribute('aria-label', 'Settings panel');
+  });
+  it('warns when it has neither a title nor a contentLabel', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    renderDrawer({
+      header: false
+    });
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('contentLabel'));
+    warn.mockRestore();
+  });
+  it('does not warn when a Drawer.Title is rendered', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    renderDrawer();
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+  it('names its own confirmation, whose heading never shows', function () {
+    renderDrawer({
+      rootProps: {
+        isDirty: true
+      }
+    });
+    fireEvent.click(closeButton());
+    var confirmation = screen.getByRole('dialog', {
+      name: 'Unsaved changes'
+    });
+    expect(confirmation).not.toBe(panel());
+    expect(confirmation).toHaveClass('newspack-modal--hide-title');
+  });
+});
+var bodyOf = function bodyOf(node) {
+  return node.parentElement;
+};
+describe('Drawer sections', function () {
+  it('groups consecutive content sections into one scroll container', function () {
+    renderDrawer({
+      contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+        children: "One"
+      }, "one"), /*#__PURE__*/_jsx(Drawer.Content, {
+        children: "Two"
+      }, "two")],
+      footer: /*#__PURE__*/_jsx(Drawer.Footer, {
+        children: "Actions"
+      })
+    });
+    var one = screen.getByText('One');
+    expect(one).toHaveClass('newspack-drawer__content');
+    expect(bodyOf(one)).toHaveClass('newspack-drawer__body');
+    expect(bodyOf(screen.getByText('Two'))).toBe(bodyOf(one));
+    expect(bodyOf(one)).not.toContainElement(document.querySelector('.newspack-drawer__header'));
+    expect(bodyOf(one)).not.toContainElement(screen.getByText('Actions'));
+  });
+
+  // `.newspack-drawer__body:has(+ .newspack-drawer__footer)` drops the last
+  // section's bottom padding, so only the body the footer abuts may reach it.
+  it('leaves the footer immediately after the last scroll container', function () {
+    renderDrawer({
+      contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+        children: "One"
+      }, "one"), /*#__PURE__*/_jsx("div", {
+        children: "Split"
+      }, "split"), /*#__PURE__*/_jsx(Drawer.Content, {
+        children: "Two"
+      }, "two")],
+      footer: /*#__PURE__*/_jsx(Drawer.Footer, {
+        children: "Actions"
+      })
+    });
+    var bodies = document.querySelectorAll('.newspack-drawer__body');
+    var footer = document.querySelector('.newspack-drawer__footer');
+    expect(bodies).toHaveLength(2);
+    expect(footer.previousElementSibling).toBe(bodies[1]);
+    expect(bodies[0].nextElementSibling).not.toBe(footer);
+  });
+
+  // jsdom has no layout, so the overflow the body measures is stubbed on the node.
+  describe('keyboard access to the scroll container', function () {
+    var observers;
+    var setOverflow = function setOverflow(body, scrollHeight) {
+      Object.defineProperty(body, 'scrollHeight', {
+        configurable: true,
+        value: scrollHeight
+      });
+      Object.defineProperty(body, 'clientHeight', {
+        configurable: true,
+        value: 100
+      });
+    };
+    var mutationObservers;
+    beforeEach(function () {
+      observers = [];
+      mutationObservers = [];
+      global.ResizeObserver = /*#__PURE__*/function () {
+        function _class(callback) {
+          _classCallCheck(this, _class);
+          this.callback = callback;
+          this.boxes = [];
+          observers.push(this);
+          this.disconnect = jest.fn();
+        }
+        return _createClass(_class, [{
+          key: "observe",
+          value: function observe(target, options) {
+            this.boxes.push(options === null || options === void 0 ? void 0 : options.box);
+          }
+        }]);
+      }();
+      global.MutationObserver = /*#__PURE__*/function () {
+        function _class2(callback) {
+          _classCallCheck(this, _class2);
+          this.callback = callback;
+          mutationObservers.push(this);
+          this.disconnect = jest.fn();
+        }
+        return _createClass(_class2, [{
+          key: "observe",
+          value: function observe() {}
+        }]);
+      }();
+    });
+
+    // jsdom supplies MutationObserver, so restore it rather than deleting it.
+    var nativeMutationObserver = global.MutationObserver;
+    afterEach(function () {
+      delete global.ResizeObserver;
+      global.MutationObserver = nativeMutationObserver;
+    });
+    it('takes no tab stop while the content fits', function () {
+      renderDrawer({
+        contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+          children: "One"
+        }, "one")]
+      });
+      var body = bodyOf(screen.getByText('One'));
+      expect(body).not.toHaveAttribute('tabindex');
+      expect(body).not.toHaveAttribute('aria-label');
+      expect(body).not.toHaveAttribute('role');
+    });
+    it('becomes focusable and named once it overflows, and reverts when it fits again', function () {
+      renderDrawer({
+        contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+          children: "One"
+        }, "one")]
+      });
+      var body = bodyOf(screen.getByText('One'));
+      setOverflow(body, 400);
+      act(function () {
+        return observers.forEach(function (observer) {
+          return observer.callback();
+        });
+      });
+      expect(body).toHaveAttribute('tabindex', '0');
+      expect(body).toHaveAttribute('aria-label', 'Scrollable section');
+      expect(body).toHaveAttribute('role', 'group');
+      setOverflow(body, 50);
+      act(function () {
+        return observers.forEach(function (observer) {
+          return observer.callback();
+        });
+      });
+      expect(body).not.toHaveAttribute('tabindex');
+      expect(body).not.toHaveAttribute('aria-label');
+      expect(body).not.toHaveAttribute('role');
+    });
+
+    // A section's padding is an inline custom property, so it grows the border box
+    // without touching the content box a default observer would watch.
+    it('observes its sections by border box', function () {
+      renderDrawer({
+        contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+          children: "One"
+        }, "one")]
+      });
+      expect(observers.some(function (observer) {
+        return observer.boxes.includes('border-box');
+      })).toBe(true);
+    });
+
+    // Setup disconnects once itself to re-observe, so count the extra teardown call.
+    it('disconnects its observer when the drawer goes away', function () {
+      var _renderDrawer = renderDrawer({
+          contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+            children: "One"
+          }, "one")]
+        }),
+        unmount = _renderDrawer.unmount;
+      expect(observers.length).toBeGreaterThan(0);
+      var before = observers.map(function (observer) {
+        return observer.disconnect.mock.calls.length;
+      });
+      unmount();
+      observers.forEach(function (observer, index) {
+        expect(observer.disconnect.mock.calls.length).toBeGreaterThan(before[index]);
+      });
+      // The MutationObserver holds a registration on the now-detached body.
+      expect(mutationObservers.length).toBeGreaterThan(0);
+      mutationObservers.forEach(function (observer) {
+        return expect(observer.disconnect).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // The `> * { flex: none }` rule that stops sections compressing depends on this.
+  it('lays the scroll container out as a flush VStack', function () {
+    renderDrawer({
+      contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+        children: "One"
+      }, "one")]
+    });
+    var body = bodyOf(screen.getByText('One'));
+    expect(body).toHaveClass('components-v-stack');
+    expect(window.getComputedStyle(body).gap).toBe('0');
+    expect(window.getComputedStyle(body).justifyContent).toBe('flex-start');
+  });
+  it('starts a new container after a non-content child', function () {
+    renderDrawer({
+      contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+        children: "One"
+      }, "one"), /*#__PURE__*/_jsx("div", {
+        children: "Notice"
+      }, "notice"), /*#__PURE__*/_jsx(Drawer.Content, {
+        children: "Two"
+      }, "two")]
+    });
+    expect(bodyOf(screen.getByText('Two'))).not.toBe(bodyOf(screen.getByText('One')));
+  });
+  it('keeps a divider inside the container it divides', function () {
+    renderDrawer({
+      contents: [/*#__PURE__*/_jsx(Drawer.Content, {
+        children: "One"
+      }, "one"), /*#__PURE__*/_jsx(Drawer.Divider, {}, "rule"), /*#__PURE__*/_jsx(Drawer.Content, {
+        children: "Two"
+      }, "two")]
+    });
+    var body = bodyOf(screen.getByText('One'));
+    expect(bodyOf(screen.getByText('Two'))).toBe(body);
+    expect(body).toContainElement(document.querySelector('.newspack-drawer__divider'));
+  });
+  it('keeps the same scroll container when a sibling above it toggles', function () {
+    var tree = function tree(withNotice) {
+      return /*#__PURE__*/_jsxs(Drawer.Root, {
+        isOpen: true,
+        contentLabel: "Settings panel",
+        onRequestClose: noop,
+        children: [withNotice && /*#__PURE__*/_jsx("div", {
+          children: "Notice"
+        }), /*#__PURE__*/_jsx(Drawer.Content, {
+          children: "Body"
+        })]
+      });
+    };
+    var _render3 = render(tree(false)),
+      rerender = _render3.rerender;
+    var body = bodyOf(screen.getByText('Body'));
+    rerender(tree(true));
+    expect(bodyOf(screen.getByText('Body'))).toBe(body);
+  });
+});
+
+// The dialog's X reuses the cancel label, so a role query for "Cancel" is
+// ambiguous. Query the footer buttons by visible text.
+var dialogButton = function dialogButton(name) {
+  return screen.getByText(name, {
+    selector: 'button'
+  });
+};
+describe('Drawer closing', function () {
+  it('closes on a close icon click when it is not dirty', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.click(closeButton());
+    expect(onRequestClose).toHaveBeenCalledTimes(1);
+  });
+  it('closes on Escape when it is not dirty', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.keyDown(screen.getByText('Body'), {
+      key: 'Escape'
+    });
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+  it('closes on an Escape reported by code alone', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.keyDown(screen.getByText('Body'), {
+      code: 'Escape'
+    });
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+  it('ignores an Escape that ends an IME composition', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.keyDown(screen.getByText('Body'), {
+      key: 'Escape',
+      isComposing: true
+    });
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
+  it('ignores an Escape a child has already handled', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      },
+      contents: /*#__PURE__*/_jsx(Drawer.Content, {
+        children: /*#__PURE__*/_jsx("button", {
+          onKeyDown: function onKeyDown(event) {
+            return event.preventDefault();
+          },
+          children: "child"
+        })
+      })
+    });
+    fireEvent.keyDown(screen.getByRole('button', {
+      name: 'child'
+    }), {
+      key: 'Escape'
+    });
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
+  it('confirms before closing when it is dirty', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        isDirty: true,
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.click(closeButton());
+    expect(onRequestClose).not.toHaveBeenCalled();
+    fireEvent.click(dialogButton('Discard Changes'));
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+  it('confirms an Escape when it is dirty', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        isDirty: true,
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.keyDown(screen.getByText('Body'), {
+      key: 'Escape'
+    });
+    expect(onRequestClose).not.toHaveBeenCalled();
+    fireEvent.click(dialogButton('Discard Changes'));
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+  it('stays open when a delegated confirmation opens', function () {
+    var onRequestClose = jest.fn();
+    var Delegating = function Delegating() {
+      var _useConfirmDialog = useConfirmDialog({
+          message: 'Discard?',
+          confirmButtonText: 'Discard Changes'
+        }),
+        confirmDialog = _useConfirmDialog.confirmDialog,
+        requestConfirm = _useConfirmDialog.requestConfirm;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [drawerTree({
+          rootProps: {
+            isDirty: true,
+            requestConfirm: requestConfirm,
+            onRequestClose: onRequestClose
+          }
+        }), confirmDialog]
+      });
+    };
+    render(/*#__PURE__*/_jsx(Delegating, {}));
+    fireEvent.click(closeButton());
+    expect(screen.getByText('Discard Changes', {
+      selector: 'button'
+    })).toBeInTheDocument();
+    expect(onRequestClose).not.toHaveBeenCalled();
+    expect(panel()).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Discard Changes', {
+      selector: 'button'
+    }));
+    expect(onRequestClose).toHaveBeenCalledTimes(1);
+  });
+  it('reads the current isDirty when a modal above it dismisses', function () {
+    var onRequestClose = jest.fn();
+    var above = function above(_ref3) {
+      var sibling = _ref3.sibling,
+        isDirty = _ref3.isDirty;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [sibling && /*#__PURE__*/_jsx(Modal, {
+          title: "Above",
+          onRequestClose: noop,
+          children: "Above"
+        }), drawerTree({
+          rootProps: {
+            isDirty: isDirty,
+            onRequestClose: onRequestClose
+          }
+        })]
+      });
+    };
+    var _render4 = render(above({
+        sibling: false,
+        isDirty: false
+      })),
+      rerender = _render4.rerender;
+    rerender(above({
+      sibling: true,
+      isDirty: true
+    }));
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
+  it('warns when a delegated confirmation closes without prompting', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    var onRequestClose = jest.fn();
+    var requestConfirm = function requestConfirm(callback) {
+      return callback();
+    };
+    renderDrawer({
+      rootProps: {
+        isDirty: true,
+        requestConfirm: requestConfirm,
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.click(closeButton());
+    expect(onRequestClose).toHaveBeenCalled();
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('without prompting'));
+    warn.mockRestore();
+  });
+  it('does not warn when a delegated confirmation prompts', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    renderDrawer({
+      rootProps: {
+        isDirty: true,
+        requestConfirm: jest.fn(),
+        onRequestClose: noop
+      }
+    });
+    fireEvent.click(closeButton());
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+  it('leaves a real delegated confirmation to its owner', function () {
+    var error = jest.spyOn(console, 'error').mockImplementation(function () {});
+    var Delegating = function Delegating(_ref4) {
+      var open = _ref4.open;
+      var _useConfirmDialog2 = useConfirmDialog({
+          message: 'Discard?',
+          confirmButtonText: 'Discard Changes'
+        }),
+        confirmDialog = _useConfirmDialog2.confirmDialog,
+        requestConfirm = _useConfirmDialog2.requestConfirm;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [drawerTree({
+          rootProps: {
+            isOpen: open,
+            isDirty: true,
+            requestConfirm: requestConfirm,
+            onRequestClose: noop
+          }
+        }), confirmDialog]
+      });
+    };
+    var _render5 = render(/*#__PURE__*/_jsx(Delegating, {
+        open: true
+      })),
+      rerender = _render5.rerender;
+    fireEvent.click(closeButton());
+    expect(screen.getByText('Discard Changes', {
+      selector: 'button'
+    })).toBeInTheDocument();
+    rerender(/*#__PURE__*/_jsx(Delegating, {
+      open: false
+    }));
+    expect(screen.getByText('Discard Changes', {
+      selector: 'button'
+    })).toBeInTheDocument();
+    expect(error).not.toHaveBeenCalled();
+    error.mockRestore();
+  });
+  var withSibling = function withSibling(rootProps, sibling) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [drawerTree({
+        rootProps: rootProps
+      }), sibling && /*#__PURE__*/_jsx(Modal, {
+        title: "Elsewhere",
+        onRequestClose: noop,
+        children: "Elsewhere"
+      })]
+    });
+  };
+  it('closes without confirming when another modal replaces it', function () {
+    var onRequestClose = jest.fn();
+    var rootProps = {
+      onRequestClose: onRequestClose
+    };
+    var _render6 = render(withSibling(rootProps, false)),
+      rerender = _render6.rerender;
+    rerender(withSibling(rootProps, true));
+    expect(onRequestClose).toHaveBeenCalledTimes(1);
+  });
+  it('stays open behind another modal when it is dirty', function () {
+    var onRequestClose = jest.fn();
+    var rootProps = {
+      isDirty: true,
+      onRequestClose: onRequestClose
+    };
+    var _render7 = render(withSibling(rootProps, false)),
+      rerender = _render7.rerender;
+    rerender(withSibling(rootProps, true));
+    expect(onRequestClose).not.toHaveBeenCalled();
+    expect(panel()).toBeInTheDocument();
+    expect(screen.queryByText('Discard Changes', {
+      selector: 'button'
+    })).not.toBeInTheDocument();
+  });
+  it('stays open when the confirmation is cancelled', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        isDirty: true,
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.click(closeButton());
+    fireEvent.click(dialogButton('Cancel'));
+    expect(onRequestClose).not.toHaveBeenCalled();
+    expect(screen.getByText('Body')).toBeInTheDocument();
+  });
+  it('delegates to requestConfirm when one is supplied', function () {
+    var onRequestClose = jest.fn();
+    var requestConfirm = jest.fn();
+    renderDrawer({
+      rootProps: {
+        isDirty: true,
+        requestConfirm: requestConfirm,
+        onRequestClose: onRequestClose
+      }
+    });
+    fireEvent.click(closeButton());
+    expect(requestConfirm).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('Discard Changes', {
+      selector: 'button'
+    })).not.toBeInTheDocument();
+    expect(onRequestClose).not.toHaveBeenCalled();
+    requestConfirm.mock.calls[0][0]();
+    expect(onRequestClose).toHaveBeenCalledTimes(1);
+  });
+
+  // jsdom has no PointerEvent, and a plain Event drops the `button` the handler
+  // checks. A MouseEvent carries one.
+  var pointerEvent = function pointerEvent(type) {
+    var button = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    return new MouseEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      button: button
+    });
+  };
+  var pointerDownEvent = function pointerDownEvent(button) {
+    return pointerEvent('pointerdown', button);
+  };
+  var pointerDown = function pointerDown(node, button) {
+    return fireEvent(node, pointerDownEvent(button));
+  };
+  var pointerUp = function pointerUp(node, button) {
+    return fireEvent(node, pointerEvent('pointerup', button));
+  };
+  var press = function press(node, button) {
+    pointerDown(node, button);
+    pointerUp(node, button);
+  };
+  it('closes on an overlay press', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    press(overlay());
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+  it('does not close on a press inside the panel', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    press(screen.getByText('Body'));
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
+  it('closes on an overlay press that spans a re-render', function () {
+    var _onRequestClose = jest.fn();
+    var tree = function tree() {
+      return drawerTree({
+        rootProps: {
+          onRequestClose: function onRequestClose() {
+            return _onRequestClose();
+          }
+        }
+      });
+    };
+    var _render8 = render(tree()),
+      rerender = _render8.rerender;
+    pointerDown(overlay());
+    rerender(tree());
+    pointerUp(overlay());
+    expect(_onRequestClose).toHaveBeenCalled();
+  });
+
+  // Not the commit-versus-paint timing the ref mirror guards: act() drains passive
+  // effects, so this passes either way.
+  it('confirms when the drawer turns dirty mid-gesture', function () {
+    var onRequestClose = jest.fn();
+    var tree = function tree(isDirty) {
+      return drawerTree({
+        rootProps: {
+          onRequestClose: onRequestClose,
+          isDirty: isDirty
+        }
+      });
+    };
+    var _render9 = render(tree(false)),
+      rerender = _render9.rerender;
+    pointerDown(overlay());
+    rerender(tree(true));
+    pointerUp(overlay());
+    expect(onRequestClose).not.toHaveBeenCalled();
+    expect(dialogButton('Discard Changes')).toBeInTheDocument();
+  });
+  it('does not close when the press ends inside the panel', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    pointerDown(overlay());
+    pointerUp(screen.getByText('Body'));
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
+  it('does not close on a release that lands outside the overlay', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    pointerDown(overlay());
+    pointerUp(document.body);
+    expect(onRequestClose).not.toHaveBeenCalled();
+    pointerUp(overlay());
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
+
+  // jsdom implements neither capture method, hence the stubs.
+  it('releases the implicit pointer capture on an overlay press', function () {
+    renderDrawer();
+    var scrim = overlay();
+    scrim.hasPointerCapture = jest.fn(function () {
+      return true;
+    });
+    scrim.releasePointerCapture = jest.fn();
+    var event = pointerDownEvent();
+    event.pointerId = 7;
+    fireEvent(scrim, event);
+    expect(scrim.releasePointerCapture).toHaveBeenCalledWith(7);
+  });
+  it('does not close when the press is cancelled', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    pointerDown(overlay());
+    fireEvent(overlay(), pointerEvent('pointercancel'));
+    pointerUp(overlay());
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
+  it('does not close on a non-primary overlay press', function () {
+    var onRequestClose = jest.fn();
+    renderDrawer({
+      rootProps: {
+        onRequestClose: onRequestClose
+      }
+    });
+    press(overlay(), 2);
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
+  it('prevents the default on an overlay press', function () {
+    renderDrawer();
+    var event = pointerDownEvent();
+    fireEvent(overlay(), event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+  describe('during the exit animation', function () {
+    var closing = function closing(rootProps) {
+      var _render0 = render(drawerTree({
+          rootProps: rootProps
+        })),
+        rerender = _render0.rerender;
+      rerender(drawerTree({
+        rootProps: _objectSpread(_objectSpread({}, rootProps), {}, {
+          isOpen: false
+        })
+      }));
+      expect(panel()).toBeInTheDocument();
+    };
+    it('ignores a further Escape', function () {
+      var onRequestClose = jest.fn();
+      closing({
+        onRequestClose: onRequestClose
+      });
+      fireEvent.keyDown(screen.getByText('Body'), {
+        key: 'Escape'
+      });
+      expect(onRequestClose).not.toHaveBeenCalled();
+    });
+    it('ignores a further overlay press', function () {
+      var onRequestClose = jest.fn();
+      closing({
+        onRequestClose: onRequestClose
+      });
+      press(overlay());
+      expect(onRequestClose).not.toHaveBeenCalled();
+    });
+    it('marks the frame inert', function () {
+      var _render1 = render(drawerTree()),
+        rerender = _render1.rerender;
+      expect(panel()).not.toHaveAttribute('inert');
+      rerender(drawerTree({
+        rootProps: {
+          isOpen: false
+        }
+      }));
+      expect(panel()).toHaveAttribute('inert');
+    });
+    it('does not reopen the confirmation of a dirty drawer', function () {
+      var onRequestClose = jest.fn();
+      closing({
+        isDirty: true,
+        onRequestClose: onRequestClose
+      });
+      fireEvent.keyDown(screen.getByText('Body'), {
+        key: 'Escape'
+      });
+      expect(screen.queryByText('Discard Changes', {
+        selector: 'button'
+      })).not.toBeInTheDocument();
+      expect(onRequestClose).not.toHaveBeenCalled();
+    });
+  });
+});
+
+// jsdom emulates none of inert's behaviour; these observe the explicit return.
+describe('Drawer focus return', function () {
+  // Plain DOM: RTL's cleanup would fight a React-owned node removed by hand below.
+  var opener;
+  var elsewhere;
+  beforeEach(function () {
+    opener = document.body.appendChild(document.createElement('button'));
+    elsewhere = document.body.appendChild(document.createElement('button'));
+    opener.focus();
+  });
+  afterEach(function () {
+    opener.remove();
+    elsewhere.remove();
+  });
+  var closed = {
+    rootProps: {
+      isOpen: false
+    }
+  };
+  it('returns focus to the opener as the exit begins', function () {
+    var _render10 = render(drawerTree(closed)),
+      rerender = _render10.rerender;
+    rerender(drawerTree());
+    closeButton().focus();
+    expect(panel()).toContainElement(document.activeElement);
+    rerender(drawerTree(closed));
+    expect(panel()).toBeInTheDocument();
+    expect(document.activeElement).toBe(opener);
+  });
+  it('leaves focus on the opener once the panel unmounts', function () {
+    var _render11 = render(drawerTree(closed)),
+      rerender = _render11.rerender;
+    rerender(drawerTree());
+    rerender(drawerTree(closed));
+    fireEvent.animationEnd(document.querySelector('.components-modal__frame'));
+    expect(panel()).not.toBeInTheDocument();
+    expect(document.activeElement).toBe(opener);
+  });
+  it('closes without complaint when the opener has gone', function () {
+    var _render12 = render(drawerTree(closed)),
+      rerender = _render12.rerender;
+    rerender(drawerTree());
+    opener.remove();
+    expect(function () {
+      return rerender(drawerTree(closed));
+    }).not.toThrow();
+    expect(panel()).toBeInTheDocument();
+  });
+  it('leaves focus alone when it has moved outside the panel', function () {
+    var _render13 = render(drawerTree(closed)),
+      rerender = _render13.rerender;
+    rerender(drawerTree());
+    elsewhere.focus();
+    rerender(drawerTree(closed));
+    expect(document.activeElement).toBe(elsewhere);
+  });
+  var editor = function editor(editing, child) {
+    return /*#__PURE__*/_jsx(Drawer.Root, {
+      isOpen: !!editing,
+      contentLabel: "Editor",
+      onRequestClose: noop,
+      children: /*#__PURE__*/_jsx(Drawer.Content, {
+        children: editing && child
+      })
+    });
+  };
+  it('returns focus to the opener when the focused child unmounts with the close', function () {
+    var _render14 = render(editor(false, /*#__PURE__*/_jsx("input", {
+        "aria-label": "Name"
+      }))),
+      rerender = _render14.rerender;
+    rerender(editor(true, /*#__PURE__*/_jsx("input", {
+      "aria-label": "Name"
+    })));
+    screen.getByLabelText('Name').focus();
+    expect(panel()).toContainElement(document.activeElement);
+    rerender(editor(false, /*#__PURE__*/_jsx("input", {
+      "aria-label": "Name"
+    })));
+    expect(screen.queryByLabelText('Name')).not.toBeInTheDocument();
+    expect(document.activeElement).toBe(opener);
+  });
+  it('restores focus to the panel when it reopens mid-exit', function () {
+    var _render15 = render(drawerTree(closed)),
+      rerender = _render15.rerender;
+    rerender(drawerTree());
+    rerender(drawerTree(closed));
+    expect(document.activeElement).toBe(opener);
+    rerender(drawerTree());
+    expect(panel()).not.toHaveAttribute('inert');
+    expect(panel()).toContainElement(document.activeElement);
+    expect(document.activeElement).not.toBe(opener);
+  });
+  it('leaves focus on content that claims it when it reopens mid-exit', function () {
+    var SelfFocusing = function SelfFocusing() {
+      var ref = useRef(null);
+      useLayoutEffect(function () {
+        var _ref$current;
+        return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      }, []);
+      return /*#__PURE__*/_jsx("input", {
+        "aria-label": "Name",
+        ref: ref
+      });
+    };
+    var _render16 = render(editor(false, /*#__PURE__*/_jsx(SelfFocusing, {}))),
+      rerender = _render16.rerender;
+    rerender(editor(true, /*#__PURE__*/_jsx(SelfFocusing, {})));
+    rerender(editor(false, /*#__PURE__*/_jsx(SelfFocusing, {})));
+    expect(document.activeElement).toBe(opener);
+    rerender(editor(true, /*#__PURE__*/_jsx(SelfFocusing, {})));
+    expect(document.activeElement).toBe(screen.getByLabelText('Name'));
+  });
+});
+describe('Drawer closed from the parent while its confirmation is open', function () {
+  var opener;
+  beforeEach(function () {
+    opener = document.body.appendChild(document.createElement('button'));
+    opener.focus();
+  });
+  afterEach(function () {
+    opener.remove();
+  });
+  var dirty = {
+    isDirty: true,
+    onRequestClose: noop
+  };
+  var confirmingThenClosed = function confirmingThenClosed() {
+    var _render17 = render(drawerTree({
+        rootProps: dirty
+      })),
+      rerender = _render17.rerender;
+    fireEvent.click(closeButton());
+    expect(dialogButton('Discard Changes')).toBeInTheDocument();
+    rerender(drawerTree({
+      rootProps: _objectSpread(_objectSpread({}, dirty), {}, {
+        isOpen: false
+      })
+    }));
+    return rerender;
+  };
+  var confirmation = function confirmation() {
+    return screen.queryByText('Discard Changes', {
+      selector: 'button'
+    });
+  };
+  it('dismisses the confirmation', function () {
+    confirmingThenClosed();
+    expect(confirmation()).not.toBeInTheDocument();
+  });
+  it('returns focus to the opener', function () {
+    confirmingThenClosed();
+    expect(document.activeElement).toBe(opener);
+  });
+  it('leaves focus on the opener once the panel unmounts', function () {
+    confirmingThenClosed();
+    fireEvent.animationEnd(document.querySelector('.components-modal__frame'));
+    expect(panel()).not.toBeInTheDocument();
+    expect(document.activeElement).toBe(opener);
+  });
+  it('does not restore the confirmation when it opens again', function () {
+    var rerender = confirmingThenClosed();
+    fireEvent.animationEnd(document.querySelector('.components-modal__frame'));
+    rerender(drawerTree({
+      rootProps: dirty
+    }));
+    expect(confirmation()).not.toBeInTheDocument();
+  });
+  it('returns focus to the opener under prefers-reduced-motion', function () {
+    useReducedMotion.mockReturnValue(true);
+    confirmingThenClosed();
+    expect(panel()).not.toBeInTheDocument();
+    expect(confirmation()).not.toBeInTheDocument();
+    expect(document.activeElement).toBe(opener);
+  });
+});
+describe('Drawer confirmation inside a router', function () {
+  var renderRouted = function renderRouted(rootProps) {
+    return render(/*#__PURE__*/_jsx(MemoryRouter, {
+      children: drawerTree({
+        rootProps: rootProps
+      })
+    }));
+  };
+  it('confirms a close', function () {
+    var onRequestClose = jest.fn();
+    renderRouted({
+      isDirty: true,
+      onRequestClose: onRequestClose
+    });
+    fireEvent.click(closeButton());
+    fireEvent.click(dialogButton('Discard Changes'));
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+  it('cancels a close, and can still confirm afterwards', function () {
+    var onRequestClose = jest.fn();
+    renderRouted({
+      isDirty: true,
+      onRequestClose: onRequestClose
+    });
+    fireEvent.click(closeButton());
+    fireEvent.click(dialogButton('Cancel'));
+    expect(onRequestClose).not.toHaveBeenCalled();
+    fireEvent.click(closeButton());
+    fireEvent.click(dialogButton('Discard Changes'));
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+});
+
+// jsdom has no AnimationEvent, so `fireEvent.animationEnd` cannot carry a name.
+var animationEnd = function animationEnd(node, animationName) {
+  var event = new Event('animationend', {
+    bubbles: true
+  });
+  event.animationName = animationName;
+  fireEvent(node, event);
+};
+describe('Drawer exit animation', function () {
+  afterEach(function () {
+    jest.useRealTimers();
+  });
+  var closed = {
+    rootProps: {
+      isOpen: false
+    }
+  };
+  it('marks the frame as exiting, then removes it', function () {
+    jest.useFakeTimers();
+    var _render18 = render(drawerTree()),
+      rerender = _render18.rerender;
+    rerender(drawerTree(closed));
+    expect(panel()).toHaveClass('components-modal__frame', 'is-exiting');
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(panel()).not.toBeInTheDocument();
+  });
+  it('keeps the same frame across a close', function () {
+    var _render19 = render(drawerTree()),
+      rerender = _render19.rerender;
+    var opened = panel();
+    rerender(drawerTree(closed));
+    expect(panel()).toBe(opened);
+  });
+  it('marks the overlay as exiting', function () {
+    jest.useFakeTimers();
+    var _render20 = render(drawerTree()),
+      rerender = _render20.rerender;
+    rerender(drawerTree(closed));
+    expect(overlay()).toHaveClass('is-exiting');
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(overlay()).not.toBeInTheDocument();
+  });
+  it('ignores an animationend from the overlay fade', function () {
+    var _render21 = render(drawerTree()),
+      rerender = _render21.rerender;
+    rerender(drawerTree(closed));
+    animationEnd(overlay(), 'newspack-drawer-overlay-fade-out');
+    expect(panel()).toBeInTheDocument();
+    animationEnd(document.querySelector('.components-modal__frame'), 'newspack-drawer-slide-out');
+    expect(panel()).not.toBeInTheDocument();
+  });
+  it('unmounts the panel when its frame finishes animating out', function () {
+    var _render22 = render(drawerTree()),
+      rerender = _render22.rerender;
+    rerender(drawerTree(closed));
+    fireEvent.animationEnd(document.querySelector('.components-modal__frame'));
+    expect(panel()).not.toBeInTheDocument();
+  });
+  it('ignores an animationend from a nested animation', function () {
+    var _render23 = render(drawerTree()),
+      rerender = _render23.rerender;
+    rerender(drawerTree(closed));
+    animationEnd(screen.getByText('Body'), 'components-popover__appear');
+    expect(panel()).toBeInTheDocument();
+    animationEnd(panel(), 'newspack-drawer-slide-out');
+    expect(panel()).not.toBeInTheDocument();
+  });
+  it('removes the panel at once under prefers-reduced-motion', function () {
+    useReducedMotion.mockReturnValue(true);
+    var _render24 = render(drawerTree()),
+      rerender = _render24.rerender;
+    rerender(drawerTree(closed));
+    expect(panel()).not.toBeInTheDocument();
+  });
+});