@equinor/eds-core-react/dist/esm/components/Breadcrumbs/Breadcrumbs.js

The React implementation of the Equinor Design System

import { forwardRef, useState, Children, Fragment } from 'react';
import styled from 'styled-components';
import { breadcrumbs } from './Breadcrumbs.tokens.js';
import { spacingsTemplate } from '@equinor/eds-utils';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Typography } from '../Typography/Typography.js';

const {
  spacings,
  typography,
  states
} = breadcrumbs;
const OrderedList = styled.ol.withConfig({
  displayName: "Breadcrumbs__OrderedList",
  componentId: "sc-12awlbz-0"
})(["list-style:none;display:flex;gap:0.45em 0;align-items:center;padding:0;margin:0;flex-wrap:", ";"], ({
  $wrap
}) => $wrap ? 'wrap' : 'nowrap');
const ListItem = styled.li.withConfig({
  displayName: "Breadcrumbs__ListItem",
  componentId: "sc-12awlbz-1"
})(["display:block;min-width:30px;"]);
const Separator = styled(Typography).withConfig({
  displayName: "Breadcrumbs__Separator",
  componentId: "sc-12awlbz-2"
})(["color:", ";", " display:block;line-height:1;display:flex;& > svg{margin-inline:-9px;}"], typography.color, spacingsTemplate(spacings));
const Collapsed = styled(Typography).withConfig({
  displayName: "Breadcrumbs__Collapsed",
  componentId: "sc-12awlbz-3"
})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states.hover.typography.color, typography.color);
const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs({
  children,
  collapse,
  wrap = true,
  separator = '/',
  ...rest
}, ref) {
  const props = {
    ...rest,
    ref
  };
  const [expanded, setExpanded] = useState(false);
  const collapsedCrumbs = allCrumbs => {
    const handleExpandClick = e => {
      setExpanded(true);
      const {
        key
      } = e;
      if (key === 'Enter') {
        setExpanded(true);
      }
    };
    if (allCrumbs.length < 3) {
      return allCrumbs;
    }
    return [allCrumbs[0], /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx(ListItem, {
        style: {
          minWidth: 'unset'
        },
        children: /*#__PURE__*/jsx(Collapsed, {
          link: true,
          role: "button",
          variant: "body_short",
          onClick: handleExpandClick,
          onKeyDown: handleExpandClick,
          tabIndex: 0,
          children: "\u2026"
        })
      }), /*#__PURE__*/jsx("li", {
        "aria-hidden": true,
        children: /*#__PURE__*/jsx(Separator, {
          variant: "body_short",
          children: separator
        })
      })]
    }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
  };
  const allCrumbs = Children.toArray(children).map((child, index) =>
  /*#__PURE__*/
  // eslint-disable-next-line react/no-array-index-key
  jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(ListItem, {
      children: child
    }), index !== Children.toArray(children).length - 1 && /*#__PURE__*/jsx("li", {
      "aria-hidden": true,
      children: /*#__PURE__*/jsx(Separator, {
        variant: "body_short",
        children: separator
      })
    })]
  }, `breadcrumb-${index}`));
  return /*#__PURE__*/jsx("nav", {
    ...props,
    "aria-label": "breadcrumbs",
    children: /*#__PURE__*/jsx(OrderedList, {
      $wrap: wrap,
      children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
    })
  });
});

// Breadcrumbs.displayName = 'eds-breadcrumbs'

export { Breadcrumbs };