@aegov/design-system-react/dist/components/Breadcrumbs/Breadcrumbs.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _zod = require("zod");
var _react2 = require("@phosphor-icons/react");
var _reactSlot = require("@radix-ui/react-slot");
var _tailwindMerge = require("tailwind-merge");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const breadcrumbItemSchema = _zod.z.union([_zod.z.object({
  label: _zod.z.string(),
  href: _zod.z.string().optional(),
  icon: _zod.z.any().optional()
}), _zod.z.any()]);
const breadcrumbsSchema = _zod.z.object({
  items: _zod.z.array(breadcrumbItemSchema),
  separator: _zod.z.enum(['slash', 'caret']).optional(),
  showHomeIcon: _zod.z.boolean().optional(),
  className: _zod.z.string().optional(),
  linkComponent: _zod.z.any().optional()
});
const styles = {
  link: 'text-sm text-gray-500 hover:text-primary-600 max-w-[140px] truncate font-medium py-2 hover:underline decoration-2 underline-offset-2 flex items-center',
  current: 'text-sm font-semibold text-gray-800 max-w-[160px] truncate'
};
const BreadcrumbLink = /*#__PURE__*/_react.default.forwardRef(({
  linkComponent: Link,
  className,
  ...props
}, ref) => {
  const classes = (0, _tailwindMerge.twMerge)(styles.link, className);
  return Link ? /*#__PURE__*/_react.default.createElement(Link, _extends({
    ref: ref,
    className: classes
  }, props)) : /*#__PURE__*/_react.default.createElement("a", _extends({
    ref: ref,
    className: classes
  }, props));
});
BreadcrumbLink.displayName = 'BreadcrumbLink';
const BreadcrumbItem = ({
  item,
  index,
  isLast,
  isFirst,
  showHomeIcon,
  renderSeparator,
  linkComponent
}) => {
  const icon = isFirst && showHomeIcon ? /*#__PURE__*/_react.default.createElement(_react2.House, {
    className: "size-4",
    "aria-hidden": "true"
  }) : item.icon;
  const renderIcon = icon && /*#__PURE__*/_react.default.createElement("span", {
    className: "mr-1 rtl:ml-1 rtl:mr-0"
  }, icon);

  // If item is a React element
  if (/*#__PURE__*/_react.default.isValidElement(item)) {
    return /*#__PURE__*/_react.default.createElement(_reactSlot.Slot, {
      className: (0, _tailwindMerge.twMerge)(isLast ? styles.current : styles.link)
    }, item);
  }

  // For object items
  return isLast ? /*#__PURE__*/_react.default.createElement("span", {
    "aria-current": "page",
    className: styles.current,
    itemProp: "name"
  }, renderIcon, item.label) : /*#__PURE__*/_react.default.createElement(BreadcrumbLink, {
    linkComponent: linkComponent,
    href: item.href || '#',
    itemProp: "item"
  }, renderIcon, /*#__PURE__*/_react.default.createElement("span", {
    itemProp: "name",
    className: "truncate"
  }, item.label));
};
const Breadcrumbs = ({
  items,
  separator = 'slash',
  showHomeIcon = false,
  className = '',
  linkComponent
}) => {
  try {
    breadcrumbsSchema.parse({
      items,
      separator,
      showHomeIcon,
      className,
      linkComponent
    });
  } catch (error) {
    console.error('Breadcrumbs validation error:', error);
    return null;
  }
  const renderSeparator = () => {
    return separator === 'caret' ? /*#__PURE__*/_react.default.createElement(_react2.CaretRight, {
      className: "w-4 h-4 text-gray-400 mx-2 rtl:scale-x-[-1]",
      "aria-hidden": "true"
    }) : /*#__PURE__*/_react.default.createElement("span", {
      className: "mx-2 text-gray-400",
      "aria-hidden": "true"
    }, "/");
  };
  return /*#__PURE__*/_react.default.createElement("nav", {
    "aria-label": "Breadcrumb",
    className: className,
    itemScope: true,
    itemType: "https://schema.org/BreadcrumbList"
  }, /*#__PURE__*/_react.default.createElement("ol", {
    className: "flex flex-wrap items-center"
  }, items.map((item, index) => {
    const isLast = index === items.length - 1;
    const isFirst = index === 0;
    return /*#__PURE__*/_react.default.createElement("li", {
      key: index,
      className: "flex items-center",
      itemProp: "itemListElement",
      itemScope: true,
      itemType: "https://schema.org/ListItem"
    }, /*#__PURE__*/_react.default.createElement(BreadcrumbItem, {
      item: item,
      index: index,
      isLast: isLast,
      isFirst: isFirst,
      showHomeIcon: showHomeIcon,
      renderSeparator: renderSeparator,
      linkComponent: linkComponent
    }), !isLast && renderSeparator(), /*#__PURE__*/_react.default.createElement("meta", {
      itemProp: "position",
      content: index + 1
    }));
  })));
};
var _default = exports.default = Breadcrumbs;