@atlaskit/breadcrumbs/dist/es2019/components/breadcrumbs-root.js

Breadcrumbs are a navigation system used to show a user's location in a site or app.

/* breadcrumbs-root.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./breadcrumbs-root.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { BreadcrumbsSizeProvider } from './internal/breadcrumbs-size-provider';
const navStyles = null;
const navFocusStyles = null;
const listStyles = null;

// Keep the focus gutter inside the list so the nav ref retains its measured width.
const listFocusStyles = null;
/**
 * __BreadcrumbsRoot__
 *
 * A primitive breadcrumbs container that renders a `<nav>` + `<ol>` with correct
 * ARIA semantics and design tokens, without any built-in overflow/collapse behaviour.
 *
 * Use this together with `BreadcrumbsItemPrimitive` and `useOverflowCollapse` to
 * compose custom breadcrumb experiences.
 *
 * @example
 * ```tsx
 * const { collapsedIndices, registerItem, registerContainer } = useOverflowCollapse(items.length);
 *
 * <BreadcrumbsRoot ref={registerContainer} label="Breadcrumbs">
 *   {items.map((item, i) =>
 *     collapsedIndices.has(i) ? null : (
 *       <BreadcrumbsItemPrimitive
 *         key={item.href}
 *         ref={registerItem(i)}
 *         href={item.href}
 *         text={item.text}
 *         aria-current={i === items.length - 1 ? 'page' : undefined}
 *       />
 *     )
 *   )}
 * </BreadcrumbsRoot>
 * ```
 */
const BreadcrumbsRoot = /*#__PURE__*/forwardRef(({
  children,
  label = 'Breadcrumbs',
  size = 'medium',
  style,
  testId
}, ref) => /*#__PURE__*/React.createElement(BreadcrumbsSizeProvider, {
  value: size
}, /*#__PURE__*/React.createElement("nav", {
  "aria-label": label,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
  style: style,
  tabIndex: -1,
  ref: ref,
  className: ax(["_1reo15vq _18m915vq _1e0c1txw _1ul9idpf _1o9zkb7n", fg('platform_dst_breadcrumbs-refresh') && "_1reoewfl _18m9ewfl"])
}, /*#__PURE__*/React.createElement("ol", {
  "data-testid": testId,
  className: ax(["_zulpze3t _1reo15vq _18m915vq _1e0c1txw _1ul9idpf _4cvr1h6o _1o9zkb7n _1n261q9c _2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", fg('platform_dst_breadcrumbs-refresh') && "_6rthr5cr _1pfhr5cr _12l2r5cr _ahbqr5cr _85i51b66 _1q511b66 _y4ti1b66 _bozg1b66"])
}, children))));

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default BreadcrumbsRoot;