@twilio-paste/breadcrumb/dist/index.debug.js

A Breadcrumb is text that shows navigation hierarchy and lets users navigate a nested path of pages.

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.tsx
var src_exports = {};
__export(src_exports, {
  Breadcrumb: () => Breadcrumb,
  BreadcrumbItem: () => BreadcrumbItem
});
module.exports = __toCommonJS(src_exports);

// src/Breadcrumb.tsx
var import_anchor = require("@twilio-paste/anchor");
var import_box = require("@twilio-paste/box");
var import_text = require("@twilio-paste/text");
var import_uid_library = require("@twilio-paste/uid-library");
var React = __toESM(require("react"));
var BreadcrumbSeparator = ({
  element
}) => /* @__PURE__ */ React.createElement(
  import_text.Text,
  {
    as: "span",
    color: "colorTextWeak",
    fontSize: "fontSize20",
    lineHeight: "lineHeight20",
    paddingLeft: "space20",
    paddingRight: "space20",
    role: "presentation",
    element: `${element}_SEPARATOR`
  },
  "/"
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
var DEFAULT_ELEMENT_NAME = "BREADCRUMB";
var BreadcrumbItem = React.forwardRef(
  ({ children, element, parentElement, href, last, ...props }, ref) => {
    const elementName = element || parentElement || DEFAULT_ELEMENT_NAME;
    return /* @__PURE__ */ React.createElement(
      import_box.Box,
      {
        alignItems: "center",
        as: "li",
        display: "inline-flex",
        element: `${elementName}_ITEM`,
        fontSize: "fontSize20",
        lineHeight: "lineHeight20"
      },
      href ? /* @__PURE__ */ React.createElement(
        import_anchor.Anchor,
        {
          ...props,
          element: `${elementName}_ANCHOR`,
          href,
          ref
        },
        children
      ) : /* @__PURE__ */ React.createElement(
        import_text.Text,
        {
          ...(0, import_text.safelySpreadTextProps)(props),
          "aria-current": "page",
          as: "span",
          color: "colorTextWeak",
          element: `${elementName}_TEXT`,
          fontSize: "fontSize20",
          lineHeight: "lineHeight20",
          ref
        },
        children
      ),
      !last && /* @__PURE__ */ React.createElement(BreadcrumbSeparator, { element: elementName })
    );
  }
);
BreadcrumbItem.displayName = "BreadcrumbItem";
var Breadcrumb = React.forwardRef(
  ({ children, element = DEFAULT_ELEMENT_NAME, ...props }, ref) => {
    const [childrenCount, validChildren] = React.useMemo(
      () => [
        React.Children.count(children),
        React.Children.toArray(children).filter(
          (child) => React.isValidElement(child) || typeof child === "string"
        )
      ],
      [children]
    );
    const keySeed = (0, import_uid_library.useUIDSeed)();
    return /* @__PURE__ */ React.createElement(import_box.Box, { "aria-label": "breadcrumb", ...(0, import_box.safelySpreadBoxProps)(props), as: "nav", element, ref }, /* @__PURE__ */ React.createElement(import_box.Box, { alignItems: "center", as: "ol", display: "inline-flex", listStyleType: "none", margin: "space0", padding: "space0" }, validChildren.map((child, index) => {
      return React.cloneElement(child, {
        last: childrenCount === index + 1,
        key: keySeed(`breadcrumb-${index}`),
        parentElement: element
      });
    })));
  }
);
Breadcrumb.displayName = "Breadcrumb";