@react-spectrum/breadcrumbs 3.0.0-nightly.2429 → 3.0.0-nightly.2431

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/import.mjs +20 -11
  2. package/dist/main.js +19 -10
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +20 -11
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +15 -15
  8. package/src/BreadcrumbItem.tsx +29 -21
  9. package/src/Breadcrumbs.tsx +6 -2
package/dist/import.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import "./main.css";
2
2
  import {Item as $37781313afe0968e$re_export$Item} from "@react-stately/collections";
3
3
  import {ActionButton as $koRP3$ActionButton} from "@react-spectrum/button";
4
- import {useDOMRef as $koRP3$useDOMRef, useStyleProps as $koRP3$useStyleProps, classNames as $koRP3$classNames, getWrappedElement as $koRP3$getWrappedElement} from "@react-spectrum/utils";
4
+ import {useDOMRef as $koRP3$useDOMRef, useStyleProps as $koRP3$useStyleProps, classNames as $koRP3$classNames} from "@react-spectrum/utils";
5
5
  import $koRP3$spectrumiconsuiFolderBreadcrumb from "@spectrum-icons/ui/FolderBreadcrumb";
6
6
  import {MenuTrigger as $koRP3$MenuTrigger, Menu as $koRP3$Menu} from "@react-spectrum/menu";
7
7
  import $koRP3$react, {useRef as $koRP3$useRef, useCallback as $koRP3$useCallback, Fragment as $koRP3$Fragment} from "react";
@@ -112,25 +112,27 @@ $48e85557f3729e3d$export$45a5316056cfac3c = "spectrum-Breadcrumb_3fe6e8";
112
112
 
113
113
 
114
114
  function $2bfa2c84c665c457$export$c13f210c706eb549(props) {
115
- let { children: children , isCurrent: isCurrent , isDisabled: isDisabled } = props;
115
+ let { children: children , isCurrent: isCurrent , isDisabled: isDisabled , isMenu: isMenu } = props;
116
116
  let { direction: direction } = (0, $koRP3$useLocale)();
117
117
  let ref = (0, $koRP3$useRef)(null);
118
+ let ElementType = props.href ? "a" : "span";
118
119
  let { itemProps: itemProps } = (0, $koRP3$useBreadcrumbItem)({
119
120
  ...props,
120
- elementType: typeof children === "string" ? "span" : "a"
121
+ elementType: ElementType
121
122
  }, ref);
122
123
  let { hoverProps: hoverProps , isHovered: isHovered } = (0, $koRP3$useHover)(props);
123
- let element = /*#__PURE__*/ (0, $koRP3$react).cloneElement((0, $koRP3$getWrappedElement)(children), {
124
+ // If this item contains a menu button, then it shouldn't be a link.
125
+ if (isMenu) itemProps = {};
126
+ return /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$Fragment), null, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$FocusRing), {
127
+ focusRingClass: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "focus-ring")
128
+ }, /*#__PURE__*/ (0, $koRP3$react).createElement(ElementType, {
124
129
  ...(0, $koRP3$mergeProps)(itemProps, hoverProps),
125
130
  ref: ref,
126
131
  className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-itemLink", {
127
132
  "is-disabled": !isCurrent && isDisabled,
128
133
  "is-hovered": isHovered
129
134
  })
130
- });
131
- return /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$Fragment), null, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$FocusRing), {
132
- focusRingClass: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "focus-ring")
133
- }, element), isCurrent === false && /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$spectrumiconsuiChevronRightSmall), {
135
+ }, children)), isCurrent === false && /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$spectrumiconsuiChevronRightSmall), {
134
136
  UNSAFE_className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-itemSeparator", {
135
137
  "is-reversed": direction === "rtl"
136
138
  })
@@ -153,8 +155,13 @@ function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
153
155
  let { size: size = "L" , isMultiline: isMultiline , children: children , showRoot: showRoot , isDisabled: isDisabled , onAction: onAction , autoFocusCurrent: autoFocusCurrent , ...otherProps } = props;
154
156
  // Not using React.Children.toArray because it mutates the key prop.
155
157
  let childArray = [];
156
- (0, $koRP3$react).Children.forEach(children, (child)=>{
157
- if (/*#__PURE__*/ (0, $koRP3$react).isValidElement(child)) childArray.push(child);
158
+ (0, $koRP3$react).Children.forEach(children, (child, index)=>{
159
+ if (/*#__PURE__*/ (0, $koRP3$react).isValidElement(child)) {
160
+ if (child.key == null) child = /*#__PURE__*/ (0, $koRP3$react).cloneElement(child, {
161
+ key: index
162
+ });
163
+ childArray.push(child);
164
+ }
158
165
  });
159
166
  let domRef = (0, $koRP3$useDOMRef)(ref);
160
167
  let listRef = (0, $koRP3$useRef)(null);
@@ -237,7 +244,8 @@ function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
237
244
  if (key !== selectedKey && onAction) onAction(key);
238
245
  };
239
246
  let menuItem = /*#__PURE__*/ (0, $koRP3$react).createElement((0, $2bfa2c84c665c457$export$c13f210c706eb549), {
240
- key: "menu"
247
+ key: "menu",
248
+ isMenu: true
241
249
  }, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$MenuTrigger), null, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$ActionButton), {
242
250
  "aria-label": "…",
243
251
  isQuiet: true,
@@ -275,6 +283,7 @@ function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
275
283
  key: index,
276
284
  className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-item")
277
285
  }, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $2bfa2c84c665c457$export$c13f210c706eb549), {
286
+ ...child.props,
278
287
  key: key,
279
288
  isCurrent: isCurrent,
280
289
  isDisabled: isDisabled,
package/dist/main.js CHANGED
@@ -115,25 +115,27 @@ $3292ef9f328419fc$export$45a5316056cfac3c = "spectrum-Breadcrumb_3fe6e8";
115
115
 
116
116
 
117
117
  function $d90ab02c74e9be0c$export$c13f210c706eb549(props) {
118
- let { children: children , isCurrent: isCurrent , isDisabled: isDisabled } = props;
118
+ let { children: children , isCurrent: isCurrent , isDisabled: isDisabled , isMenu: isMenu } = props;
119
119
  let { direction: direction } = (0, $8bWUw$reactariai18n.useLocale)();
120
120
  let ref = (0, $8bWUw$react.useRef)(null);
121
+ let ElementType = props.href ? "a" : "span";
121
122
  let { itemProps: itemProps } = (0, $8bWUw$reactariabreadcrumbs.useBreadcrumbItem)({
122
123
  ...props,
123
- elementType: typeof children === "string" ? "span" : "a"
124
+ elementType: ElementType
124
125
  }, ref);
125
126
  let { hoverProps: hoverProps , isHovered: isHovered } = (0, $8bWUw$reactariainteractions.useHover)(props);
126
- let element = /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).cloneElement((0, $8bWUw$reactspectrumutils.getWrappedElement)(children), {
127
+ // If this item contains a menu button, then it shouldn't be a link.
128
+ if (isMenu) itemProps = {};
129
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, $8bWUw$react.Fragment), null, /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, $8bWUw$reactariafocus.FocusRing), {
130
+ focusRingClass: (0, $8bWUw$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3292ef9f328419fc$exports))), "focus-ring")
131
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement(ElementType, {
127
132
  ...(0, $8bWUw$reactariautils.mergeProps)(itemProps, hoverProps),
128
133
  ref: ref,
129
134
  className: (0, $8bWUw$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3292ef9f328419fc$exports))), "spectrum-Breadcrumbs-itemLink", {
130
135
  "is-disabled": !isCurrent && isDisabled,
131
136
  "is-hovered": isHovered
132
137
  })
133
- });
134
- return /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, $8bWUw$react.Fragment), null, /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, $8bWUw$reactariafocus.FocusRing), {
135
- focusRingClass: (0, $8bWUw$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3292ef9f328419fc$exports))), "focus-ring")
136
- }, element), isCurrent === false && /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, ($parcel$interopDefault($8bWUw$spectrumiconsuiChevronRightSmall))), {
138
+ }, children)), isCurrent === false && /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, ($parcel$interopDefault($8bWUw$spectrumiconsuiChevronRightSmall))), {
137
139
  UNSAFE_className: (0, $8bWUw$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3292ef9f328419fc$exports))), "spectrum-Breadcrumbs-itemSeparator", {
138
140
  "is-reversed": direction === "rtl"
139
141
  })
@@ -156,8 +158,13 @@ function $299bf776d9162a05$var$Breadcrumbs(props, ref) {
156
158
  let { size: size = "L" , isMultiline: isMultiline , children: children , showRoot: showRoot , isDisabled: isDisabled , onAction: onAction , autoFocusCurrent: autoFocusCurrent , ...otherProps } = props;
157
159
  // Not using React.Children.toArray because it mutates the key prop.
158
160
  let childArray = [];
159
- (0, ($parcel$interopDefault($8bWUw$react))).Children.forEach(children, (child)=>{
160
- if (/*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).isValidElement(child)) childArray.push(child);
161
+ (0, ($parcel$interopDefault($8bWUw$react))).Children.forEach(children, (child, index)=>{
162
+ if (/*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).isValidElement(child)) {
163
+ if (child.key == null) child = /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).cloneElement(child, {
164
+ key: index
165
+ });
166
+ childArray.push(child);
167
+ }
161
168
  });
162
169
  let domRef = (0, $8bWUw$reactspectrumutils.useDOMRef)(ref);
163
170
  let listRef = (0, $8bWUw$react.useRef)(null);
@@ -240,7 +247,8 @@ function $299bf776d9162a05$var$Breadcrumbs(props, ref) {
240
247
  if (key !== selectedKey && onAction) onAction(key);
241
248
  };
242
249
  let menuItem = /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, $d90ab02c74e9be0c$export$c13f210c706eb549), {
243
- key: "menu"
250
+ key: "menu",
251
+ isMenu: true
244
252
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, $8bWUw$reactspectrummenu.MenuTrigger), null, /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, $8bWUw$reactspectrumbutton.ActionButton), {
245
253
  "aria-label": "…",
246
254
  isQuiet: true,
@@ -278,6 +286,7 @@ function $299bf776d9162a05$var$Breadcrumbs(props, ref) {
278
286
  key: index,
279
287
  className: (0, $8bWUw$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3292ef9f328419fc$exports))), "spectrum-Breadcrumbs-item")
280
288
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($8bWUw$react))).createElement((0, $d90ab02c74e9be0c$export$c13f210c706eb549), {
289
+ ...child.props,
281
290
  key: key,
282
291
  isCurrent: isCurrent,
283
292
  isDisabled: isDisabled,
package/dist/main.js.map CHANGED
@@ -1 +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, useResizeObserver, useValueEffect} from '@react-aria/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\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 let lastChildren = useRef<typeof children | null>(null);\n useLayoutEffect(() => {\n if (children !== lastChildren.current) {\n lastChildren.current = children;\n updateOverflow();\n }\n });\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"}
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, useResizeObserver, useValueEffect} from '@react-aria/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\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, index) => {\n if (React.isValidElement(child)) {\n if (child.key == null) {\n child = React.cloneElement(child, {key: index});\n }\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 let lastChildren = useRef<typeof children | null>(null);\n useLayoutEffect(() => {\n if (children !== lastChildren.current) {\n lastChildren.current = children;\n updateOverflow();\n }\n });\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\" isMenu>\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 {...child.props}\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} 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\ninterface SpectrumBreadcrumbItemProps extends BreadcrumbItemProps {\n isMenu?: boolean\n}\n\nexport function BreadcrumbItem(props: SpectrumBreadcrumbItemProps) {\n let {\n children,\n isCurrent,\n isDisabled,\n isMenu\n } = props;\n\n let {direction} = useLocale();\n let ref = useRef(null);\n let ElementType: React.ElementType = props.href ? 'a' : 'span';\n let {itemProps} = useBreadcrumbItem({\n ...props,\n elementType: ElementType\n }, ref);\n let {hoverProps, isHovered} = useHover(props);\n\n // If this item contains a menu button, then it shouldn't be a link.\n if (isMenu) {\n itemProps = {};\n }\n\n return (\n <Fragment>\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(itemProps, hoverProps)}\n ref={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 {children}\n </ElementType>\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 CHANGED
@@ -1,7 +1,7 @@
1
1
  import "./main.css";
2
2
  import {Item as $37781313afe0968e$re_export$Item} from "@react-stately/collections";
3
3
  import {ActionButton as $koRP3$ActionButton} from "@react-spectrum/button";
4
- import {useDOMRef as $koRP3$useDOMRef, useStyleProps as $koRP3$useStyleProps, classNames as $koRP3$classNames, getWrappedElement as $koRP3$getWrappedElement} from "@react-spectrum/utils";
4
+ import {useDOMRef as $koRP3$useDOMRef, useStyleProps as $koRP3$useStyleProps, classNames as $koRP3$classNames} from "@react-spectrum/utils";
5
5
  import $koRP3$spectrumiconsuiFolderBreadcrumb from "@spectrum-icons/ui/FolderBreadcrumb";
6
6
  import {MenuTrigger as $koRP3$MenuTrigger, Menu as $koRP3$Menu} from "@react-spectrum/menu";
7
7
  import $koRP3$react, {useRef as $koRP3$useRef, useCallback as $koRP3$useCallback, Fragment as $koRP3$Fragment} from "react";
@@ -112,25 +112,27 @@ $48e85557f3729e3d$export$45a5316056cfac3c = "spectrum-Breadcrumb_3fe6e8";
112
112
 
113
113
 
114
114
  function $2bfa2c84c665c457$export$c13f210c706eb549(props) {
115
- let { children: children , isCurrent: isCurrent , isDisabled: isDisabled } = props;
115
+ let { children: children , isCurrent: isCurrent , isDisabled: isDisabled , isMenu: isMenu } = props;
116
116
  let { direction: direction } = (0, $koRP3$useLocale)();
117
117
  let ref = (0, $koRP3$useRef)(null);
118
+ let ElementType = props.href ? "a" : "span";
118
119
  let { itemProps: itemProps } = (0, $koRP3$useBreadcrumbItem)({
119
120
  ...props,
120
- elementType: typeof children === "string" ? "span" : "a"
121
+ elementType: ElementType
121
122
  }, ref);
122
123
  let { hoverProps: hoverProps , isHovered: isHovered } = (0, $koRP3$useHover)(props);
123
- let element = /*#__PURE__*/ (0, $koRP3$react).cloneElement((0, $koRP3$getWrappedElement)(children), {
124
+ // If this item contains a menu button, then it shouldn't be a link.
125
+ if (isMenu) itemProps = {};
126
+ return /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$Fragment), null, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$FocusRing), {
127
+ focusRingClass: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "focus-ring")
128
+ }, /*#__PURE__*/ (0, $koRP3$react).createElement(ElementType, {
124
129
  ...(0, $koRP3$mergeProps)(itemProps, hoverProps),
125
130
  ref: ref,
126
131
  className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-itemLink", {
127
132
  "is-disabled": !isCurrent && isDisabled,
128
133
  "is-hovered": isHovered
129
134
  })
130
- });
131
- return /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$Fragment), null, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$FocusRing), {
132
- focusRingClass: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "focus-ring")
133
- }, element), isCurrent === false && /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$spectrumiconsuiChevronRightSmall), {
135
+ }, children)), isCurrent === false && /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$spectrumiconsuiChevronRightSmall), {
134
136
  UNSAFE_className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-itemSeparator", {
135
137
  "is-reversed": direction === "rtl"
136
138
  })
@@ -153,8 +155,13 @@ function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
153
155
  let { size: size = "L" , isMultiline: isMultiline , children: children , showRoot: showRoot , isDisabled: isDisabled , onAction: onAction , autoFocusCurrent: autoFocusCurrent , ...otherProps } = props;
154
156
  // Not using React.Children.toArray because it mutates the key prop.
155
157
  let childArray = [];
156
- (0, $koRP3$react).Children.forEach(children, (child)=>{
157
- if (/*#__PURE__*/ (0, $koRP3$react).isValidElement(child)) childArray.push(child);
158
+ (0, $koRP3$react).Children.forEach(children, (child, index)=>{
159
+ if (/*#__PURE__*/ (0, $koRP3$react).isValidElement(child)) {
160
+ if (child.key == null) child = /*#__PURE__*/ (0, $koRP3$react).cloneElement(child, {
161
+ key: index
162
+ });
163
+ childArray.push(child);
164
+ }
158
165
  });
159
166
  let domRef = (0, $koRP3$useDOMRef)(ref);
160
167
  let listRef = (0, $koRP3$useRef)(null);
@@ -237,7 +244,8 @@ function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
237
244
  if (key !== selectedKey && onAction) onAction(key);
238
245
  };
239
246
  let menuItem = /*#__PURE__*/ (0, $koRP3$react).createElement((0, $2bfa2c84c665c457$export$c13f210c706eb549), {
240
- key: "menu"
247
+ key: "menu",
248
+ isMenu: true
241
249
  }, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$MenuTrigger), null, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $koRP3$ActionButton), {
242
250
  "aria-label": "…",
243
251
  isQuiet: true,
@@ -275,6 +283,7 @@ function $2adaf67aabd3300b$var$Breadcrumbs(props, ref) {
275
283
  key: index,
276
284
  className: (0, $koRP3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($48e85557f3729e3d$exports))), "spectrum-Breadcrumbs-item")
277
285
  }, /*#__PURE__*/ (0, $koRP3$react).createElement((0, $2bfa2c84c665c457$export$c13f210c706eb549), {
286
+ ...child.props,
278
287
  key: key,
279
288
  isCurrent: isCurrent,
280
289
  isDisabled: isDisabled,
package/dist/module.js.map CHANGED
@@ -1 +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, useResizeObserver, useValueEffect} from '@react-aria/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\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 let lastChildren = useRef<typeof children | null>(null);\n useLayoutEffect(() => {\n if (children !== lastChildren.current) {\n lastChildren.current = children;\n updateOverflow();\n }\n });\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"}
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, useResizeObserver, useValueEffect} from '@react-aria/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\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, index) => {\n if (React.isValidElement(child)) {\n if (child.key == null) {\n child = React.cloneElement(child, {key: index});\n }\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 let lastChildren = useRef<typeof children | null>(null);\n useLayoutEffect(() => {\n if (children !== lastChildren.current) {\n lastChildren.current = children;\n updateOverflow();\n }\n });\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\" isMenu>\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 {...child.props}\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} 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\ninterface SpectrumBreadcrumbItemProps extends BreadcrumbItemProps {\n isMenu?: boolean\n}\n\nexport function BreadcrumbItem(props: SpectrumBreadcrumbItemProps) {\n let {\n children,\n isCurrent,\n isDisabled,\n isMenu\n } = props;\n\n let {direction} = useLocale();\n let ref = useRef(null);\n let ElementType: React.ElementType = props.href ? 'a' : 'span';\n let {itemProps} = useBreadcrumbItem({\n ...props,\n elementType: ElementType\n }, ref);\n let {hoverProps, isHovered} = useHover(props);\n\n // If this item contains a menu button, then it shouldn't be a link.\n if (isMenu) {\n itemProps = {};\n }\n\n return (\n <Fragment>\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(itemProps, hoverProps)}\n ref={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 {children}\n </ElementType>\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 CHANGED
@@ -1 +1 @@
1
- {"mappings":";;ACiPA;;GAEG;AACH,OAAA,IAAI,6JAA4C,CAAC;ACvOjD,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"}
1
+ {"mappings":";;ACqPA;;GAEG;AACH,OAAA,IAAI,6JAA4C,CAAC;AC3OjD,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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/breadcrumbs",
3
- "version": "3.0.0-nightly.2429+f6239e358",
3
+ "version": "3.0.0-nightly.2431+24bffc08c",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,22 +36,22 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/breadcrumbs": "3.0.0-nightly.2429+f6239e358",
40
- "@react-aria/focus": "3.0.0-nightly.2429+f6239e358",
41
- "@react-aria/i18n": "3.0.0-nightly.2429+f6239e358",
42
- "@react-aria/interactions": "3.0.0-nightly.2429+f6239e358",
43
- "@react-aria/utils": "3.0.0-nightly.2429+f6239e358",
44
- "@react-spectrum/button": "3.0.0-nightly.2429+f6239e358",
45
- "@react-spectrum/menu": "3.14.1-nightly.4138+f6239e358",
46
- "@react-spectrum/utils": "3.0.0-nightly.2429+f6239e358",
47
- "@react-stately/collections": "3.0.0-nightly.2429+f6239e358",
48
- "@react-types/breadcrumbs": "3.0.0-nightly.2429+f6239e358",
49
- "@react-types/shared": "3.0.0-nightly.2429+f6239e358",
50
- "@spectrum-icons/ui": "3.0.0-nightly.2429+f6239e358",
39
+ "@react-aria/breadcrumbs": "3.0.0-nightly.2431+24bffc08c",
40
+ "@react-aria/focus": "3.0.0-nightly.2431+24bffc08c",
41
+ "@react-aria/i18n": "3.0.0-nightly.2431+24bffc08c",
42
+ "@react-aria/interactions": "3.0.0-nightly.2431+24bffc08c",
43
+ "@react-aria/utils": "3.0.0-nightly.2431+24bffc08c",
44
+ "@react-spectrum/button": "3.0.0-nightly.2431+24bffc08c",
45
+ "@react-spectrum/menu": "3.14.1-nightly.4140+24bffc08c",
46
+ "@react-spectrum/utils": "3.0.0-nightly.2431+24bffc08c",
47
+ "@react-stately/collections": "3.0.0-nightly.2431+24bffc08c",
48
+ "@react-types/breadcrumbs": "3.0.0-nightly.2431+24bffc08c",
49
+ "@react-types/shared": "3.0.0-nightly.2431+24bffc08c",
50
+ "@spectrum-icons/ui": "3.0.0-nightly.2431+24bffc08c",
51
51
  "@swc/helpers": "^0.5.0"
52
52
  },
53
53
  "devDependencies": {
54
- "@adobe/spectrum-css-temp": "3.0.0-nightly.2429+f6239e358"
54
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.2431+24bffc08c"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@react-spectrum/provider": "^3.0.0",
@@ -61,5 +61,5 @@
61
61
  "publishConfig": {
62
62
  "access": "public"
63
63
  },
64
- "gitHead": "f6239e3581d22f4d093525202d7d1afc160bff42"
64
+ "gitHead": "24bffc08cd4435d0a75c99326883085c3a90b009"
65
65
  }
package/src/BreadcrumbItem.tsx CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  import {BreadcrumbItemProps} from '@react-types/breadcrumbs';
14
14
  import ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall';
15
- import {classNames, getWrappedElement} from '@react-spectrum/utils';
15
+ import {classNames} from '@react-spectrum/utils';
16
16
  import {FocusRing} from '@react-aria/focus';
17
17
  import {mergeProps} from '@react-aria/utils';
18
18
  import React, {Fragment, useRef} from 'react';
@@ -21,42 +21,50 @@ import {useBreadcrumbItem} from '@react-aria/breadcrumbs';
21
21
  import {useHover} from '@react-aria/interactions';
22
22
  import {useLocale} from '@react-aria/i18n';
23
23
 
24
- export function BreadcrumbItem(props: BreadcrumbItemProps) {
24
+ interface SpectrumBreadcrumbItemProps extends BreadcrumbItemProps {
25
+ isMenu?: boolean
26
+ }
27
+
28
+ export function BreadcrumbItem(props: SpectrumBreadcrumbItemProps) {
25
29
  let {
26
30
  children,
27
31
  isCurrent,
28
- isDisabled
32
+ isDisabled,
33
+ isMenu
29
34
  } = props;
30
35
 
31
36
  let {direction} = useLocale();
32
37
  let ref = useRef(null);
38
+ let ElementType: React.ElementType = props.href ? 'a' : 'span';
33
39
  let {itemProps} = useBreadcrumbItem({
34
40
  ...props,
35
- elementType: typeof children === 'string' ? 'span' : 'a'
41
+ elementType: ElementType
36
42
  }, ref);
37
43
  let {hoverProps, isHovered} = useHover(props);
38
44
 
39
- let element = React.cloneElement(
40
- getWrappedElement(children),
41
- {
42
- ...mergeProps(itemProps, hoverProps),
43
- ref,
44
- className:
45
- classNames(
46
- styles,
47
- 'spectrum-Breadcrumbs-itemLink',
48
- {
49
- 'is-disabled': !isCurrent && isDisabled,
50
- 'is-hovered': isHovered
51
- }
52
- )
53
- }
54
- );
45
+ // If this item contains a menu button, then it shouldn't be a link.
46
+ if (isMenu) {
47
+ itemProps = {};
48
+ }
55
49
 
56
50
  return (
57
51
  <Fragment>
58
52
  <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
59
- {element}
53
+ <ElementType
54
+ {...mergeProps(itemProps, hoverProps)}
55
+ ref={ref}
56
+ className={
57
+ classNames(
58
+ styles,
59
+ 'spectrum-Breadcrumbs-itemLink',
60
+ {
61
+ 'is-disabled': !isCurrent && isDisabled,
62
+ 'is-hovered': isHovered
63
+ }
64
+ )
65
+ }>
66
+ {children}
67
+ </ElementType>
60
68
  </FocusRing>
61
69
  {isCurrent === false &&
62
70
  <ChevronRightSmall
package/src/Breadcrumbs.tsx CHANGED
@@ -40,8 +40,11 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
40
40
 
41
41
  // Not using React.Children.toArray because it mutates the key prop.
42
42
  let childArray: ReactElement[] = [];
43
- React.Children.forEach(children, child => {
43
+ React.Children.forEach(children, (child, index) => {
44
44
  if (React.isValidElement(child)) {
45
+ if (child.key == null) {
46
+ child = React.cloneElement(child, {key: index});
47
+ }
45
48
  childArray.push(child);
46
49
  }
47
50
  });
@@ -153,7 +156,7 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
153
156
  };
154
157
 
155
158
  let menuItem = (
156
- <BreadcrumbItem key="menu">
159
+ <BreadcrumbItem key="menu" isMenu>
157
160
  <MenuTrigger>
158
161
  <ActionButton
159
162
  aria-label="…"
@@ -201,6 +204,7 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
201
204
  )
202
205
  }>
203
206
  <BreadcrumbItem
207
+ {...child.props}
204
208
  key={key}
205
209
  isCurrent={isCurrent}
206
210
  isDisabled={isDisabled}