@react-spectrum/s2
Version:
Spectrum 2 UI components in React
694 lines (674 loc) • 27.6 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$reactariautils = require("@react-aria/utils");
var $PCemd$reactspectrumutils = require("@react-spectrum/utils");
var $PCemd$reactaria = require("react-aria");
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|_6|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 += ' _Pc1';
rules += ' sd1';
rules += ' _Cg1';
rules += ' _Gc1';
rules += ' _wa1';
if (!flexGrow) rules += ' _ub1';
if (!flexShrink) rules += ' _va1';
if (!flexBasis) rules += ' _sb1';
if (props.size === "L") rules += ' Urun3rd1';
else if (props.size === "M") rules += ' UssxDec1';
if (props.size === "L") rules += ' qrun3rd1';
else if (props.size === "M") rules += ' qssxDec1';
rules += ' Td1';
rules += ' Qd1';
rules += ' Sd1';
rules += ' Rd1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
if (!marginTop) rules += ' Jy1';
if (!marginBottom) rules += ' Gy1';
if (props.size === "L") {
if (!marginInlineStart) rules += ' Irun3rd1';
} else if (props.size === "M") {
if (!marginInlineStart) rules += ' IssxDec1';
}
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: " s40ub4c1 U40ub4c1 q40ub4c1 _w40ub4c1 _Pa1 Wr1 _lr1 _6b1 _Nc1 Pc1 _Ia1",
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 += ' sd1';
rules += ' eb1';
rules += ' _Cg1';
if (props.size === "XL") rules += ' Fz1';
else if (props.size === "L") rules += ' Fv1';
else if (props.size === "S") rules += ' Fp1';
else if (props.size === "XS") rules += ' Fn1';
else rules += ' Fx1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
rules += ' _Pc1';
rules += ' _va1';
if (props.isDisabled) rules += ' pp1';
else rules += ' pt1';
if (props.isDisabled) rules += ' plc1';
else rules += ' plb1';
rules += ' _je1';
if (props.isMenu) rules += ' I34mdr1';
return rules;
};
const $4130f4e17f7081aa$var$chevronStyles = function anonymous(props) {
let rules = " ";
if (props.direction === "rtl") {
rules += ' -Z4Pn4c-a1';
rules += ' __Ha1';
}
if (props.direction === "rtl") {
rules += ' -_04Pn4c-a1';
rules += ' __Ha1';
}
if (props.isMenu) rules += ' Iy1';
else {
rules += ' It1';
rules += ' Isu1';
}
rules += ' pt1';
rules += ' plf1';
rules += ' -_8sjo0b-t5ZbAob1';
return rules;
};
const $4130f4e17f7081aa$var$linkStyles = function anonymous(props) {
let rules = " ";
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kd1';
rules += ' oa1';
rules += ' na1';
rules += ' ka1';
rules += ' ja1';
if (props.size === "XL") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "L") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "S") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "XS") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
}
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
if (props.size === "XL") {
rules += ' xb1';
rules += ' _xa1';
} else if (props.size === "L") {
rules += ' xb1';
rules += ' _xa1';
} else if (props.size === "S") {
rules += ' xb1';
rules += ' _xa1';
} else if (props.size === "XS") {
rules += ' xb1';
rules += ' _xa1';
} else {
rules += ' xb1';
rules += ' _xa1';
}
if (props.size === "XL") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "L") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "S") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "XS") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
}
if (props.isCurrent) {
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
} else if (props.isDisabled) rules += ' pp1';
else {
if (props.isPressed) rules += ' pt1';
else if (props.isFocusVisible) rules += ' pt1';
else if (props.isHovered) rules += ' pt1';
else rules += ' pv1';
}
if (props.isCurrent) rules += ' plc1';
else if (props.isDisabled) rules += ' plc1';
else rules += ' plf1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
if (props.isDisabled) rules += ' _Xa1';
else if (props.isFocusVisible) {
rules += ' _Xb1';
rules += ' __Va1';
} else if (props.isHovered) {
rules += ' _Xb1';
rules += ' __Va1';
} else rules += ' _Xa1';
if (props.isDisabled) rules += ' ri1';
else rules += ' ry1';
rules += ' __ca1';
return rules;
};
const $4130f4e17f7081aa$var$currentStyles = function anonymous(props) {
let rules = " ";
if (props.size === "XL") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "L") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "S") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "XS") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
}
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
rules += ' xd1';
rules += ' _xa1';
rules += ' xX0cczbc1';
rules += ' _xX0cczba1';
if (props.size === "XL") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "L") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "S") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "XS") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
}
rules += ' pt1';
rules += ' plb1';
return rules;
};
// TODO: support user heading size customization, for now just set it to large
const $4130f4e17f7081aa$var$heading = " Jy1 Gy1 Iy1 Hy1 uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 -_6BNtrc-h1 vx1 xe1 _xa1 xX0cczbd1 _xX0cczba1 _Fd1 _FnuYUweb1 po1";
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