@ozen-ui/kit/__inner__/esm/components/Breadcrumbs/Breadcrumbs.js

React component library

import { __assign, __rest } from "tslib";
import './Breadcrumbs.css';
import React, { Fragment, isValidElement, Children, forwardRef } from 'react';
import { ChevronRightSmallIcon } from '@ozen-ui/icons';
import { isFragment } from 'react-is';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { BreadcrumbsContext } from './BreadcrumbsContext';
import { BREADCRUMBS_DEFAULT_SIZE } from './constants';
export var cnBreadcrumbs = cn('Breadcrumbs');
export var Breadcrumbs = forwardRef(function (inProps, ref) {
    var props = useThemeProps({ props: inProps, name: 'Breadcrumbs' });
    var _a = props.size, size = _a === void 0 ? BREADCRUMBS_DEFAULT_SIZE : _a, _b = props.separator, Separator = _b === void 0 ? ChevronRightSmallIcon : _b, children = props.children, className = props.className, other = __rest(props, ["size", "separator", "children", "className"]);
    var resolvedChildren = isFragment(children)
        ? children.props.children
        : children;
    return (
    // TODO: Подумать о возможности выбора рутового компонента
    React.createElement(BreadcrumbsContext.Provider, { value: { size: size } },
        React.createElement("nav", __assign({ className: cnBreadcrumbs({
                size: size,
            }, [className]) }, other, { ref: ref }),
            React.createElement("ol", { className: cnBreadcrumbs('List') }, Children.toArray(resolvedChildren).map(function (child, index, arr) {
                if (!isValidElement(child))
                    return null;
                var isLast = index === arr.length - 1;
                return (React.createElement(Fragment, { key: child.key || index },
                    React.createElement("li", { className: cnBreadcrumbs('Item') }, child),
                    !!Separator && !isLast && (React.createElement("li", { className: cnBreadcrumbs('Separator'), "aria-hidden": true },
                        React.createElement(Separator, { color: "var(--color-content-disabled)", size: "s" })))));
            })))));
});
Breadcrumbs.displayName = 'Breadcrumbs';