newspack-components 4.5.0 → 4.6.0

package/dist/cjs/tabbed-navigation/index.js

@@ -4,70 +4,218 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.isItemActive = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _i18n = require("@wordpress/i18n");
+var _ui = require("@wordpress/ui");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
+var _routeMatch = require("../route-match");
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+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) { (0, _defineProperty2["default"])(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.
+ */ /**
  * External dependencies.
+ */ /**
+ * Internal dependencies.
  */
+var useHistory = _router["default"].useHistory,
+  useLocation = _router["default"].useLocation;
+var getItemValue = function getItemValue(item, index) {
+  return item.path || item.href || "item-".concat(index);
+};
+var isItemActive = exports.isItemActive = function isItemActive(item, pathname) {
+  if (item.selected) {
+    return true;
+  }
+  if (null === pathname) {
+    return Boolean(item.href) && window.location.href === item.href;
+  }
+  return (0, _routeMatch.matchesRoute)(item, pathname);
+};
 
 /**
- * Internal dependencies.
+ * Default layout when `Page` doesn't inject one: bar above content.
  */
+var defaultRenderShell = function defaultRenderShell(bar, content) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [bar, content]
+  });
+};
 
-var NavLink = _router["default"].NavLink,
-  useHistory = _router["default"].useHistory;
-var TabbedNavigation = function TabbedNavigation(_ref) {
+/**
+ * Router-driven tabs: a real WAI-ARIA tabs widget. The routed page content
+ * renders inside the active tab's `Tabs.Panel`, so each tab's `aria-controls`
+ * points at the panel that actually contains its content — or, when no visible
+ * tab owns the route, as a sibling of the panels (see `unownedContent` below).
+ */
+var RoutedTabbedNavigation = function RoutedTabbedNavigation(_ref) {
   var items = _ref.items,
     className = _ref.className,
     disableUpcoming = _ref.disableUpcoming,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? null : _ref$content,
+    _ref$renderShell = _ref.renderShell,
+    renderShell = _ref$renderShell === void 0 ? defaultRenderShell : _ref$renderShell,
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children;
+  var history = useHistory();
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
   var displayedItems = items.filter(function (item) {
     return !item.isHiddenInTabbedNavigation;
   });
-  var _useHistory = useHistory(),
-    location = _useHistory.location;
-  var currentIndex = (0, _findIndex["default"])(displayedItems, ['path', location.pathname]);
-  function _isActive(item, match, pathname) {
-    if (item.path === pathname) {
-      return true;
+
+  // Most-specific match wins, so a tab is never outranked by a sibling that
+  // happens to prefix-match the same pathname.
+  var activeIndex = displayedItems.reduce(function (best, item, index) {
+    var _item$path, _displayedItems$best$;
+    if (!isItemActive(item, pathname)) {
+      return best;
     }
-    if (Array.isArray(item === null || item === void 0 ? void 0 : item.activeTabPaths)) {
-      return item.activeTabPaths.some(function (path) {
-        if (path.endsWith('*')) {
-          var basePath = path.slice(0, -1);
-          return pathname.startsWith(basePath);
-        }
-        return item.activeTabPaths.includes(pathname);
-      });
+    if (best === -1 || (((_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.length) || 0) > (((_displayedItems$best$ = displayedItems[best].path) === null || _displayedItems$best$ === void 0 ? void 0 : _displayedItems$best$.length) || 0)) {
+      return index;
     }
-    return match;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return best;
+  }, -1);
+  var activeValue = activeIndex > -1 ? getItemValue(displayedItems[activeIndex], activeIndex) : null;
+  var onTabClick = function onTabClick(event, item) {
+    // Modified clicks (new tab/window) keep native anchor behavior. Middle
+    // clicks never reach onClick (they dispatch auxclick), so the anchor's
+    // href handles those natively too.
+    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+    // Route through the history object so navigation guards registered via
+    // history.block() (unsaved-changes prompts) are consulted.
+    event.preventDefault();
+    if (item.path !== pathname) {
+      history.push(item.path);
+    }
+  };
+  var bar = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('newspack-tabbed-navigation', className),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Tabs.List, {
+      activateOnFocus: false,
       children: displayedItems.map(function (item, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NavLink, {
-            to: item.path,
-            isActive: function isActive(match, _ref2) {
-              var pathname = _ref2.pathname;
-              return _isActive(item, match, pathname);
-            },
-            exact: item.hasOwnProperty('exact') ? item.exact : true,
-            activeClassName: 'selected',
-            className: (0, _classnames["default"])({
-              disabled: disableUpcoming && index > currentIndex
-            }),
-            children: item.label
-          })
-        }, index);
+        var isDisabled = disableUpcoming && index > activeIndex;
+        var href = item.path ? "#".concat(item.path) : item.href;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Tabs.Tab, {
+          value: getItemValue(item, index),
+          disabled: isDisabled,
+          nativeButton: false,
+          render:
+          /*#__PURE__*/
+          // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid -- content is supplied via the Tab children through @wordpress/ui's render prop, and disabled tabs intentionally drop the href.
+          (0, _jsxRuntime.jsx)("a", {
+            href: isDisabled ? undefined : href,
+            onClick: isDisabled || !item.path ? undefined : function (event) {
+              return onTabClick(event, item);
+            }
+          }),
+          children: item.label
+        }, getItemValue(item, index));
       })
     }), children]
   });
+
+  // Panels must stay 1:1 with the tabs above (@wordpress/ui validates the
+  // pairing in development builds); only the active panel holds the content.
+  var panels = displayedItems.map(function (item, index) {
+    var value = getItemValue(item, index);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Tabs.Panel, {
+      value: value,
+      tabIndex: -1,
+      className: "newspack-tabbed-navigation__panel",
+      children: value === activeValue ? content : null
+    }, value);
+  });
+
+  // A route no visible tab owns — a hidden sub-view (an edit screen), or a path
+  // with no matching tab at all — still has to render its content, outside the
+  // panels: with no active tab there is no panel entitled to hold it. Without
+  // this the page body is blank, and because the router's own fallback (the
+  // wizard's trailing `<Redirect>`) lives inside that content, it never mounts
+  // to correct the route either.
+  //
+  // This renders without the panels' `__panel` class, which is styleless today.
+  // Keep it that way: styling `__panel` would silently indent/pad owned routes
+  // only, and the divergence would be hard to trace back to here.
+  var unownedContent = null === activeValue ? content : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Tabs.Root, {
+    value: activeValue,
+    className: "newspack-tabbed-navigation__root",
+    children: renderShell(bar, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [panels, unownedContent]
+    }))
+  });
+};
+
+/**
+ * Link-driven "tabs": plain navigation for items that trigger full page loads
+ * (e.g. the PHP-rendered wizards admin header). These are not tabs in the ARIA
+ * sense — there is no in-page panel to control — so they render as a `nav` of
+ * links with `aria-current`, styled to match the tabs widget.
+ */
+var LinkTabbedNavigation = function LinkTabbedNavigation(_ref2) {
+  var items = _ref2.items,
+    className = _ref2.className,
+    _ref2$content = _ref2.content,
+    content = _ref2$content === void 0 ? null : _ref2$content,
+    _ref2$renderShell = _ref2.renderShell,
+    renderShell = _ref2$renderShell === void 0 ? defaultRenderShell : _ref2$renderShell,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? null : _ref2$children;
+  var displayedItems = items.filter(function (item) {
+    return !item.isHiddenInTabbedNavigation;
+  });
+  var bar = /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+    className: (0, _classnames["default"])('newspack-tabbed-navigation', 'newspack-tabbed-navigation--links', className),
+    "aria-label": (0, _i18n.__)('Secondary navigation', 'newspack-plugin'),
+    children: [displayedItems.map(function (item, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: item.href,
+        className: "newspack-tabbed-navigation__link",
+        "aria-current": isItemActive(item, null) ? 'page' : undefined,
+        children: item.label
+      }, getItemValue(item, index));
+    }), children]
+  });
+  return renderShell(bar, content);
+};
+
+/**
+ * Tabbed navigation over `{ label, path? | href?, exact?, activeTabPaths?, selected?, isHiddenInTabbedNavigation? }` items.
+ *
+ * Items with router `path`s render as a real tabs widget whose active panel
+ * contains `content`; href-only items render as plain navigation links.
+ *
+ * When no visible tab owns the current route — a hidden sub-view, or an unknown
+ * URL — `content` renders as a sibling of the panels with no tab selected. That
+ * is a safety net, not the preferred shape: for a route that is conceptually a
+ * sub-view of a tab, give that tab an `activeTabPaths` entry (e.g.
+ * `activeTabPaths: [ '/edit/*' ]`) so it stays selected and its panel keeps
+ * owning the content.
+ *
+ * `renderShell( bar, content )` is a layout injection point used by `Page` to
+ * place the bar inside its sticky header region while the content flows below.
+ *
+ * @param {Object}  props
+ * @param {Array}   props.items             Navigation items.
+ * @param {boolean} [props.disableUpcoming] Disable tabs after the active one (setup flows).
+ * @param {*}       [props.content]         Page content, rendered inside the active tab's panel — or
+ *                                          as a sibling of the panels when no visible tab owns the route.
+ * @param {*}       [props.renderShell]     Layout callback `( bar, content ) => element`.
+ * @param {string}  [props.className]
+ * @param {*}       [props.children]        Extra elements rendered inside the bar (e.g. error notices).
+ * @return {JSX.Element} Tabbed navigation.
+ */
+var TabbedNavigation = function TabbedNavigation(props) {
+  var hasRoutedItems = props.items.some(function (item) {
+    return item.path;
+  });
+  return hasRoutedItems ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RoutedTabbedNavigation, _objectSpread({}, props)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkTabbedNavigation, _objectSpread({}, props));
 };
 var _default = exports["default"] = TabbedNavigation;

package/dist/cjs/tabbed-navigation/index.test.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@testing-library/react");
+var _reactRouterDom = require("react-router-dom");
+var _index = _interopRequireWildcard(require("./index"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["initialEntries"];
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2["default"])(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; }
+var HistoryGrabber = function HistoryGrabber(_ref) {
+  var historyRef = _ref.historyRef;
+  historyRef.current = (0, _reactRouterDom.useHistory)();
+  return null;
+};
+var ITEMS = [{
+  label: 'Stories',
+  path: '/stories'
+}, {
+  label: 'Budgets',
+  path: '/budgets'
+}, {
+  label: 'Sites',
+  path: '/sites'
+}];
+var renderTabs = function renderTabs() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref2$initialEntries = _ref2.initialEntries,
+    initialEntries = _ref2$initialEntries === void 0 ? ['/stories'] : _ref2$initialEntries,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var historyRef = {
+    current: null
+  };
+  (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.MemoryRouter, {
+    initialEntries: initialEntries,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryGrabber, {
+      historyRef: historyRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread({
+      items: ITEMS,
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Routed content"
+      })
+    }, props))]
+  }));
+  return historyRef.current;
+};
+var getTab = function getTab(name) {
+  return _react.screen.getByRole('tab', {
+    name: name
+  });
+};
+describe('isItemActive', function () {
+  it('treats an explicitly selected item as active regardless of pathname', function () {
+    expect((0, _index.isItemActive)({
+      selected: true,
+      path: '/other'
+    }, '/current')).toBe(true);
+    expect((0, _index.isItemActive)({
+      selected: true
+    }, null)).toBe(true);
+  });
+  describe('outside a router (pathname is null)', function () {
+    afterEach(function () {
+      delete window.location;
+      window.location = new URL('http://localhost/');
+    });
+    it('is active when the href matches the current URL', function () {
+      delete window.location;
+      window.location = new URL('http://example.com/wp-admin/admin.php?page=ads');
+      expect((0, _index.isItemActive)({
+        href: 'http://example.com/wp-admin/admin.php?page=ads'
+      }, null)).toBe(true);
+    });
+    it('is inactive when the href does not match', function () {
+      delete window.location;
+      window.location = new URL('http://example.com/wp-admin/admin.php?page=ads');
+      expect((0, _index.isItemActive)({
+        href: 'http://example.com/wp-admin/admin.php?page=other'
+      }, null)).toBe(false);
+    });
+    it('is inactive when the item has no href', function () {
+      expect((0, _index.isItemActive)({
+        path: '/ads'
+      }, null)).toBe(false);
+    });
+  });
+  describe('inside a router (delegates to the shared route matcher)', function () {
+    it('matches a path as a prefix by default', function () {
+      expect((0, _index.isItemActive)({
+        path: '/stories'
+      }, '/stories')).toBe(true);
+      expect((0, _index.isItemActive)({
+        path: '/stories'
+      }, '/stories/new')).toBe(true);
+      expect((0, _index.isItemActive)({
+        path: '/stories'
+      }, '/budgets')).toBe(false);
+    });
+    it('matches exactly when the item opts in via exact', function () {
+      expect((0, _index.isItemActive)({
+        path: '/stories',
+        exact: true
+      }, '/stories/new')).toBe(false);
+    });
+    it('keeps the parent tab active on a hidden subpage via wildcard', function () {
+      var item = {
+        path: '/additional-brands',
+        activeTabPaths: ['/additional-brands/*']
+      };
+      expect((0, _index.isItemActive)(item, '/additional-brands/new')).toBe(true);
+    });
+  });
+});
+describe('TabbedNavigation with routed items', function () {
+  it('renders the routed content inside the active tab panel', function () {
+    renderTabs({
+      initialEntries: ['/budgets']
+    });
+    expect(getTab('Budgets')).toHaveAttribute('aria-selected', 'true');
+    var content = _react.screen.getByText('Routed content');
+    var panel = content.closest('[role="tabpanel"]');
+    expect(panel).not.toBeNull();
+    expect(getTab('Budgets')).toHaveAttribute('aria-controls', panel.id);
+  });
+  it('keeps the tab active and the content in its panel on a nested route', function () {
+    renderTabs({
+      initialEntries: ['/stories/new']
+    });
+    expect(getTab('Stories')).toHaveAttribute('aria-selected', 'true');
+    expect(_react.screen.getByText('Routed content').closest('[role="tabpanel"]')).not.toBeNull();
+  });
+  it('prefers the most specific tab when paths nest', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+      initialEntries: ['/stories/new'],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        items: [{
+          label: 'Stories',
+          path: '/stories'
+        }, {
+          label: 'New story',
+          path: '/stories/new'
+        }]
+      })
+    }));
+    expect(getTab('New story')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('Stories')).toHaveAttribute('aria-selected', 'false');
+  });
+  it('navigates through history.push on click', function () {
+    var history = renderTabs();
+    _react.fireEvent.click(getTab('Sites'));
+    expect(history.location.pathname).toBe('/sites');
+    expect(getTab('Sites')).toHaveAttribute('aria-selected', 'true');
+  });
+  it('leaves modified clicks to the browser', function () {
+    var history = renderTabs();
+    _react.fireEvent.click(getTab('Sites'), {
+      metaKey: true
+    });
+    expect(history.location.pathname).toBe('/stories');
+  });
+  it('consults history.block guards before navigating', function () {
+    var history = renderTabs();
+    var unblock = history.block(function () {
+      return false;
+    });
+    _react.fireEvent.click(getTab('Sites'));
+    expect(history.location.pathname).toBe('/stories');
+    expect(getTab('Stories')).toHaveAttribute('aria-selected', 'true');
+    unblock();
+  });
+  it('disables tabs after the active one with disableUpcoming', function () {
+    renderTabs({
+      initialEntries: ['/budgets'],
+      disableUpcoming: true
+    });
+    expect(getTab('Stories')).toHaveAttribute('href');
+    expect(getTab('Sites')).not.toHaveAttribute('href');
+    expect(getTab('Sites')).toHaveAttribute('aria-disabled', 'true');
+    _react.fireEvent.click(getTab('Sites'));
+    expect(getTab('Budgets')).toHaveAttribute('aria-selected', 'true');
+  });
+  it('disables every tab with disableUpcoming when no route matches', function () {
+    renderTabs({
+      initialEntries: ['/unknown'],
+      disableUpcoming: true
+    });
+    ITEMS.forEach(function (_ref3) {
+      var label = _ref3.label;
+      expect(getTab(label)).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+  it('renders the content outside the panels when no tab owns the route', function () {
+    // A route no tab matches — an edit screen registered as hidden, or a stale
+    // URL. The content must still mount, or the page body is blank.
+    renderTabs({
+      initialEntries: ['/edit/123']
+    });
+
+    // Assert positively: with nothing selected the panels unmount entirely, so
+    // a `closest( '[role=tabpanel]' )` check alone would pass even if the
+    // content rendered somewhere wrong. Exactly one copy also guards the mutual
+    // exclusivity with the in-panel render.
+    var matches = _react.screen.getAllByText('Routed content');
+    expect(matches).toHaveLength(1);
+    expect(matches[0].closest('.newspack-tabbed-navigation__root')).not.toBeNull();
+    expect(matches[0].closest('[role="tabpanel"]')).toBeNull();
+    ITEMS.forEach(function (_ref4) {
+      var label = _ref4.label;
+      expect(getTab(label)).toHaveAttribute('aria-selected', 'false');
+    });
+  });
+  it('renders the content when the only matching item is hidden from the bar', function () {
+    // The wizard routes hidden sections but filters them out of the bar, so the
+    // item exists and yet can never own the route.
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+      initialEntries: ['/edit/123'],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        items: [].concat(ITEMS, [{
+          label: 'Edit',
+          path: '/edit/:id',
+          isHiddenInTabbedNavigation: true
+        }]),
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Routed content"
+        })
+      })
+    }));
+    expect(_react.screen.getAllByText('Routed content')).toHaveLength(1);
+    expect(_react.screen.queryByRole('tab', {
+      name: 'Edit'
+    })).not.toBeInTheDocument();
+  });
+  it('renders unowned content even when disableUpcoming disables every tab', function () {
+    // The setup wizard's Welcome and Completed screens are hidden from the bar
+    // AND use disableUpcoming, so `index > activeIndex` disables every tab. The
+    // content still has to render — this is the case that left onboarding blank.
+    renderTabs({
+      initialEntries: ['/unowned'],
+      disableUpcoming: true
+    });
+    expect(_react.screen.getAllByText('Routed content')).toHaveLength(1);
+    ITEMS.forEach(function (_ref5) {
+      var label = _ref5.label;
+      expect(getTab(label)).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+  it('mounts unowned content so a router fallback inside it still runs', function () {
+    // The wizard's trailing <Redirect> lives inside this content, so dropping
+    // it would strand the route instead of correcting it.
+    renderTabs({
+      initialEntries: ['/unknown'],
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Redirect, {
+        to: "/stories"
+      })
+    });
+    expect(getTab('Stories')).toHaveAttribute('aria-selected', 'true');
+  });
+  it('navigates when the active tab changes so panels follow the route', function () {
+    var history = renderTabs();
+    (0, _react.act)(function () {
+      return history.push('/budgets');
+    });
+    expect(getTab('Budgets')).toHaveAttribute('aria-selected', 'true');
+    expect(_react.screen.getByText('Routed content').closest('[role="tabpanel"]').id).toBe(getTab('Budgets').getAttribute('aria-controls'));
+  });
+});
+describe('TabbedNavigation with href-only items', function () {
+  var LINK_ITEMS = [{
+    label: 'Newsletters',
+    href: 'http://example.com/wp-admin/admin.php?page=newsletters',
+    selected: true
+  }, {
+    label: 'Ads',
+    href: 'http://example.com/wp-admin/admin.php?page=ads'
+  }];
+  it('renders plain navigation links instead of a tabs widget', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      items: LINK_ITEMS
+    }));
+    expect(_react.screen.queryByRole('tab')).not.toBeInTheDocument();
+    expect(_react.screen.getByRole('navigation')).toBeInTheDocument();
+    var active = _react.screen.getByRole('link', {
+      name: 'Newsletters'
+    });
+    expect(active).toHaveAttribute('aria-current', 'page');
+    expect(_react.screen.getByRole('link', {
+      name: 'Ads'
+    })).not.toHaveAttribute('aria-current');
+  });
+});