@itwin/itwinui-react/DEV-cjs/core/Breadcrumbs/Breadcrumbs.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'Breadcrumbs', {
  enumerable: true,
  get: function () {
    return Breadcrumbs;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _index = require('../../utils/index.js');
const _Button = require('../Buttons/Button.js');
const _Anchor = require('../Typography/Anchor.js');
const BreadcrumbsComponent = _react.forwardRef((props, forwardedRef) => {
  let {
    children: childrenProp,
    currentIndex = _react.Children.count(childrenProp) - 1,
    separator,
    overflowButton,
    className,
    ...rest
  } = props;
  let items = _react.useMemo(
    () => _react.Children.toArray(childrenProp),
    [childrenProp],
  );
  return _react.createElement(
    _index.Box,
    {
      as: 'nav',
      className: (0, _classnames.default)('iui-breadcrumbs', className),
      ref: forwardedRef,
      'aria-label': 'Breadcrumb',
      ...rest,
    },
    _react.createElement(
      _index.OverflowContainer,
      {
        as: 'ol',
        itemsCount: items.length,
        className: 'iui-breadcrumbs-list',
      },
      _react.createElement(
        BreadcrumbContent,
        {
          currentIndex: currentIndex,
          overflowButton: overflowButton,
          separator: separator,
        },
        items,
      ),
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  BreadcrumbsComponent.displayName = 'Breadcrumbs';
const BreadcrumbContent = (props) => {
  let { children: items, currentIndex, overflowButton, separator } = props;
  let { visibleCount } = _index.OverflowContainer.useContext();
  return _react.createElement(
    _react.Fragment,
    null,
    visibleCount > 1 &&
      _react.createElement(
        _react.Fragment,
        null,
        _react.createElement(ListItem, {
          item: items[0],
          isActive: 0 === currentIndex,
        }),
        _react.createElement(Separator, {
          separator: separator,
        }),
      ),
    items.length - visibleCount > 0 &&
      _react.createElement(
        _react.Fragment,
        null,
        _react.createElement(
          _index.Box,
          {
            as: 'li',
            className: 'iui-breadcrumbs-item',
          },
          overflowButton
            ? overflowButton(visibleCount)
            : _react.createElement(
                _index.Box,
                {
                  as: 'span',
                  className: 'iui-breadcrumbs-content',
                },
                '…',
              ),
        ),
        _react.createElement(Separator, {
          separator: separator,
        }),
      ),
    items
      .slice(
        visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
      )
      .map((_, _index) => {
        let index =
          visibleCount > 1
            ? 1 + (items.length - visibleCount) + _index
            : items.length - 1;
        return _react.createElement(
          _react.Fragment,
          {
            key: index,
          },
          _react.createElement(ListItem, {
            item: items[index],
            isActive: currentIndex === index,
          }),
          index < items.length - 1 &&
            _react.createElement(Separator, {
              separator: separator,
            }),
        );
      }),
  );
};
const ListItem = ({ item, isActive }) => {
  let children = item;
  let logWarning = (0, _index.useWarningLogger)();
  if (
    children?.type === 'span' ||
    children?.type === 'a' ||
    children?.type === _Button.Button
  ) {
    if ('development' === process.env.NODE_ENV)
      logWarning(
        'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
      );
    children = _react.createElement(BreadcrumbsItem, children.props);
  }
  let getProps = _react.useCallback(
    (children) => {
      let defaultAriaCurrent = isActive ? 'location' : void 0;
      return {
        'aria-current': children.props['aria-current'] ?? defaultAriaCurrent,
      };
    },
    [isActive],
  );
  return _react.createElement(
    _index.Box,
    {
      as: 'li',
      className: 'iui-breadcrumbs-item',
    },
    children ? (0, _index.cloneElementWithRef)(children, getProps) : null,
  );
};
const Separator = ({ separator }) =>
  _react.createElement(
    _index.Box,
    {
      as: 'li',
      className: 'iui-breadcrumbs-separator',
      'aria-hidden': true,
    },
    separator ?? _react.createElement(_index.SvgChevronRight, null),
  );
const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
  let { as: asProp, ...rest } = props;
  let commonProps = {
    ...rest,
    className: (0, _classnames.default)(
      'iui-breadcrumbs-content',
      props.className,
    ),
    ref: forwardedRef,
  };
  if (
    'span' === String(asProp) ||
    (null == props.href && null == props.onClick && null == asProp)
  )
    return _react.createElement(_index.Box, {
      as: 'span',
      ...commonProps,
    });
  return _react.createElement(_Button.Button, {
    as:
      'a' === asProp || (null == asProp && props.href)
        ? _Anchor.Anchor
        : asProp,
    styleType: 'borderless',
    ...commonProps,
  });
});
if ('development' === process.env.NODE_ENV)
  BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
  Item: BreadcrumbsItem,
});