newspack-components 4.5.0 → 4.6.0

package/dist/esm/page/style.scss

@@ -0,0 +1,86 @@
+@use "../../../colors/colors.module" as colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+// Design-system tokens ride with the Page header into any consuming bundle.
+// Known tech debt: this reaches past the package's public exports entry
+// (`@wordpress/theme/design-tokens.css`) into its internal layout, because
+// postcss-import cannot resolve exports maps, and resolving the public
+// specifier through sass/webpack leaks a bogus `wp-theme/design-tokens.css`
+// script dependency into consumers' asset manifests, which silently blocks
+// their enqueues. If upstream moves `src/prebuilt/`, this fails loudly at
+// build time.
+/* stylelint-disable-next-line no-invalid-position-at-import-rule -- sass @use must precede the CSS @import; postcss-import inlines it at build time. */
+@import "@wordpress/theme/src/prebuilt/css/design-tokens.css";
+
+// Newspack brand mapping: the wpds brand color tokens ship in WordPress
+// blue; remap them onto the Newspack primary scale so every design-system
+// component (focus rings, brand buttons, toggles) renders in brand colors
+// without per-component overrides.
+/* stylelint-disable plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the wpds brand tokens. */
+:root {
+	--wpds-color-background-interactive-brand-strong: #{colors.$primary-600};
+	--wpds-color-background-interactive-brand-strong-active: #{colors.$primary-800};
+	--wpds-color-background-interactive-brand-weak-active: #{colors.$primary-000};
+	--wpds-color-background-surface-brand: #{colors.$primary-000};
+	--wpds-color-background-thumb-brand: #{colors.$primary-600};
+	--wpds-color-background-thumb-brand-active: #{colors.$primary-600};
+	--wpds-color-foreground-interactive-brand: #{colors.$primary-600};
+	--wpds-color-foreground-interactive-brand-active: #{colors.$primary-800};
+	--wpds-color-foreground-interactive-brand-disabled: #{colors.$primary-400};
+	--wpds-color-stroke-focus: #{colors.$primary-600};
+	--wpds-color-stroke-interactive-brand: #{colors.$primary-600};
+	--wpds-color-stroke-interactive-brand-active: #{colors.$primary-800};
+	--wpds-color-stroke-interactive-brand-disabled: #{colors.$primary-100};
+	--wpds-color-stroke-surface-brand: #{colors.$primary-000};
+	--wpds-color-stroke-surface-brand-strong: #{colors.$primary-600};
+}
+/* stylelint-enable plugin-wpds/no-setting-wpds-custom-properties */
+
+[role="region"].newspack-page {
+	background-color: wp-colors.$white;
+}
+
+.newspack-page__header-region {
+	@include wp-mixins.break-medium {
+		position: sticky;
+		top: var(--wp-admin--admin-bar--height);
+		z-index: 3;
+	}
+}
+
+.newspack-page__header {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	background: var(--wpds-color-background-surface-neutral-strong);
+	border-block-end: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+}
+
+.newspack-page__header-actions {
+	flex-shrink: 0;
+}
+
+.newspack-page__header-subtitle {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	padding-block-end: var(--wpds-dimension-padding-xs);
+}
+
+.newspack-page__header-visual {
+	display: grid;
+	flex-shrink: 0;
+	height: 24px;
+	place-items: center;
+	width: 24px;
+
+	svg path {
+		transform: scale(1.1111);
+		transform-box: view-box;
+		transform-origin: center;
+	}
+}
+
+.newspack-page__breadcrumbs {
+	min-height: wp-vars.$button-size;
+}

package/dist/esm/route-match.js

@@ -0,0 +1,51 @@
+/**
+ * Internal dependencies.
+ */
+import Router from './proxied-imports/router';
+var matchPath = Router.matchPath;
+
+/**
+ * Whether a wildcard pattern (`'/base/*'` or `'/base*'`) matches a pathname.
+ * The wildcard is anchored at a `/` boundary: `'/segments*'` matches
+ * `/segments` and `/segments/123`, never `/segments-old`.
+ *
+ * @param {string} pattern  Pattern ending in `*`.
+ * @param {string} pathname Current router pathname.
+ * @return {boolean} Whether the pattern matches.
+ */
+var matchesWildcard = function matchesWildcard(pattern, pathname) {
+  var base = pattern.slice(0, -1).replace(/\/$/, '');
+  return pathname === base || pathname.startsWith(base + '/');
+};
+
+/**
+ * Single route matcher shared by breadcrumb selection and tabbed navigation.
+ *
+ * An item matches when one of its `activeTabPaths` hits (exact string, or a
+ * `*` wildcard anchored at a `/` boundary), or — falling through on a miss —
+ * when its `path` matches the pathname. Path matching is prefix-based except
+ * for the root path and items opting in via `exact: true`, mirroring how the
+ * wizard registers its `<Route>`s (`exact={ section.exact ?? false }`).
+ *
+ * @param {Object} item     Route item (`{ path?, exact?, activeTabPaths? }`).
+ * @param {string} pathname Current router pathname.
+ * @return {boolean} Whether the item matches the pathname.
+ */
+export var matchesRoute = function matchesRoute(item, pathname) {
+  if (Array.isArray(item.activeTabPaths)) {
+    var wildcardHit = item.activeTabPaths.some(function (path) {
+      return path.endsWith('*') ? matchesWildcard(path, pathname) : path === pathname;
+    });
+    if (wildcardHit) {
+      return true;
+    }
+  }
+  if (!item.path) {
+    return false;
+  }
+  var exact = '/' === item.path || item.exact === true;
+  return !!matchPath(pathname, {
+    path: item.path,
+    exact: exact
+  });
+};

package/dist/esm/route-match.test.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies.
+ */
+import { matchesRoute } from './route-match';
+describe('matchesRoute', function () {
+  it('matches the root path exactly, never as a prefix', function () {
+    expect(matchesRoute({
+      path: '/'
+    }, '/')).toBe(true);
+    expect(matchesRoute({
+      path: '/'
+    }, '/segments')).toBe(false);
+  });
+  it('matches a path as a prefix by default, at segment boundaries', function () {
+    expect(matchesRoute({
+      path: '/segments'
+    }, '/segments')).toBe(true);
+    expect(matchesRoute({
+      path: '/segments'
+    }, '/segments/123')).toBe(true);
+    expect(matchesRoute({
+      path: '/segments'
+    }, '/segments-old')).toBe(false);
+    expect(matchesRoute({
+      path: '/segments'
+    }, '/donations')).toBe(false);
+  });
+  it('matches exactly when the item opts in via exact', function () {
+    expect(matchesRoute({
+      path: '/segments',
+      exact: true
+    }, '/segments')).toBe(true);
+    expect(matchesRoute({
+      path: '/segments',
+      exact: true
+    }, '/segments/123')).toBe(false);
+  });
+  it('matches an activeTabPaths entry exactly', function () {
+    var item = {
+      path: '/other',
+      activeTabPaths: ['/segments/new']
+    };
+    expect(matchesRoute(item, '/segments/new')).toBe(true);
+    expect(matchesRoute(item, '/segments/123')).toBe(false);
+  });
+  it('anchors an activeTabPaths wildcard at a segment boundary', function () {
+    var item = {
+      path: '/other',
+      activeTabPaths: ['/segments/*']
+    };
+    expect(matchesRoute(item, '/segments')).toBe(true);
+    expect(matchesRoute(item, '/segments/123')).toBe(true);
+    expect(matchesRoute(item, '/segments-old')).toBe(false);
+    var noSlash = {
+      path: '/other',
+      activeTabPaths: ['/segments*']
+    };
+    expect(matchesRoute(noSlash, '/segments')).toBe(true);
+    expect(matchesRoute(noSlash, '/segments/123')).toBe(true);
+    expect(matchesRoute(noSlash, '/segments-old')).toBe(false);
+  });
+  it('falls through to path matching when activeTabPaths misses', function () {
+    expect(matchesRoute({
+      path: '/segments',
+      activeTabPaths: ['/elsewhere']
+    }, '/segments/123')).toBe(true);
+  });
+  it('never matches an item without a path when activeTabPaths misses', function () {
+    expect(matchesRoute({}, '/segments')).toBe(false);
+    expect(matchesRoute({
+      activeTabPaths: ['/elsewhere']
+    }, '/segments')).toBe(false);
+  });
+});

package/dist/esm/section-header/index.js

@@ -94,12 +94,18 @@ var SectionHeader = function SectionHeader(_ref) {
     }
   }, []);
   var classes = classnames('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header');
-  var HeadingTag = pageHeader ? 'h1' : "h".concat(heading);
+
+  // The breadcrumb `Page` owns the single page `<h1>`, so a `pageHeader` section
+  // is a secondary heading: its level follows `heading` (default 2). `pageHeader`
+  // controls only the enlarged, centered styling — not the tag. Pass `heading={ 1 }`
+  // on a headerless screen that needs the section header to be the page's h1.
+  var HeadingTag = "h".concat(heading);
   var titleContent = null;
   if (typeof title === 'string') {
     titleContent = /*#__PURE__*/_jsxs("div", {
       className: "newspack-section-header__title-container",
       children: [/*#__PURE__*/_jsxs(HeadingTag, {
+        className: "newspack-section-header__title",
         children: [title, badges !== null && badges !== void 0 && badges.length ? badges.map(function (badge, i) {
           return /*#__PURE__*/_jsx(Badge, {
             text: badge.label,
@@ -134,6 +140,7 @@ var SectionHeader = function SectionHeader(_ref) {
     });
   } else if (typeof title === 'function') {
     titleContent = /*#__PURE__*/_jsx(HeadingTag, {
+      className: "newspack-section-header__title",
       children: title()
     });
   }

package/dist/esm/section-header/style.scss

@@ -4,6 +4,7 @@
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
@@ -12,6 +13,9 @@
 
 	&__container {
 		position: relative;
+		p {
+			text-wrap: balance;
+		}
 		&:not(:first-child) {
 			margin-top: 48px;
 		}
@@ -84,17 +88,18 @@
 		color: wp-colors.$gray-700;
 	}
 
+	// Title sizing keyed to the class, not the tag, so demoting the heading level
+	// (h1 -> h2 when the breadcrumb Page owns the page h1) never changes its look,
+	// and genuine h2s elsewhere in the header are unaffected.
+	&__title {
+		@include wp-mixins.heading-x-large();
+	}
+
 	&__title-container {
 		align-items: center;
 		display: flex;
 		gap: 8px;
 
-		h2 {
-			font-size: wp-vars.$font-size-x-large;
-			font-weight: wp-vars.$font-weight-medium;
-			line-height: wp-vars.$font-line-height-x-large;
-		}
-
 		.newspack-section-header__menu,
 		.newspack-section-header__secondary-action,
 		.newspack-badge {
@@ -161,10 +166,5 @@
 				fill: var(--wp-admin-theme-color);
 			}
 		}
-		h1 {
-			font-size: wp-vars.$font-size-x-large;
-			font-weight: wp-vars.$font-weight-medium;
-			line-height: wp-vars.$font-line-height-x-large;
-		}
 	}
 }

package/dist/esm/select-control/GroupedSelectControl.js

@@ -50,7 +50,7 @@ export default function GroupedSelectControl(_ref) {
     help: help,
     className: classnames(className, 'components-select-control'),
     children: /*#__PURE__*/_jsxs("div", {
-      className: "relative",
+      className: "newspack-grouped-select-control__field",
       children: [/*#__PURE__*/_jsxs("select", _objectSpread(_objectSpread({
         id: id,
         className: "components-select-control__input",

package/dist/esm/select-control/style.scss

@@ -43,6 +43,10 @@
 .newspack-grouped-select-control {
 	position: relative;
 
+	&__field {
+		position: relative;
+	}
+
 	.components-select-control {
 		&__input {
 			appearance: none;

package/dist/esm/style.scss

@@ -35,12 +35,9 @@
 // Checkboxes
 .newspack-checkbox-control {
 	margin-top: 0 !important;
-	.components-checkbox-control__label {
-		font-weight: 600;
-	}
 
 	.components-base-control__help {
-		margin-left: 32px;
+		margin-left: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
 		margin-top: 0;
 	}
 }

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

@@ -1,65 +1,219 @@
+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 { __ } from '@wordpress/i18n';
+import { Tabs } from '@wordpress/ui';
+
 /**
  * External dependencies.
  */
 import classnames from 'classnames';
-import findIndex from 'lodash/findIndex';
 import Router from '../proxied-imports/router';
 
 /**
  * Internal dependencies.
  */
+import { matchesRoute } from '../route-match';
 import './style.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var NavLink = Router.NavLink,
-  useHistory = Router.useHistory;
-var TabbedNavigation = function TabbedNavigation(_ref) {
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+var useHistory = Router.useHistory,
+  useLocation = Router.useLocation;
+var getItemValue = function getItemValue(item, index) {
+  return item.path || item.href || "item-".concat(index);
+};
+export var isItemActive = function isItemActive(item, pathname) {
+  if (item.selected) {
+    return true;
+  }
+  if (null === pathname) {
+    return Boolean(item.href) && window.location.href === item.href;
+  }
+  return matchesRoute(item, pathname);
+};
+
+/**
+ * Default layout when `Page` doesn't inject one: bar above content.
+ */
+var defaultRenderShell = function defaultRenderShell(bar, content) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [bar, content]
+  });
+};
+
+/**
+ * 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 = findIndex(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__*/_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__*/_jsxs("div", {
     className: classnames('newspack-tabbed-navigation', className),
-    children: [/*#__PURE__*/_jsx("ul", {
+    children: [/*#__PURE__*/_jsx(Tabs.List, {
+      activateOnFocus: false,
       children: displayedItems.map(function (item, index) {
-        return /*#__PURE__*/_jsx("li", {
-          children: /*#__PURE__*/_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: classnames({
-              disabled: disableUpcoming && index > currentIndex
-            }),
-            children: item.label
-          })
-        }, index);
+        var isDisabled = disableUpcoming && index > activeIndex;
+        var href = item.path ? "#".concat(item.path) : item.href;
+        return /*#__PURE__*/_jsx(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.
+          _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__*/_jsx(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__*/_jsx(Tabs.Root, {
+    value: activeValue,
+    className: "newspack-tabbed-navigation__root",
+    children: renderShell(bar, /*#__PURE__*/_jsxs(_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__*/_jsxs("nav", {
+    className: classnames('newspack-tabbed-navigation', 'newspack-tabbed-navigation--links', className),
+    "aria-label": __('Secondary navigation', 'newspack-plugin'),
+    children: [displayedItems.map(function (item, index) {
+      return /*#__PURE__*/_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__*/_jsx(RoutedTabbedNavigation, _objectSpread({}, props)) : /*#__PURE__*/_jsx(LinkTabbedNavigation, _objectSpread({}, props));
 };
 export default TabbedNavigation;