@atlaskit/navigation-system 0.166.0

package/constellation/side-navigation/examples.mdx

@@ -0,0 +1,120 @@
+---
+title: Side navigation
+description: Menu items and elements for the side nav area.
+order: 1
+---
+
+import SectionMessage from '@atlaskit/section-message';
+
+import { ButtonMenuItemDisabledExample } from '../../examples/constellation/side-navigation/button-menu-item-disabled';
+import { LinkMenuItemExample } from '../../examples/constellation/side-navigation/link-menu-item';
+import { ExpandableMenuItemExample } from '../../examples/constellation/side-navigation/expandable-menu-item';
+import { FlyoutMenuItemExample } from '../../examples/constellation/side-navigation/flyout-menu-item';
+import { MenuSectionExample } from '../../examples/constellation/side-navigation/menu-section';
+import { ComposingMenus } from '../../examples/constellation/side-navigation/composing-menus';
+import { GlobalAppsExample } from '../../examples/constellation/side-navigation/global-apps';
+
+These components are designed to go in the
+[side nav layout area](/components/navigation-system/layout/examples#side-nav).
+
+## Menu items
+
+<SectionMessage>
+	Menu item components from this package should only be used as direct children of the side nav. If
+	you are composing your own custom menus, for example with popups or dropdown menus, please see the{' '}
+	<a href="#composing-menus">composing menus</a> section.
+</SectionMessage>
+
+### Link menu item
+
+The link item component renders a menu item wrapped in an anchor tag `<a>`. This is the most common
+type of menu item, as most menu items are used to send people to another location.
+
+For menu items that do something else, use the button item component instead.
+
+Use the [app provider](/components/app-provider/examples) to specify a custom router link component.
+
+<Example Component={LinkMenuItemExample} />
+
+### Button menu item
+
+The button item component renders a menu item wrapped in a button tag `<button>`. Use this component
+when you have an action that does something other than navigating to a new page or context.
+
+#### Disabled state
+
+When disabled, content in the `actions` and `actionsOnHover` props will not be rendered.
+
+<Example Component={ButtonMenuItemDisabledExample} />
+
+### Expandable menu item
+
+The expandable item component allows you to nest menu items. Use this component to form navigation
+hierarchies.
+
+<Example Component={ExpandableMenuItemExample} />
+
+### Flyout menu item
+
+The flyout menu item renders a popup with the menu item as the trigger. Use this component to render
+children that aren't menu items, such as search bars and filters.
+
+You can also render additional menu items within the flyout. For these, you should use the other
+menu items from the `@atlaskit/navigation-system` package.
+
+<Example Component={FlyoutMenuItemExample} />
+
+### Composing menus
+
+You can use the `actions` or `actionsOnHover` props to compose your own menus. If you want to render
+additional menu items within these menus, you should use either:
+
+- menu item components from [@atlaskit/dropdown-menu](/components/dropdown-menu/examples)
+- a combination of [@atlaskit/popup](/components/popup/examples) and
+  [@atlaskit/menu](/components/menu/examples).
+
+You shouldn't use `@atlaskit/navigation-system` menu items within these menus.
+
+<Example Component={ComposingMenus} />
+
+## Sections
+
+Use `MenuSection` to group related items. Screen readers will convey these groupings.
+
+Optionally compose with `MenuSectionHeading` to label the group, and `Divider` to render a
+separator.
+
+<Example Component={MenuSectionExample} />
+
+## Global app shortcuts
+
+Global app shortcuts allow quick access to related apps.
+
+<SectionMessage title="Global app icon tiles">
+	<p>
+		We are looking into making global app icon tiles easier to consume, but there is currently no
+		platform offering.
+	</p>
+</SectionMessage>
+
+### Spacing
+
+Use `TopLevelSpacer` to create spacing between:
+
+- global app shortcut section
+- 'more' button menu item
+- starred spaces (in Confluence)
+
+<SectionMessage title="TopLevelSpacer usage" appearance="warning">
+	<p>
+		Only use this component in the top level of the menu, and exercise caution when using it in new
+		situations.
+	</p>
+	<p>
+		This component exists to fulfil product design requirements but has not yet been consolidated
+		into the wider navigation system.
+	</p>
+	<p>It may not exist in the future when global apps are no longer in the side navigation.</p>
+</SectionMessage>
+
+<Example Component={GlobalAppsExample} />

package/constellation/top-navigation/code.mdx

@@ -0,0 +1,93 @@
+---
+title: Top nav items
+description: Actions and items for the top bar of the navigation.
+order: 2
+props:
+  packageName: '@atlaskit/navigation-system/top-nav-items'
+  exports:
+    - AppSwitcher
+    - NavLogo
+    - Notifications
+    - Profile
+    - Settings
+    - EndItem
+    - Help
+    - CreateButton
+    - LogIn
+    - Search
+    - ChatButton
+---
+
+## Props
+
+### AppSwitcher
+
+The trigger button for the app switcher.
+
+<TSMorphProps exportName="AppSwitcher" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### NavLogo
+
+The product logo for the top navigation.
+
+<TSMorphProps exportName="NavLogo" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### Search
+
+Note: Instead of using this component directly, you may want to use the search component from
+`@atlassian/search-page/quick-find` instead.
+
+<TSMorphProps exportName="Search" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### CreateButton
+
+Note: Instead of using this button directly, you may want to use the create button from
+`@atlassian/universal-create` instead.
+
+<TSMorphProps exportName="CreateButton" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### ChatButton
+
+Instead of using this button directly, you may want to use the chat button from
+`@atlassian/conversation-assistant-ui-components` instead.
+
+<TSMorphProps exportName="ChatButton" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### Notifications
+
+The trigger button for the notifications menu.
+
+<TSMorphProps exportName="Notifications" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### Help
+
+The trigger button for the help menu.
+
+<TSMorphProps exportName="Help" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### Settings
+
+The trigger button for the settings menu.
+
+<TSMorphProps exportName="Settings" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### Profile
+
+The trigger button for the profile menu.
+
+Note: Instead of using this button directly, you may want to use `@atlassian/account/nav4` instead.
+
+<TSMorphProps exportName="Profile" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### LogIn
+
+Note: Instead of using this button directly, you may want to use `@atlassian/account/nav4` instead.
+
+<TSMorphProps exportName="LogIn" packageName="@atlaskit/navigation-system/top-nav-items" />
+
+### EndItem
+
+If none of the provided top nav items components are suitable, you can create your own using
+`EndItem`.
+
+<TSMorphProps exportName="EndItem" packageName="@atlaskit/navigation-system/top-nav-items" />

package/constellation/top-navigation/examples.mdx

@@ -0,0 +1,167 @@
+---
+title: Top navigation
+description: Actions and items for the top bar of the navigation.
+order: 1
+---
+
+import SectionMessage from '@atlaskit/section-message';
+
+import { TopNavStartLayoutExample } from '../../examples/constellation/top-navigation/top-nav-start';
+import { TopNavMiddleLayoutExample } from '../../examples/constellation/top-navigation/top-nav-middle';
+import { TopNavEndLayoutExample } from '../../examples/constellation/top-navigation/top-nav-end';
+import { NavLogoExample } from '../../examples/constellation/top-navigation/nav-logo';
+import { CustomNavLogoExample } from '../../examples/constellation/top-navigation/custom-nav-logo';
+import { CustomThemingRgbObjectExample } from '../../examples/constellation/top-navigation/custom-theming--rgb-object';
+import { CustomThemingParseHexExample } from '../../examples/constellation/top-navigation/custom-theming--parse-hex';
+import { CustomThemingParseRgbExample } from '../../examples/constellation/top-navigation/custom-theming--parse-rgb';
+import { CustomThemingParseHslExample } from '../../examples/constellation/top-navigation/custom-theming--parse-hsl';
+import { CustomThemingParseUserColorExample } from '../../examples/constellation/top-navigation/custom-theming--parse-user-color';
+import { CustomThemingLogoExample } from '../../examples/constellation/top-navigation/custom-theming--logo';
+import { CustomThemingSearchExample } from '../../examples/constellation/top-navigation/custom-theming--search';
+import { CustomThemingButtonsExample } from '../../examples/constellation/top-navigation/custom-theming--buttons';
+
+These components are designed to go in the
+[top bar layout area](/components/navigation-system/layout/examples#top-bar).
+
+## TopNavStart
+
+TopNavStart are displayed in the left of the top bar.
+
+<Example Component={TopNavStartLayoutExample} />
+
+## TopNavMiddle
+
+Use `TopNavMiddle` for actions which are common between products. These are displayed in the center
+of the top bar.
+
+This area will grow and shrink with the available space.
+
+<SectionMessage>
+
+The search bar must be the first child in `TopNavMiddle`, in line with our design specifications. If
+this is not the case, you may see unexpected layout behavior.
+
+</SectionMessage>
+
+<Example Component={TopNavMiddleLayoutExample} />
+
+## TopNavEnd
+
+Use `TopNavEnd` for actions related to the current user. These are displayed in the right of the top
+bar.
+
+<Example Component={TopNavEndLayoutExample} />
+
+## Navigation logo
+
+Use the `NavLogo` component to display a logo in the top bar. It will switch to an icon at small
+viewport widths.
+
+<Example Component={NavLogoExample} />
+
+### Custom logos
+
+Do not provide explicit width and height values when using custom logos. Otherwise they will not
+respect the container size.
+
+<Example Component={CustomNavLogoExample} />
+
+## Custom theming
+
+Top navigation supports custom theming through the `UNSAFE_theme` prop.
+
+Enable custom theming by providing both:
+
+- `backgroundColor` which determines the background color of the top bar
+- `highlightColor` which determines the background color of the create button
+
+Both of these colors should be provided as RGB objects, which can be derived using our
+[color string parsing utilities](#color-string-parsing).
+
+White or black text is automatically chosen to maximize contrast.
+
+<Example Component={CustomThemingRgbObjectExample} />
+
+### Color string parsing
+
+Custom theme colors should be provided as RGB objects, but are typically obtained from users as
+strings.
+
+We provide a number of utilities for parsing color strings into an RGB object format. These parsing
+utilities are completely optional, and you are able to create your own.
+
+#### `parseHex`
+
+Use `parseHex` to parse a CSS hex color string into an RGB object. It will return `null` on failure.
+
+If an alpha channel is present it will be ignored.
+
+<Example Component={CustomThemingParseHexExample} />
+
+#### `parseRgb`
+
+Use `parseRgb` to parse a CSS `rgb` color string into an RGB object. It will return `null` on
+failure.
+
+The fractional parts of non-integer values will be ignored, and only the legacy comma-separated
+syntax is supported.
+
+<Example Component={CustomThemingParseRgbExample} />
+
+#### `parseHsl`
+
+Use `parseHsl` to parse a CSS `hsl` color string into an RGB object. It will return `null` on
+failure.
+
+The fractional parts of non-integer values will be ignored, and only the legacy comma-separated
+syntax is supported.
+
+<Example Component={CustomThemingParseHslExample} />
+
+#### `parseUserColor`
+
+Use `parseUserColor` to parse a CSS color string without knowing the format used. It will return
+`null` on failure.
+
+Supported CSS color string formats are:
+
+- hex colors
+- `rgb()` color functions
+- `hsl()` color functions
+
+<Example Component={CustomThemingParseUserColorExample} />
+
+### Logos
+
+Logos and icons from the [Logo](/components/logo) package will automatically consume the theme when
+used with the `NavLogo` component.
+
+Custom logos uploaded by organization admins are unaffected by theming.
+
+<Example Component={CustomThemingLogoExample} />
+
+### Search
+
+Use the `useLegacySearchTheme()` hook to obtain a theme value that is compatible with existing
+Search Platform components.
+
+<SectionMessage appearance="warning" title="Use sparingly">
+
+Do not create new components that rely on the `useLegacySearchTheme()` hook. It is only intended for
+backwards compatibility, and may be deprecated if the Search Platform evolves.
+
+</SectionMessage>
+
+<Example Component={CustomThemingSearchExample} />
+
+### Buttons
+
+Do not use [Button](/components/button) inside of the top navigation.
+
+Use the action components exported from this package (such as `AppSwitcher` and `Create`) as they
+will automatically consume the custom theme.
+
+Custom actions can be created using `EndItem` for icon buttons and `TopNavButton` for buttons with
+visible text.
+
+<Example Component={CustomThemingButtonsExample} />

package/dist/cjs/components/badge-container.compiled.css

@@ -0,0 +1,7 @@
+._152tr5cr{inset-block-start:var(--ds-space-negative-050,-4px)}
+._1e02utpp{inset-inline-start:var(--ds-space-150,9pt)}
+._1e0c1txw{display:flex}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._o5721q9c{white-space:nowrap}

package/dist/cjs/components/badge-container.js

@@ -0,0 +1,37 @@
+/* badge-container.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeContainer = void 0;
+require("./badge-container.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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); }
+var styles = {
+  root: "_kqswh2mm _1e0c1txw",
+  badgeContainer: "_kqswstnw _o5721q9c _152tr5cr _1e02utpp _lcxvglyw"
+};
+/**
+ * __Badge container__
+ *
+ * Adds a badge to the top right corner of the child element.
+ * Example of usage is showing the number of notifications in the top navigation bar.
+ */
+var BadgeContainer = exports.BadgeContainer = function BadgeContainer(_ref) {
+  var children = _ref.children,
+    badgeId = _ref.id,
+    Badge = _ref.badge,
+    _ref$isListItem = _ref.isListItem,
+    isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem;
+  return /*#__PURE__*/React.createElement("div", {
+    role: isListItem ? 'listitem' : undefined,
+    className: (0, _runtime.ax)([styles.root])
+  }, children, /*#__PURE__*/React.createElement("div", {
+    id: badgeId,
+    "aria-hidden": true,
+    className: (0, _runtime.ax)([styles.badgeContainer])
+  }, /*#__PURE__*/React.createElement(Badge, null)));
+};

package/dist/cjs/components/forward-ref-with-generic.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.forwardRefWithGeneric = void 0;
+var _react = require("react");
+/**
+ * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
+ */
+var forwardRefWithGeneric = exports.forwardRefWithGeneric = _react.forwardRef;

package/dist/cjs/components/list-item.js

@@ -0,0 +1,30 @@
+/* list-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+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 _ListItem(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "listitem",
+    ref: ref,
+    className: xcss,
+    "data-testid": testId
+  }, children);
+}
+
+/**
+ * __List item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+var ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)(_ListItem);

package/dist/cjs/components/list.js

@@ -0,0 +1,40 @@
+/* list.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+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 _List(_ref, forwardedRef) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss;
+  return (
+    /*#__PURE__*/
+    /**
+     * We are using `role="list"` instead of a `ul` element to enable more flexible
+     * composition. By using ARIA roles we can validly have elements between a list
+     * and list items, as long as those in-between elements have no semantics.
+     */
+    React.createElement("div", {
+      role: "list",
+      ref: forwardedRef,
+      className: xcss,
+      "data-testid": testId
+    }, children)
+  );
+}
+
+/**
+ * __List__
+ *
+ * A an element with the role of `list` for semantically grouping list items.
+ *
+ * This is the internal primitive used by other external components in the navigation system.
+ */
+var List = exports.List = /*#__PURE__*/(0, _react.forwardRef)(_List);

package/dist/cjs/components/skip-links/skip-link.compiled.css

@@ -0,0 +1 @@
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/cjs/components/skip-links/skip-link.js

@@ -0,0 +1,121 @@
+/* skip-link.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipLink = void 0;
+require("./skip-link.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _primitives = require("@atlaskit/primitives");
+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); }
+var styles = {
+  skipLinkListItem: "_1pfhze3t"
+};
+
+/**
+ * Used for moving focus to the corresponding slot or custom target after clicking on a skip link.
+ */
+function focusElement(element) {
+  /**
+   * Elements without an explicit `tabindex` attribute are not guaranteed to be focusable:
+   * https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex
+   *
+   * Our slots are not interactive, so this is required.
+   *
+   * In the future we may want to check if there is an existing `tabindex` attribute,
+   * as custom skip linked elements might already have one.
+   */
+  element.setAttribute('tabindex', '-1');
+
+  /**
+   * Cleanup the `tabindex` attribute we set when the slot or custom target loses focus.
+   *
+   * This is preferable to always having `tabindex="-1"` because always applying the tab index can:
+   *
+   * - mess with click events
+   * - potentially cause a focus ring to be always visible
+   */
+  (0, _bindEventListener.bind)(element, {
+    type: 'blur',
+    listener: function listener() {
+      element.removeAttribute('tabindex');
+    },
+    options: {
+      // Using a one-time listener so it cleans itself up
+      once: true
+    }
+  });
+
+  /**
+   * Move focus to the slot or custom target.
+   *
+   * Calling `.focus()` will also scroll the element into view:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+   */
+  element.focus({
+    // Forces the focus ring to appear after moving focus to the slot
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
+    // @ts-expect-error - new and not in types yet
+    focusVisible: true
+  });
+}
+
+/**
+ * A link that moves current tab position to a different element
+ *
+ * This component is rendered internally and is not exported publicly.
+ */
+var SkipLink = exports.SkipLink = function SkipLink(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    onBeforeNavigate = _ref.onBeforeNavigate;
+  var href = "#".concat(id);
+  var onClick = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+
+    // Intentionally not using `document.querySelector` because many valid IDs are not valid selectors.
+    var target = document.getElementById(id);
+    if (!target) {
+      return;
+    }
+
+    /**
+     * Internal slots can attach an `onBeforeNavigate` callback.
+     *
+     * Side nav uses this to ensure it is expanded.
+     */
+    onBeforeNavigate === null || onBeforeNavigate === void 0 || onBeforeNavigate();
+    focusElement(target);
+
+    /**
+     * We should look into removing this, or only calling it in specific cases.
+     *
+     * It means if the skip link element is in the window scroll container
+     * then it might not get scrolled into view properly.
+     *
+     * This is not an issue for the default slots on desktop, but could break custom skip links or
+     * even `Aside` on mobile.
+     *
+     * Keeping existing behavior for now because resetting the window scroll is actually good for some cases.
+     * E.g. jumping to main / aside it makes sense to look at the start of the content.
+     */
+    window.scrollTo(0, 0);
+  }, [id, onBeforeNavigate]);
+  return /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _runtime.ax)([styles.skipLinkListItem])
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Anchor
+  /**
+   * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/
+   *
+   * Adding this explicitly makes the behavior consistent between browsers and lets us `event.preventDefault()`
+   * in the `onClick` handler.
+   */, {
+    tabIndex: 0,
+    href: href,
+    onClick: onClick
+  }, children));
+};

package/dist/cjs/components/skip-links/skip-links-container.compiled.css

@@ -0,0 +1,21 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
+._1e0c1txw{display:flex}
+._1pby1mrw{z-index:-1}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1x8w11lx{list-style-position:outside}
+._2lx21bp4{flex-direction:column}
+._2mzuglyw{list-style-type:none}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._kqsw1n9t{position:fixed}
+._lcxvglyw{pointer-events:none}
+._tzy4idpf{opacity:0}
+._18eu1wug:focus-within{pointer-events:auto}
+._1digjh3g:focus-within{z-index:calc(infinity)}
+._1mygkb7n:focus-within{opacity:1}