@react-spectrum/s2
Version:
Spectrum 2 UI components in React
691 lines (671 loc) • 27.5 kB
JavaScript
require("./Breadcrumbs.css");
var $6e265ff388155b91$exports = require("./ActionButton.cjs");
var $1df9f1c9262ce5df$exports = require("./Chevron.cjs");
var $280c0303c82c816f$exports = require("../icons/FolderBreadcrumb.cjs");
var $4526404114e78c80$exports = require("./intlStrings.cjs");
var $e741ea6b88ce4866$exports = require("./Menu.cjs");
var $6367bc87eb7d24ad$exports = require("./Content.cjs");
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
var $PCemd$reactjsxruntime = require("react/jsx-runtime");
var $PCemd$react = require("react");
var $PCemd$reactariacomponents = require("react-aria-components");
var $PCemd$reactaria = require("react-aria");
var $PCemd$reactariautils = require("@react-aria/utils");
var $PCemd$reactspectrumutils = require("@react-spectrum/utils");
var $PCemd$reactariai18n = require("@react-aria/i18n");
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "BreadcrumbsContext", () => $4130f4e17f7081aa$export$65596d3621b0a4a0);
$parcel$export(module.exports, "Breadcrumbs", () => $4130f4e17f7081aa$export$2dc68d50d56fbbd);
$parcel$export(module.exports, "Breadcrumb", () => $4130f4e17f7081aa$export$dabcc1ec9dd9d1cc);
/*
* 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 $4130f4e17f7081aa$var$MIN_VISIBLE_ITEMS = 1;
const $4130f4e17f7081aa$var$MAX_VISIBLE_ITEMS = 4;
const $4130f4e17f7081aa$export$65596d3621b0a4a0 = /*#__PURE__*/ (0, $PCemd$react.createContext)(null);
const $4130f4e17f7081aa$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 $4130f4e17f7081aa$var$InternalBreadcrumbsContext = /*#__PURE__*/ (0, $PCemd$react.createContext)({});
const $4130f4e17f7081aa$export$2dc68d50d56fbbd = /*#__PURE__*/ (0, $PCemd$react.forwardRef)(function Breadcrumbs(props, ref) {
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $4130f4e17f7081aa$export$65596d3621b0a4a0);
let domRef = (0, $PCemd$reactspectrumutils.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, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.Provider), {
values: [
[
$4130f4e17f7081aa$var$InternalBreadcrumbsContext,
{
size: size,
isDisabled: isDisabled
}
]
],
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)($4130f4e17f7081aa$var$CollapsingCollection, {
containerRef: domRef,
onAction: props.onAction,
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.Breadcrumbs), {
...otherProps,
isDisabled: isDisabled,
ref: domRef,
style: UNSAFE_style,
className: UNSAFE_className + $4130f4e17f7081aa$var$wrapper({
size: size
}, styles),
children: children
})
})
});
});
let $4130f4e17f7081aa$var$BreadcrumbMenu = (props)=>{
let stringFormatter = (0, $PCemd$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
let { items: items, onAction: onAction } = props;
let { direction: direction } = (0, $PCemd$reactaria.useLocale)();
let { size: size, isDisabled: isDisabled } = (0, $PCemd$react.useContext)($4130f4e17f7081aa$var$InternalBreadcrumbsContext);
let label = stringFormatter.format('breadcrumbs.more');
return /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.CollectionRendererContext).Provider, {
value: (0, $PCemd$reactariacomponents.DefaultCollectionRenderer),
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsxs)("li", {
className: $4130f4e17f7081aa$var$breadcrumbStyles({
size: size,
isDisabled: isDisabled,
isMenu: true
}),
children: [
/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsxs)((0, $e741ea6b88ce4866$exports.MenuTrigger), {
children: [
/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $6e265ff388155b91$exports.ActionButton), {
isDisabled: isDisabled,
isQuiet: true,
"aria-label": label,
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $280c0303c82c816f$exports.default), {})
}),
/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $e741ea6b88ce4866$exports.Menu), {
items: items,
onAction: onAction,
children: (item)=>/*#__PURE__*/ (0, $PCemd$react.createElement)((0, $e741ea6b88ce4866$exports.MenuItem), {
...item.props.originalProps,
key: item.key
}, /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
slot: "label",
children: item.props.children({
size: size,
isCurrent: false,
isMenu: true
})
}))
})
]
}),
/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
size: size,
className: $4130f4e17f7081aa$var$chevronStyles({
direction: direction,
isMenu: true
})
})
]
})
});
};
let $4130f4e17f7081aa$var$HiddenBreadcrumbs = function(props) {
let { listRef: listRef, items: items, size: size } = props;
return /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsxs)("div", {
// @ts-ignore
inert: (0, $PCemd$reactariautils.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, $PCemd$reactjsxruntime.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, $PCemd$reactjsxruntime.jsx)((0, $6e265ff388155b91$exports.ActionButton), {
"data-hidden-button": true,
isQuiet: true,
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $280c0303c82c816f$exports.default), {})
})
]
});
};
const $4130f4e17f7081aa$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 $4130f4e17f7081aa$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 $4130f4e17f7081aa$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 $4130f4e17f7081aa$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 $4130f4e17f7081aa$var$heading = " Jy91 Gy91 Iy91 Hy91 ug91 uch91 udi91 uea91 ugb91 uhd91 uje91 uic91 vn91 vsq91 we91 xe91 _xa91 _Fa91 _Ffb91 po91";
const $4130f4e17f7081aa$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ (0, $PCemd$react.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, $PCemd$react.useContext)($4130f4e17f7081aa$var$InternalBreadcrumbsContext) ?? {};
let domRef = (0, $PCemd$reactspectrumutils.useDOMRef)(ref);
let { direction: direction } = (0, $PCemd$reactaria.useLocale)();
return /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.Breadcrumb), {
...props,
ref: domRef,
// @ts-ignore
originalProps: props,
className: ({ isCurrent: isCurrent, isDisabled: isDisabled })=>$4130f4e17f7081aa$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, $PCemd$reactjsxruntime.jsx)("div", {
className: $4130f4e17f7081aa$var$currentStyles({
size: size
}),
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.Provider), {
values: [
[
(0, $PCemd$reactariacomponents.HeadingContext),
{
className: $4130f4e17f7081aa$var$heading
}
]
],
children: children
})
}) : /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsxs)((0, $PCemd$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.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 })=>$4130f4e17f7081aa$var$linkStyles({
isFocused: isFocused,
isFocusVisible: isFocusVisible,
isHovered: isHovered,
isDisabled: isDisabled,
size: size,
isPressed: isPressed,
isCurrent: isCurrent
}),
children: children
}),
/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
size: "M",
className: $4130f4e17f7081aa$var$chevronStyles({
direction: direction
})
})
]
});
}
});
});
// Context for passing the count for the custom renderer
let $4130f4e17f7081aa$var$CollapseContext = /*#__PURE__*/ (0, $PCemd$react.createContext)(null);
function $4130f4e17f7081aa$var$CollapsingCollection({ children: children, containerRef: containerRef, onAction: onAction }) {
return /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)($4130f4e17f7081aa$var$CollapseContext.Provider, {
value: {
containerRef: containerRef,
onAction: onAction
},
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.CollectionRendererContext).Provider, {
value: $4130f4e17f7081aa$var$CollapsingCollectionRenderer,
children: children
})
});
}
let $4130f4e17f7081aa$var$CollapsingCollectionRenderer = {
CollectionRoot ({ collection: collection }) {
return $4130f4e17f7081aa$var$useCollectionRender(collection);
},
CollectionBranch ({ collection: collection }) {
return $4130f4e17f7081aa$var$useCollectionRender(collection);
}
};
let $4130f4e17f7081aa$var$useCollectionRender = (collection)=>{
let { containerRef: containerRef, onAction: onAction } = (0, $PCemd$react.useContext)($4130f4e17f7081aa$var$CollapseContext) ?? {};
let [visibleItems, setVisibleItems] = (0, $PCemd$react.useState)(collection.size);
let { size: size = 'M' } = (0, $PCemd$react.useContext)($4130f4e17f7081aa$var$InternalBreadcrumbsContext);
let children = (0, $PCemd$react.useMemo)(()=>{
let result = [];
for (let key of collection.getKeys())result.push(collection.getItem(key));
return result;
}, [
collection
]);
let listRef = (0, $PCemd$react.useRef)(null);
let updateOverflow = (0, $PCemd$react.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 = $4130f4e17f7081aa$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 <= $4130f4e17f7081aa$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($4130f4e17f7081aa$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, $PCemd$reactspectrumutils.useResizeObserver)({
ref: containerRef,
onResize: updateOverflow
});
(0, $PCemd$reactariautils.useLayoutEffect)(()=>{
if (collection.size > 0) queueMicrotask(updateOverflow);
}, [
collection.size,
updateOverflow
]);
(0, $PCemd$react.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, $PCemd$reactjsxruntime.jsxs)((0, $PCemd$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)($4130f4e17f7081aa$var$HiddenBreadcrumbs, {
items: children,
size: size,
listRef: listRef
}),
visibleItems < collection.size && collection.size > 2 ? /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsxs)((0, $PCemd$reactjsxruntime.Fragment), {
children: [
children[0].render?.(children[0]),
/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)($4130f4e17f7081aa$var$BreadcrumbMenu, {
items: children.slice(1, sliceIndex),
onAction: onAction
}),
children.slice(sliceIndex).map((node)=>/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$react.Fragment), {
children: node.render?.(node)
}, node.key))
]
}) : /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactjsxruntime.Fragment), {
children: children.map((node)=>/*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$react.Fragment), {
children: node.render?.(node)
}, node.key))
})
]
});
};
//# sourceMappingURL=Breadcrumbs.cjs.map