@react-spectrum/breadcrumbs 3.6.2 → 3.7.0

package/dist/import.mjs

@@ -0,0 +1,307 @@
+import "./main.css";
+import {Item as $37781313afe0968e$re_export$Item} from "@react-stately/collections";
+import {ActionButton as $koRP3$ActionButton} from "@react-spectrum/button";
+import {useDOMRef as $koRP3$useDOMRef, useStyleProps as $koRP3$useStyleProps, classNames as $koRP3$classNames, getWrappedElement as $koRP3$getWrappedElement} from "@react-spectrum/utils";
+import $koRP3$spectrumiconsuiFolderBreadcrumb from "@spectrum-icons/ui/FolderBreadcrumb";
+import {MenuTrigger as $koRP3$MenuTrigger, Menu as $koRP3$Menu} from "@react-spectrum/menu";
+import $koRP3$react, {useRef as $koRP3$useRef, useCallback as $koRP3$useCallback, Fragment as $koRP3$Fragment} from "react";
+import {useBreadcrumbs as $koRP3$useBreadcrumbs, useBreadcrumbItem as $koRP3$useBreadcrumbItem} from "@react-aria/breadcrumbs";
+import {useValueEffect as $koRP3$useValueEffect, useResizeObserver as $koRP3$useResizeObserver, useLayoutEffect as $koRP3$useLayoutEffect, mergeProps as $koRP3$mergeProps} from "@react-aria/utils";
+import {useProviderProps as $koRP3$useProviderProps} from "@react-spectrum/provider";
+import $koRP3$spectrumiconsuiChevronRightSmall from "@spectrum-icons/ui/ChevronRightSmall";
+import {FocusRing as $koRP3$FocusRing} from "@react-aria/focus";
+import {useHover as $koRP3$useHover} from "@react-aria/interactions";
+import {useLocale as $koRP3$useLocale} from "@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});
+}
+/*
+ * Copyright 2020 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.
+ */ /// <reference types="css-module-types" />
+/*
+ * Copyright 2020 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.
+ */ 
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+var $48e85557f3729e3d$exports = {};
+
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Breadcrumbs", () => $48e85557f3729e3d$export$8c6320d2db82081f, (v) => $48e85557f3729e3d$export$8c6320d2db82081f = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Breadcrumbs-itemSeparator", () => $48e85557f3729e3d$export$f72910e36cd91d1e, (v) => $48e85557f3729e3d$export$f72910e36cd91d1e = v);
+$parcel$export($48e85557f3729e3d$exports, "is-reversed", () => $48e85557f3729e3d$export$a4561bd665abb5db, (v) => $48e85557f3729e3d$export$a4561bd665abb5db = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Breadcrumbs-item", () => $48e85557f3729e3d$export$492a5983c5fbf603, (v) => $48e85557f3729e3d$export$492a5983c5fbf603 = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-ActionButton", () => $48e85557f3729e3d$export$53da69f51b770d3, (v) => $48e85557f3729e3d$export$53da69f51b770d3 = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Breadcrumbs-itemLink", () => $48e85557f3729e3d$export$5af6a1bcd207d9f6, (v) => $48e85557f3729e3d$export$5af6a1bcd207d9f6 = v);
+$parcel$export($48e85557f3729e3d$exports, "is-hovered", () => $48e85557f3729e3d$export$b8813cd5d7824ce7, (v) => $48e85557f3729e3d$export$b8813cd5d7824ce7 = v);
+$parcel$export($48e85557f3729e3d$exports, "focus-ring", () => $48e85557f3729e3d$export$f39a09f249340e2a, (v) => $48e85557f3729e3d$export$f39a09f249340e2a = v);
+$parcel$export($48e85557f3729e3d$exports, "is-dragged", () => $48e85557f3729e3d$export$8778c911bed6c759, (v) => $48e85557f3729e3d$export$8778c911bed6c759 = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Breadcrumbs--small", () => $48e85557f3729e3d$export$e01337e7944312f6, (v) => $48e85557f3729e3d$export$e01337e7944312f6 = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Breadcrumbs--medium", () => $48e85557f3729e3d$export$19f957201d941895, (v) => $48e85557f3729e3d$export$19f957201d941895 = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Breadcrumbs--multiline", () => $48e85557f3729e3d$export$713961e8e432825b, (v) => $48e85557f3729e3d$export$713961e8e432825b = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Heading--pageTitle", () => $48e85557f3729e3d$export$63e9e087a73f808b, (v) => $48e85557f3729e3d$export$63e9e087a73f808b = v);
+$parcel$export($48e85557f3729e3d$exports, "is-disabled", () => $48e85557f3729e3d$export$d35bc1e505d1ebbf, (v) => $48e85557f3729e3d$export$d35bc1e505d1ebbf = v);
+$parcel$export($48e85557f3729e3d$exports, "is-selected", () => $48e85557f3729e3d$export$1e0fb04f31d3c22a, (v) => $48e85557f3729e3d$export$1e0fb04f31d3c22a = v);
+$parcel$export($48e85557f3729e3d$exports, "spectrum-Breadcrumb", () => $48e85557f3729e3d$export$45a5316056cfac3c, (v) => $48e85557f3729e3d$export$45a5316056cfac3c = v);
+var $48e85557f3729e3d$export$8c6320d2db82081f;
+var $48e85557f3729e3d$export$f72910e36cd91d1e;
+var $48e85557f3729e3d$export$a4561bd665abb5db;
+var $48e85557f3729e3d$export$492a5983c5fbf603;
+var $48e85557f3729e3d$export$53da69f51b770d3;
+var $48e85557f3729e3d$export$5af6a1bcd207d9f6;
+var $48e85557f3729e3d$export$b8813cd5d7824ce7;
+var $48e85557f3729e3d$export$f39a09f249340e2a;
+var $48e85557f3729e3d$export$8778c911bed6c759;
+var $48e85557f3729e3d$export$e01337e7944312f6;
+var $48e85557f3729e3d$export$19f957201d941895;
+var $48e85557f3729e3d$export$713961e8e432825b;
+var $48e85557f3729e3d$export$63e9e087a73f808b;
+var $48e85557f3729e3d$export$d35bc1e505d1ebbf;
+var $48e85557f3729e3d$export$1e0fb04f31d3c22a;
+var $48e85557f3729e3d$export$45a5316056cfac3c;
+$48e85557f3729e3d$export$8c6320d2db82081f = "spectrum-Breadcrumbs_3fe6e8";
+$48e85557f3729e3d$export$f72910e36cd91d1e = "spectrum-Breadcrumbs-itemSeparator_3fe6e8";
+$48e85557f3729e3d$export$a4561bd665abb5db = "is-reversed_3fe6e8";
+$48e85557f3729e3d$export$492a5983c5fbf603 = "spectrum-Breadcrumbs-item_3fe6e8";
+$48e85557f3729e3d$export$53da69f51b770d3 = "spectrum-ActionButton_3fe6e8";
+$48e85557f3729e3d$export$5af6a1bcd207d9f6 = "spectrum-Breadcrumbs-itemLink_3fe6e8";
+$48e85557f3729e3d$export$b8813cd5d7824ce7 = "is-hovered_3fe6e8";
+$48e85557f3729e3d$export$f39a09f249340e2a = "focus-ring_3fe6e8";
+$48e85557f3729e3d$export$8778c911bed6c759 = "is-dragged_3fe6e8";
+$48e85557f3729e3d$export$e01337e7944312f6 = "spectrum-Breadcrumbs--small_3fe6e8";
+$48e85557f3729e3d$export$19f957201d941895 = "spectrum-Breadcrumbs--medium_3fe6e8";
+$48e85557f3729e3d$export$713961e8e432825b = "spectrum-Breadcrumbs--multiline_3fe6e8";
+$48e85557f3729e3d$export$63e9e087a73f808b = "spectrum-Heading--pageTitle_3fe6e8";
+$48e85557f3729e3d$export$d35bc1e505d1ebbf = "is-disabled_3fe6e8";
+$48e85557f3729e3d$export$1e0fb04f31d3c22a = "is-selected_3fe6e8";
+$48e85557f3729e3d$export$45a5316056cfac3c = "spectrum-Breadcrumb_3fe6e8";
+
+
+
+
+
+function $2bfa2c84c665c457$export$c13f210c706eb549(props) {
+    let { children: children , isCurrent: isCurrent , isDisabled: isDisabled  } = props;
+    let { direction: direction  } = (0, $koRP3$useLocale)();
+    let ref = (0, $koRP3$useRef)(null);
+    let { itemProps: itemProps  } = (0, $koRP3$useBreadcrumbItem)({
+        ...props,
+        elementType: typeof children === "string" ? "span" : "a"
+    }, ref);
+    let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $koRP3$useHover)(props);
+    let element = /*#__PURE__*/ (0, $koRP3$react).cloneElement((0, $koRP3$getWrappedElement)(children), {
+        ...(0, $koRP3$mergeProps)(itemProps, hoverProps),
+        ref: ref,
+        className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-itemLink", {
+            "is-disabled": !isCurrent && isDisabled,
+            "is-hovered": isHovered
+        })
+    });
+    return /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$Fragment), null, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$FocusRing), {
+        focusRingClass: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "focus-ring")
+    }, element), isCurrent === false && /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$spectrumiconsuiChevronRightSmall), {
+        UNSAFE_className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-itemSeparator", {
+            "is-reversed": direction === "rtl"
+        })
+    }));
+}
+
+
+
+
+
+
+
+
+
+
+
+const $2adaf67aabd3300b$var$MIN_VISIBLE_ITEMS = 1;
+const $2adaf67aabd3300b$var$MAX_VISIBLE_ITEMS = 4;
+function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
+    props = (0, $koRP3$useProviderProps)(props);
+    let { size: size = "L" , isMultiline: isMultiline , children: children , showRoot: showRoot , isDisabled: isDisabled , onAction: onAction , autoFocusCurrent: autoFocusCurrent , ...otherProps } = props;
+    // Not using React.Children.toArray because it mutates the key prop.
+    let childArray = [];
+    (0, $koRP3$react).Children.forEach(children, (child)=>{
+        if (/*#__PURE__*/ (0, $koRP3$react).isValidElement(child)) childArray.push(child);
+    });
+    let domRef = (0, $koRP3$useDOMRef)(ref);
+    let listRef = (0, $koRP3$useRef)(null);
+    let [visibleItems, setVisibleItems] = (0, $koRP3$useValueEffect)(childArray.length);
+    let { navProps: navProps  } = (0, $koRP3$useBreadcrumbs)(props);
+    let { styleProps: styleProps  } = (0, $koRP3$useStyleProps)(otherProps);
+    let updateOverflow = (0, $koRP3$useCallback)(()=>{
+        let computeVisibleItems = (visibleItems)=>{
+            // Refs can be null at runtime.
+            let currListRef = listRef.current;
+            if (!currListRef) return visibleItems;
+            let listItems = Array.from(currListRef.children);
+            if (listItems.length <= 0) return visibleItems;
+            let containerWidth = currListRef.offsetWidth;
+            let isShowingMenu = childArray.length > visibleItems;
+            let calculatedWidth = 0;
+            let newVisibleItems = 0;
+            let maxVisibleItems = $2adaf67aabd3300b$var$MAX_VISIBLE_ITEMS;
+            if (showRoot) {
+                calculatedWidth += listItems.shift().offsetWidth;
+                newVisibleItems++;
+            }
+            if (isShowingMenu) {
+                calculatedWidth += listItems.shift().offsetWidth;
+                maxVisibleItems--;
+            }
+            if (showRoot && calculatedWidth >= containerWidth) newVisibleItems--;
+            // TODO: what if multiline and only one breadcrumb??
+            if (isMultiline) {
+                listItems.pop();
+                newVisibleItems++;
+            } else if (listItems.length > 0) {
+                // Ensure the last breadcrumb isn't truncated when we measure it.
+                let last = listItems.pop();
+                last.style.overflow = "visible";
+                calculatedWidth += last.offsetWidth;
+                if (calculatedWidth < containerWidth) newVisibleItems++;
+                last.style.overflow = "";
+            }
+            for (let breadcrumb of listItems.reverse()){
+                calculatedWidth += breadcrumb.offsetWidth;
+                if (calculatedWidth < containerWidth) newVisibleItems++;
+            }
+            return Math.max($2adaf67aabd3300b$var$MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems));
+        };
+        setVisibleItems(function*() {
+            // Update to show all items.
+            yield childArray.length;
+            // Measure, and update to show the items that fit.
+            let newVisibleItems = computeVisibleItems(childArray.length);
+            yield newVisibleItems;
+            // If the number of items is less than the number of children,
+            // then update again to ensure that the menu fits.
+            if (newVisibleItems < childArray.length && newVisibleItems > 1) yield computeVisibleItems(newVisibleItems);
+        });
+    }, [
+        childArray.length,
+        setVisibleItems,
+        showRoot,
+        isMultiline
+    ]);
+    (0, $koRP3$useResizeObserver)({
+        ref: domRef,
+        onResize: updateOverflow
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, $koRP3$useLayoutEffect)(updateOverflow, [
+        children
+    ]);
+    let contents = childArray;
+    if (childArray.length > visibleItems) {
+        let selectedItem = childArray[childArray.length - 1];
+        var _selectedItem_key;
+        let selectedKey = (_selectedItem_key = selectedItem.key) !== null && _selectedItem_key !== void 0 ? _selectedItem_key : childArray.length - 1;
+        let onMenuAction = (key)=>{
+            // Don't fire onAction when clicking on the last item
+            if (key !== selectedKey && onAction) onAction(key);
+        };
+        let menuItem = /*#__PURE__*/ (0, $koRP3$react).createElement((0, $2bfa2c84c665c457$export$c13f210c706eb549), {
+            key: "menu"
+        }, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$MenuTrigger), null, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$ActionButton), {
+            "aria-label": "…",
+            isQuiet: true,
+            isDisabled: isDisabled
+        }, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$spectrumiconsuiFolderBreadcrumb), null)), /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$Menu), {
+            selectionMode: "single",
+            selectedKeys: [
+                selectedKey
+            ],
+            onAction: onMenuAction
+        }, childArray)));
+        contents = [
+            menuItem
+        ];
+        let breadcrumbs = [
+            ...childArray
+        ];
+        let endItems = visibleItems;
+        if (showRoot && visibleItems > 1) {
+            let rootItem = breadcrumbs.shift();
+            if (rootItem) contents.unshift(rootItem);
+            endItems--;
+        }
+        contents.push(...breadcrumbs.slice(-endItems));
+    }
+    let lastIndex = contents.length - 1;
+    let breadcrumbItems = contents.map((child, index)=>{
+        let isCurrent = index === lastIndex;
+        var _child_key;
+        let key = (_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : index;
+        let onPress = ()=>{
+            if (onAction) onAction(key);
+        };
+        return /*#__PURE__*/ (0, $koRP3$react).createElement("li", {
+            key: index,
+            className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-item")
+        }, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $2bfa2c84c665c457$export$c13f210c706eb549), {
+            key: key,
+            isCurrent: isCurrent,
+            isDisabled: isDisabled,
+            onPress: onPress,
+            autoFocus: isCurrent && autoFocusCurrent
+        }, child.props.children));
+    });
+    return /*#__PURE__*/ (0, $koRP3$react).createElement("nav", {
+        ...styleProps,
+        ...navProps,
+        ref: domRef
+    }, /*#__PURE__*/ (0, $koRP3$react).createElement("ul", {
+        ref: listRef,
+        className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs", {
+            "spectrum-Breadcrumbs--small": size === "S",
+            "spectrum-Breadcrumbs--medium": size === "M",
+            "spectrum-Breadcrumbs--multiline": isMultiline,
+            "spectrum-Breadcrumbs--showRoot": showRoot,
+            "is-disabled": isDisabled
+        }, styleProps.className)
+    }, breadcrumbItems));
+}
+/**
+ * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.
+ */ let $2adaf67aabd3300b$export$2dc68d50d56fbbd = /*#__PURE__*/ (0, $koRP3$react).forwardRef($2adaf67aabd3300b$var$Breadcrumbs);
+
+
+
+
+
+export {$2adaf67aabd3300b$export$2dc68d50d56fbbd as Breadcrumbs, $37781313afe0968e$re_export$Item as Item};
+//# sourceMappingURL=module.js.map

package/dist/main.js

@@ -117,7 +117,7 @@ $3292ef9f328419fc$export$45a5316056cfac3c = "spectrum-Breadcrumb_3fe6e8";
 function $d90ab02c74e9be0c$export$c13f210c706eb549(props) {
     let { children: children , isCurrent: isCurrent , isDisabled: isDisabled  } = props;
     let { direction: direction  } = (0, $8bWUw$reactariai18n.useLocale)();
-    let ref = (0, $8bWUw$react.useRef)();
+    let ref = (0, $8bWUw$react.useRef)(null);
     let { itemProps: itemProps  } = (0, $8bWUw$reactariabreadcrumbs.useBreadcrumbItem)({
         ...props,
         elementType: typeof children === "string" ? "span" : "a"
@@ -169,8 +169,9 @@ function $299bf776d9162a05$var$Breadcrumbs(props, ref) {
         let computeVisibleItems = (visibleItems)=>{
             // Refs can be null at runtime.
             let currListRef = listRef.current;
-            if (!currListRef) return;
+            if (!currListRef) return visibleItems;
             let listItems = Array.from(currListRef.children);
+            if (listItems.length <= 0) return visibleItems;
             let containerWidth = currListRef.offsetWidth;
             let isShowingMenu = childArray.length > visibleItems;
             let calculatedWidth = 0;
@@ -257,7 +258,8 @@ function $299bf776d9162a05$var$Breadcrumbs(props, ref) {
         ];
         let endItems = visibleItems;
         if (showRoot && visibleItems > 1) {
-            contents.unshift(breadcrumbs.shift());
+            let rootItem = breadcrumbs.shift();
+            if (rootItem) contents.unshift(rootItem);
             endItems--;
         }
         contents.push(...breadcrumbs.slice(-endItems));

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/breadcrumbs/src/index.ts","packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx","packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx","packages/@adobe/spectrum-css-temp/components/breadcrumb/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/// <reference types=\"css-module-types\" />\nexport {Breadcrumbs} from './Breadcrumbs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {ActionButton} from '@react-spectrum/button';\nimport {BreadcrumbItem} from './BreadcrumbItem';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb';\nimport {Menu, MenuTrigger} from '@react-spectrum/menu';\nimport React, {Key, ReactElement, useCallback, useRef} from 'react';\nimport {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\nimport styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';\nimport {useBreadcrumbs} from '@react-aria/breadcrumbs';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\nfunction Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {\n  props = useProviderProps(props);\n  let {\n    size = 'L',\n    isMultiline,\n    children,\n    showRoot,\n    isDisabled,\n    onAction,\n    autoFocusCurrent,\n    ...otherProps\n  } = props;\n\n  // Not using React.Children.toArray because it mutates the key prop.\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n\n  let domRef = useDOMRef(ref);\n  let listRef = useRef<HTMLUListElement>(null);\n\n  let [visibleItems, setVisibleItems] = useValueEffect(childArray.length);\n\n  let {navProps} = useBreadcrumbs(props);\n  let {styleProps} = useStyleProps(otherProps);\n\n  let updateOverflow = useCallback(() => {\n    let computeVisibleItems = (visibleItems: number) => {\n      // Refs can be null at runtime.\n      let currListRef: HTMLUListElement | null = listRef.current;\n      if (!currListRef) {\n        return;\n      }\n\n      let listItems = Array.from(currListRef.children) as HTMLLIElement[];\n      let containerWidth = currListRef.offsetWidth;\n      let isShowingMenu = childArray.length > visibleItems;\n      let calculatedWidth = 0;\n      let newVisibleItems = 0;\n      let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n      if (showRoot) {\n        calculatedWidth += listItems.shift().offsetWidth;\n        newVisibleItems++;\n      }\n\n      if (isShowingMenu) {\n        calculatedWidth += listItems.shift().offsetWidth;\n        maxVisibleItems--;\n      }\n\n      if (showRoot && calculatedWidth >= containerWidth) {\n        newVisibleItems--;\n      }\n\n      // TODO: what if multiline and only one breadcrumb??\n      if (isMultiline) {\n        listItems.pop();\n        newVisibleItems++;\n      } else {\n        if (listItems.length > 0) {\n          // Ensure the last breadcrumb isn't truncated when we measure it.\n          let last = listItems.pop();\n          last.style.overflow = 'visible';\n\n          calculatedWidth += last.offsetWidth;\n          if (calculatedWidth < containerWidth) {\n            newVisibleItems++;\n          }\n\n          last.style.overflow = '';\n        }\n      }\n\n      for (let breadcrumb of listItems.reverse()) {\n        calculatedWidth += breadcrumb.offsetWidth;\n        if (calculatedWidth < containerWidth) {\n          newVisibleItems++;\n        }\n      }\n\n      return Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems));\n    };\n\n    setVisibleItems(function *() {\n      // Update to show all items.\n      yield childArray.length;\n\n      // Measure, and update to show the items that fit.\n      let newVisibleItems = computeVisibleItems(childArray.length);\n      yield newVisibleItems;\n\n      // If the number of items is less than the number of children,\n      // then update again to ensure that the menu fits.\n      if (newVisibleItems < childArray.length && newVisibleItems > 1) {\n        yield computeVisibleItems(newVisibleItems);\n      }\n    });\n  }, [childArray.length, setVisibleItems, showRoot, isMultiline]);\n\n  useResizeObserver({ref: domRef, onResize: updateOverflow});\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(updateOverflow, [children]);\n\n  let contents = childArray;\n  if (childArray.length > visibleItems) {\n    let selectedItem = childArray[childArray.length - 1];\n    let selectedKey = selectedItem.key ?? childArray.length - 1;\n    let onMenuAction = (key: Key) => {\n      // Don't fire onAction when clicking on the last item\n      if (key !== selectedKey && onAction) {\n        onAction(key);\n      }\n    };\n\n    let menuItem = (\n      <BreadcrumbItem key=\"menu\">\n        <MenuTrigger>\n          <ActionButton\n            aria-label=\"…\"\n            isQuiet\n            isDisabled={isDisabled}>\n            <FolderBreadcrumb />\n          </ActionButton>\n          <Menu selectionMode=\"single\" selectedKeys={[selectedKey]} onAction={onMenuAction}>\n            {childArray}\n          </Menu>\n        </MenuTrigger>\n      </BreadcrumbItem>\n    );\n\n    contents = [menuItem];\n    let breadcrumbs = [...childArray];\n    let endItems = visibleItems;\n    if (showRoot && visibleItems > 1) {\n      contents.unshift(breadcrumbs.shift());\n      endItems--;\n    }\n    contents.push(...breadcrumbs.slice(-endItems));\n  }\n\n  let lastIndex = contents.length - 1;\n  let breadcrumbItems = contents.map((child, index) => {\n    let isCurrent = index === lastIndex;\n    let key = child.key ?? index;\n    let onPress = () => {\n      if (onAction) {\n        onAction(key);\n      }\n    };\n\n    return (\n      <li\n        key={index}\n        className={\n          classNames(\n            styles,\n            'spectrum-Breadcrumbs-item'\n          )\n        }>\n        <BreadcrumbItem\n          key={key}\n          isCurrent={isCurrent}\n          isDisabled={isDisabled}\n          onPress={onPress}\n          autoFocus={isCurrent && autoFocusCurrent}>\n          {child.props.children}\n        </BreadcrumbItem>\n      </li>\n    );\n  });\n\n  return (\n    <nav\n      {...styleProps}\n      {...navProps}\n      ref={domRef}>\n      <ul\n        ref={listRef}\n        className={\n          classNames(\n            styles,\n            'spectrum-Breadcrumbs',\n            {\n              'spectrum-Breadcrumbs--small': size === 'S',\n              'spectrum-Breadcrumbs--medium': size === 'M',\n              'spectrum-Breadcrumbs--multiline': isMultiline,\n              'spectrum-Breadcrumbs--showRoot': showRoot,\n              'is-disabled': isDisabled\n            },\n            styleProps.className\n          )\n        }>\n        {breadcrumbItems}\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.\n */\nlet _Breadcrumbs = React.forwardRef(Breadcrumbs);\nexport {_Breadcrumbs as Breadcrumbs};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BreadcrumbItemProps} from '@react-types/breadcrumbs';\nimport ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall';\nimport {classNames, getWrappedElement} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {Fragment, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';\nimport {useBreadcrumbItem} from '@react-aria/breadcrumbs';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport function BreadcrumbItem(props: BreadcrumbItemProps) {\n  let {\n    children,\n    isCurrent,\n    isDisabled\n  } = props;\n\n  let {direction} = useLocale();\n  let ref = useRef();\n  let {itemProps} = useBreadcrumbItem({\n    ...props,\n    elementType: typeof children === 'string' ? 'span' : 'a'\n  }, ref);\n  let {hoverProps, isHovered} = useHover(props);\n\n  let element = React.cloneElement(\n    getWrappedElement(children),\n    {\n      ...mergeProps(itemProps, hoverProps),\n      ref,\n      className:\n        classNames(\n          styles,\n          'spectrum-Breadcrumbs-itemLink',\n          {\n            'is-disabled': !isCurrent && isDisabled,\n            'is-hovered': isHovered\n          }\n        )\n    }\n  );\n\n  return (\n    <Fragment>\n      <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n        {element}\n      </FocusRing>\n      {isCurrent === false &&\n        <ChevronRightSmall\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Breadcrumbs-itemSeparator',\n              {\n                'is-reversed': direction === 'rtl'\n              }\n            )\n          } />\n      }\n    </Fragment>\n  );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/breadcrumbs/src/index.ts","packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx","packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx","packages/@adobe/spectrum-css-temp/components/breadcrumb/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/// <reference types=\"css-module-types\" />\nexport {Breadcrumbs} from './Breadcrumbs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {ActionButton} from '@react-spectrum/button';\nimport {BreadcrumbItem} from './BreadcrumbItem';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb';\nimport {Menu, MenuTrigger} from '@react-spectrum/menu';\nimport React, {Key, ReactElement, useCallback, useRef} from 'react';\nimport {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\nimport styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';\nimport {useBreadcrumbs} from '@react-aria/breadcrumbs';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\nfunction Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {\n  props = useProviderProps(props);\n  let {\n    size = 'L',\n    isMultiline,\n    children,\n    showRoot,\n    isDisabled,\n    onAction,\n    autoFocusCurrent,\n    ...otherProps\n  } = props;\n\n  // Not using React.Children.toArray because it mutates the key prop.\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n\n  let domRef = useDOMRef(ref);\n  let listRef = useRef<HTMLUListElement>(null);\n\n  let [visibleItems, setVisibleItems] = useValueEffect(childArray.length);\n\n  let {navProps} = useBreadcrumbs(props);\n  let {styleProps} = useStyleProps(otherProps);\n\n  let updateOverflow = useCallback(() => {\n    let computeVisibleItems = (visibleItems: number): number => {\n      // Refs can be null at runtime.\n      let currListRef: HTMLUListElement | null = listRef.current;\n      if (!currListRef) {\n        return visibleItems;\n      }\n\n      let listItems = Array.from(currListRef.children) as HTMLLIElement[];\n      if (listItems.length <= 0) {\n        return visibleItems;\n      }\n      let containerWidth = currListRef.offsetWidth;\n      let isShowingMenu = childArray.length > visibleItems;\n      let calculatedWidth = 0;\n      let newVisibleItems = 0;\n      let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n      if (showRoot) {\n        calculatedWidth += (listItems.shift() as HTMLLIElement).offsetWidth;\n        newVisibleItems++;\n      }\n\n      if (isShowingMenu) {\n        calculatedWidth += (listItems.shift() as HTMLLIElement).offsetWidth;\n        maxVisibleItems--;\n      }\n\n      if (showRoot && calculatedWidth >= containerWidth) {\n        newVisibleItems--;\n      }\n\n      // TODO: what if multiline and only one breadcrumb??\n      if (isMultiline) {\n        listItems.pop();\n        newVisibleItems++;\n      } else {\n        if (listItems.length > 0) {\n          // Ensure the last breadcrumb isn't truncated when we measure it.\n          let last = (listItems.pop() as HTMLLIElement);\n          last.style.overflow = 'visible';\n\n          calculatedWidth += last.offsetWidth;\n          if (calculatedWidth < containerWidth) {\n            newVisibleItems++;\n          }\n\n          last.style.overflow = '';\n        }\n      }\n\n      for (let breadcrumb of listItems.reverse()) {\n        calculatedWidth += breadcrumb.offsetWidth;\n        if (calculatedWidth < containerWidth) {\n          newVisibleItems++;\n        }\n      }\n\n      return Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems));\n    };\n\n    setVisibleItems(function *() {\n      // Update to show all items.\n      yield childArray.length;\n\n      // Measure, and update to show the items that fit.\n      let newVisibleItems = computeVisibleItems(childArray.length);\n      yield newVisibleItems;\n\n      // If the number of items is less than the number of children,\n      // then update again to ensure that the menu fits.\n      if (newVisibleItems < childArray.length && newVisibleItems > 1) {\n        yield computeVisibleItems(newVisibleItems);\n      }\n    });\n  }, [childArray.length, setVisibleItems, showRoot, isMultiline]);\n\n  useResizeObserver({ref: domRef, onResize: updateOverflow});\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(updateOverflow, [children]);\n\n  let contents = childArray;\n  if (childArray.length > visibleItems) {\n    let selectedItem = childArray[childArray.length - 1];\n    let selectedKey = selectedItem.key ?? childArray.length - 1;\n    let onMenuAction = (key: Key) => {\n      // Don't fire onAction when clicking on the last item\n      if (key !== selectedKey && onAction) {\n        onAction(key);\n      }\n    };\n\n    let menuItem = (\n      <BreadcrumbItem key=\"menu\">\n        <MenuTrigger>\n          <ActionButton\n            aria-label=\"…\"\n            isQuiet\n            isDisabled={isDisabled}>\n            <FolderBreadcrumb />\n          </ActionButton>\n          <Menu selectionMode=\"single\" selectedKeys={[selectedKey]} onAction={onMenuAction}>\n            {childArray}\n          </Menu>\n        </MenuTrigger>\n      </BreadcrumbItem>\n    );\n\n    contents = [menuItem];\n    let breadcrumbs = [...childArray];\n    let endItems = visibleItems;\n    if (showRoot && visibleItems > 1) {\n      let rootItem = breadcrumbs.shift();\n      if (rootItem) {\n        contents.unshift(rootItem);\n      }\n      endItems--;\n    }\n    contents.push(...breadcrumbs.slice(-endItems));\n  }\n\n  let lastIndex = contents.length - 1;\n  let breadcrumbItems = contents.map((child, index) => {\n    let isCurrent = index === lastIndex;\n    let key = child.key ?? index;\n    let onPress = () => {\n      if (onAction) {\n        onAction(key);\n      }\n    };\n\n    return (\n      <li\n        key={index}\n        className={\n          classNames(\n            styles,\n            'spectrum-Breadcrumbs-item'\n          )\n        }>\n        <BreadcrumbItem\n          key={key}\n          isCurrent={isCurrent}\n          isDisabled={isDisabled}\n          onPress={onPress}\n          autoFocus={isCurrent && autoFocusCurrent}>\n          {child.props.children}\n        </BreadcrumbItem>\n      </li>\n    );\n  });\n\n  return (\n    <nav\n      {...styleProps}\n      {...navProps}\n      ref={domRef}>\n      <ul\n        ref={listRef}\n        className={\n          classNames(\n            styles,\n            'spectrum-Breadcrumbs',\n            {\n              'spectrum-Breadcrumbs--small': size === 'S',\n              'spectrum-Breadcrumbs--medium': size === 'M',\n              'spectrum-Breadcrumbs--multiline': isMultiline,\n              'spectrum-Breadcrumbs--showRoot': showRoot,\n              'is-disabled': isDisabled\n            },\n            styleProps.className\n          )\n        }>\n        {breadcrumbItems}\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.\n */\nlet _Breadcrumbs = React.forwardRef(Breadcrumbs);\nexport {_Breadcrumbs as Breadcrumbs};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BreadcrumbItemProps} from '@react-types/breadcrumbs';\nimport ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall';\nimport {classNames, getWrappedElement} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {Fragment, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';\nimport {useBreadcrumbItem} from '@react-aria/breadcrumbs';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport function BreadcrumbItem(props: BreadcrumbItemProps) {\n  let {\n    children,\n    isCurrent,\n    isDisabled\n  } = props;\n\n  let {direction} = useLocale();\n  let ref = useRef(null);\n  let {itemProps} = useBreadcrumbItem({\n    ...props,\n    elementType: typeof children === 'string' ? 'span' : 'a'\n  }, ref);\n  let {hoverProps, isHovered} = useHover(props);\n\n  let element = React.cloneElement(\n    getWrappedElement(children),\n    {\n      ...mergeProps(itemProps, hoverProps),\n      ref,\n      className:\n        classNames(\n          styles,\n          'spectrum-Breadcrumbs-itemLink',\n          {\n            'is-disabled': !isCurrent && isDisabled,\n            'is-hovered': isHovered\n          }\n        )\n    }\n  );\n\n  return (\n    <Fragment>\n      <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n        {element}\n      </FocusRing>\n      {isCurrent === false &&\n        <ChevronRightSmall\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Breadcrumbs-itemSeparator',\n              {\n                'is-reversed': direction === 'rtl'\n              }\n            )\n          } />\n      }\n    </Fragment>\n  );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -114,7 +114,7 @@ $48e85557f3729e3d$export$45a5316056cfac3c = "spectrum-Breadcrumb_3fe6e8";
 function $2bfa2c84c665c457$export$c13f210c706eb549(props) {
     let { children: children , isCurrent: isCurrent , isDisabled: isDisabled  } = props;
     let { direction: direction  } = (0, $koRP3$useLocale)();
-    let ref = (0, $koRP3$useRef)();
+    let ref = (0, $koRP3$useRef)(null);
     let { itemProps: itemProps  } = (0, $koRP3$useBreadcrumbItem)({
         ...props,
         elementType: typeof children === "string" ? "span" : "a"
@@ -166,8 +166,9 @@ function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
         let computeVisibleItems = (visibleItems)=>{
             // Refs can be null at runtime.
             let currListRef = listRef.current;
-            if (!currListRef) return;
+            if (!currListRef) return visibleItems;
             let listItems = Array.from(currListRef.children);
+            if (listItems.length <= 0) return visibleItems;
             let containerWidth = currListRef.offsetWidth;
             let isShowingMenu = childArray.length > visibleItems;
             let calculatedWidth = 0;
@@ -254,7 +255,8 @@ function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
         ];
         let endItems = visibleItems;
         if (showRoot && visibleItems > 1) {
-            contents.unshift(breadcrumbs.shift());
+            let rootItem = breadcrumbs.shift();
+            if (rootItem) contents.unshift(rootItem);
             endItems--;
         }
         contents.push(...breadcrumbs.slice(-endItems));

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/breadcrumbs/src/index.ts","packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx","packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx","packages/@adobe/spectrum-css-temp/components/breadcrumb/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/// <reference types=\"css-module-types\" />\nexport {Breadcrumbs} from './Breadcrumbs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {ActionButton} from '@react-spectrum/button';\nimport {BreadcrumbItem} from './BreadcrumbItem';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb';\nimport {Menu, MenuTrigger} from '@react-spectrum/menu';\nimport React, {Key, ReactElement, useCallback, useRef} from 'react';\nimport {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\nimport styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';\nimport {useBreadcrumbs} from '@react-aria/breadcrumbs';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\nfunction Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {\n  props = useProviderProps(props);\n  let {\n    size = 'L',\n    isMultiline,\n    children,\n    showRoot,\n    isDisabled,\n    onAction,\n    autoFocusCurrent,\n    ...otherProps\n  } = props;\n\n  // Not using React.Children.toArray because it mutates the key prop.\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n\n  let domRef = useDOMRef(ref);\n  let listRef = useRef<HTMLUListElement>(null);\n\n  let [visibleItems, setVisibleItems] = useValueEffect(childArray.length);\n\n  let {navProps} = useBreadcrumbs(props);\n  let {styleProps} = useStyleProps(otherProps);\n\n  let updateOverflow = useCallback(() => {\n    let computeVisibleItems = (visibleItems: number) => {\n      // Refs can be null at runtime.\n      let currListRef: HTMLUListElement | null = listRef.current;\n      if (!currListRef) {\n        return;\n      }\n\n      let listItems = Array.from(currListRef.children) as HTMLLIElement[];\n      let containerWidth = currListRef.offsetWidth;\n      let isShowingMenu = childArray.length > visibleItems;\n      let calculatedWidth = 0;\n      let newVisibleItems = 0;\n      let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n      if (showRoot) {\n        calculatedWidth += listItems.shift().offsetWidth;\n        newVisibleItems++;\n      }\n\n      if (isShowingMenu) {\n        calculatedWidth += listItems.shift().offsetWidth;\n        maxVisibleItems--;\n      }\n\n      if (showRoot && calculatedWidth >= containerWidth) {\n        newVisibleItems--;\n      }\n\n      // TODO: what if multiline and only one breadcrumb??\n      if (isMultiline) {\n        listItems.pop();\n        newVisibleItems++;\n      } else {\n        if (listItems.length > 0) {\n          // Ensure the last breadcrumb isn't truncated when we measure it.\n          let last = listItems.pop();\n          last.style.overflow = 'visible';\n\n          calculatedWidth += last.offsetWidth;\n          if (calculatedWidth < containerWidth) {\n            newVisibleItems++;\n          }\n\n          last.style.overflow = '';\n        }\n      }\n\n      for (let breadcrumb of listItems.reverse()) {\n        calculatedWidth += breadcrumb.offsetWidth;\n        if (calculatedWidth < containerWidth) {\n          newVisibleItems++;\n        }\n      }\n\n      return Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems));\n    };\n\n    setVisibleItems(function *() {\n      // Update to show all items.\n      yield childArray.length;\n\n      // Measure, and update to show the items that fit.\n      let newVisibleItems = computeVisibleItems(childArray.length);\n      yield newVisibleItems;\n\n      // If the number of items is less than the number of children,\n      // then update again to ensure that the menu fits.\n      if (newVisibleItems < childArray.length && newVisibleItems > 1) {\n        yield computeVisibleItems(newVisibleItems);\n      }\n    });\n  }, [childArray.length, setVisibleItems, showRoot, isMultiline]);\n\n  useResizeObserver({ref: domRef, onResize: updateOverflow});\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(updateOverflow, [children]);\n\n  let contents = childArray;\n  if (childArray.length > visibleItems) {\n    let selectedItem = childArray[childArray.length - 1];\n    let selectedKey = selectedItem.key ?? childArray.length - 1;\n    let onMenuAction = (key: Key) => {\n      // Don't fire onAction when clicking on the last item\n      if (key !== selectedKey && onAction) {\n        onAction(key);\n      }\n    };\n\n    let menuItem = (\n      <BreadcrumbItem key=\"menu\">\n        <MenuTrigger>\n          <ActionButton\n            aria-label=\"…\"\n            isQuiet\n            isDisabled={isDisabled}>\n            <FolderBreadcrumb />\n          </ActionButton>\n          <Menu selectionMode=\"single\" selectedKeys={[selectedKey]} onAction={onMenuAction}>\n            {childArray}\n          </Menu>\n        </MenuTrigger>\n      </BreadcrumbItem>\n    );\n\n    contents = [menuItem];\n    let breadcrumbs = [...childArray];\n    let endItems = visibleItems;\n    if (showRoot && visibleItems > 1) {\n      contents.unshift(breadcrumbs.shift());\n      endItems--;\n    }\n    contents.push(...breadcrumbs.slice(-endItems));\n  }\n\n  let lastIndex = contents.length - 1;\n  let breadcrumbItems = contents.map((child, index) => {\n    let isCurrent = index === lastIndex;\n    let key = child.key ?? index;\n    let onPress = () => {\n      if (onAction) {\n        onAction(key);\n      }\n    };\n\n    return (\n      <li\n        key={index}\n        className={\n          classNames(\n            styles,\n            'spectrum-Breadcrumbs-item'\n          )\n        }>\n        <BreadcrumbItem\n          key={key}\n          isCurrent={isCurrent}\n          isDisabled={isDisabled}\n          onPress={onPress}\n          autoFocus={isCurrent && autoFocusCurrent}>\n          {child.props.children}\n        </BreadcrumbItem>\n      </li>\n    );\n  });\n\n  return (\n    <nav\n      {...styleProps}\n      {...navProps}\n      ref={domRef}>\n      <ul\n        ref={listRef}\n        className={\n          classNames(\n            styles,\n            'spectrum-Breadcrumbs',\n            {\n              'spectrum-Breadcrumbs--small': size === 'S',\n              'spectrum-Breadcrumbs--medium': size === 'M',\n              'spectrum-Breadcrumbs--multiline': isMultiline,\n              'spectrum-Breadcrumbs--showRoot': showRoot,\n              'is-disabled': isDisabled\n            },\n            styleProps.className\n          )\n        }>\n        {breadcrumbItems}\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.\n */\nlet _Breadcrumbs = React.forwardRef(Breadcrumbs);\nexport {_Breadcrumbs as Breadcrumbs};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BreadcrumbItemProps} from '@react-types/breadcrumbs';\nimport ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall';\nimport {classNames, getWrappedElement} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {Fragment, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';\nimport {useBreadcrumbItem} from '@react-aria/breadcrumbs';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport function BreadcrumbItem(props: BreadcrumbItemProps) {\n  let {\n    children,\n    isCurrent,\n    isDisabled\n  } = props;\n\n  let {direction} = useLocale();\n  let ref = useRef();\n  let {itemProps} = useBreadcrumbItem({\n    ...props,\n    elementType: typeof children === 'string' ? 'span' : 'a'\n  }, ref);\n  let {hoverProps, isHovered} = useHover(props);\n\n  let element = React.cloneElement(\n    getWrappedElement(children),\n    {\n      ...mergeProps(itemProps, hoverProps),\n      ref,\n      className:\n        classNames(\n          styles,\n          'spectrum-Breadcrumbs-itemLink',\n          {\n            'is-disabled': !isCurrent && isDisabled,\n            'is-hovered': isHovered\n          }\n        )\n    }\n  );\n\n  return (\n    <Fragment>\n      <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n        {element}\n      </FocusRing>\n      {isCurrent === false &&\n        <ChevronRightSmall\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Breadcrumbs-itemSeparator',\n              {\n                'is-reversed': direction === 'rtl'\n              }\n            )\n          } />\n      }\n    </Fragment>\n  );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/breadcrumbs/src/index.ts","packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx","packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx","packages/@adobe/spectrum-css-temp/components/breadcrumb/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/// <reference types=\"css-module-types\" />\nexport {Breadcrumbs} from './Breadcrumbs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {ActionButton} from '@react-spectrum/button';\nimport {BreadcrumbItem} from './BreadcrumbItem';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb';\nimport {Menu, MenuTrigger} from '@react-spectrum/menu';\nimport React, {Key, ReactElement, useCallback, useRef} from 'react';\nimport {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\nimport styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';\nimport {useBreadcrumbs} from '@react-aria/breadcrumbs';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\nfunction Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {\n  props = useProviderProps(props);\n  let {\n    size = 'L',\n    isMultiline,\n    children,\n    showRoot,\n    isDisabled,\n    onAction,\n    autoFocusCurrent,\n    ...otherProps\n  } = props;\n\n  // Not using React.Children.toArray because it mutates the key prop.\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n\n  let domRef = useDOMRef(ref);\n  let listRef = useRef<HTMLUListElement>(null);\n\n  let [visibleItems, setVisibleItems] = useValueEffect(childArray.length);\n\n  let {navProps} = useBreadcrumbs(props);\n  let {styleProps} = useStyleProps(otherProps);\n\n  let updateOverflow = useCallback(() => {\n    let computeVisibleItems = (visibleItems: number): number => {\n      // Refs can be null at runtime.\n      let currListRef: HTMLUListElement | null = listRef.current;\n      if (!currListRef) {\n        return visibleItems;\n      }\n\n      let listItems = Array.from(currListRef.children) as HTMLLIElement[];\n      if (listItems.length <= 0) {\n        return visibleItems;\n      }\n      let containerWidth = currListRef.offsetWidth;\n      let isShowingMenu = childArray.length > visibleItems;\n      let calculatedWidth = 0;\n      let newVisibleItems = 0;\n      let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n      if (showRoot) {\n        calculatedWidth += (listItems.shift() as HTMLLIElement).offsetWidth;\n        newVisibleItems++;\n      }\n\n      if (isShowingMenu) {\n        calculatedWidth += (listItems.shift() as HTMLLIElement).offsetWidth;\n        maxVisibleItems--;\n      }\n\n      if (showRoot && calculatedWidth >= containerWidth) {\n        newVisibleItems--;\n      }\n\n      // TODO: what if multiline and only one breadcrumb??\n      if (isMultiline) {\n        listItems.pop();\n        newVisibleItems++;\n      } else {\n        if (listItems.length > 0) {\n          // Ensure the last breadcrumb isn't truncated when we measure it.\n          let last = (listItems.pop() as HTMLLIElement);\n          last.style.overflow = 'visible';\n\n          calculatedWidth += last.offsetWidth;\n          if (calculatedWidth < containerWidth) {\n            newVisibleItems++;\n          }\n\n          last.style.overflow = '';\n        }\n      }\n\n      for (let breadcrumb of listItems.reverse()) {\n        calculatedWidth += breadcrumb.offsetWidth;\n        if (calculatedWidth < containerWidth) {\n          newVisibleItems++;\n        }\n      }\n\n      return Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems));\n    };\n\n    setVisibleItems(function *() {\n      // Update to show all items.\n      yield childArray.length;\n\n      // Measure, and update to show the items that fit.\n      let newVisibleItems = computeVisibleItems(childArray.length);\n      yield newVisibleItems;\n\n      // If the number of items is less than the number of children,\n      // then update again to ensure that the menu fits.\n      if (newVisibleItems < childArray.length && newVisibleItems > 1) {\n        yield computeVisibleItems(newVisibleItems);\n      }\n    });\n  }, [childArray.length, setVisibleItems, showRoot, isMultiline]);\n\n  useResizeObserver({ref: domRef, onResize: updateOverflow});\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(updateOverflow, [children]);\n\n  let contents = childArray;\n  if (childArray.length > visibleItems) {\n    let selectedItem = childArray[childArray.length - 1];\n    let selectedKey = selectedItem.key ?? childArray.length - 1;\n    let onMenuAction = (key: Key) => {\n      // Don't fire onAction when clicking on the last item\n      if (key !== selectedKey && onAction) {\n        onAction(key);\n      }\n    };\n\n    let menuItem = (\n      <BreadcrumbItem key=\"menu\">\n        <MenuTrigger>\n          <ActionButton\n            aria-label=\"…\"\n            isQuiet\n            isDisabled={isDisabled}>\n            <FolderBreadcrumb />\n          </ActionButton>\n          <Menu selectionMode=\"single\" selectedKeys={[selectedKey]} onAction={onMenuAction}>\n            {childArray}\n          </Menu>\n        </MenuTrigger>\n      </BreadcrumbItem>\n    );\n\n    contents = [menuItem];\n    let breadcrumbs = [...childArray];\n    let endItems = visibleItems;\n    if (showRoot && visibleItems > 1) {\n      let rootItem = breadcrumbs.shift();\n      if (rootItem) {\n        contents.unshift(rootItem);\n      }\n      endItems--;\n    }\n    contents.push(...breadcrumbs.slice(-endItems));\n  }\n\n  let lastIndex = contents.length - 1;\n  let breadcrumbItems = contents.map((child, index) => {\n    let isCurrent = index === lastIndex;\n    let key = child.key ?? index;\n    let onPress = () => {\n      if (onAction) {\n        onAction(key);\n      }\n    };\n\n    return (\n      <li\n        key={index}\n        className={\n          classNames(\n            styles,\n            'spectrum-Breadcrumbs-item'\n          )\n        }>\n        <BreadcrumbItem\n          key={key}\n          isCurrent={isCurrent}\n          isDisabled={isDisabled}\n          onPress={onPress}\n          autoFocus={isCurrent && autoFocusCurrent}>\n          {child.props.children}\n        </BreadcrumbItem>\n      </li>\n    );\n  });\n\n  return (\n    <nav\n      {...styleProps}\n      {...navProps}\n      ref={domRef}>\n      <ul\n        ref={listRef}\n        className={\n          classNames(\n            styles,\n            'spectrum-Breadcrumbs',\n            {\n              'spectrum-Breadcrumbs--small': size === 'S',\n              'spectrum-Breadcrumbs--medium': size === 'M',\n              'spectrum-Breadcrumbs--multiline': isMultiline,\n              'spectrum-Breadcrumbs--showRoot': showRoot,\n              'is-disabled': isDisabled\n            },\n            styleProps.className\n          )\n        }>\n        {breadcrumbItems}\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.\n */\nlet _Breadcrumbs = React.forwardRef(Breadcrumbs);\nexport {_Breadcrumbs as Breadcrumbs};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BreadcrumbItemProps} from '@react-types/breadcrumbs';\nimport ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall';\nimport {classNames, getWrappedElement} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {Fragment, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';\nimport {useBreadcrumbItem} from '@react-aria/breadcrumbs';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport function BreadcrumbItem(props: BreadcrumbItemProps) {\n  let {\n    children,\n    isCurrent,\n    isDisabled\n  } = props;\n\n  let {direction} = useLocale();\n  let ref = useRef(null);\n  let {itemProps} = useBreadcrumbItem({\n    ...props,\n    elementType: typeof children === 'string' ? 'span' : 'a'\n  }, ref);\n  let {hoverProps, isHovered} = useHover(props);\n\n  let element = React.cloneElement(\n    getWrappedElement(children),\n    {\n      ...mergeProps(itemProps, hoverProps),\n      ref,\n      className:\n        classNames(\n          styles,\n          'spectrum-Breadcrumbs-itemLink',\n          {\n            'is-disabled': !isCurrent && isDisabled,\n            'is-hovered': isHovered\n          }\n        )\n    }\n  );\n\n  return (\n    <Fragment>\n      <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n        {element}\n      </FocusRing>\n      {isCurrent === false &&\n        <ChevronRightSmall\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Breadcrumbs-itemSeparator',\n              {\n                'is-reversed': direction === 'rtl'\n              }\n            )\n          } />\n      }\n    </Fragment>\n  );\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;ACuOA;;GAEG;AACH,OAAA,IAAI,6JAA4C,CAAC;AC7NjD,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,wBAAwB,EAAC,MAAM,0BAA0B,CAAC","sources":["packages/@react-spectrum/breadcrumbs/src/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx","packages/@react-spectrum/breadcrumbs/src/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx","packages/@react-spectrum/breadcrumbs/src/packages/@react-spectrum/breadcrumbs/src/index.ts","packages/@react-spectrum/breadcrumbs/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/// <reference types=\"css-module-types\" />\nexport {Breadcrumbs} from './Breadcrumbs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;AC6OA;;GAEG;AACH,OAAA,IAAI,6JAA4C,CAAC;ACnOjD,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,wBAAwB,EAAC,MAAM,0BAA0B,CAAC","sources":["packages/@react-spectrum/breadcrumbs/src/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx","packages/@react-spectrum/breadcrumbs/src/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx","packages/@react-spectrum/breadcrumbs/src/packages/@react-spectrum/breadcrumbs/src/index.ts","packages/@react-spectrum/breadcrumbs/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/// <reference types=\"css-module-types\" />\nexport {Breadcrumbs} from './Breadcrumbs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-spectrum/breadcrumbs",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -31,18 +36,18 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/breadcrumbs": "^3.4.1",
-    "@react-aria/focus": "^3.10.1",
-    "@react-aria/i18n": "^3.6.3",
-    "@react-aria/interactions": "^3.13.1",
-    "@react-aria/utils": "^3.14.2",
-    "@react-spectrum/button": "^3.11.2",
-    "@react-spectrum/menu": "^3.9.2",
-    "@react-spectrum/utils": "^3.8.1",
-    "@react-stately/collections": "^3.5.1",
-    "@react-types/breadcrumbs": "^3.4.6",
-    "@react-types/shared": "^3.16.0",
-    "@spectrum-icons/ui": "^3.4.2",
+    "@react-aria/breadcrumbs": "^3.5.0",
+    "@react-aria/focus": "^3.11.0",
+    "@react-aria/i18n": "^3.7.0",
+    "@react-aria/interactions": "^3.14.0",
+    "@react-aria/utils": "^3.15.0",
+    "@react-spectrum/button": "^3.12.0",
+    "@react-spectrum/menu": "^3.10.0",
+    "@react-spectrum/utils": "^3.9.0",
+    "@react-stately/collections": "^3.6.0",
+    "@react-types/breadcrumbs": "^3.5.0",
+    "@react-types/shared": "^3.17.0",
+    "@spectrum-icons/ui": "^3.5.0",
     "@swc/helpers": "^0.4.14"
   },
   "devDependencies": {
@@ -56,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "79f62e8fbf64e8359fb603f3a1cc41a2808389e2"
+  "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
 }

package/src/BreadcrumbItem.tsx

@@ -29,7 +29,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps) {
   } = props;
 
   let {direction} = useLocale();
-  let ref = useRef();
+  let ref = useRef(null);
   let {itemProps} = useBreadcrumbItem({
     ...props,
     elementType: typeof children === 'string' ? 'span' : 'a'

package/src/Breadcrumbs.tsx

@@ -56,14 +56,17 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
   let {styleProps} = useStyleProps(otherProps);
 
   let updateOverflow = useCallback(() => {
-    let computeVisibleItems = (visibleItems: number) => {
+    let computeVisibleItems = (visibleItems: number): number => {
       // Refs can be null at runtime.
       let currListRef: HTMLUListElement | null = listRef.current;
       if (!currListRef) {
-        return;
+        return visibleItems;
       }
 
       let listItems = Array.from(currListRef.children) as HTMLLIElement[];
+      if (listItems.length <= 0) {
+        return visibleItems;
+      }
       let containerWidth = currListRef.offsetWidth;
       let isShowingMenu = childArray.length > visibleItems;
       let calculatedWidth = 0;
@@ -71,12 +74,12 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
       let maxVisibleItems = MAX_VISIBLE_ITEMS;
 
       if (showRoot) {
-        calculatedWidth += listItems.shift().offsetWidth;
+        calculatedWidth += (listItems.shift() as HTMLLIElement).offsetWidth;
         newVisibleItems++;
       }
 
       if (isShowingMenu) {
-        calculatedWidth += listItems.shift().offsetWidth;
+        calculatedWidth += (listItems.shift() as HTMLLIElement).offsetWidth;
         maxVisibleItems--;
       }
 
@@ -91,7 +94,7 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
       } else {
         if (listItems.length > 0) {
           // Ensure the last breadcrumb isn't truncated when we measure it.
-          let last = listItems.pop();
+          let last = (listItems.pop() as HTMLLIElement);
           last.style.overflow = 'visible';
 
           calculatedWidth += last.offsetWidth;
@@ -165,7 +168,10 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
     let breadcrumbs = [...childArray];
     let endItems = visibleItems;
     if (showRoot && visibleItems > 1) {
-      contents.unshift(breadcrumbs.shift());
+      let rootItem = breadcrumbs.shift();
+      if (rootItem) {
+        contents.unshift(rootItem);
+      }
       endItems--;
     }
     contents.push(...breadcrumbs.slice(-endItems));