@pantheon-systems/design-toolkit-react/dist/Breadcrumbs/Breadcrumbs.js

Pantheon's React Design Toolkit

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import PropTypes from 'prop-types';
import { useContext } from 'react';
import { NavLink } from 'react-router-dom';
import BreadcrumbsContext from './BreadcrumbsContext.js';
import BreadcrumbsDropdown from './BreadcrumbsDropdown.js';
import { jsx } from 'react/jsx-runtime';

var _excluded = ["ariaLabel", "crumbsDropdownAriaLabel"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var bySlicedUriLength = function bySlicedUriLength(a, b) {
  return a.uri.split('/').length - b.uri.split('/').length;
};

/**
 *
 * @param {import("./BreadcrumbsContext").Crumb} crumb
 * @param {number} index
 * @param {React.ReactNode<'li'>[]} arr
 */
var toListItem = function toListItem(crumb) {
  var activeClasses = 'font-semibold text-gray-4 pointer-events-none';
  return /*#__PURE__*/jsx("li", {
    className: "breadcrumb-item inline-block after:mx-2 after:my-0",
    children: /*#__PURE__*/jsx(NavLink, {
      className: function className(_ref) {
        var isActive = _ref.isActive;
        return isActive ? activeClasses : null;
      },
      end: true,
      to: crumb.uri,
      children: crumb.label
    })
  }, "breadcrumb-".concat(crumb.label, "-").concat(crumb.uri));
};
var BREADCRUMB_DROPDOWN_THRESHHOLD = 4;
var STARTING_CAP_DROPDOWN_OFFSET = 1;

/**
 *
 * @typedef {{
 *  ariaLabel: string,
 *  crumbsDropdownAriaLabel: string,
 * }} Props
 *
 * @type {React.FC<Props>} Breadcrumbs
 */
var Breadcrumbs = function Breadcrumbs(_ref2) {
  var ariaLabel = _ref2.ariaLabel,
    crumbsDropdownAriaLabel = _ref2.crumbsDropdownAriaLabel,
    rest = _objectWithoutProperties(_ref2, _excluded);
  var _useContext = useContext(BreadcrumbsContext),
    crumbs = _useContext.crumbs,
    deferredCrumbIds = _useContext.deferredCrumbIds;
  var sortedCrumbs = _toConsumableArray(crumbs).sort(bySlicedUriLength);
  if (sortedCrumbs.length <= BREADCRUMB_DROPDOWN_THRESHHOLD) {
    var _navCrumbs = sortedCrumbs.map(toListItem);
    return /*#__PURE__*/jsx("nav", {
      "aria-label": ariaLabel,
      "aria-live": "polite",
      children: /*#__PURE__*/jsx("ol", _objectSpread(_objectSpread({
        className: "pt-4 pb-6 pl-0 m-0 text-sm ".concat(deferredCrumbIds.length > 0 ? 'invisible' : '')
      }, rest), {}, {
        children: _navCrumbs
      }))
    });
  }
  var dropdownCrumbs = sortedCrumbs.splice(STARTING_CAP_DROPDOWN_OFFSET, sortedCrumbs.length - 3);
  var navCrumbs = sortedCrumbs.map(toListItem);
  navCrumbs.splice(STARTING_CAP_DROPDOWN_OFFSET, 0, /*#__PURE__*/jsx(BreadcrumbsDropdown, {
    ariaLabel: crumbsDropdownAriaLabel,
    crumbs: dropdownCrumbs
  }, "breadcrumb-dropdown"));
  return /*#__PURE__*/jsx("nav", {
    "aria-label": ariaLabel,
    "aria-live": "polite",
    children: /*#__PURE__*/jsx("ol", _objectSpread(_objectSpread({
      className: "pt-4 pb-6 pl-0 m-0 text-sm ".concat(deferredCrumbIds.length > 0 ? 'invisible' : '')
    }, rest), {}, {
      children: navCrumbs
    }))
  });
};
Breadcrumbs.defaultProps = {
  crumbsDropdownAriaLabel: 'Breadcrumbs Dropdown Button'
};
Breadcrumbs.propTypes = {
  ariaLabel: PropTypes.string.isRequired,
  crumbsDropdownAriaLabel: PropTypes.string
};
var Breadcrumbs$1 = Breadcrumbs;

export { Breadcrumbs$1 as default };
//# sourceMappingURL=Breadcrumbs.js.map