@react-spectrum/s2
Version:
Spectrum 2 UI components in React
684 lines (666 loc) • 27.4 kB
JavaScript
import "./Breadcrumbs.css";
import {ActionButton as $da878a05ab4a403e$export$cfc7921d29ef7b80} from "./ActionButton.mjs";
import $4b69f02ec06b9226$export$2e2bcd8739ae039 from "./Chevron.mjs";
import $8b0a29919990739e$export$2e2bcd8739ae039 from "../icons/FolderBreadcrumb.mjs";
import $a1dfd$intlStringsmjs from "./intlStrings.mjs";
import {Menu as $13afb0ea5f0ed767$export$d9b273488cd8ce6f, MenuItem as $13afb0ea5f0ed767$export$2ce376c2cc3355c8, MenuTrigger as $13afb0ea5f0ed767$export$27d2ad3c5815583e} from "./Menu.mjs";
import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6} from "./Content.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $a1dfd$jsx, jsxs as $a1dfd$jsxs, Fragment as $a1dfd$Fragment} from "react/jsx-runtime";
import {createContext as $a1dfd$createContext, forwardRef as $a1dfd$forwardRef, useContext as $a1dfd$useContext, createElement as $a1dfd$createElement, useState as $a1dfd$useState, useMemo as $a1dfd$useMemo, useRef as $a1dfd$useRef, useCallback as $a1dfd$useCallback, useEffect as $a1dfd$useEffect, Fragment as $a1dfd$Fragment1} from "react";
import {Provider as $a1dfd$Provider, Breadcrumbs as $a1dfd$Breadcrumbs, CollectionRendererContext as $a1dfd$CollectionRendererContext, DefaultCollectionRenderer as $a1dfd$DefaultCollectionRenderer, Breadcrumb as $a1dfd$Breadcrumb, HeadingContext as $a1dfd$HeadingContext, Link as $a1dfd$Link} from "react-aria-components";
import {useLocale as $a1dfd$useLocale} from "react-aria";
import {inertValue as $a1dfd$inertValue, useLayoutEffect as $a1dfd$useLayoutEffect} from "@react-aria/utils";
import {useDOMRef as $a1dfd$useDOMRef, useResizeObserver as $a1dfd$useResizeObserver} from "@react-spectrum/utils";
import {useLocalizedStringFormatter as $a1dfd$useLocalizedStringFormatter} from "@react-aria/i18n";
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $f329dd4f2aa58cd0$var$MIN_VISIBLE_ITEMS = 1;
const $f329dd4f2aa58cd0$var$MAX_VISIBLE_ITEMS = 4;
const $f329dd4f2aa58cd0$export$65596d3621b0a4a0 = /*#__PURE__*/ (0, $a1dfd$createContext)(null);
const $f329dd4f2aa58cd0$var$wrapper = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let flexGrow = false;
let flexShrink = false;
let flexBasis = false;
let marginTop = false;
let marginBottom = false;
let marginInlineStart = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
if (p[1] === "_u") flexGrow = true;
if (p[1] === "_v") flexShrink = true;
if (p[1] === "_s") flexBasis = true;
if (p[1] === "J") marginTop = true;
if (p[1] === "G") marginBottom = true;
if (p[1] === "I") marginInlineStart = true;
rules += p[0];
}
if (!position) rules += ' _Pc91';
rules += ' sd91';
rules += ' _Cg91';
rules += ' _Gc91';
rules += ' _wa91';
if (!flexGrow) rules += ' _ub91';
if (!flexShrink) rules += ' _va91';
if (!flexBasis) rules += ' _sb91';
if (props.size === "L") rules += ' Urun3rd91';
else if (props.size === "M") rules += ' UssxDec91';
if (props.size === "L") rules += ' qrun3rd91';
else if (props.size === "M") rules += ' qssxDec91';
rules += ' Td91';
rules += ' Qd91';
rules += ' Sd91';
rules += ' Rd91';
rules += ' Yd91';
rules += ' Xb91';
rules += ' _2b91';
if (!marginTop) rules += ' Jy91';
if (!marginBottom) rules += ' Gy91';
if (props.size === "L") {
if (!marginInlineStart) rules += ' Irun3rd91';
} else if (props.size === "M") {
if (!marginInlineStart) rules += ' IssxDec91';
}
return rules;
};
const $f329dd4f2aa58cd0$var$InternalBreadcrumbsContext = /*#__PURE__*/ (0, $a1dfd$createContext)({});
const $f329dd4f2aa58cd0$export$2dc68d50d56fbbd = /*#__PURE__*/ (0, $a1dfd$forwardRef)(function Breadcrumbs(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $f329dd4f2aa58cd0$export$65596d3621b0a4a0);
let domRef = (0, $a1dfd$useDOMRef)(ref);
let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, size: size = 'M', children: children, isDisabled: isDisabled, ...otherProps } = props;
return /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$Provider), {
values: [
[
$f329dd4f2aa58cd0$var$InternalBreadcrumbsContext,
{
size: size,
isDisabled: isDisabled
}
]
],
children: /*#__PURE__*/ (0, $a1dfd$jsx)($f329dd4f2aa58cd0$var$CollapsingCollection, {
containerRef: domRef,
onAction: props.onAction,
children: /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$Breadcrumbs), {
...otherProps,
isDisabled: isDisabled,
ref: domRef,
style: UNSAFE_style,
className: UNSAFE_className + $f329dd4f2aa58cd0$var$wrapper({
size: size
}, styles),
children: children
})
})
});
});
let $f329dd4f2aa58cd0$var$BreadcrumbMenu = (props)=>{
let stringFormatter = (0, $a1dfd$useLocalizedStringFormatter)((0, ($parcel$interopDefault($a1dfd$intlStringsmjs))), '@react-spectrum/s2');
let { items: items, onAction: onAction } = props;
let { direction: direction } = (0, $a1dfd$useLocale)();
let { size: size, isDisabled: isDisabled } = (0, $a1dfd$useContext)($f329dd4f2aa58cd0$var$InternalBreadcrumbsContext);
let label = stringFormatter.format('breadcrumbs.more');
return /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$CollectionRendererContext).Provider, {
value: (0, $a1dfd$DefaultCollectionRenderer),
children: /*#__PURE__*/ (0, $a1dfd$jsxs)("li", {
className: $f329dd4f2aa58cd0$var$breadcrumbStyles({
size: size,
isDisabled: isDisabled,
isMenu: true
}),
children: [
/*#__PURE__*/ (0, $a1dfd$jsxs)((0, $13afb0ea5f0ed767$export$27d2ad3c5815583e), {
children: [
/*#__PURE__*/ (0, $a1dfd$jsx)((0, $da878a05ab4a403e$export$cfc7921d29ef7b80), {
isDisabled: isDisabled,
isQuiet: true,
"aria-label": label,
children: /*#__PURE__*/ (0, $a1dfd$jsx)((0, $8b0a29919990739e$export$2e2bcd8739ae039), {})
}),
/*#__PURE__*/ (0, $a1dfd$jsx)((0, $13afb0ea5f0ed767$export$d9b273488cd8ce6f), {
items: items,
onAction: onAction,
children: (item)=>/*#__PURE__*/ (0, $a1dfd$createElement)((0, $13afb0ea5f0ed767$export$2ce376c2cc3355c8), {
...item.props.originalProps,
key: item.key
}, /*#__PURE__*/ (0, $a1dfd$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
slot: "label",
children: item.props.children({
size: size,
isCurrent: false,
isMenu: true
})
}))
})
]
}),
/*#__PURE__*/ (0, $a1dfd$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
size: size,
className: $f329dd4f2aa58cd0$var$chevronStyles({
direction: direction,
isMenu: true
})
})
]
})
});
};
let $f329dd4f2aa58cd0$var$HiddenBreadcrumbs = function(props) {
let { listRef: listRef, items: items, size: size } = props;
return /*#__PURE__*/ (0, $a1dfd$jsxs)("div", {
// @ts-ignore
inert: (0, $a1dfd$inertValue)(true),
ref: listRef,
className: " s40ub4c91 U40ub4c91 q40ub4c91 _w40ub4c91 _Pa91 Wr91 _lr91 _6b91 _Nc91 Pc91 _Ia91",
children: [
items.map((item, idx)=>{
// pull off individual props as an allow list, don't want refs or other props getting through
return /*#__PURE__*/ (0, $a1dfd$jsx)("div", {
"data-hidden-breadcrumb": true,
style: item.props.UNSAFE_style,
className: item.props.className({
size: size,
isCurrent: idx === items.length - 1
}),
children: item.props.children({
size: size,
isCurrent: idx === items.length - 1
})
}, item.key);
}),
/*#__PURE__*/ (0, $a1dfd$jsx)((0, $da878a05ab4a403e$export$cfc7921d29ef7b80), {
"data-hidden-button": true,
isQuiet: true,
children: /*#__PURE__*/ (0, $a1dfd$jsx)((0, $8b0a29919990739e$export$2e2bcd8739ae039), {})
})
]
});
};
const $f329dd4f2aa58cd0$var$breadcrumbStyles = function anonymous(props) {
let rules = " ";
rules += ' sd91';
rules += ' eb91';
rules += ' _Cg91';
if (props.size === "XL") rules += ' Fz91';
else if (props.size === "L") rules += ' Fv91';
else if (props.size === "S") rules += ' Fp91';
else if (props.size === "XS") rules += ' Fn91';
else rules += ' Fx91';
rules += ' Yd91';
rules += ' Xb91';
rules += ' _2b91';
rules += ' _Pc91';
rules += ' _va91';
if (props.isDisabled) rules += ' pp91';
else rules += ' pt91';
if (props.isDisabled) rules += ' plc91';
else rules += ' plb91';
rules += ' _je91';
if (props.isMenu) rules += ' I34mdr91';
return rules;
};
const $f329dd4f2aa58cd0$var$chevronStyles = function anonymous(props) {
let rules = " ";
if (props.direction === "rtl") {
rules += ' -Z4Pn4c-a91';
rules += ' __Ha91';
}
if (props.direction === "rtl") {
rules += ' -_04Pn4c-a91';
rules += ' __Ha91';
}
if (props.isMenu) rules += ' Iy91';
else {
rules += ' It91';
rules += ' Isu91';
}
rules += ' pt91';
rules += ' plf91';
rules += ' -_8sjo0b-t5ZbAob91';
return rules;
};
const $f329dd4f2aa58cd0$var$linkStyles = function anonymous(props) {
let rules = " ";
if (props.isFocusVisible) rules += ' _Lf91';
else rules += ' _Le91';
rules += ' Oh91';
rules += ' Olc91';
rules += ' _Mc91';
rules += ' _Kd91';
rules += ' oa91';
rules += ' na91';
rules += ' ka91';
rules += ' ja91';
if (props.size === "XL") {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
} else if (props.size === "L") {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
} else if (props.size === "S") {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
} else if (props.size === "XS") {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
} else {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
}
if (props.size === "XL") {
rules += ' vg91';
rules += ' vsj91';
} else if (props.size === "L") {
rules += ' vp91';
rules += ' vsh91';
} else if (props.size === "S") {
rules += ' vb91';
rules += ' vse91';
} else if (props.size === "XS") {
rules += ' va91';
rules += ' vsc91';
} else {
rules += ' vd91';
rules += ' vsf91';
}
if (props.size === "XL") {
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
} else if (props.size === "L") {
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
} else if (props.size === "S") {
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
} else if (props.size === "XS") {
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
} else {
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
}
if (props.size === "XL") {
rules += ' _Fa91';
rules += ' _Ffb91';
} else if (props.size === "L") {
rules += ' _Fa91';
rules += ' _Ffb91';
} else if (props.size === "S") {
rules += ' _Fa91';
rules += ' _Ffb91';
} else if (props.size === "XS") {
rules += ' _Fa91';
rules += ' _Ffb91';
} else {
rules += ' _Fa91';
rules += ' _Ffb91';
}
if (props.isCurrent) {
if (props.isPressed) rules += ' po91';
else if (props.isFocusVisible) rules += ' po91';
else if (props.isHovered) rules += ' po91';
else rules += ' pt91';
} else if (props.isDisabled) rules += ' pp91';
else {
if (props.isPressed) rules += ' pt91';
else if (props.isFocusVisible) rules += ' pt91';
else if (props.isHovered) rules += ' pt91';
else rules += ' pv91';
}
if (props.isCurrent) rules += ' plc91';
else if (props.isDisabled) rules += ' plc91';
else rules += ' plf91';
rules += ' Yd91';
rules += ' Xb91';
rules += ' _2b91';
if (props.isDisabled) rules += ' _Xa91';
else if (props.isFocusVisible) {
rules += ' _Xb91';
rules += ' __Va91';
} else if (props.isHovered) {
rules += ' _Xb91';
rules += ' __Va91';
} else rules += ' _Xa91';
if (props.isDisabled) rules += ' ri91';
else rules += ' ry91';
rules += ' __ca91';
return rules;
};
const $f329dd4f2aa58cd0$var$currentStyles = function anonymous(props) {
let rules = " ";
if (props.size === "XL") {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
} else if (props.size === "L") {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
} else if (props.size === "S") {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
} else if (props.size === "XS") {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
} else {
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
}
if (props.size === "XL") {
rules += ' vg91';
rules += ' vsj91';
} else if (props.size === "L") {
rules += ' vp91';
rules += ' vsh91';
} else if (props.size === "S") {
rules += ' vb91';
rules += ' vse91';
} else if (props.size === "XS") {
rules += ' va91';
rules += ' vsc91';
} else {
rules += ' vd91';
rules += ' vsf91';
}
rules += ' wd91';
rules += ' xd91';
rules += ' _xa91';
if (props.size === "XL") {
rules += ' _Fa91';
rules += ' _Ffb91';
} else if (props.size === "L") {
rules += ' _Fa91';
rules += ' _Ffb91';
} else if (props.size === "S") {
rules += ' _Fa91';
rules += ' _Ffb91';
} else if (props.size === "XS") {
rules += ' _Fa91';
rules += ' _Ffb91';
} else {
rules += ' _Fa91';
rules += ' _Ffb91';
}
if (props.size === "XL") rules += ' pt91';
else if (props.size === "L") rules += ' pt91';
else if (props.size === "S") rules += ' pt91';
else if (props.size === "XS") rules += ' pt91';
else rules += ' pt91';
return rules;
};
// TODO: support user heading size customization, for now just set it to large
const $f329dd4f2aa58cd0$var$heading = " Jy91 Gy91 Iy91 Hy91 ug91 uch91 udi91 uea91 ugb91 uhd91 uje91 uic91 vn91 vsq91 we91 xe91 _xa91 _Fa91 _Ffb91 po91";
const $f329dd4f2aa58cd0$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ (0, $a1dfd$forwardRef)(function Breadcrumb({ children: children, ...props }, ref) {
let { href: href, target: target, rel: rel, download: download, ping: ping, referrerPolicy: referrerPolicy } = props;
let { size: size = 'M' } = (0, $a1dfd$useContext)($f329dd4f2aa58cd0$var$InternalBreadcrumbsContext) ?? {};
let domRef = (0, $a1dfd$useDOMRef)(ref);
let { direction: direction } = (0, $a1dfd$useLocale)();
return /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$Breadcrumb), {
...props,
ref: domRef,
// @ts-ignore
originalProps: props,
className: ({ isCurrent: isCurrent, isDisabled: isDisabled })=>$f329dd4f2aa58cd0$var$breadcrumbStyles({
size: size,
isCurrent: isCurrent,
isDisabled: isDisabled
}),
children: ({ isCurrent: isCurrent, isDisabled: isDisabled, isMenu: // @ts-ignore
isMenu })=>{
if (isMenu) return children;
return isCurrent ? /*#__PURE__*/ (0, $a1dfd$jsx)("div", {
className: $f329dd4f2aa58cd0$var$currentStyles({
size: size
}),
children: /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$Provider), {
values: [
[
(0, $a1dfd$HeadingContext),
{
className: $f329dd4f2aa58cd0$var$heading
}
]
],
children: children
})
}) : /*#__PURE__*/ (0, $a1dfd$jsxs)((0, $a1dfd$Fragment), {
children: [
/*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$Link), {
style: ({ isFocusVisible: isFocusVisible })=>({
clipPath: isFocusVisible ? 'none' : 'margin-box'
}),
href: href,
target: target,
rel: rel,
download: download,
ping: ping,
referrerPolicy: referrerPolicy,
isDisabled: isDisabled || isCurrent,
className: ({ isFocused: isFocused, isFocusVisible: isFocusVisible, isHovered: isHovered, isDisabled: isDisabled, isPressed: isPressed })=>$f329dd4f2aa58cd0$var$linkStyles({
isFocused: isFocused,
isFocusVisible: isFocusVisible,
isHovered: isHovered,
isDisabled: isDisabled,
size: size,
isPressed: isPressed,
isCurrent: isCurrent
}),
children: children
}),
/*#__PURE__*/ (0, $a1dfd$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
size: "M",
className: $f329dd4f2aa58cd0$var$chevronStyles({
direction: direction
})
})
]
});
}
});
});
// Context for passing the count for the custom renderer
let $f329dd4f2aa58cd0$var$CollapseContext = /*#__PURE__*/ (0, $a1dfd$createContext)(null);
function $f329dd4f2aa58cd0$var$CollapsingCollection({ children: children, containerRef: containerRef, onAction: onAction }) {
return /*#__PURE__*/ (0, $a1dfd$jsx)($f329dd4f2aa58cd0$var$CollapseContext.Provider, {
value: {
containerRef: containerRef,
onAction: onAction
},
children: /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$CollectionRendererContext).Provider, {
value: $f329dd4f2aa58cd0$var$CollapsingCollectionRenderer,
children: children
})
});
}
let $f329dd4f2aa58cd0$var$CollapsingCollectionRenderer = {
CollectionRoot ({ collection: collection }) {
return $f329dd4f2aa58cd0$var$useCollectionRender(collection);
},
CollectionBranch ({ collection: collection }) {
return $f329dd4f2aa58cd0$var$useCollectionRender(collection);
}
};
let $f329dd4f2aa58cd0$var$useCollectionRender = (collection)=>{
let { containerRef: containerRef, onAction: onAction } = (0, $a1dfd$useContext)($f329dd4f2aa58cd0$var$CollapseContext) ?? {};
let [visibleItems, setVisibleItems] = (0, $a1dfd$useState)(collection.size);
let { size: size = 'M' } = (0, $a1dfd$useContext)($f329dd4f2aa58cd0$var$InternalBreadcrumbsContext);
let children = (0, $a1dfd$useMemo)(()=>{
let result = [];
for (let key of collection.getKeys())result.push(collection.getItem(key));
return result;
}, [
collection
]);
let listRef = (0, $a1dfd$useRef)(null);
let updateOverflow = (0, $a1dfd$useCallback)(()=>{
let currListRef = listRef.current;
if (!currListRef) {
setVisibleItems(collection.size);
return;
}
let container = currListRef.parentElement;
if (!container) {
setVisibleItems(collection.size);
return;
}
let listItems = Array.from(currListRef.querySelectorAll('[data-hidden-breadcrumb]'));
let folder = currListRef.querySelector('button');
if (listItems.length <= 0) {
setVisibleItems(collection.size);
return;
}
let containerWidth = container.offsetWidth;
let containerGap = parseInt(getComputedStyle(container).gap, 10);
let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);
let newVisibleItems = 0;
let maxVisibleItems = $f329dd4f2aa58cd0$var$MAX_VISIBLE_ITEMS;
let widths = [];
let totalWidth = 0;
for (let breadcrumb of listItems){
let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down
widths.push(width);
totalWidth += width;
}
// can we fit all the items without collapsing
if (totalWidth <= containerWidth - collection.size * containerGap && collection.size <= $f329dd4f2aa58cd0$var$MAX_VISIBLE_ITEMS) {
setVisibleItems(collection.size);
return;
}
// we know there is always at least one item because of the listItems.length check up above
let widthOfFirst = widths.shift();
let availableWidth = containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;
maxVisibleItems -= 2; // account for the first item and folder
for (let width of widths.reverse()){
availableWidth -= width;
if (availableWidth <= 0) break;
availableWidth -= containerGap;
newVisibleItems++;
}
setVisibleItems(Math.max($f329dd4f2aa58cd0$var$MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));
}, [
collection.size,
setVisibleItems
]);
// making bad assumption that i can listen to containerRef when it's declared in the parent?
(0, $a1dfd$useResizeObserver)({
ref: containerRef,
onResize: updateOverflow
});
(0, $a1dfd$useLayoutEffect)(()=>{
if (collection.size > 0) queueMicrotask(updateOverflow);
}, [
collection.size,
updateOverflow
]);
(0, $a1dfd$useEffect)(()=>{
// Recalculate visible tags when fonts are loaded.
document.fonts?.ready.then(()=>updateOverflow());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
let sliceIndex = collection.size - visibleItems;
return /*#__PURE__*/ (0, $a1dfd$jsxs)((0, $a1dfd$Fragment), {
children: [
/*#__PURE__*/ (0, $a1dfd$jsx)($f329dd4f2aa58cd0$var$HiddenBreadcrumbs, {
items: children,
size: size,
listRef: listRef
}),
visibleItems < collection.size && collection.size > 2 ? /*#__PURE__*/ (0, $a1dfd$jsxs)((0, $a1dfd$Fragment), {
children: [
children[0].render?.(children[0]),
/*#__PURE__*/ (0, $a1dfd$jsx)($f329dd4f2aa58cd0$var$BreadcrumbMenu, {
items: children.slice(1, sliceIndex),
onAction: onAction
}),
children.slice(sliceIndex).map((node)=>/*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$Fragment1), {
children: node.render?.(node)
}, node.key))
]
}) : /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$Fragment), {
children: children.map((node)=>/*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$Fragment1), {
children: node.render?.(node)
}, node.key))
})
]
});
};
export {$f329dd4f2aa58cd0$export$65596d3621b0a4a0 as BreadcrumbsContext, $f329dd4f2aa58cd0$export$2dc68d50d56fbbd as Breadcrumbs, $f329dd4f2aa58cd0$export$dabcc1ec9dd9d1cc as Breadcrumb};
//# sourceMappingURL=Breadcrumbs.mjs.map