@awsui/components-react/breadcrumb-group/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest, __spreadArrays } from "tslib";
import React from 'react';
import styles from './styles.css.js';
import clsx from 'clsx';
import Icon from '../icon';
import InternalButtonDropdown from '../button-dropdown/internal';
import { InternalButton } from '../button/internal';
import { BreadcrumbItem } from './item/item';
import { breadcrumbItemClickHandler } from './item-click-handler';
import { getBaseProps } from '../internal/base-component';
import { useMobile } from '../internal/hooks/use-mobile';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var DropdownTrigger = function (clickHandler, ref, isDisabled, isExpanded) {
    return (React.createElement(InternalButton, { disabled: isDisabled, onClick: clickHandler, ref: ref, "aria-expanded": isExpanded ? true : null, "aria-haspopup": true, variant: "breadcrumb-group" }, "..."));
};
var EllipsisDropdown = function (_a) {
    var dropdownItems = _a.dropdownItems, onDropdownItemClick = _a.onDropdownItemClick;
    return (React.createElement("li", { className: styles.ellipsis, "aria-label": "Show path" },
        React.createElement(InternalButtonDropdown, { items: dropdownItems, onItemClick: onDropdownItemClick, customTriggerBuilder: DropdownTrigger, allowHref: true }),
        React.createElement(Icon, { name: "angle-right", variant: "disabled", className: styles.icon })));
};
function BreadcrumbGroup(_a) {
    var _b = _a.items, items = _b === void 0 ? [] : _b, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onFollow = _a.onFollow, props = __rest(_a, ["items", "ariaLabel", "onClick", "onFollow"]);
    useTelemetry('BreadcrumbGroup');
    var baseProps = getBaseProps(props);
    var isMobile = useMobile();
    var breadcrumbItems = items.map(function (item, index) {
        return (React.createElement("li", { className: styles.item, key: index },
            React.createElement(BreadcrumbItem, { item: item, onClick: onClick, onFollow: onFollow, isCompressed: isMobile, isLast: index === items.length - 1 })));
    });
    if (breadcrumbItems.length >= 3) {
        var dropdownItems = items
            .slice(1, items.length - 1)
            .map(function (item, index) { return ({
            id: (index + 1).toString(),
            text: item.text,
            href: item.href || '#'
        }); });
        breadcrumbItems = __spreadArrays([
            breadcrumbItems[0],
            React.createElement(EllipsisDropdown, { key: 'ellipsis', dropdownItems: dropdownItems, onDropdownItemClick: function (e) {
                    var _a = e.detail, id = _a.id, event = _a.event;
                    var item = items[id];
                    breadcrumbItemClickHandler(item, onFollow, onClick, event);
                } })
        ], breadcrumbItems.slice(1));
    }
    return (React.createElement("nav", __assign({}, baseProps, { className: clsx(styles['breadcrumb-group'], isMobile && styles.mobile, baseProps.className), "aria-label": ariaLabel || undefined }),
        React.createElement("ol", null, breadcrumbItems)));
}
export default BreadcrumbGroup;