newspack-components 4.6.3 → 4.7.0-alpha.2

package/dist/esm/confirm-dialog/index.test.js

@@ -65,6 +65,34 @@ describe('ConfirmDialog navigation blocking', function () {
     expect(replaceSpy).toHaveBeenCalledTimes(1);
     expect(history.location.pathname).toBe('/');
   });
+
+  // v5 keeps a single prompt slot, so an unprompted re-sync would be caught by
+  // whichever dialog on the screen did install a blocker.
+  it('cancels an unprompted dialog without tripping another blocker', function () {
+    var historyRef = {
+      current: null
+    };
+    render(/*#__PURE__*/_jsxs(MemoryRouter, {
+      children: [/*#__PURE__*/_jsx(HistoryGrabber, {
+        historyRef: historyRef
+      }), /*#__PURE__*/_jsx(ConfirmDialog, {
+        when: true,
+        confirmButtonText: "Leave",
+        cancelButtonText: "Stay",
+        children: "Wizard guard"
+      }), /*#__PURE__*/_jsx(ConfirmDialog, {
+        isOpen: true,
+        confirmButtonText: "Discard changes",
+        cancelButtonText: "Keep editing",
+        children: "Unsaved changes"
+      })]
+    }));
+    var replaceSpy = jest.spyOn(historyRef.current, 'replace');
+    cancelNavigation();
+    expect(dialog()).not.toBeInTheDocument();
+    expect(screen.queryByText('Wizard guard')).not.toBeInTheDocument();
+    expect(replaceSpy).not.toHaveBeenCalled();
+  });
   it('replays a blocked push on confirm: re-sync replace first, then push, and re-arms the blocker', function () {
     var history = renderWithHistory();
     var replaceSpy = jest.spyOn(history, 'replace');
@@ -170,4 +198,152 @@ describe('ConfirmDialog navigation blocking', function () {
     expect(history.location.pathname).toBe('/');
     expect(dialog()).toBeInTheDocument();
   });
+});
+
+// `useHistory` returns undefined outside a wizard, where `newspack-multibranded-site`
+// runs react-router v6 against this package's v5.
+describe('ConfirmDialog without a router', function () {
+  var renderUnrouted = function renderUnrouted() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return render(/*#__PURE__*/_jsx(ConfirmDialog, _objectSpread(_objectSpread({
+      isOpen: true,
+      confirmButtonText: "Discard changes",
+      cancelButtonText: "Keep editing"
+    }, props), {}, {
+      children: "Unsaved changes"
+    })));
+  };
+  it('cancels with no history to re-sync', function () {
+    var onCancel = jest.fn();
+    renderUnrouted({
+      onCancel: onCancel
+    });
+    expect(dialog()).toBeInTheDocument();
+    cancelNavigation();
+    expect(onCancel).toHaveBeenCalled();
+    expect(dialog()).not.toBeInTheDocument();
+  });
+  it('confirms with no history to re-sync', function () {
+    var onConfirm = jest.fn();
+    renderUnrouted({
+      onConfirm: onConfirm
+    });
+    confirmNavigation();
+    expect(onConfirm).toHaveBeenCalled();
+    expect(dialog()).not.toBeInTheDocument();
+  });
+  it('installs no blocker when asked to block without a router', function () {
+    expect(function () {
+      return renderUnrouted({
+        when: true
+      });
+    }).not.toThrow();
+    expect(dialog()).toBeInTheDocument();
+  });
+});
+describe('ConfirmDialog controlled by isOpen', function () {
+  var tree = function tree(isOpen) {
+    return /*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: isOpen,
+      confirmButtonText: "Discard changes",
+      cancelButtonText: "Keep editing",
+      children: "Unsaved changes"
+    });
+  };
+  it('closes when isOpen goes false', function () {
+    var _render = render(tree(true)),
+      rerender = _render.rerender;
+    expect(dialog()).toBeInTheDocument();
+    rerender(tree(false));
+    expect(dialog()).not.toBeInTheDocument();
+  });
+  it('opens again afterwards', function () {
+    var _render2 = render(tree(true)),
+      rerender = _render2.rerender;
+    rerender(tree(false));
+    rerender(tree(true));
+    expect(dialog()).toBeInTheDocument();
+  });
+  it('leaves a blocked navigation prompt up', function () {
+    var historyRef = {
+      current: null
+    };
+    render(/*#__PURE__*/_jsxs(MemoryRouter, {
+      children: [/*#__PURE__*/_jsx(HistoryGrabber, {
+        historyRef: historyRef
+      }), /*#__PURE__*/_jsx(ConfirmDialog, {
+        when: true,
+        isOpen: false,
+        confirmButtonText: "Discard changes",
+        cancelButtonText: "Keep editing",
+        children: "Unsaved changes"
+      })]
+    }));
+    act(function () {
+      return historyRef.current.push('/next');
+    });
+    expect(dialog()).toBeInTheDocument();
+  });
+  it('withdraws a blocked navigation prompt when isOpen goes false', function () {
+    var historyRef = {
+      current: null
+    };
+    var withOpen = function withOpen(isOpen) {
+      return /*#__PURE__*/_jsxs(MemoryRouter, {
+        children: [/*#__PURE__*/_jsx(HistoryGrabber, {
+          historyRef: historyRef
+        }), /*#__PURE__*/_jsx(ConfirmDialog, {
+          when: true,
+          isOpen: isOpen,
+          confirmButtonText: "Discard changes",
+          cancelButtonText: "Keep editing",
+          children: "Unsaved changes"
+        })]
+      });
+    };
+    var _render3 = render(withOpen(true)),
+      rerender = _render3.rerender;
+    act(function () {
+      return historyRef.current.push('/next');
+    });
+    expect(dialog()).toBeInTheDocument();
+    rerender(withOpen(false));
+    expect(dialog()).not.toBeInTheDocument();
+    expect(historyRef.current.location.pathname).toBe('/');
+
+    // Confirming the next prompt must not replay the abandoned destination.
+    rerender(withOpen(true));
+    confirmNavigation();
+    expect(historyRef.current.location.pathname).toBe('/');
+  });
+});
+describe('ConfirmDialog named by a hidden title', function () {
+  it('takes its accessible name from the title while hiding the header', function () {
+    render(/*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: true,
+      hideTitle: true,
+      title: "Unsaved changes",
+      confirmButtonText: "Discard changes",
+      children: "You have unsaved changes that will be lost. Discard changes?"
+    }));
+    var frame = screen.getByRole('dialog', {
+      name: 'Unsaved changes'
+    });
+    expect(frame).toHaveClass('newspack-modal--hide-title');
+    expect(frame.querySelector('.components-modal__header')).toContainElement(screen.getByRole('heading', {
+      name: 'Unsaved changes'
+    }));
+  });
+  it('has no accessible name without a title', function () {
+    render(/*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: true,
+      hideTitle: true,
+      confirmButtonText: "Discard changes",
+      children: "You have unsaved changes that will be lost. Discard changes?"
+    }));
+    expect(screen.queryByRole('dialog', {
+      name: 'Unsaved changes'
+    })).not.toBeInTheDocument();
+    expect(screen.getByRole('dialog')).not.toHaveAttribute('aria-labelledby');
+  });
 });

package/dist/esm/dataviews/index.js

@@ -24,11 +24,20 @@ import classnames from 'classnames';
  */
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function DataViews(_ref) {
+function DataViews(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx("div", {
     className: classnames('newspack-dataviews', className),
     children: /*#__PURE__*/_jsx(BaseDataViews, _objectSpread({}, props))
   });
-}
+}
+
+// The implementation is typed against the `unknown` instantiation because
+// BaseDataViews' conditionally-optional `getItemId` prop cannot be related
+// to a JSX spread while `Item` is an unresolved type parameter. The export
+// re-types it with the generic signature so call sites get item-aware
+// typing for `data`, `fields`, `actions`, `getItemId`, etc. The assertion
+// is verified by the compiler: the generic signature is assignable to the
+// implementation's concrete one.
+export default DataViews;

package/dist/esm/divider/index.js

@@ -16,6 +16,20 @@ import './style.scss';
  * External dependencies
  */
 import classNames from 'classnames';
+
+/**
+ * Divider component.
+ *
+ * Every prop beyond the documented ones is forwarded to the `hr` element.
+ *
+ * @param {import('react').ComponentPropsWithoutRef<'hr'> & {
+ *   alignment?: string,
+ *   marginBottom?: number|string,
+ *   marginTop?: number|string,
+ *   variant?: string,
+ * }} props - Component props: the documented options plus any `hr` attribute.
+ * @return {JSX.Element} Divider component.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 var Divider = function Divider(_ref) {
   var _ref$alignment = _ref.alignment,

package/dist/esm/drawer/action.js

@@ -0,0 +1,68 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["ariaLabel", "closes", "onClick", "href", "children"];
+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 { useContext, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import Button from '../button';
+import { DrawerContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Action = function Action(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+    _ref$closes = _ref.closes,
+    closes = _ref$closes === void 0 ? false : _ref$closes,
+    onClick = _ref.onClick,
+    href = _ref.href,
+    children = _ref.children,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
+  // Not useDrawerContext: only `closes` requires the context.
+  var context = useContext(DrawerContext);
+
+  // `href=""` is still an anchor; a null from a JS caller means no link at all.
+  var hasHref = 'string' === typeof href;
+  useEffect(function () {
+    if ('production' === process.env.NODE_ENV || !hasHref) {
+      return;
+    }
+    if (onClick || closes) {
+      // eslint-disable-next-line no-console
+      console.warn('Drawer: an action with `href` cannot also take `onClick` or `closes`, and they are ignored. ' + 'A link that ran the close funnel would navigate away while the unsaved-changes confirmation was still opening.');
+    }
+  }, [hasHref, onClick, closes]);
+  useEffect(function () {
+    if ('production' === process.env.NODE_ENV) {
+      return;
+    }
+    if (typeof children === 'string' && ariaLabel && !ariaLabel.toLowerCase().includes(children.toLowerCase())) {
+      // eslint-disable-next-line no-console
+      console.warn("Drawer: action ariaLabel \"".concat(ariaLabel, "\" does not contain its visible label \"").concat(children, "\". ") + 'Voice control matches spoken commands against the accessible name (WCAG 2.5.3, Label in Name), ' + 'so ariaLabel must extend the visible text rather than replace it.');
+    }
+  }, [ariaLabel, children]);
+  var handleClick = function handleClick(event) {
+    onClick === null || onClick === void 0 || onClick(event);
+    if (closes) {
+      if (!context) {
+        throw new Error('Drawer subcomponents must be rendered inside Drawer.Root.');
+      }
+      context.requestClose();
+    }
+  };
+
+  // Button swallows `href` whenever an onClick is present, so a link supplies none.
+  var handlesClick = !hasHref && (!!onClick || closes);
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+    "aria-label": ariaLabel,
+    href: hasHref ? href : undefined,
+    onClick: handlesClick ? handleClick : undefined
+  }, buttonProps), {}, {
+    children: children
+  }));
+};
+export default Action;

package/dist/esm/drawer/body.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * WordPress dependencies.
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+// Core tab-stops its own container once it overflows; the drawer scrolls here.
+var Body = function Body(_ref) {
+  var children = _ref.children;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    node = _useState2[0],
+    setNode = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isScrollable = _useState4[0],
+    setIsScrollable = _useState4[1];
+  useEffect(function () {
+    if (!node) {
+      return;
+    }
+    var measure = function measure() {
+      return setIsScrollable(node.scrollHeight > node.clientHeight);
+    };
+    measure();
+    if (!window.ResizeObserver) {
+      return;
+    }
+    var resize = new ResizeObserver(measure);
+    var observeChildren = function observeChildren() {
+      resize.disconnect();
+      resize.observe(node);
+      // Border box: a section's padding rides on an inline custom property.
+      Array.from(node.children).forEach(function (child) {
+        return resize.observe(child, {
+          box: 'border-box'
+        });
+      });
+      measure();
+    };
+    observeChildren();
+    var mutation = new MutationObserver(observeChildren);
+    mutation.observe(node, {
+      childList: true
+    });
+    return function () {
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, [node]);
+  return /*#__PURE__*/_jsx(VStack, {
+    ref: setNode,
+    className: "newspack-drawer__body",
+    spacing: 0,
+    justify: "flex-start"
+    // A bare div is role=generic, where ARIA prohibits an author name.
+    ,
+    role: isScrollable ? 'group' : undefined,
+    tabIndex: isScrollable ? 0 : undefined,
+    "aria-label": isScrollable ? __('Scrollable section', 'newspack-plugin') : undefined,
+    children: children
+  });
+};
+export default Body;

package/dist/esm/drawer/close-icon.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies.
+ */
+import { close } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import Button from '../button';
+import { useDrawerContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+var CloseIcon = function CloseIcon(_ref) {
+  var label = _ref.label,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? close : _ref$icon,
+    className = _ref.className;
+  var _useDrawerContext = useDrawerContext(),
+    requestClose = _useDrawerContext.requestClose,
+    title = _useDrawerContext.title;
+  var defaultLabel = title !== null && title !== void 0 && title.text ?
+  // translators: %s: the drawer's title.
+  sprintf(__('Close %s', 'newspack-plugin'), title.text) : __('Close', 'newspack-plugin');
+  return /*#__PURE__*/_jsx(Button, {
+    className: classnames('newspack-drawer__dismiss', className),
+    icon: icon,
+    size: "small",
+    label: label || defaultLabel,
+    onClick: requestClose
+  });
+};
+export default CloseIcon;

package/dist/esm/drawer/content.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies.
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Children, isValidElement } from '@wordpress/element';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+// VStack drops non-elements, a lone string aside. A run shares one wrapper so
+// `Edited by { name }` is one row, not three.
+var asRows = function asRows(children) {
+  if ('string' === typeof children) {
+    return children;
+  }
+  var rows = [];
+  var text = [];
+  var flushText = function flushText() {
+    if (text.some(function (part) {
+      return '' !== String(part).trim();
+    })) {
+      rows.push(/*#__PURE__*/_jsx("div", {
+        children: text
+      }, "text-".concat(rows.length)));
+    }
+    text = [];
+  };
+  Children.toArray(children).forEach(function (child) {
+    if (isValidElement(child)) {
+      flushText();
+      rows.push(child);
+    } else {
+      text.push(child);
+    }
+  });
+  flushText();
+  return rows;
+};
+var Content = function Content(_ref) {
+  var _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 6 : _ref$padding,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 4 : _ref$gap,
+    className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx(VStack, {
+    className: classnames('newspack-drawer__content', className),
+    spacing: gap
+    // A custom property, not inline padding, so the stylesheet's seam rules win.
+    ,
+    style: {
+      '--newspack-drawer-content-padding': "".concat(padding * 4, "px")
+    },
+    children: asRows(children)
+  });
+};
+export default Content;

package/dist/esm/drawer/context.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies.
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+
+export var DrawerContext = createContext(null);
+export var useDrawerContext = function useDrawerContext() {
+  var context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error('Drawer subcomponents must be rendered inside Drawer.Root.');
+  }
+  return context;
+};

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

@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies.
+ */
+import { DrawerContext, useDrawerContext } from './context';
+
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Probe = function Probe() {
+  var _useDrawerContext = useDrawerContext(),
+    title = _useDrawerContext.title;
+  return /*#__PURE__*/_jsx("span", {
+    children: title ? title.text : 'no title'
+  });
+};
+describe('useDrawerContext', function () {
+  it('returns the provided value', function () {
+    render(/*#__PURE__*/_jsx(DrawerContext.Provider, {
+      value: {
+        requestClose: function requestClose() {},
+        title: {
+          id: 't1',
+          text: 'Hello'
+        },
+        setTitle: function setTitle() {}
+      },
+      children: /*#__PURE__*/_jsx(Probe, {})
+    }));
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+  it('throws outside Drawer.Root', function () {
+    var consoleError = jest.spyOn(console, 'error').mockImplementation(function () {});
+    expect(function () {
+      return render(/*#__PURE__*/_jsx(Probe, {}));
+    }).toThrow('Drawer subcomponents must be rendered inside Drawer.Root.');
+    consoleError.mockRestore();
+  });
+});

package/dist/esm/drawer/divider.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var Divider = function Divider(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/_jsx("hr", {
+    className: classnames('newspack-drawer__divider', className)
+  });
+};
+export default Divider;

package/dist/esm/drawer/footer.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var Footer = function Footer(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames('newspack-drawer__footer', className),
+    children: children
+  });
+};
+export default Footer;

package/dist/esm/drawer/header.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var Header = function Header(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames('newspack-drawer__header', className),
+    children: children
+  });
+};
+export default Header;

package/dist/esm/drawer/index.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Drawer
+ */
+
+/**
+ * Internal dependencies.
+ */
+import Action from './action';
+import CloseIcon from './close-icon';
+import Content from './content';
+import Footer from './footer';
+import Header from './header';
+import Root from './root';
+import Divider from './divider';
+import Title from './title';
+
+// A namespace object, not this package's usual flat exports. See the README.
+export var Drawer = {
+  Root: Root,
+  Header: Header,
+  Title: Title,
+  CloseIcon: CloseIcon,
+  Content: Content,
+  Divider: Divider,
+  Footer: Footer,
+  Action: Action
+};
+Object.entries(Drawer).forEach(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    name = _ref2[0],
+    part = _ref2[1];
+  part.displayName = "Drawer.".concat(name);
+});
+export default Drawer;