@bianic-ui/breadcrumb/dist/cjs/breadcrumb.js

A React component used for navigation, with each item acting as a link

"use strict";

exports.__esModule = true;
exports.Breadcrumb = exports.BreadcrumbItem = exports.BreadcrumbLink = exports.BreadcrumbSeparator = void 0;

var _system = require("@bianic-ui/system");

var _utils = require("@bianic-ui/utils");

var React = _interopRequireWildcard(require("react"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/**
 * React component that separates each breadcrumb link
 */
var BreadcrumbSeparator = /*#__PURE__*/(0, _system.forwardRef)(function BreadcrumbSeparator(props, ref) {
  var spacing = props.spacing,
      rest = _objectWithoutPropertiesLoose(props, ["spacing"]);

  var styles = (0, _system.useStyles)();

  var separatorStyles = _extends({
    mx: spacing
  }, styles.separator);

  return /*#__PURE__*/React.createElement(_system.bianic.span, _extends({
    ref: ref,
    role: "presentation"
  }, rest, {
    __css: separatorStyles
  }));
});
exports.BreadcrumbSeparator = BreadcrumbSeparator;

if (_utils.__DEV__) {
  BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
}

/**
 * Breadcrumb link.
 *
 * It renders a `span` when it's the current link. Otherwise,
 * it renders an anchor tag.
 */
var BreadcrumbLink = /*#__PURE__*/(0, _system.forwardRef)(function BreadcrumbLink(props, ref) {
  var isCurrentPage = props.isCurrentPage,
      as = props.as,
      className = props.className,
      rest = _objectWithoutPropertiesLoose(props, ["isCurrentPage", "as", "className"]);

  var styles = (0, _system.useStyles)();

  var sharedProps = _extends({
    ref: ref,
    as: as,
    className: (0, _utils.cx)("bianic-breadcrumb__link", className)
  }, rest);

  if (isCurrentPage) {
    return /*#__PURE__*/React.createElement(_system.bianic.span, _extends({
      "aria-current": "page"
    }, sharedProps));
  }

  return /*#__PURE__*/React.createElement(_system.bianic.a, _extends({
    __css: styles.link
  }, sharedProps));
});
exports.BreadcrumbLink = BreadcrumbLink;

if (_utils.__DEV__) {
  BreadcrumbLink.displayName = "BreadcrumbLink";
}

/**
 * BreadcrumbItem is used to group a breadcrumb link.
 * It renders a `li` element to denote it belongs to an order list of links.
 *
 * @see Docs https://bianic-ui.com/components/breadcrumbs
 */
var BreadcrumbItem = /*#__PURE__*/(0, _system.forwardRef)(function BreadcrumbItem(props, ref) {
  var isCurrentPage = props.isCurrentPage,
      separator = props.separator,
      isLastChild = props.isLastChild,
      spacing = props.spacing,
      children = props.children,
      className = props.className,
      rest = _objectWithoutPropertiesLoose(props, ["isCurrentPage", "separator", "isLastChild", "spacing", "children", "className"]);

  var validChildren = (0, _utils.getValidChildren)(children);
  var clones = validChildren.map(function (child) {
    if (child.type === BreadcrumbLink) {
      return /*#__PURE__*/React.cloneElement(child, {
        isCurrentPage: isCurrentPage
      });
    }

    if (child.type === BreadcrumbSeparator) {
      return /*#__PURE__*/React.cloneElement(child, {
        spacing: spacing,
        children: child.props.children || separator
      });
    }

    return child;
  });

  var _className = (0, _utils.cx)("bianic-breadcrumb__list-item", className);

  return /*#__PURE__*/React.createElement(_system.bianic.li, _extends({
    ref: ref,
    className: _className
  }, rest, {
    __css: {
      display: "inline-flex",
      alignItems: "center"
    }
  }), clones, !isLastChild && /*#__PURE__*/React.createElement(BreadcrumbSeparator, {
    spacing: spacing,
    children: separator
  }));
});
exports.BreadcrumbItem = BreadcrumbItem;

if (_utils.__DEV__) {
  BreadcrumbItem.displayName = "BreadcrumbItem";
}

/**
 * Breadcrumb is used to render a breadcrumb navigation landmark.
 * It renders a `nav` element with `aria-label` set to `Breadcrumb`
 *
 * @see Docs https://bianic-ui.com/components/breadcrumbs
 */
var Breadcrumb = /*#__PURE__*/(0, _system.forwardRef)(function Breadcrumb(props, ref) {
  var styles = (0, _system.useMultiStyleConfig)("Breadcrumb", props);
  var ownProps = (0, _system.omitThemingProps)(props);

  var children = ownProps.children,
      _ownProps$spacing = ownProps.spacing,
      spacing = _ownProps$spacing === void 0 ? "0.5rem" : _ownProps$spacing,
      _ownProps$separator = ownProps.separator,
      separator = _ownProps$separator === void 0 ? "/" : _ownProps$separator,
      className = ownProps.className,
      rest = _objectWithoutPropertiesLoose(ownProps, ["children", "spacing", "separator", "className"]);

  var validChildren = (0, _utils.getValidChildren)(children);
  var count = validChildren.length;
  var clones = validChildren.map(function (child, index) {
    return /*#__PURE__*/React.cloneElement(child, {
      separator: separator,
      spacing: spacing,
      isLastChild: count === index + 1
    });
  });

  var _className = (0, _utils.cx)("bianic-breadcrumb", className);

  return /*#__PURE__*/React.createElement(_system.bianic.nav, _extends({
    ref: ref,
    "aria-label": "breadcrumb",
    className: _className
  }, rest), /*#__PURE__*/React.createElement(_system.StylesProvider, {
    value: styles
  }, /*#__PURE__*/React.createElement(_system.bianic.ol, {
    className: "bianic-breadcrumb__list"
  }, clones)));
});
exports.Breadcrumb = Breadcrumb;

if (_utils.__DEV__) {
  Breadcrumb.displayName = "Breadcrumb";
}
//# sourceMappingURL=breadcrumb.js.map