@engie-group/fluid-design-system-react/lib/components/breadcrumb/NJBreadcrumb.js

Fluid Design System React

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import React__default, { useState, Children, useRef, useLayoutEffect } from 'react';

const MIN_ITEMS_BEFORE_MINIFICATION = 3;
const NJBreadcrumb = React__default.forwardRef(({ children, isMinified, maximumItemsBeforeMinification = 4, className, ariaLabel = 'Breadcrumbs', showMoreLabel = 'Show hidden items', ...props }, ref) => {
    const [minified, setIsMinified] = useState(isMinified);
    const childrenToArray = Children.toArray(children);
    const childrenLength = childrenToArray?.length;
    const isBreadcrumbMinified = minified ??
        childrenLength > Math.max(maximumItemsBeforeMinification, MIN_ITEMS_BEFORE_MINIFICATION);
    const [initialMinified] = useState(isBreadcrumbMinified);
    const breadcrumbListRef = useRef(null);
    const seeAllChildren = () => {
        setIsMinified(false);
    };
    useLayoutEffect(() => {
        if (!isBreadcrumbMinified && initialMinified) {
            // Move the focus to the breadcrumb item that appears instead of the "See more" button
            breadcrumbListRef.current?.childNodes[1]?.querySelector('a')?.focus();
        }
    }, [minified, initialMinified]);
    let contentToDisplay;
    if (!isBreadcrumbMinified || childrenLength <= MIN_ITEMS_BEFORE_MINIFICATION) {
        contentToDisplay = children;
    }
    else {
        const leftContent = [...childrenToArray].splice(0, 1);
        const rightContent = childrenToArray[childrenLength - 1];
        contentToDisplay = (jsxs(Fragment, { children: [leftContent, jsx("li", { className: "nj-breadcrumb__see-more", children: jsx("button", { onClick: seeAllChildren, children: jsx("span", { className: "nj-sr-only", children: showMoreLabel }) }) }), rightContent] }));
    }
    return (jsx("nav", { ...props, ref: ref, role: "navigation", "aria-label": ariaLabel, className: className, children: jsx("ol", { className: "nj-breadcrumb", ref: breadcrumbListRef, children: contentToDisplay }) }));
});
NJBreadcrumb.displayName = 'NJBreadcrumb';

export { NJBreadcrumb };