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

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

/* breadcrumbs-item.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./breadcrumbs-item.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { memo, useCallback, useState } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import Tooltip from '@atlaskit/tooltip/Tooltip';
import BreadcrumbsItemBase from './internal/breadcrumbs-item-base';
import Step from './internal/step';
import StepOld from './internal/step-old';
import { useBreadcrumbsSize } from './internal/use-breadcrumbs-size';
import useOverflowable from './internal/use-overflowable';
const itemWrapperStyles = null;
const VAR_STEP_TRUNCATION_WIDTH = '--max-width';
const ICON_WIDTH_ESTIMATE = 24;
const staticItemStyles = null;
const staticItemWithTruncationStyles = null;
const staticItemWithoutTruncationStyles = null;
const motionItemStyles = null;
const BreadcrumbsItem = /*#__PURE__*/memo(({
  analyticsContext,
  component,
  // Analytics event creation comes from context via usePlatformLeafEventHandler.
  // Strip this prop so it cannot leak onto DOM-backed controls.
  createAnalyticsEvent: _createAnalyticsEvent,
  href,
  elemBefore,
  iconAfter,
  iconBefore,
  onClick,
  onTooltipShown,
  // This is overridden by the `buttonRef` below
  ref: _ref,
  target,
  testId,
  text,
  title,
  truncationWidth,
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  'aria-current': ariaCurrent,
  _overflowRef,
  ...rest
}) => {
  const [stepElement, setStepElement] = useState(null);
  const setStepRef = useCallback(element => {
    setStepElement(element);
  }, []);
  const resolvedElemBefore = elemBefore !== null && elemBefore !== void 0 ? elemBefore : iconBefore;
  const breadcrumbsSize = useBreadcrumbsSize();
  const leadingIconWidth = resolvedElemBefore ? ICON_WIDTH_ESTIMATE + (breadcrumbsSize === 'small' ? 0 : 2) : 0;
  let iconWidthAllowance = 0;
  if (resolvedElemBefore) {
    iconWidthAllowance += ICON_WIDTH_ESTIMATE;
  }
  if (iconAfter) {
    iconWidthAllowance += ICON_WIDTH_ESTIMATE;
  }
  const [hasOverflow, shouldShowTooltip] = useOverflowable(truncationWidth, stepElement,
  // The refresh control now includes the leading icon; exclude it from the truncation check.
  fg('platform_dst_breadcrumbs-refresh') ? -leadingIconWidth : iconWidthAllowance);
  if (!component && fg('platform_dst_breadcrumbs-refresh')) {
    return /*#__PURE__*/React.createElement(BreadcrumbsItemBase, {
      ref: _overflowRef,
      analyticsContext: analyticsContext,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      elemBefore: resolvedElemBefore,
      href: href
      // TODO(CAT-2913): Remove `iconAfter` from the refresh path once Jira stops depending on deprecated
      // `BreadcrumbsItem.iconAfter` in `src/packages/polaris/component-ideas-idea-view/tests/IssueKey.test.tsx`
      // and `src/packages/polaris/component-ideas-idea-view/tests/IssueBreadcrumbs.test.tsx`.
      // Those consumers need to move the copy-link affordance out of `BreadcrumbsItem` first.
      ,
      iconAfter: iconAfter,
      iconBefore: iconBefore,
      onClick: onClick,
      onTooltipShown: onTooltipShown,
      shouldShowTooltip: shouldShowTooltip,
      stepRef: setStepRef,
      target: target,
      testId: testId,
      text: text,
      title: title,
      truncationWidth: truncationWidth,
      "aria-current": ariaCurrent
    });
  }
  const buttonOverrideStyles = {
    paddingBlock: "var(--ds-space-025, 2px)",
    fontWeight: "var(--ds-font-weight-regular, 400)"
  };

  // Note: cast to `any` is required to type verification - see https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
  const dynamicItemStyles = {
    [VAR_STEP_TRUNCATION_WIDTH]: typeof truncationWidth !== 'undefined' && `${truncationWidth}px`
  };
  const step = !component ? /*#__PURE__*/React.createElement(Step, _extends({
    analyticsContext: analyticsContext,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    "aria-current": ariaCurrent,
    elemBefore: resolvedElemBefore,
    href: href,
    iconAfter: iconAfter,
    iconBefore: iconBefore,
    onClick: onClick,
    ref: setStepRef,
    target: target,
    testId: testId,
    title: title,
    truncationWidth: truncationWidth
  }, rest), text) : /*#__PURE__*/React.createElement(StepOld, _extends({
    analyticsContext: analyticsContext,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    "aria-current": ariaCurrent,
    component: component,
    hasOverflow: hasOverflow,
    href: href,
    iconAfter: iconAfter,
    iconBefore: resolvedElemBefore,
    onClick: onClick,
    ref: setStepRef,
    target: target,
    testId: testId,
    title: title,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    style: truncationWidth ? {
      ...dynamicItemStyles,
      ...buttonOverrideStyles
    } : buttonOverrideStyles
  }, rest, {
    className: ax(["_vwz41txs", truncationWidth ? "_p12f8zc4" : "_1ul9grf3 _1o9zzg3v", fg('platform-dst-motion-uplift-list-item') && "_v564hxmd _4bfu1j28 _1hms8stv _o7kshxmd _9oik1rpy _1ggl87vo _1nrmi7uo"])
  }), text);
  return /*#__PURE__*/React.createElement("li", {
    ref: _overflowRef,
    className: ax(["_1e0c1txw _vchhusvi _p12f1osq _4t3iubh0 _4cvr1h6o _2lx2vrvc _ect4ttxp _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _5nddv77o _1j1pu2gc _1dsoftgi _toskidpf _z4qy1rpy _15621n76 _191d1h6o"])
  }, shouldShowTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
    content: text,
    position: "bottom",
    onShow: onTooltipShown
  }, step) : step);
});

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