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

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

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; }

import { bianic, forwardRef, omitThemingProps, StylesProvider, useMultiStyleConfig, useStyles } from "@bianic-ui/system";
import { cx, getValidChildren, __DEV__ } from "@bianic-ui/utils";
import * as React from "react";

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

  var styles = useStyles();

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

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

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

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

  var styles = useStyles();

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

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

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

if (__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
 */
export var BreadcrumbItem = /*#__PURE__*/forwardRef(function BreadcrumbItem(props, ref) {
  var {
    isCurrentPage,
    separator,
    isLastChild,
    spacing,
    children,
    className
  } = props,
      rest = _objectWithoutPropertiesLoose(props, ["isCurrentPage", "separator", "isLastChild", "spacing", "children", "className"]);

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

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

    return child;
  });

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

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

if (__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
 */
export var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(props, ref) {
  var styles = useMultiStyleConfig("Breadcrumb", props);
  var ownProps = omitThemingProps(props);

  var {
    children,
    spacing = "0.5rem",
    separator = "/",
    className
  } = ownProps,
      rest = _objectWithoutPropertiesLoose(ownProps, ["children", "spacing", "separator", "className"]);

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

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

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

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