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

The React implementation of the Equinor Design System

import { forwardRef, useMemo } from 'react';
import styled, { css } from 'styled-components';
import { breadcrumbs } from './Breadcrumbs.tokens.js';
import { jsx } from 'react/jsx-runtime';
import { Tooltip } from '../Tooltip/Tooltip.js';
import { Typography } from '../Typography/Typography.js';

const {
  states,
  typography
} = breadcrumbs;
const StyledTypography = styled(Typography).withConfig({
  displayName: "Breadcrumb__StyledTypography",
  componentId: "sc-10nvwte-0"
})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography.color, ({
  $maxWidth
}) => css({
  maxWidth: $maxWidth
}));
const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
  children,
  maxWidth,
  forceTooltip,
  href,
  as,
  ...other
}, ref) {
  const props = {
    ...other,
    href,
    ref
  };
  const showTooltip = maxWidth !== undefined && maxWidth > 0 || forceTooltip === true;
  const isHrefDefined = href !== undefined;
  const forwardedAs = useMemo(() => as ? as : isHrefDefined ? 'a' : 'span', [as, isHrefDefined]);
  const crumb = /*#__PURE__*/jsx(StyledTypography, {
    link: isHrefDefined,
    forwardedAs: forwardedAs,
    variant: "body_short",
    $maxWidth: maxWidth,
    ...props,
    children: children
  });
  return showTooltip ? /*#__PURE__*/jsx(Tooltip, {
    title: children,
    placement: "top",
    children: /*#__PURE__*/jsx("span", {
      style: {
        display: 'inline-block'
      },
      children: crumb
    })
  }) : crumb;
});

export { Breadcrumb };