@react-spectrum/s2 0.6.0 → 0.7.1
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.
- package/dist/Accordion.cjs.map +1 -1
- package/dist/Accordion.css +1 -5
- package/dist/Accordion.css.map +1 -1
- package/dist/Accordion.mjs.map +1 -1
- package/dist/ActionBar.cjs +2 -2
- package/dist/ActionBar.css +0 -6
- package/dist/ActionBar.css.map +1 -1
- package/dist/ActionBar.mjs +2 -2
- package/dist/ActionButton.cjs +4 -4
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +0 -6
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +4 -4
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.css +1 -5
- package/dist/ActionButtonGroup.css.map +1 -1
- package/dist/ActionMenu.cjs.map +1 -1
- package/dist/ActionMenu.mjs.map +1 -1
- package/dist/AlertDialog.css +1 -5
- package/dist/AlertDialog.css.map +1 -1
- package/dist/Avatar.cjs.map +1 -1
- package/dist/Avatar.css +1 -5
- package/dist/Avatar.css.map +1 -1
- package/dist/Avatar.mjs.map +1 -1
- package/dist/AvatarGroup.cjs +1 -1
- package/dist/AvatarGroup.cjs.map +1 -1
- package/dist/AvatarGroup.css +0 -6
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup.mjs +1 -1
- package/dist/AvatarGroup.mjs.map +1 -1
- package/dist/Badge.cjs +32 -14
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +26 -8
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +33 -15
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +7 -7
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +0 -6
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +8 -8
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +4 -4
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +0 -6
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +4 -4
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +1 -1
- package/dist/ButtonGroup.cjs.map +1 -1
- package/dist/ButtonGroup.css +1 -5
- package/dist/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup.mjs +1 -1
- package/dist/ButtonGroup.mjs.map +1 -1
- package/dist/Card.cjs +15 -15
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +0 -6
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +16 -16
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +71 -309
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css +1 -5
- package/dist/CardView.css.map +1 -1
- package/dist/CardView.mjs +28 -266
- package/dist/CardView.mjs.map +1 -1
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +1 -5
- package/dist/CenterBaseline.css.map +1 -1
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +1 -1
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +0 -6
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +1 -1
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs.map +1 -1
- package/dist/CheckboxGroup.css +0 -6
- package/dist/CheckboxGroup.css.map +1 -1
- package/dist/CheckboxGroup.mjs.map +1 -1
- package/dist/ClearButton.css +1 -5
- package/dist/ClearButton.css.map +1 -1
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css +1 -5
- package/dist/CloseButton.css.map +1 -1
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs.map +1 -1
- package/dist/ColorArea.css +1 -5
- package/dist/ColorArea.css.map +1 -1
- package/dist/ColorArea.mjs.map +1 -1
- package/dist/ColorField.cjs.map +1 -1
- package/dist/ColorField.css +0 -6
- package/dist/ColorField.css.map +1 -1
- package/dist/ColorField.mjs.map +1 -1
- package/dist/ColorHandle.cjs +3 -3
- package/dist/ColorHandle.css +1 -5
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +3 -3
- package/dist/ColorSlider.cjs.map +1 -1
- package/dist/ColorSlider.css +0 -6
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSlider.mjs.map +1 -1
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +1 -5
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +1 -1
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css +1 -5
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +1 -1
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/ColorWheel.cjs.map +1 -1
- package/dist/ColorWheel.css +1 -5
- package/dist/ColorWheel.css.map +1 -1
- package/dist/ColorWheel.mjs.map +1 -1
- package/dist/ComboBox.cjs +2 -2
- package/dist/ComboBox.css +0 -6
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +2 -2
- package/dist/Content.cjs +3 -1
- package/dist/Content.cjs.map +1 -1
- package/dist/Content.mjs +3 -1
- package/dist/Content.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.cjs.map +1 -1
- package/dist/ContextualHelp.css +0 -6
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/ContextualHelp.mjs.map +1 -1
- package/dist/CustomDialog.css +1 -5
- package/dist/CustomDialog.css.map +1 -1
- package/dist/Dialog.cjs +10 -10
- package/dist/Dialog.css +0 -6
- package/dist/Dialog.css.map +1 -1
- package/dist/Dialog.mjs +10 -10
- package/dist/Disclosure.cjs +2 -2
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +0 -6
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +2 -2
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs.map +1 -1
- package/dist/Divider.css +1 -5
- package/dist/Divider.css.map +1 -1
- package/dist/Divider.mjs.map +1 -1
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +0 -6
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +7 -7
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +0 -6
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +7 -7
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs.map +1 -1
- package/dist/Form.css +1 -5
- package/dist/Form.css.map +1 -1
- package/dist/Form.mjs.map +1 -1
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +0 -6
- package/dist/FullscreenDialog.css.map +1 -1
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +1 -1
- package/dist/IllustratedMessage.cjs.map +1 -1
- package/dist/IllustratedMessage.css +0 -6
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/IllustratedMessage.mjs +1 -1
- package/dist/IllustratedMessage.mjs.map +1 -1
- package/dist/Image.cjs +14 -2
- package/dist/Image.cjs.map +1 -1
- package/dist/Image.css +1 -5
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +15 -3
- package/dist/Image.mjs.map +1 -1
- package/dist/InlineAlert.cjs +1 -1
- package/dist/InlineAlert.css +0 -6
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +1 -1
- package/dist/Link.cjs.map +1 -1
- package/dist/Link.css +0 -6
- package/dist/Link.css.map +1 -1
- package/dist/Link.mjs.map +1 -1
- package/dist/Menu.cjs +20 -8
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +12 -6
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +21 -9
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +0 -6
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs.map +1 -1
- package/dist/Modal.css +1 -5
- package/dist/Modal.css.map +1 -1
- package/dist/NumberField.cjs.map +1 -1
- package/dist/NumberField.css +0 -6
- package/dist/NumberField.css.map +1 -1
- package/dist/NumberField.mjs.map +1 -1
- package/dist/Picker.cjs +95 -70
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +8 -10
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +96 -71
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +1 -3
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +5 -9
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +1 -3
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +0 -6
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/ProgressCircle.cjs.map +1 -1
- package/dist/ProgressCircle.css +1 -5
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/ProgressCircle.mjs.map +1 -1
- package/dist/Provider.css +1 -5
- package/dist/Provider.css.map +1 -1
- package/dist/Radio.css +0 -6
- package/dist/Radio.css.map +1 -1
- package/dist/RadioGroup.cjs.map +1 -1
- package/dist/RadioGroup.css +0 -6
- package/dist/RadioGroup.css.map +1 -1
- package/dist/RadioGroup.mjs.map +1 -1
- package/dist/RangeSlider.cjs.map +1 -1
- package/dist/RangeSlider.mjs.map +1 -1
- package/dist/SearchField.cjs +3 -3
- package/dist/SearchField.cjs.map +1 -1
- package/dist/SearchField.css +0 -6
- package/dist/SearchField.css.map +1 -1
- package/dist/SearchField.mjs +3 -3
- package/dist/SearchField.mjs.map +1 -1
- package/dist/SegmentedControl.cjs +7 -7
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +0 -6
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +8 -8
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +0 -6
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css +0 -6
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +0 -6
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +75 -92
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +10 -8
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +76 -93
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +451 -167
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +208 -122
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +451 -167
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +415 -0
- package/dist/TabsPicker.cjs.map +1 -0
- package/dist/TabsPicker.css +482 -0
- package/dist/TabsPicker.css.map +1 -0
- package/dist/TabsPicker.mjs +409 -0
- package/dist/TabsPicker.mjs.map +1 -0
- package/dist/TagGroup.cjs +13 -13
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +0 -6
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +13 -13
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +1 -1
- package/dist/TextField.cjs.map +1 -1
- package/dist/TextField.css +0 -6
- package/dist/TextField.css.map +1 -1
- package/dist/TextField.mjs +1 -1
- package/dist/TextField.mjs.map +1 -1
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.cjs.map +1 -1
- package/dist/ToggleButton.css +1 -5
- package/dist/ToggleButton.css.map +1 -1
- package/dist/ToggleButton.mjs +3 -3
- package/dist/ToggleButton.mjs.map +1 -1
- package/dist/ToggleButtonGroup.cjs.map +1 -1
- package/dist/ToggleButtonGroup.mjs.map +1 -1
- package/dist/Tooltip.cjs +1 -1
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +0 -6
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +1 -1
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +439 -0
- package/dist/TreeView.cjs.map +1 -0
- package/dist/TreeView.css +608 -0
- package/dist/TreeView.css.map +1 -0
- package/dist/TreeView.mjs +432 -0
- package/dist/TreeView.mjs.map +1 -0
- package/dist/main.cjs +5 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +120 -81
- package/dist/types.d.ts.map +1 -1
- package/icons/3DMaterial.cjs.map +1 -1
- package/icons/3DMaterial.mjs.map +1 -1
- package/icons/ABC.cjs +36 -0
- package/icons/ABC.cjs.map +1 -0
- package/icons/ABC.mjs +25 -0
- package/icons/ABC.mjs.map +1 -0
- package/icons/AlertDiamond.cjs.map +1 -1
- package/icons/AlertDiamond.mjs.map +1 -1
- package/icons/Animation.cjs.map +1 -1
- package/icons/Animation.mjs.map +1 -1
- package/icons/AnimationNo.cjs.map +1 -1
- package/icons/AnimationNo.mjs.map +1 -1
- package/icons/App.cjs +42 -0
- package/icons/App.cjs.map +1 -0
- package/icons/App.mjs +31 -0
- package/icons/App.mjs.map +1 -0
- package/icons/AspectRatio.cjs.map +1 -1
- package/icons/AspectRatio.mjs.map +1 -1
- package/icons/Asset.cjs +1 -5
- package/icons/Asset.cjs.map +1 -1
- package/icons/Asset.mjs +1 -5
- package/icons/Asset.mjs.map +1 -1
- package/icons/AudioWave.cjs.map +1 -1
- package/icons/AudioWave.mjs.map +1 -1
- package/icons/BadgeVerified.cjs.map +1 -1
- package/icons/BadgeVerified.mjs.map +1 -1
- package/icons/Bell.cjs.map +1 -1
- package/icons/Bell.mjs.map +1 -1
- package/icons/Bookmark.cjs +36 -0
- package/icons/Bookmark.cjs.map +1 -0
- package/icons/Bookmark.mjs +25 -0
- package/icons/Bookmark.mjs.map +1 -0
- package/icons/Brand.cjs.map +1 -1
- package/icons/Brand.mjs.map +1 -1
- package/icons/Building.cjs +62 -0
- package/icons/Building.cjs.map +1 -0
- package/icons/Building.mjs +51 -0
- package/icons/Building.mjs.map +1 -0
- package/icons/CalendarEdit.cjs.map +1 -1
- package/icons/CalendarEdit.mjs.map +1 -1
- package/icons/CallCenter.cjs +36 -0
- package/icons/CallCenter.cjs.map +1 -0
- package/icons/CallCenter.mjs +25 -0
- package/icons/CallCenter.mjs.map +1 -0
- package/icons/CameraProperties.cjs.map +1 -1
- package/icons/CameraProperties.mjs.map +1 -1
- package/icons/Channel.cjs.map +1 -1
- package/icons/Channel.mjs.map +1 -1
- package/icons/ChartBarVert.cjs +36 -0
- package/icons/ChartBarVert.cjs.map +1 -0
- package/icons/ChartBarVert.mjs +25 -0
- package/icons/ChartBarVert.mjs.map +1 -0
- package/icons/ChartPie.cjs +36 -0
- package/icons/ChartPie.cjs.map +1 -0
- package/icons/ChartPie.mjs +25 -0
- package/icons/ChartPie.mjs.map +1 -0
- package/icons/ChartTrend.cjs +36 -0
- package/icons/ChartTrend.cjs.map +1 -0
- package/icons/ChartTrend.mjs +25 -0
- package/icons/ChartTrend.mjs.map +1 -0
- package/icons/Chat.cjs +36 -0
- package/icons/Chat.cjs.map +1 -0
- package/icons/Chat.mjs +25 -0
- package/icons/Chat.mjs.map +1 -0
- package/icons/CheckBox.cjs.map +1 -1
- package/icons/CheckBox.mjs.map +1 -1
- package/icons/Checkmark.cjs +8 -8
- package/icons/Checkmark.cjs.map +1 -1
- package/icons/Checkmark.mjs +8 -8
- package/icons/Checkmark.mjs.map +1 -1
- package/icons/ChevronDoubleLeft.cjs +42 -0
- package/icons/ChevronDoubleLeft.cjs.map +1 -0
- package/icons/ChevronDoubleLeft.d.ts +5 -0
- package/icons/ChevronDoubleLeft.mjs +31 -0
- package/icons/ChevronDoubleLeft.mjs.map +1 -0
- package/icons/ChevronDoubleRight.cjs +42 -0
- package/icons/ChevronDoubleRight.cjs.map +1 -0
- package/icons/ChevronDoubleRight.d.ts +5 -0
- package/icons/ChevronDoubleRight.mjs +31 -0
- package/icons/ChevronDoubleRight.mjs.map +1 -0
- package/icons/ChevronDown.cjs +8 -8
- package/icons/ChevronDown.cjs.map +1 -1
- package/icons/ChevronDown.mjs +8 -8
- package/icons/ChevronDown.mjs.map +1 -1
- package/icons/ChevronLeft.cjs.map +1 -1
- package/icons/ChevronLeft.mjs.map +1 -1
- package/icons/ChevronRight.cjs.map +1 -1
- package/icons/ChevronRight.mjs.map +1 -1
- package/icons/ChevronUp.cjs +36 -0
- package/icons/ChevronUp.cjs.map +1 -0
- package/icons/ChevronUp.d.ts +5 -0
- package/icons/ChevronUp.mjs +25 -0
- package/icons/ChevronUp.mjs.map +1 -0
- package/icons/Circle.cjs.map +1 -1
- package/icons/Circle.mjs.map +1 -1
- package/icons/Close.cjs.map +1 -1
- package/icons/Close.mjs.map +1 -1
- package/icons/CloseCaptions.cjs.map +1 -1
- package/icons/CloseCaptions.mjs.map +1 -1
- package/icons/Code.cjs +36 -0
- package/icons/Code.cjs.map +1 -0
- package/icons/Code.d.ts +5 -0
- package/icons/Code.mjs +25 -0
- package/icons/Code.mjs.map +1 -0
- package/icons/Collection.cjs.map +1 -1
- package/icons/Collection.mjs.map +1 -1
- package/icons/ColorHarmony.cjs.map +1 -1
- package/icons/ColorHarmony.mjs.map +1 -1
- package/icons/CommentCheckmark.cjs.map +1 -1
- package/icons/CommentCheckmark.mjs.map +1 -1
- package/icons/CommentHide.cjs.map +1 -1
- package/icons/CommentHide.mjs.map +1 -1
- package/icons/CommentRemove.cjs.map +1 -1
- package/icons/CommentRemove.mjs.map +1 -1
- package/icons/Compare.cjs +42 -0
- package/icons/Compare.cjs.map +1 -0
- package/icons/Compare.d.ts +5 -0
- package/icons/Compare.mjs +31 -0
- package/icons/Compare.mjs.map +1 -0
- package/icons/ContextualTaskBar.cjs.map +1 -1
- package/icons/ContextualTaskBar.mjs.map +1 -1
- package/icons/CornerRadiusBottomLeft.cjs.map +1 -1
- package/icons/CornerRadiusBottomLeft.mjs.map +1 -1
- package/icons/CornerRadiusBottomRight.cjs.map +1 -1
- package/icons/CornerRadiusBottomRight.mjs.map +1 -1
- package/icons/CornerRadiusTopLeft.cjs.map +1 -1
- package/icons/CornerRadiusTopLeft.mjs.map +1 -1
- package/icons/CornerRadiusTopRight.cjs.map +1 -1
- package/icons/CornerRadiusTopRight.mjs.map +1 -1
- package/icons/CursorClick.cjs.map +1 -1
- package/icons/CursorClick.mjs.map +1 -1
- package/icons/Data.cjs +1 -1
- package/icons/Data.cjs.map +1 -1
- package/icons/Data.mjs +1 -1
- package/icons/Data.mjs.map +1 -1
- package/icons/DataAdd.cjs.map +1 -1
- package/icons/DataAdd.mjs.map +1 -1
- package/icons/DataRefresh.cjs +42 -0
- package/icons/DataRefresh.cjs.map +1 -0
- package/icons/DataRefresh.d.ts +5 -0
- package/icons/DataRefresh.mjs +31 -0
- package/icons/DataRefresh.mjs.map +1 -0
- package/icons/DataSettings.cjs +2 -2
- package/icons/DataSettings.cjs.map +1 -1
- package/icons/DataSettings.mjs +2 -2
- package/icons/DataSettings.mjs.map +1 -1
- package/icons/DataUpload.cjs +2 -2
- package/icons/DataUpload.cjs.map +1 -1
- package/icons/DataUpload.mjs +2 -2
- package/icons/DataUpload.mjs.map +1 -1
- package/icons/DeviceTablet.cjs.map +1 -1
- package/icons/DeviceTablet.mjs.map +1 -1
- package/icons/Draw.cjs.map +1 -1
- package/icons/Draw.mjs.map +1 -1
- package/icons/Edit.cjs.map +1 -1
- package/icons/Edit.mjs.map +1 -1
- package/icons/EditNo.cjs.map +1 -1
- package/icons/EditNo.mjs.map +1 -1
- package/icons/Email.cjs.map +1 -1
- package/icons/Email.mjs.map +1 -1
- package/icons/Enterprise.cjs +46 -0
- package/icons/Enterprise.cjs.map +1 -0
- package/icons/Enterprise.d.ts +5 -0
- package/icons/Enterprise.mjs +35 -0
- package/icons/Enterprise.mjs.map +1 -0
- package/icons/Export.cjs +42 -0
- package/icons/Export.cjs.map +1 -0
- package/icons/Export.d.ts +5 -0
- package/icons/Export.mjs +31 -0
- package/icons/Export.mjs.map +1 -0
- package/icons/Filter.cjs.map +1 -1
- package/icons/Filter.mjs.map +1 -1
- package/icons/FlipHorizontal.cjs +1 -21
- package/icons/FlipHorizontal.cjs.map +1 -1
- package/icons/FlipHorizontal.mjs +1 -21
- package/icons/FlipHorizontal.mjs.map +1 -1
- package/icons/FlipVertical.cjs +1 -21
- package/icons/FlipVertical.cjs.map +1 -1
- package/icons/FlipVertical.mjs +1 -21
- package/icons/FlipVertical.mjs.map +1 -1
- package/icons/FolderMoveTo.cjs.map +1 -1
- package/icons/FolderMoveTo.mjs.map +1 -1
- package/icons/FolderSearch.cjs +42 -0
- package/icons/FolderSearch.cjs.map +1 -0
- package/icons/FolderSearch.d.ts +5 -0
- package/icons/FolderSearch.mjs +31 -0
- package/icons/FolderSearch.mjs.map +1 -0
- package/icons/FontPicker.cjs.map +1 -1
- package/icons/FontPicker.mjs.map +1 -1
- package/icons/GlobeGrid.cjs.map +1 -1
- package/icons/GlobeGrid.mjs.map +1 -1
- package/icons/GradientHorizontal.cjs.map +1 -1
- package/icons/GradientHorizontal.mjs.map +1 -1
- package/icons/GridsAndRulers.cjs.map +1 -1
- package/icons/GridsAndRulers.mjs.map +1 -1
- package/icons/Icon.cjs.map +1 -1
- package/icons/Icon.mjs.map +1 -1
- package/icons/Image.cjs.map +1 -1
- package/icons/Image.mjs.map +1 -1
- package/icons/ImageAdd.cjs +1 -5
- package/icons/ImageAdd.cjs.map +1 -1
- package/icons/ImageAdd.mjs +1 -5
- package/icons/ImageAdd.mjs.map +1 -1
- package/icons/ImageBackgroundRemove.cjs.map +1 -1
- package/icons/ImageBackgroundRemove.mjs.map +1 -1
- package/icons/Images.cjs.map +1 -1
- package/icons/Images.mjs.map +1 -1
- package/icons/Import.cjs +42 -0
- package/icons/Import.cjs.map +1 -0
- package/icons/Import.d.ts +5 -0
- package/icons/Import.mjs +31 -0
- package/icons/Import.mjs.map +1 -0
- package/icons/Key.cjs +36 -0
- package/icons/Key.cjs.map +1 -0
- package/icons/Key.d.ts +5 -0
- package/icons/Key.mjs +25 -0
- package/icons/Key.mjs.map +1 -0
- package/icons/ListMultiSelect.cjs.map +1 -1
- package/icons/ListMultiSelect.mjs.map +1 -1
- package/icons/ListNumbered.cjs.map +1 -1
- package/icons/ListNumbered.mjs.map +1 -1
- package/icons/Logo.cjs.map +1 -1
- package/icons/Logo.mjs.map +1 -1
- package/icons/Market.cjs.map +1 -1
- package/icons/Market.mjs.map +1 -1
- package/icons/Microphone.cjs.map +1 -1
- package/icons/Microphone.mjs.map +1 -1
- package/icons/MicrophoneOff.cjs.map +1 -1
- package/icons/MicrophoneOff.mjs.map +1 -1
- package/icons/MusicNote.cjs.map +1 -1
- package/icons/MusicNote.mjs.map +1 -1
- package/icons/OrientationPortrait.cjs.map +1 -1
- package/icons/OrientationPortrait.mjs.map +1 -1
- package/icons/Pause.cjs.map +1 -1
- package/icons/Pause.mjs.map +1 -1
- package/icons/PauseCircle.cjs.map +1 -1
- package/icons/PauseCircle.mjs.map +1 -1
- package/icons/PeopleGroup.cjs +36 -0
- package/icons/PeopleGroup.cjs.map +1 -0
- package/icons/PeopleGroup.d.ts +5 -0
- package/icons/PeopleGroup.mjs +25 -0
- package/icons/PeopleGroup.mjs.map +1 -0
- package/icons/Percentage.cjs.map +1 -1
- package/icons/Percentage.mjs.map +1 -1
- package/icons/PinOff.cjs.map +1 -1
- package/icons/PinOff.mjs.map +1 -1
- package/icons/PinOn.cjs.map +1 -1
- package/icons/PinOn.mjs.map +1 -1
- package/icons/Play.cjs.map +1 -1
- package/icons/Play.mjs.map +1 -1
- package/icons/PluginGear.cjs.map +1 -1
- package/icons/PluginGear.mjs.map +1 -1
- package/icons/Polygon6.cjs.map +1 -1
- package/icons/Polygon6.mjs.map +1 -1
- package/icons/Publish.cjs.map +1 -1
- package/icons/Publish.mjs.map +1 -1
- package/icons/PublishNo.cjs.map +1 -1
- package/icons/PublishNo.mjs.map +1 -1
- package/icons/RadioButton.cjs.map +1 -1
- package/icons/RadioButton.mjs.map +1 -1
- package/icons/RectangleHoriz.cjs.map +1 -1
- package/icons/RectangleHoriz.mjs.map +1 -1
- package/icons/RocketQuickActions.cjs.map +1 -1
- package/icons/RocketQuickActions.mjs.map +1 -1
- package/icons/RotateCW.cjs.map +1 -1
- package/icons/RotateCW.mjs.map +1 -1
- package/icons/Ruler.cjs.map +1 -1
- package/icons/Ruler.mjs.map +1 -1
- package/icons/SaveFloppy.cjs +36 -0
- package/icons/SaveFloppy.cjs.map +1 -0
- package/icons/SaveFloppy.d.ts +5 -0
- package/icons/SaveFloppy.mjs +25 -0
- package/icons/SaveFloppy.mjs.map +1 -0
- package/icons/Select.cjs.map +1 -1
- package/icons/Select.mjs.map +1 -1
- package/icons/Send.cjs.map +1 -1
- package/icons/Send.mjs.map +1 -1
- package/icons/Shuffle.cjs.map +1 -1
- package/icons/Shuffle.mjs.map +1 -1
- package/icons/Skeleton.cjs +8 -6
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +3 -5
- package/icons/Skeleton.css.map +1 -1
- package/icons/Skeleton.mjs +9 -7
- package/icons/Skeleton.mjs.map +1 -1
- package/icons/SlowConnectionCircle.cjs.map +1 -1
- package/icons/SlowConnectionCircle.mjs.map +1 -1
- package/icons/SpeedFast.cjs +36 -0
- package/icons/SpeedFast.cjs.map +1 -0
- package/icons/SpeedFast.d.ts +5 -0
- package/icons/SpeedFast.mjs +25 -0
- package/icons/SpeedFast.mjs.map +1 -0
- package/icons/StepBackward.cjs.map +1 -1
- package/icons/StepBackward.mjs.map +1 -1
- package/icons/StepForward.cjs.map +1 -1
- package/icons/StepForward.mjs.map +1 -1
- package/icons/Table.cjs.map +1 -1
- package/icons/Table.mjs.map +1 -1
- package/icons/Tag.cjs.map +1 -1
- package/icons/Tag.mjs.map +1 -1
- package/icons/Target.cjs.map +1 -1
- package/icons/Target.mjs.map +1 -1
- package/icons/TextBold.cjs.map +1 -1
- package/icons/TextBold.mjs.map +1 -1
- package/icons/TextHighlight.cjs.map +1 -1
- package/icons/TextHighlight.mjs.map +1 -1
- package/icons/TextIncrease.cjs.map +1 -1
- package/icons/TextIncrease.mjs.map +1 -1
- package/icons/TextNumbers.cjs.map +1 -1
- package/icons/TextNumbers.mjs.map +1 -1
- package/icons/TextParagraph.cjs.map +1 -1
- package/icons/TextParagraph.mjs.map +1 -1
- package/icons/TextReplaceComment.cjs.map +1 -1
- package/icons/TextReplaceComment.mjs.map +1 -1
- package/icons/Tools.cjs.map +1 -1
- package/icons/Tools.mjs.map +1 -1
- package/icons/TouchOneFingerSwipeLeftRight.cjs.map +1 -1
- package/icons/TouchOneFingerSwipeLeftRight.mjs.map +1 -1
- package/icons/Transcript.cjs.map +1 -1
- package/icons/Transcript.mjs.map +1 -1
- package/icons/Translate.cjs.map +1 -1
- package/icons/Translate.mjs.map +1 -1
- package/icons/UserAvatarCursor.cjs.map +1 -1
- package/icons/UserAvatarCursor.mjs.map +1 -1
- package/icons/UserEdit.cjs.map +1 -1
- package/icons/UserEdit.mjs.map +1 -1
- package/icons/UserGroup.cjs.map +1 -1
- package/icons/UserGroup.mjs.map +1 -1
- package/icons/UserSettings.cjs +44 -0
- package/icons/UserSettings.cjs.map +1 -0
- package/icons/UserSettings.d.ts +5 -0
- package/icons/UserSettings.mjs +33 -0
- package/icons/UserSettings.mjs.map +1 -0
- package/icons/VectorDraw.cjs.map +1 -1
- package/icons/VectorDraw.mjs.map +1 -1
- package/icons/ViewGridFluid.cjs +36 -0
- package/icons/ViewGridFluid.cjs.map +1 -0
- package/icons/ViewGridFluid.d.ts +5 -0
- package/icons/ViewGridFluid.mjs +25 -0
- package/icons/ViewGridFluid.mjs.map +1 -0
- package/icons/ZoomIn.cjs.map +1 -1
- package/icons/ZoomIn.mjs.map +1 -1
- package/icons/ZoomOut.cjs.map +1 -1
- package/icons/ZoomOut.mjs.map +1 -1
- package/package.json +17 -18
- package/src/Accordion.tsx +1 -1
- package/src/ActionButton.tsx +2 -2
- package/src/ActionMenu.tsx +1 -1
- package/src/Avatar.tsx +1 -1
- package/src/AvatarGroup.tsx +1 -1
- package/src/Badge.tsx +27 -8
- package/src/Breadcrumbs.tsx +13 -13
- package/src/Button.tsx +4 -4
- package/src/ButtonGroup.tsx +1 -1
- package/src/Card.tsx +2 -2
- package/src/CardView.tsx +18 -366
- package/src/Checkbox.tsx +1 -1
- package/src/CheckboxGroup.tsx +2 -2
- package/src/CloseButton.tsx +1 -1
- package/src/ColorArea.tsx +1 -1
- package/src/ColorField.tsx +1 -1
- package/src/ColorSlider.tsx +1 -1
- package/src/ColorSwatch.tsx +2 -2
- package/src/ColorSwatchPicker.tsx +1 -2
- package/src/ColorWheel.tsx +1 -1
- package/src/Content.tsx +11 -9
- package/src/ContextualHelp.tsx +2 -2
- package/src/Disclosure.tsx +1 -1
- package/src/Divider.tsx +1 -1
- package/src/DropZone.tsx +2 -2
- package/src/Field.tsx +1 -1
- package/src/Form.tsx +2 -2
- package/src/Icon.tsx +2 -2
- package/src/IllustratedMessage.tsx +1 -1
- package/src/Image.tsx +19 -5
- package/src/Link.tsx +2 -2
- package/src/Menu.tsx +9 -4
- package/src/Meter.tsx +1 -1
- package/src/NumberField.tsx +1 -1
- package/src/Picker.tsx +81 -60
- package/src/Popover.tsx +2 -1
- package/src/ProgressBar.tsx +1 -1
- package/src/ProgressCircle.tsx +1 -1
- package/src/RadioGroup.tsx +2 -2
- package/src/RangeSlider.tsx +1 -1
- package/src/SearchField.tsx +1 -1
- package/src/SegmentedControl.tsx +6 -9
- package/src/Skeleton.tsx +6 -8
- package/src/Slider.tsx +1 -1
- package/src/StatusLight.tsx +1 -1
- package/src/Switch.tsx +1 -1
- package/src/TableView.tsx +67 -71
- package/src/Tabs.tsx +451 -145
- package/src/TabsPicker.tsx +350 -0
- package/src/TagGroup.tsx +4 -4
- package/src/TextField.tsx +2 -2
- package/src/ToggleButton.tsx +2 -2
- package/src/ToggleButtonGroup.tsx +1 -1
- package/src/Tooltip.tsx +4 -4
- package/src/TreeView.tsx +450 -0
- package/src/index.ts +2 -0
- package/src/style-utils.ts +0 -1
- package/style/__tests__/style-macro.test.js +3 -7
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/style-macro.cjs +5 -3
- package/style/dist/style-macro.cjs.map +1 -1
- package/style/dist/style-macro.mjs +5 -3
- package/style/dist/style-macro.mjs.map +1 -1
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +0 -1
- package/style/style-macro.ts +9 -3
- package/icons/CloudStateDefault.cjs +0 -36
- package/icons/CloudStateDefault.cjs.map +0 -1
- package/icons/CloudStateDefault.mjs +0 -25
- package/icons/CloudStateDefault.mjs.map +0 -1
- package/icons/CloudStateDisconnected.cjs +0 -36
- package/icons/CloudStateDisconnected.cjs.map +0 -1
- package/icons/CloudStateDisconnected.mjs +0 -25
- package/icons/CloudStateDisconnected.mjs.map +0 -1
- package/icons/CloudStateError.cjs +0 -36
- package/icons/CloudStateError.cjs.map +0 -1
- package/icons/CloudStateError.mjs +0 -25
- package/icons/CloudStateError.mjs.map +0 -1
- package/icons/CloudStateErrorRed.cjs +0 -46
- package/icons/CloudStateErrorRed.cjs.map +0 -1
- package/icons/CloudStateErrorRed.mjs +0 -35
- package/icons/CloudStateErrorRed.mjs.map +0 -1
- package/icons/CloudStateInProgress.cjs +0 -36
- package/icons/CloudStateInProgress.cjs.map +0 -1
- package/icons/CloudStateInProgress.mjs +0 -25
- package/icons/CloudStateInProgress.mjs.map +0 -1
- package/icons/CloudStateOnline.cjs +0 -50
- package/icons/CloudStateOnline.cjs.map +0 -1
- package/icons/CloudStateOnline.mjs +0 -39
- package/icons/CloudStateOnline.mjs.map +0 -1
- package/icons/CloudStatePaused.cjs +0 -36
- package/icons/CloudStatePaused.cjs.map +0 -1
- package/icons/CloudStatePaused.mjs +0 -25
- package/icons/CloudStatePaused.mjs.map +0 -1
- package/icons/CloudStatePending.cjs +0 -42
- package/icons/CloudStatePending.cjs.map +0 -1
- package/icons/CloudStatePending.mjs +0 -31
- package/icons/CloudStatePending.mjs.map +0 -1
- package/icons/CloudStateSlowConnection.cjs +0 -36
- package/icons/CloudStateSlowConnection.cjs.map +0 -1
- package/icons/CloudStateSlowConnection.mjs +0 -25
- package/icons/CloudStateSlowConnection.mjs.map +0 -1
- /package/icons/{CloudStateDefault.d.ts → ABC.d.ts} +0 -0
- /package/icons/{CloudStateDisconnected.d.ts → App.d.ts} +0 -0
- /package/icons/{CloudStateError.d.ts → Bookmark.d.ts} +0 -0
- /package/icons/{CloudStateErrorRed.d.ts → Building.d.ts} +0 -0
- /package/icons/{CloudStateInProgress.d.ts → CallCenter.d.ts} +0 -0
- /package/icons/{CloudStateOnline.d.ts → ChartBarVert.d.ts} +0 -0
- /package/icons/{CloudStatePaused.d.ts → ChartPie.d.ts} +0 -0
- /package/icons/{CloudStatePending.d.ts → ChartTrend.d.ts} +0 -0
- /package/icons/{CloudStateSlowConnection.d.ts → Chat.d.ts} +0 -0
package/dist/Badge.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA+CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuIC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,sBACZ,eAAe,QACf,GAAG,YACJ,GAAG,QAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,OAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBACZ,QAAQ;;;;;;;;;;;sBAOL;sCAAC;oBAAY;gBAClB;aAAE;YACF;gBAAC,CAAA,GAAA,kBAAa;gBAAG,CAAC;aAAE;YACpB;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gBAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gBAAC;gBACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;gBAC9B,MAAK;gBACL,WAAW,AAAC,CAAA,OAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;6BAAC;0BAAS;+BAAM;gBAAS,GAAG,OAAM,MAAM;gBAC1F,OAAO,OAAM,YAAY;gBACzB,KAAK;0BAEH,OAAO,aAAa,YAAY,2BAC5B,gBAAC,CAAA,GAAA,yCAAG;8BAAG;qBACP;;;;AAMhB","sources":["packages/@react-spectrum/s2/src/Badge.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, TextContext as RACTextContext, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline',\n /**\n * Sets the text behavior for the contents.\n * @default 'wrap'\n */\n overflowMode?: 'wrap' | 'truncate'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: {\n default: 'baseline',\n ':has([slot=icon]:only-child)': 'center'\n },\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n chartreuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n chartreuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-subtle',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-subtle',\n red: 'red-subtle',\n orange: 'orange-subtle',\n yellow: 'yellow-subtle',\n chartreuse: 'chartreuse-subtle',\n celery: 'celery-subtle',\n green: 'green-subtle',\n seafoam: 'seafoam-subtle',\n cyan: 'cyan-subtle',\n blue: 'blue-subtle',\n indigo: 'indigo-subtle',\n purple: 'purple-subtle',\n fuchsia: 'fuchsia-subtle',\n magenta: 'magenta-subtle',\n pink: 'pink-subtle',\n turquoise: 'turquoise-subtle',\n brown: 'brown-subtle',\n cinnamon: 'cinnamon-subtle',\n silver: 'silver-subtle'\n }\n },\n outline: 'layer-2'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nexport const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n overflowMode = 'wrap',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n overflowX: 'hidden',\n overflowY: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: {overflowMode: {truncate: 'nowrap', wrap: 'normal'}}\n })({overflowMode})\n }],\n [RACTextContext, {}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <SkeletonWrapper>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n style={props.UNSAFE_style}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </SkeletonWrapper>\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"Badge.mjs.map"}
|
package/dist/Breadcrumbs.cjs
CHANGED
|
@@ -10,8 +10,8 @@ var $PCemd$reactjsxruntime = require("react/jsx-runtime");
|
|
|
10
10
|
var $PCemd$react = require("react");
|
|
11
11
|
var $PCemd$reactariacomponents = require("react-aria-components");
|
|
12
12
|
var $PCemd$reactaria = require("react-aria");
|
|
13
|
-
var $PCemd$reactspectrumutils = require("@react-spectrum/utils");
|
|
14
13
|
var $PCemd$reactariautils = require("@react-aria/utils");
|
|
14
|
+
var $PCemd$reactspectrumutils = require("@react-spectrum/utils");
|
|
15
15
|
var $PCemd$reactariai18n = require("@react-aria/i18n");
|
|
16
16
|
|
|
17
17
|
|
|
@@ -137,8 +137,8 @@ let $4130f4e17f7081aa$var$BreadcrumbMenu = (props)=>{
|
|
|
137
137
|
let { direction: direction } = (0, $PCemd$reactaria.useLocale)();
|
|
138
138
|
let { size: size, isDisabled: isDisabled } = (0, $PCemd$react.useContext)($4130f4e17f7081aa$var$InternalBreadcrumbsContext);
|
|
139
139
|
let label = stringFormatter.format('breadcrumbs.more');
|
|
140
|
-
return /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.
|
|
141
|
-
value: (0, $PCemd$reactariacomponents.
|
|
140
|
+
return /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.CollectionRendererContext).Provider, {
|
|
141
|
+
value: (0, $PCemd$reactariacomponents.DefaultCollectionRenderer),
|
|
142
142
|
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsxs)("li", {
|
|
143
143
|
className: $4130f4e17f7081aa$var$breadcrumbStyles({
|
|
144
144
|
size: size,
|
|
@@ -186,9 +186,9 @@ let $4130f4e17f7081aa$var$HiddenBreadcrumbs = function(props) {
|
|
|
186
186
|
let { listRef: listRef, items: items, size: size } = props;
|
|
187
187
|
return /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsxs)("div", {
|
|
188
188
|
// @ts-ignore
|
|
189
|
-
inert:
|
|
189
|
+
inert: (0, $PCemd$reactariautils.inertValue)(true),
|
|
190
190
|
ref: listRef,
|
|
191
|
-
className: "
|
|
191
|
+
className: " _0-17zqamw i-17zqamw j-17zqamw _8-17zqamw Va Ya _aa __Fb __wb __xb _L-3t1x",
|
|
192
192
|
children: [
|
|
193
193
|
items.map((item, idx)=>{
|
|
194
194
|
// pull off individual props as an allow list, don't want refs or other props getting through
|
|
@@ -356,7 +356,7 @@ const $4130f4e17f7081aa$var$currentStyles = function anonymous(props) {
|
|
|
356
356
|
return rules;
|
|
357
357
|
};
|
|
358
358
|
// TODO: support user heading size customization, for now just set it to large
|
|
359
|
-
const $4130f4e17f7081aa$var$heading = "
|
|
359
|
+
const $4130f4e17f7081aa$var$heading = " Aa Ba ya za _da _d-enzrfpb _d-enzwzjc _d-enzykdd _d-enzzrge _d-eo0c6sf _d-1uotwbwg _d-bc1l9oh _en _ebo _fe _ga _g-1x99dlob ao";
|
|
360
360
|
const $4130f4e17f7081aa$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ (0, $PCemd$react.forwardRef)(function Breadcrumb({ children: children, ...props }, ref) {
|
|
361
361
|
let { href: href, target: target, rel: rel, download: download, ping: ping, referrerPolicy: referrerPolicy } = props;
|
|
362
362
|
let { size: size = 'M' } = (0, $PCemd$react.useContext)($4130f4e17f7081aa$var$InternalBreadcrumbsContext) ?? {};
|
|
@@ -432,7 +432,7 @@ function $4130f4e17f7081aa$var$CollapsingCollection({ children: children, contai
|
|
|
432
432
|
containerRef: containerRef,
|
|
433
433
|
onAction: onAction
|
|
434
434
|
},
|
|
435
|
-
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.
|
|
435
|
+
children: /*#__PURE__*/ (0, $PCemd$reactjsxruntime.jsx)((0, $PCemd$reactariacomponents.CollectionRendererContext).Provider, {
|
|
436
436
|
value: $4130f4e17f7081aa$var$CollapsingCollectionRenderer,
|
|
437
437
|
children: children
|
|
438
438
|
})
|
package/dist/Breadcrumbs.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {ActionButton} from './ActionButton';\nimport {\n Breadcrumb as AriaBreadcrumb,\n BreadcrumbsProps as AriaBreadcrumbsProps,\n CollectionRenderer,\n ContextValue,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs,\n UNSTABLE_CollectionRendererContext,\n UNSTABLE_DefaultCollectionRenderer\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\ninterface BreadcrumbsStyleProps {\n /**\n * Size of the Breadcrumbs including spacing and layout.\n *\n * @default 'M'\n */\n size?: 'M' | 'L',\n /** Whether the breadcrumbs are disabled. */\n isDisabled?: boolean\n /**\n * Whether to place the last Breadcrumb item onto a new line.\n */\n // TODO: isMultiline?: boolean\n /** Whether to always show the root item if the items are collapsed. */\n // TODO: showRoot?: boolean,\n}\n\nexport interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n /** The children of the Breadcrumbs. */\n children?: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\n position: 'relative',\n display: 'flex',\n justifyContent: 'start',\n listStyleType: 'none',\n flexWrap: 'nowrap',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 0,\n gap: {\n size: {\n // TODO: why do these scale but other spacings don't?\n M: size(6), // breadcrumbs-text-to-separator-medium\n L: size(9) // breadcrumbs-text-to-separator-large\n }\n },\n padding: 0,\n transition: 'default',\n marginTop: 0,\n marginBottom: 0,\n marginStart: {\n size: {\n M: size(6),\n L: size(9)\n }\n }\n}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nexport const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);\n let domRef = useDOMRef(ref);\n let {\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size = 'M',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n return (\n <Provider\n values={[\n [InternalBreadcrumbsContext, {size, isDisabled}]\n ]}>\n <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n <RACBreadcrumbs\n {...otherProps}\n isDisabled={isDisabled}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size\n }, styles)}>\n {children}\n </RACBreadcrumbs>\n </CollapsingCollection>\n </Provider>\n );\n});\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {items, onAction} = props;\n let {direction} = useLocale();\n let {size, isDisabled} = useContext(InternalBreadcrumbsContext);\n let label = stringFormatter.format('breadcrumbs.more');\n return (\n <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>\n <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n <MenuTrigger>\n <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n <Menu items={items} onAction={onAction}>\n {(item: Node<any>) => (\n <MenuItem\n {...item.props.originalProps}\n key={item.key}>\n <Text slot=\"label\">\n {item.props.children({size, isCurrent: false, isMenu: true})}\n </Text>\n </MenuItem>\n )}\n </Menu>\n </MenuTrigger>\n <ChevronIcon\n size={size}\n className={chevronStyles({direction, isMenu: true})} />\n </li>\n </UNSTABLE_CollectionRendererContext.Provider>\n );\n};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n let {listRef, items, size} = props;\n return (\n <div\n // @ts-ignore\n inert=\"true\"\n ref={listRef}\n className={style({\n display: '[inherit]',\n gap: '[inherit]',\n flexWrap: '[inherit]',\n position: 'absolute',\n top: 0,\n bottom: 0,\n start: 0,\n end: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item, idx) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-breadcrumb\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, isCurrent: idx === items.length - 1})}>\n {item.props.children({size, isCurrent: idx === items.length - 1})}\n </div>\n );\n })}\n <ActionButton data-hidden-button isQuiet><FolderIcon /></ActionButton>\n </div>\n );\n};\n\nconst breadcrumbStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'start',\n height: 'control',\n transition: 'default',\n position: 'relative',\n flexShrink: 0,\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderStyle: 'none',\n marginStart: {\n // adjusts with the parent flex gap\n isMenu: size(-6)\n }\n});\n\nconst chevronStyles = style({\n scale: {\n direction: {\n rtl: -1\n }\n },\n marginStart: {\n default: 'text-to-visual',\n isMenu: 0\n },\n color: {\n default: 'neutral',\n forcedColors: {\n default: 'LinkText'\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst linkStyles = style({\n ...focusRing(),\n borderRadius: 'sm',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled',\n isCurrent: 'neutral',\n forcedColors: {\n default: 'LinkText',\n isDisabled: 'GrayText'\n }\n },\n transition: 'default',\n textDecoration: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline',\n isDisabled: 'none'\n },\n cursor: {\n default: 'pointer',\n isDisabled: 'default'\n },\n outlineColor: {\n default: 'focus-ring',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n});\n\nconst currentStyles = style<{size: string}>({\n font: 'control',\n fontWeight: 'bold'\n});\n\n// TODO: support user heading size customization, for now just set it to large\nconst heading = style({\n margin: 0,\n font: 'heading-lg',\n fontWeight: 'extra-bold'\n});\n\nexport interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n /** The children of the breadcrumb item. */\n children?: ReactNode\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nexport const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\n let {href, target, rel, download, ping, referrerPolicy} = props;\n let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n return (\n <AriaBreadcrumb\n {...props}\n ref={domRef}\n // @ts-ignore\n originalProps={props}\n className={({isCurrent, isDisabled}) => breadcrumbStyles({size, isCurrent, isDisabled})}>\n {({\n isCurrent,\n isDisabled,\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return children;\n }\n return (\n isCurrent ?\n <div\n className={currentStyles({size})}>\n <Provider\n values={[\n [HeadingContext, {className: heading}]\n ]}>\n {children}\n </Provider>\n </div>\n : (\n <>\n <Link\n style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}\n href={href}\n target={target}\n rel={rel}\n download={download}\n ping={ping}\n referrerPolicy={referrerPolicy}\n isDisabled={isDisabled || isCurrent}\n className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\n )\n );\n }}\n </AriaBreadcrumb>\n );\n});\n\n// Context for passing the count for the custom renderer\nlet CollapseContext = createContext<{\n containerRef: RefObject<HTMLOListElement | null>,\n onAction: BreadcrumbsProps<unknown>['onAction']\n} | null>(null);\n\nfunction CollapsingCollection({children, containerRef, onAction}) {\n return (\n <CollapseContext.Provider value={{containerRef, onAction}}>\n <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n {children}\n </UNSTABLE_CollectionRendererContext.Provider>\n </CollapseContext.Provider>\n );\n}\n\nlet CollapsingCollectionRenderer: CollectionRenderer = {\n CollectionRoot({collection}) {\n return useCollectionRender(collection);\n },\n CollectionBranch({collection}) {\n return useCollectionRender(collection);\n }\n};\n\nlet useCollectionRender = (collection: Collection<Node<unknown>>) => {\n let {containerRef, onAction} = useContext(CollapseContext) ?? {};\n let [visibleItems, setVisibleItems] = useState(collection.size);\n let {size = 'M'} = useContext(InternalBreadcrumbsContext);\n\n let children = useMemo(() => {\n let result: Node<any>[] = [];\n for (let key of collection.getKeys()) {\n result.push(collection.getItem(key)!);\n }\n return result;\n }, [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useCallback(() => {\n let currListRef: HTMLDivElement | null = listRef.current;\n if (!currListRef) {\n setVisibleItems(collection.size);\n return;\n }\n let container = currListRef.parentElement;\n if (!container) {\n setVisibleItems(collection.size);\n return;\n }\n\n let listItems = Array.from(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) as HTMLLIElement[];\n let folder = currListRef.querySelector('button') as HTMLButtonElement;\n if (listItems.length <= 0) {\n setVisibleItems(collection.size);\n return;\n }\n let containerWidth = container.offsetWidth;\n let containerGap = parseInt(getComputedStyle(container).gap, 10);\n let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);\n let newVisibleItems = 0;\n let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n let widths: Array<number> = [];\n let totalWidth = 0;\n for (let breadcrumb of listItems) {\n let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down\n widths.push(width);\n totalWidth += width;\n }\n\n // can we fit all the items without collapsing\n if (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\n setVisibleItems(collection.size);\n return;\n }\n\n // we know there is always at least one item because of the listItems.length check up above\n let widthOfFirst = widths.shift()!;\n let availableWidth = containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;\n maxVisibleItems -= 2; // account for the first item and folder\n for (let width of widths.reverse()) {\n availableWidth -= width;\n if (availableWidth <= 0) {\n break;\n }\n availableWidth -= containerGap;\n newVisibleItems++;\n }\n\n setVisibleItems(Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));\n }, [collection.size, setVisibleItems]);\n\n // making bad assumption that i can listen to containerRef when it's declared in the parent?\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n let sliceIndex = collection.size - visibleItems;\n\n return (\n <>\n <HiddenBreadcrumbs items={children} size={size} listRef={listRef} />\n {visibleItems < collection.size && collection.size > 2 ? (\n <>\n {children[0].render?.(children[0])}\n <BreadcrumbMenu items={children.slice(1, sliceIndex)} onAction={onAction} />\n {children.slice(sliceIndex).map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n </>\n ) : (\n <>\n {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n </>\n )}\n </>\n );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {ActionButton} from './ActionButton';\nimport {\n Breadcrumb as AriaBreadcrumb,\n BreadcrumbsProps as AriaBreadcrumbsProps,\n CollectionRenderer,\n CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\ninterface BreadcrumbsStyleProps {\n /**\n * Size of the Breadcrumbs including spacing and layout.\n *\n * @default 'M'\n */\n size?: 'M' | 'L',\n /** Whether the breadcrumbs are disabled. */\n isDisabled?: boolean\n /**\n * Whether to place the last Breadcrumb item onto a new line.\n */\n // TODO: isMultiline?: boolean\n /** Whether to always show the root item if the items are collapsed. */\n // TODO: showRoot?: boolean,\n}\n\nexport interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n /** The children of the Breadcrumbs. */\n children: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\n position: 'relative',\n display: 'flex',\n justifyContent: 'start',\n listStyleType: 'none',\n flexWrap: 'nowrap',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 0,\n gap: {\n size: {\n // TODO: why do these scale but other spacings don't?\n M: size(6), // breadcrumbs-text-to-separator-medium\n L: size(9) // breadcrumbs-text-to-separator-large\n }\n },\n padding: 0,\n transition: 'default',\n marginTop: 0,\n marginBottom: 0,\n marginStart: {\n size: {\n M: size(6),\n L: size(9)\n }\n }\n}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nexport const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);\n let domRef = useDOMRef(ref);\n let {\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size = 'M',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n return (\n <Provider\n values={[\n [InternalBreadcrumbsContext, {size, isDisabled}]\n ]}>\n <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n <RACBreadcrumbs\n {...otherProps}\n isDisabled={isDisabled}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size\n }, styles)}>\n {children}\n </RACBreadcrumbs>\n </CollapsingCollection>\n </Provider>\n );\n});\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {items, onAction} = props;\n let {direction} = useLocale();\n let {size, isDisabled} = useContext(InternalBreadcrumbsContext);\n let label = stringFormatter.format('breadcrumbs.more');\n return (\n <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n <MenuTrigger>\n <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n <Menu items={items} onAction={onAction}>\n {(item: Node<any>) => (\n <MenuItem\n {...item.props.originalProps}\n key={item.key}>\n <Text slot=\"label\">\n {item.props.children({size, isCurrent: false, isMenu: true})}\n </Text>\n </MenuItem>\n )}\n </Menu>\n </MenuTrigger>\n <ChevronIcon\n size={size}\n className={chevronStyles({direction, isMenu: true})} />\n </li>\n </CollectionRendererContext.Provider>\n );\n};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n let {listRef, items, size} = props;\n return (\n <div\n // @ts-ignore\n inert={inertValue(true)}\n ref={listRef}\n className={style({\n display: '[inherit]',\n gap: '[inherit]',\n flexWrap: '[inherit]',\n position: 'absolute',\n top: 0,\n bottom: 0,\n start: 0,\n end: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item, idx) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-breadcrumb\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, isCurrent: idx === items.length - 1})}>\n {item.props.children({size, isCurrent: idx === items.length - 1})}\n </div>\n );\n })}\n <ActionButton data-hidden-button isQuiet><FolderIcon /></ActionButton>\n </div>\n );\n};\n\nconst breadcrumbStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'start',\n height: 'control',\n transition: 'default',\n position: 'relative',\n flexShrink: 0,\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderStyle: 'none',\n marginStart: {\n // adjusts with the parent flex gap\n isMenu: size(-6)\n }\n});\n\nconst chevronStyles = style({\n scale: {\n direction: {\n rtl: -1\n }\n },\n marginStart: {\n default: 'text-to-visual',\n isMenu: 0\n },\n color: {\n default: 'neutral',\n forcedColors: {\n default: 'LinkText'\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst linkStyles = style({\n ...focusRing(),\n borderRadius: 'sm',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled',\n isCurrent: 'neutral',\n forcedColors: {\n default: 'LinkText',\n isDisabled: 'GrayText'\n }\n },\n transition: 'default',\n textDecoration: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline',\n isDisabled: 'none'\n },\n cursor: {\n default: 'pointer',\n isDisabled: 'default'\n },\n outlineColor: {\n default: 'focus-ring',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n});\n\nconst currentStyles = style<{size: string}>({\n font: 'control',\n fontWeight: 'bold'\n});\n\n// TODO: support user heading size customization, for now just set it to large\nconst heading = style({\n margin: 0,\n font: 'heading-lg',\n fontWeight: 'extra-bold'\n});\n\nexport interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n /** The children of the breadcrumb item. */\n children: ReactNode\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nexport const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\n let {href, target, rel, download, ping, referrerPolicy} = props;\n let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n return (\n <AriaBreadcrumb\n {...props}\n ref={domRef}\n // @ts-ignore\n originalProps={props}\n className={({isCurrent, isDisabled}) => breadcrumbStyles({size, isCurrent, isDisabled})}>\n {({\n isCurrent,\n isDisabled,\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return children;\n }\n return (\n isCurrent ?\n <div\n className={currentStyles({size})}>\n <Provider\n values={[\n [HeadingContext, {className: heading}]\n ]}>\n {children}\n </Provider>\n </div>\n : (\n <>\n <Link\n style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}\n href={href}\n target={target}\n rel={rel}\n download={download}\n ping={ping}\n referrerPolicy={referrerPolicy}\n isDisabled={isDisabled || isCurrent}\n className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\n )\n );\n }}\n </AriaBreadcrumb>\n );\n});\n\n// Context for passing the count for the custom renderer\nlet CollapseContext = createContext<{\n containerRef: RefObject<HTMLOListElement | null>,\n onAction: BreadcrumbsProps<unknown>['onAction']\n} | null>(null);\n\nfunction CollapsingCollection({children, containerRef, onAction}) {\n return (\n <CollapseContext.Provider value={{containerRef, onAction}}>\n <CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n {children}\n </CollectionRendererContext.Provider>\n </CollapseContext.Provider>\n );\n}\n\nlet CollapsingCollectionRenderer: CollectionRenderer = {\n CollectionRoot({collection}) {\n return useCollectionRender(collection);\n },\n CollectionBranch({collection}) {\n return useCollectionRender(collection);\n }\n};\n\nlet useCollectionRender = (collection: Collection<Node<unknown>>) => {\n let {containerRef, onAction} = useContext(CollapseContext) ?? {};\n let [visibleItems, setVisibleItems] = useState(collection.size);\n let {size = 'M'} = useContext(InternalBreadcrumbsContext);\n\n let children = useMemo(() => {\n let result: Node<any>[] = [];\n for (let key of collection.getKeys()) {\n result.push(collection.getItem(key)!);\n }\n return result;\n }, [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useCallback(() => {\n let currListRef: HTMLDivElement | null = listRef.current;\n if (!currListRef) {\n setVisibleItems(collection.size);\n return;\n }\n let container = currListRef.parentElement;\n if (!container) {\n setVisibleItems(collection.size);\n return;\n }\n\n let listItems = Array.from(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) as HTMLLIElement[];\n let folder = currListRef.querySelector('button') as HTMLButtonElement;\n if (listItems.length <= 0) {\n setVisibleItems(collection.size);\n return;\n }\n let containerWidth = container.offsetWidth;\n let containerGap = parseInt(getComputedStyle(container).gap, 10);\n let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);\n let newVisibleItems = 0;\n let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n let widths: Array<number> = [];\n let totalWidth = 0;\n for (let breadcrumb of listItems) {\n let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down\n widths.push(width);\n totalWidth += width;\n }\n\n // can we fit all the items without collapsing\n if (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\n setVisibleItems(collection.size);\n return;\n }\n\n // we know there is always at least one item because of the listItems.length check up above\n let widthOfFirst = widths.shift()!;\n let availableWidth = containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;\n maxVisibleItems -= 2; // account for the first item and folder\n for (let width of widths.reverse()) {\n availableWidth -= width;\n if (availableWidth <= 0) {\n break;\n }\n availableWidth -= containerGap;\n newVisibleItems++;\n }\n\n setVisibleItems(Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));\n }, [collection.size, setVisibleItems]);\n\n // making bad assumption that i can listen to containerRef when it's declared in the parent?\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n let sliceIndex = collection.size - visibleItems;\n\n return (\n <>\n <HiddenBreadcrumbs items={children} size={size} listRef={listRef} />\n {visibleItems < collection.size && collection.size > 2 ? (\n <>\n {children[0].render?.(children[0])}\n <BreadcrumbMenu items={children.slice(1, sliceIndex)} onAction={onAction} />\n {children.slice(sliceIndex).map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n </>\n ) : (\n <>\n {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n </>\n )}\n </>\n );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.cjs.map"}
|
package/dist/Breadcrumbs.css
CHANGED
|
@@ -328,8 +328,6 @@
|
|
|
328
328
|
}
|
|
329
329
|
}
|
|
330
330
|
|
|
331
|
-
@layer UNSAFE_overrides;
|
|
332
|
-
|
|
333
331
|
@layer _.b.a {
|
|
334
332
|
@media (forced-colors: active) {
|
|
335
333
|
.aa_____K {
|
|
@@ -417,8 +415,4 @@
|
|
|
417
415
|
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
418
416
|
}
|
|
419
417
|
}
|
|
420
|
-
|
|
421
|
-
.\.:not(#a#b) {
|
|
422
|
-
all: revert-layer;
|
|
423
|
-
}
|
|
424
418
|
/*# sourceMappingURL=Breadcrumbs.css.map */
|
package/dist/Breadcrumbs.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACqEgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBH;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAsBH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAMN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;;AAvNA;EAuNA;;;;EAAA;;;;;AAvNA;;AAqIS;EAAA;IAAA;;;;IA6CN;;;;IAAA;;;;IAAA;;;;;;AAtBG;EAAA;IAAA;;;;IAqDA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAMN;;;;;;AArCG;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AA+BG","sources":["e5b0469905a8f425","packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["@import \"323be75c1b18eb57\";\n@import \"b1e7908a376b8feb\";\n@import \"481fa992da5066cd\";\n@import \"e3fe68e954d88455\";\n@import \"41a6421b0de89093\";\n@import \"0289bb74e0f5d839\";\n@import \"880da6116faabf56\";\n","/*\n * Copyright 2024 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 {ActionButton} from './ActionButton';\nimport {\n Breadcrumb as AriaBreadcrumb,\n BreadcrumbsProps as AriaBreadcrumbsProps,\n CollectionRenderer,\n ContextValue,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs,\n UNSTABLE_CollectionRendererContext,\n UNSTABLE_DefaultCollectionRenderer\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\ninterface BreadcrumbsStyleProps {\n /**\n * Size of the Breadcrumbs including spacing and layout.\n *\n * @default 'M'\n */\n size?: 'M' | 'L',\n /** Whether the breadcrumbs are disabled. */\n isDisabled?: boolean\n /**\n * Whether to place the last Breadcrumb item onto a new line.\n */\n // TODO: isMultiline?: boolean\n /** Whether to always show the root item if the items are collapsed. */\n // TODO: showRoot?: boolean,\n}\n\nexport interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n /** The children of the Breadcrumbs. */\n children?: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\n position: 'relative',\n display: 'flex',\n justifyContent: 'start',\n listStyleType: 'none',\n flexWrap: 'nowrap',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 0,\n gap: {\n size: {\n // TODO: why do these scale but other spacings don't?\n M: size(6), // breadcrumbs-text-to-separator-medium\n L: size(9) // breadcrumbs-text-to-separator-large\n }\n },\n padding: 0,\n transition: 'default',\n marginTop: 0,\n marginBottom: 0,\n marginStart: {\n size: {\n M: size(6),\n L: size(9)\n }\n }\n}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nexport const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);\n let domRef = useDOMRef(ref);\n let {\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size = 'M',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n return (\n <Provider\n values={[\n [InternalBreadcrumbsContext, {size, isDisabled}]\n ]}>\n <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n <RACBreadcrumbs\n {...otherProps}\n isDisabled={isDisabled}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size\n }, styles)}>\n {children}\n </RACBreadcrumbs>\n </CollapsingCollection>\n </Provider>\n );\n});\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {items, onAction} = props;\n let {direction} = useLocale();\n let {size, isDisabled} = useContext(InternalBreadcrumbsContext);\n let label = stringFormatter.format('breadcrumbs.more');\n return (\n <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>\n <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n <MenuTrigger>\n <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n <Menu items={items} onAction={onAction}>\n {(item: Node<any>) => (\n <MenuItem\n {...item.props.originalProps}\n key={item.key}>\n <Text slot=\"label\">\n {item.props.children({size, isCurrent: false, isMenu: true})}\n </Text>\n </MenuItem>\n )}\n </Menu>\n </MenuTrigger>\n <ChevronIcon\n size={size}\n className={chevronStyles({direction, isMenu: true})} />\n </li>\n </UNSTABLE_CollectionRendererContext.Provider>\n );\n};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n let {listRef, items, size} = props;\n return (\n <div\n // @ts-ignore\n inert=\"true\"\n ref={listRef}\n className={style({\n display: '[inherit]',\n gap: '[inherit]',\n flexWrap: '[inherit]',\n position: 'absolute',\n top: 0,\n bottom: 0,\n start: 0,\n end: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item, idx) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-breadcrumb\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, isCurrent: idx === items.length - 1})}>\n {item.props.children({size, isCurrent: idx === items.length - 1})}\n </div>\n );\n })}\n <ActionButton data-hidden-button isQuiet><FolderIcon /></ActionButton>\n </div>\n );\n};\n\nconst breadcrumbStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'start',\n height: 'control',\n transition: 'default',\n position: 'relative',\n flexShrink: 0,\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderStyle: 'none',\n marginStart: {\n // adjusts with the parent flex gap\n isMenu: size(-6)\n }\n});\n\nconst chevronStyles = style({\n scale: {\n direction: {\n rtl: -1\n }\n },\n marginStart: {\n default: 'text-to-visual',\n isMenu: 0\n },\n color: {\n default: 'neutral',\n forcedColors: {\n default: 'LinkText'\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst linkStyles = style({\n ...focusRing(),\n borderRadius: 'sm',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled',\n isCurrent: 'neutral',\n forcedColors: {\n default: 'LinkText',\n isDisabled: 'GrayText'\n }\n },\n transition: 'default',\n textDecoration: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline',\n isDisabled: 'none'\n },\n cursor: {\n default: 'pointer',\n isDisabled: 'default'\n },\n outlineColor: {\n default: 'focus-ring',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n});\n\nconst currentStyles = style<{size: string}>({\n font: 'control',\n fontWeight: 'bold'\n});\n\n// TODO: support user heading size customization, for now just set it to large\nconst heading = style({\n margin: 0,\n font: 'heading-lg',\n fontWeight: 'extra-bold'\n});\n\nexport interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n /** The children of the breadcrumb item. */\n children?: ReactNode\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nexport const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\n let {href, target, rel, download, ping, referrerPolicy} = props;\n let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n return (\n <AriaBreadcrumb\n {...props}\n ref={domRef}\n // @ts-ignore\n originalProps={props}\n className={({isCurrent, isDisabled}) => breadcrumbStyles({size, isCurrent, isDisabled})}>\n {({\n isCurrent,\n isDisabled,\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return children;\n }\n return (\n isCurrent ?\n <div\n className={currentStyles({size})}>\n <Provider\n values={[\n [HeadingContext, {className: heading}]\n ]}>\n {children}\n </Provider>\n </div>\n : (\n <>\n <Link\n style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}\n href={href}\n target={target}\n rel={rel}\n download={download}\n ping={ping}\n referrerPolicy={referrerPolicy}\n isDisabled={isDisabled || isCurrent}\n className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\n )\n );\n }}\n </AriaBreadcrumb>\n );\n});\n\n// Context for passing the count for the custom renderer\nlet CollapseContext = createContext<{\n containerRef: RefObject<HTMLOListElement | null>,\n onAction: BreadcrumbsProps<unknown>['onAction']\n} | null>(null);\n\nfunction CollapsingCollection({children, containerRef, onAction}) {\n return (\n <CollapseContext.Provider value={{containerRef, onAction}}>\n <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n {children}\n </UNSTABLE_CollectionRendererContext.Provider>\n </CollapseContext.Provider>\n );\n}\n\nlet CollapsingCollectionRenderer: CollectionRenderer = {\n CollectionRoot({collection}) {\n return useCollectionRender(collection);\n },\n CollectionBranch({collection}) {\n return useCollectionRender(collection);\n }\n};\n\nlet useCollectionRender = (collection: Collection<Node<unknown>>) => {\n let {containerRef, onAction} = useContext(CollapseContext) ?? {};\n let [visibleItems, setVisibleItems] = useState(collection.size);\n let {size = 'M'} = useContext(InternalBreadcrumbsContext);\n\n let children = useMemo(() => {\n let result: Node<any>[] = [];\n for (let key of collection.getKeys()) {\n result.push(collection.getItem(key)!);\n }\n return result;\n }, [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useCallback(() => {\n let currListRef: HTMLDivElement | null = listRef.current;\n if (!currListRef) {\n setVisibleItems(collection.size);\n return;\n }\n let container = currListRef.parentElement;\n if (!container) {\n setVisibleItems(collection.size);\n return;\n }\n\n let listItems = Array.from(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) as HTMLLIElement[];\n let folder = currListRef.querySelector('button') as HTMLButtonElement;\n if (listItems.length <= 0) {\n setVisibleItems(collection.size);\n return;\n }\n let containerWidth = container.offsetWidth;\n let containerGap = parseInt(getComputedStyle(container).gap, 10);\n let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);\n let newVisibleItems = 0;\n let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n let widths: Array<number> = [];\n let totalWidth = 0;\n for (let breadcrumb of listItems) {\n let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down\n widths.push(width);\n totalWidth += width;\n }\n\n // can we fit all the items without collapsing\n if (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\n setVisibleItems(collection.size);\n return;\n }\n\n // we know there is always at least one item because of the listItems.length check up above\n let widthOfFirst = widths.shift()!;\n let availableWidth = containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;\n maxVisibleItems -= 2; // account for the first item and folder\n for (let width of widths.reverse()) {\n availableWidth -= width;\n if (availableWidth <= 0) {\n break;\n }\n availableWidth -= containerGap;\n newVisibleItems++;\n }\n\n setVisibleItems(Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));\n }, [collection.size, setVisibleItems]);\n\n // making bad assumption that i can listen to containerRef when it's declared in the parent?\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n let sliceIndex = collection.size - visibleItems;\n\n return (\n <>\n <HiddenBreadcrumbs items={children} size={size} listRef={listRef} />\n {visibleItems < collection.size && collection.size > 2 ? (\n <>\n {children[0].render?.(children[0])}\n <BreadcrumbMenu items={children.slice(1, sliceIndex)} onAction={onAction} />\n {children.slice(sliceIndex).map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n </>\n ) : (\n <>\n {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n </>\n )}\n </>\n );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.css.map"}
|
|
1
|
+
{"mappings":"ACqEgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBH;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAsBH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAMN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;;AAvNA;EAuNA;;;;EAAA;;;;;AAlFS;EAAA;IAAA;;;;IA6CN;;;;IAAA;;;;IAAA;;;;;;AAtBG;EAAA;IAAA;;;;IAqDA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAMN;;;;;;AArCG;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["e5b0469905a8f425","packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["@import \"323be75c1b18eb57\";\n@import \"b1e7908a376b8feb\";\n@import \"481fa992da5066cd\";\n@import \"e3fe68e954d88455\";\n@import \"41a6421b0de89093\";\n@import \"0289bb74e0f5d839\";\n@import \"880da6116faabf56\";\n","/*\n * Copyright 2024 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 {ActionButton} from './ActionButton';\nimport {\n Breadcrumb as AriaBreadcrumb,\n BreadcrumbsProps as AriaBreadcrumbsProps,\n CollectionRenderer,\n CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\ninterface BreadcrumbsStyleProps {\n /**\n * Size of the Breadcrumbs including spacing and layout.\n *\n * @default 'M'\n */\n size?: 'M' | 'L',\n /** Whether the breadcrumbs are disabled. */\n isDisabled?: boolean\n /**\n * Whether to place the last Breadcrumb item onto a new line.\n */\n // TODO: isMultiline?: boolean\n /** Whether to always show the root item if the items are collapsed. */\n // TODO: showRoot?: boolean,\n}\n\nexport interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n /** The children of the Breadcrumbs. */\n children: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\n position: 'relative',\n display: 'flex',\n justifyContent: 'start',\n listStyleType: 'none',\n flexWrap: 'nowrap',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 0,\n gap: {\n size: {\n // TODO: why do these scale but other spacings don't?\n M: size(6), // breadcrumbs-text-to-separator-medium\n L: size(9) // breadcrumbs-text-to-separator-large\n }\n },\n padding: 0,\n transition: 'default',\n marginTop: 0,\n marginBottom: 0,\n marginStart: {\n size: {\n M: size(6),\n L: size(9)\n }\n }\n}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nexport const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);\n let domRef = useDOMRef(ref);\n let {\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size = 'M',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n return (\n <Provider\n values={[\n [InternalBreadcrumbsContext, {size, isDisabled}]\n ]}>\n <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n <RACBreadcrumbs\n {...otherProps}\n isDisabled={isDisabled}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size\n }, styles)}>\n {children}\n </RACBreadcrumbs>\n </CollapsingCollection>\n </Provider>\n );\n});\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {items, onAction} = props;\n let {direction} = useLocale();\n let {size, isDisabled} = useContext(InternalBreadcrumbsContext);\n let label = stringFormatter.format('breadcrumbs.more');\n return (\n <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n <MenuTrigger>\n <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n <Menu items={items} onAction={onAction}>\n {(item: Node<any>) => (\n <MenuItem\n {...item.props.originalProps}\n key={item.key}>\n <Text slot=\"label\">\n {item.props.children({size, isCurrent: false, isMenu: true})}\n </Text>\n </MenuItem>\n )}\n </Menu>\n </MenuTrigger>\n <ChevronIcon\n size={size}\n className={chevronStyles({direction, isMenu: true})} />\n </li>\n </CollectionRendererContext.Provider>\n );\n};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n let {listRef, items, size} = props;\n return (\n <div\n // @ts-ignore\n inert={inertValue(true)}\n ref={listRef}\n className={style({\n display: '[inherit]',\n gap: '[inherit]',\n flexWrap: '[inherit]',\n position: 'absolute',\n top: 0,\n bottom: 0,\n start: 0,\n end: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item, idx) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-breadcrumb\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, isCurrent: idx === items.length - 1})}>\n {item.props.children({size, isCurrent: idx === items.length - 1})}\n </div>\n );\n })}\n <ActionButton data-hidden-button isQuiet><FolderIcon /></ActionButton>\n </div>\n );\n};\n\nconst breadcrumbStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'start',\n height: 'control',\n transition: 'default',\n position: 'relative',\n flexShrink: 0,\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderStyle: 'none',\n marginStart: {\n // adjusts with the parent flex gap\n isMenu: size(-6)\n }\n});\n\nconst chevronStyles = style({\n scale: {\n direction: {\n rtl: -1\n }\n },\n marginStart: {\n default: 'text-to-visual',\n isMenu: 0\n },\n color: {\n default: 'neutral',\n forcedColors: {\n default: 'LinkText'\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst linkStyles = style({\n ...focusRing(),\n borderRadius: 'sm',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled',\n isCurrent: 'neutral',\n forcedColors: {\n default: 'LinkText',\n isDisabled: 'GrayText'\n }\n },\n transition: 'default',\n textDecoration: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline',\n isDisabled: 'none'\n },\n cursor: {\n default: 'pointer',\n isDisabled: 'default'\n },\n outlineColor: {\n default: 'focus-ring',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n});\n\nconst currentStyles = style<{size: string}>({\n font: 'control',\n fontWeight: 'bold'\n});\n\n// TODO: support user heading size customization, for now just set it to large\nconst heading = style({\n margin: 0,\n font: 'heading-lg',\n fontWeight: 'extra-bold'\n});\n\nexport interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n /** The children of the breadcrumb item. */\n children: ReactNode\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nexport const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\n let {href, target, rel, download, ping, referrerPolicy} = props;\n let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n return (\n <AriaBreadcrumb\n {...props}\n ref={domRef}\n // @ts-ignore\n originalProps={props}\n className={({isCurrent, isDisabled}) => breadcrumbStyles({size, isCurrent, isDisabled})}>\n {({\n isCurrent,\n isDisabled,\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return children;\n }\n return (\n isCurrent ?\n <div\n className={currentStyles({size})}>\n <Provider\n values={[\n [HeadingContext, {className: heading}]\n ]}>\n {children}\n </Provider>\n </div>\n : (\n <>\n <Link\n style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}\n href={href}\n target={target}\n rel={rel}\n download={download}\n ping={ping}\n referrerPolicy={referrerPolicy}\n isDisabled={isDisabled || isCurrent}\n className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\n )\n );\n }}\n </AriaBreadcrumb>\n );\n});\n\n// Context for passing the count for the custom renderer\nlet CollapseContext = createContext<{\n containerRef: RefObject<HTMLOListElement | null>,\n onAction: BreadcrumbsProps<unknown>['onAction']\n} | null>(null);\n\nfunction CollapsingCollection({children, containerRef, onAction}) {\n return (\n <CollapseContext.Provider value={{containerRef, onAction}}>\n <CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n {children}\n </CollectionRendererContext.Provider>\n </CollapseContext.Provider>\n );\n}\n\nlet CollapsingCollectionRenderer: CollectionRenderer = {\n CollectionRoot({collection}) {\n return useCollectionRender(collection);\n },\n CollectionBranch({collection}) {\n return useCollectionRender(collection);\n }\n};\n\nlet useCollectionRender = (collection: Collection<Node<unknown>>) => {\n let {containerRef, onAction} = useContext(CollapseContext) ?? {};\n let [visibleItems, setVisibleItems] = useState(collection.size);\n let {size = 'M'} = useContext(InternalBreadcrumbsContext);\n\n let children = useMemo(() => {\n let result: Node<any>[] = [];\n for (let key of collection.getKeys()) {\n result.push(collection.getItem(key)!);\n }\n return result;\n }, [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useCallback(() => {\n let currListRef: HTMLDivElement | null = listRef.current;\n if (!currListRef) {\n setVisibleItems(collection.size);\n return;\n }\n let container = currListRef.parentElement;\n if (!container) {\n setVisibleItems(collection.size);\n return;\n }\n\n let listItems = Array.from(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) as HTMLLIElement[];\n let folder = currListRef.querySelector('button') as HTMLButtonElement;\n if (listItems.length <= 0) {\n setVisibleItems(collection.size);\n return;\n }\n let containerWidth = container.offsetWidth;\n let containerGap = parseInt(getComputedStyle(container).gap, 10);\n let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);\n let newVisibleItems = 0;\n let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n let widths: Array<number> = [];\n let totalWidth = 0;\n for (let breadcrumb of listItems) {\n let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down\n widths.push(width);\n totalWidth += width;\n }\n\n // can we fit all the items without collapsing\n if (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\n setVisibleItems(collection.size);\n return;\n }\n\n // we know there is always at least one item because of the listItems.length check up above\n let widthOfFirst = widths.shift()!;\n let availableWidth = containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;\n maxVisibleItems -= 2; // account for the first item and folder\n for (let width of widths.reverse()) {\n availableWidth -= width;\n if (availableWidth <= 0) {\n break;\n }\n availableWidth -= containerGap;\n newVisibleItems++;\n }\n\n setVisibleItems(Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));\n }, [collection.size, setVisibleItems]);\n\n // making bad assumption that i can listen to containerRef when it's declared in the parent?\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n let sliceIndex = collection.size - visibleItems;\n\n return (\n <>\n <HiddenBreadcrumbs items={children} size={size} listRef={listRef} />\n {visibleItems < collection.size && collection.size > 2 ? (\n <>\n {children[0].render?.(children[0])}\n <BreadcrumbMenu items={children.slice(1, sliceIndex)} onAction={onAction} />\n {children.slice(sliceIndex).map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n </>\n ) : (\n <>\n {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n </>\n )}\n </>\n );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.css.map"}
|
package/dist/Breadcrumbs.mjs
CHANGED
|
@@ -8,10 +8,10 @@ import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6} from "./Content.mjs";
|
|
|
8
8
|
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
|
|
9
9
|
import {jsx as $a1dfd$jsx, jsxs as $a1dfd$jsxs, Fragment as $a1dfd$Fragment} from "react/jsx-runtime";
|
|
10
10
|
import {createContext as $a1dfd$createContext, forwardRef as $a1dfd$forwardRef, useContext as $a1dfd$useContext, createElement as $a1dfd$createElement, useState as $a1dfd$useState, useMemo as $a1dfd$useMemo, useRef as $a1dfd$useRef, useCallback as $a1dfd$useCallback, useEffect as $a1dfd$useEffect, Fragment as $a1dfd$Fragment1} from "react";
|
|
11
|
-
import {Provider as $a1dfd$Provider, Breadcrumbs as $a1dfd$Breadcrumbs,
|
|
11
|
+
import {Provider as $a1dfd$Provider, Breadcrumbs as $a1dfd$Breadcrumbs, CollectionRendererContext as $a1dfd$CollectionRendererContext, DefaultCollectionRenderer as $a1dfd$DefaultCollectionRenderer, Breadcrumb as $a1dfd$Breadcrumb, HeadingContext as $a1dfd$HeadingContext, Link as $a1dfd$Link} from "react-aria-components";
|
|
12
12
|
import {useLocale as $a1dfd$useLocale} from "react-aria";
|
|
13
|
+
import {inertValue as $a1dfd$inertValue, useLayoutEffect as $a1dfd$useLayoutEffect} from "@react-aria/utils";
|
|
13
14
|
import {useDOMRef as $a1dfd$useDOMRef, useResizeObserver as $a1dfd$useResizeObserver} from "@react-spectrum/utils";
|
|
14
|
-
import {useLayoutEffect as $a1dfd$useLayoutEffect} from "@react-aria/utils";
|
|
15
15
|
import {useLocalizedStringFormatter as $a1dfd$useLocalizedStringFormatter} from "@react-aria/i18n";
|
|
16
16
|
|
|
17
17
|
|
|
@@ -129,8 +129,8 @@ let $f329dd4f2aa58cd0$var$BreadcrumbMenu = (props)=>{
|
|
|
129
129
|
let { direction: direction } = (0, $a1dfd$useLocale)();
|
|
130
130
|
let { size: size, isDisabled: isDisabled } = (0, $a1dfd$useContext)($f329dd4f2aa58cd0$var$InternalBreadcrumbsContext);
|
|
131
131
|
let label = stringFormatter.format('breadcrumbs.more');
|
|
132
|
-
return /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$
|
|
133
|
-
value: (0, $a1dfd$
|
|
132
|
+
return /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$CollectionRendererContext).Provider, {
|
|
133
|
+
value: (0, $a1dfd$DefaultCollectionRenderer),
|
|
134
134
|
children: /*#__PURE__*/ (0, $a1dfd$jsxs)("li", {
|
|
135
135
|
className: $f329dd4f2aa58cd0$var$breadcrumbStyles({
|
|
136
136
|
size: size,
|
|
@@ -178,9 +178,9 @@ let $f329dd4f2aa58cd0$var$HiddenBreadcrumbs = function(props) {
|
|
|
178
178
|
let { listRef: listRef, items: items, size: size } = props;
|
|
179
179
|
return /*#__PURE__*/ (0, $a1dfd$jsxs)("div", {
|
|
180
180
|
// @ts-ignore
|
|
181
|
-
inert:
|
|
181
|
+
inert: (0, $a1dfd$inertValue)(true),
|
|
182
182
|
ref: listRef,
|
|
183
|
-
className: "
|
|
183
|
+
className: " _0-17zqamw i-17zqamw j-17zqamw _8-17zqamw Va Ya _aa __Fb __wb __xb _L-3t1x",
|
|
184
184
|
children: [
|
|
185
185
|
items.map((item, idx)=>{
|
|
186
186
|
// pull off individual props as an allow list, don't want refs or other props getting through
|
|
@@ -348,7 +348,7 @@ const $f329dd4f2aa58cd0$var$currentStyles = function anonymous(props) {
|
|
|
348
348
|
return rules;
|
|
349
349
|
};
|
|
350
350
|
// TODO: support user heading size customization, for now just set it to large
|
|
351
|
-
const $f329dd4f2aa58cd0$var$heading = "
|
|
351
|
+
const $f329dd4f2aa58cd0$var$heading = " Aa Ba ya za _da _d-enzrfpb _d-enzwzjc _d-enzykdd _d-enzzrge _d-eo0c6sf _d-1uotwbwg _d-bc1l9oh _en _ebo _fe _ga _g-1x99dlob ao";
|
|
352
352
|
const $f329dd4f2aa58cd0$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ (0, $a1dfd$forwardRef)(function Breadcrumb({ children: children, ...props }, ref) {
|
|
353
353
|
let { href: href, target: target, rel: rel, download: download, ping: ping, referrerPolicy: referrerPolicy } = props;
|
|
354
354
|
let { size: size = 'M' } = (0, $a1dfd$useContext)($f329dd4f2aa58cd0$var$InternalBreadcrumbsContext) ?? {};
|
|
@@ -424,7 +424,7 @@ function $f329dd4f2aa58cd0$var$CollapsingCollection({ children: children, contai
|
|
|
424
424
|
containerRef: containerRef,
|
|
425
425
|
onAction: onAction
|
|
426
426
|
},
|
|
427
|
-
children: /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$
|
|
427
|
+
children: /*#__PURE__*/ (0, $a1dfd$jsx)((0, $a1dfd$CollectionRendererContext).Provider, {
|
|
428
428
|
value: $f329dd4f2aa58cd0$var$CollapsingCollectionRenderer,
|
|
429
429
|
children: children
|
|
430
430
|
})
|
package/dist/Breadcrumbs.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {ActionButton} from './ActionButton';\nimport {\n Breadcrumb as AriaBreadcrumb,\n BreadcrumbsProps as AriaBreadcrumbsProps,\n CollectionRenderer,\n ContextValue,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs,\n UNSTABLE_CollectionRendererContext,\n UNSTABLE_DefaultCollectionRenderer\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\ninterface BreadcrumbsStyleProps {\n /**\n * Size of the Breadcrumbs including spacing and layout.\n *\n * @default 'M'\n */\n size?: 'M' | 'L',\n /** Whether the breadcrumbs are disabled. */\n isDisabled?: boolean\n /**\n * Whether to place the last Breadcrumb item onto a new line.\n */\n // TODO: isMultiline?: boolean\n /** Whether to always show the root item if the items are collapsed. */\n // TODO: showRoot?: boolean,\n}\n\nexport interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n /** The children of the Breadcrumbs. */\n children?: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\n position: 'relative',\n display: 'flex',\n justifyContent: 'start',\n listStyleType: 'none',\n flexWrap: 'nowrap',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 0,\n gap: {\n size: {\n // TODO: why do these scale but other spacings don't?\n M: size(6), // breadcrumbs-text-to-separator-medium\n L: size(9) // breadcrumbs-text-to-separator-large\n }\n },\n padding: 0,\n transition: 'default',\n marginTop: 0,\n marginBottom: 0,\n marginStart: {\n size: {\n M: size(6),\n L: size(9)\n }\n }\n}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nexport const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);\n let domRef = useDOMRef(ref);\n let {\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size = 'M',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n return (\n <Provider\n values={[\n [InternalBreadcrumbsContext, {size, isDisabled}]\n ]}>\n <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n <RACBreadcrumbs\n {...otherProps}\n isDisabled={isDisabled}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size\n }, styles)}>\n {children}\n </RACBreadcrumbs>\n </CollapsingCollection>\n </Provider>\n );\n});\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {items, onAction} = props;\n let {direction} = useLocale();\n let {size, isDisabled} = useContext(InternalBreadcrumbsContext);\n let label = stringFormatter.format('breadcrumbs.more');\n return (\n <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>\n <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n <MenuTrigger>\n <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n <Menu items={items} onAction={onAction}>\n {(item: Node<any>) => (\n <MenuItem\n {...item.props.originalProps}\n key={item.key}>\n <Text slot=\"label\">\n {item.props.children({size, isCurrent: false, isMenu: true})}\n </Text>\n </MenuItem>\n )}\n </Menu>\n </MenuTrigger>\n <ChevronIcon\n size={size}\n className={chevronStyles({direction, isMenu: true})} />\n </li>\n </UNSTABLE_CollectionRendererContext.Provider>\n );\n};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n let {listRef, items, size} = props;\n return (\n <div\n // @ts-ignore\n inert=\"true\"\n ref={listRef}\n className={style({\n display: '[inherit]',\n gap: '[inherit]',\n flexWrap: '[inherit]',\n position: 'absolute',\n top: 0,\n bottom: 0,\n start: 0,\n end: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item, idx) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-breadcrumb\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, isCurrent: idx === items.length - 1})}>\n {item.props.children({size, isCurrent: idx === items.length - 1})}\n </div>\n );\n })}\n <ActionButton data-hidden-button isQuiet><FolderIcon /></ActionButton>\n </div>\n );\n};\n\nconst breadcrumbStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'start',\n height: 'control',\n transition: 'default',\n position: 'relative',\n flexShrink: 0,\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderStyle: 'none',\n marginStart: {\n // adjusts with the parent flex gap\n isMenu: size(-6)\n }\n});\n\nconst chevronStyles = style({\n scale: {\n direction: {\n rtl: -1\n }\n },\n marginStart: {\n default: 'text-to-visual',\n isMenu: 0\n },\n color: {\n default: 'neutral',\n forcedColors: {\n default: 'LinkText'\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst linkStyles = style({\n ...focusRing(),\n borderRadius: 'sm',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled',\n isCurrent: 'neutral',\n forcedColors: {\n default: 'LinkText',\n isDisabled: 'GrayText'\n }\n },\n transition: 'default',\n textDecoration: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline',\n isDisabled: 'none'\n },\n cursor: {\n default: 'pointer',\n isDisabled: 'default'\n },\n outlineColor: {\n default: 'focus-ring',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n});\n\nconst currentStyles = style<{size: string}>({\n font: 'control',\n fontWeight: 'bold'\n});\n\n// TODO: support user heading size customization, for now just set it to large\nconst heading = style({\n margin: 0,\n font: 'heading-lg',\n fontWeight: 'extra-bold'\n});\n\nexport interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n /** The children of the breadcrumb item. */\n children?: ReactNode\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nexport const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\n let {href, target, rel, download, ping, referrerPolicy} = props;\n let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n return (\n <AriaBreadcrumb\n {...props}\n ref={domRef}\n // @ts-ignore\n originalProps={props}\n className={({isCurrent, isDisabled}) => breadcrumbStyles({size, isCurrent, isDisabled})}>\n {({\n isCurrent,\n isDisabled,\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return children;\n }\n return (\n isCurrent ?\n <div\n className={currentStyles({size})}>\n <Provider\n values={[\n [HeadingContext, {className: heading}]\n ]}>\n {children}\n </Provider>\n </div>\n : (\n <>\n <Link\n style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}\n href={href}\n target={target}\n rel={rel}\n download={download}\n ping={ping}\n referrerPolicy={referrerPolicy}\n isDisabled={isDisabled || isCurrent}\n className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\n )\n );\n }}\n </AriaBreadcrumb>\n );\n});\n\n// Context for passing the count for the custom renderer\nlet CollapseContext = createContext<{\n containerRef: RefObject<HTMLOListElement | null>,\n onAction: BreadcrumbsProps<unknown>['onAction']\n} | null>(null);\n\nfunction CollapsingCollection({children, containerRef, onAction}) {\n return (\n <CollapseContext.Provider value={{containerRef, onAction}}>\n <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n {children}\n </UNSTABLE_CollectionRendererContext.Provider>\n </CollapseContext.Provider>\n );\n}\n\nlet CollapsingCollectionRenderer: CollectionRenderer = {\n CollectionRoot({collection}) {\n return useCollectionRender(collection);\n },\n CollectionBranch({collection}) {\n return useCollectionRender(collection);\n }\n};\n\nlet useCollectionRender = (collection: Collection<Node<unknown>>) => {\n let {containerRef, onAction} = useContext(CollapseContext) ?? {};\n let [visibleItems, setVisibleItems] = useState(collection.size);\n let {size = 'M'} = useContext(InternalBreadcrumbsContext);\n\n let children = useMemo(() => {\n let result: Node<any>[] = [];\n for (let key of collection.getKeys()) {\n result.push(collection.getItem(key)!);\n }\n return result;\n }, [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useCallback(() => {\n let currListRef: HTMLDivElement | null = listRef.current;\n if (!currListRef) {\n setVisibleItems(collection.size);\n return;\n }\n let container = currListRef.parentElement;\n if (!container) {\n setVisibleItems(collection.size);\n return;\n }\n\n let listItems = Array.from(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) as HTMLLIElement[];\n let folder = currListRef.querySelector('button') as HTMLButtonElement;\n if (listItems.length <= 0) {\n setVisibleItems(collection.size);\n return;\n }\n let containerWidth = container.offsetWidth;\n let containerGap = parseInt(getComputedStyle(container).gap, 10);\n let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);\n let newVisibleItems = 0;\n let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n let widths: Array<number> = [];\n let totalWidth = 0;\n for (let breadcrumb of listItems) {\n let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down\n widths.push(width);\n totalWidth += width;\n }\n\n // can we fit all the items without collapsing\n if (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\n setVisibleItems(collection.size);\n return;\n }\n\n // we know there is always at least one item because of the listItems.length check up above\n let widthOfFirst = widths.shift()!;\n let availableWidth = containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;\n maxVisibleItems -= 2; // account for the first item and folder\n for (let width of widths.reverse()) {\n availableWidth -= width;\n if (availableWidth <= 0) {\n break;\n }\n availableWidth -= containerGap;\n newVisibleItems++;\n }\n\n setVisibleItems(Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));\n }, [collection.size, setVisibleItems]);\n\n // making bad assumption that i can listen to containerRef when it's declared in the parent?\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n let sliceIndex = collection.size - visibleItems;\n\n return (\n <>\n <HiddenBreadcrumbs items={children} size={size} listRef={listRef} />\n {visibleItems < collection.size && collection.size > 2 ? (\n <>\n {children[0].render?.(children[0])}\n <BreadcrumbMenu items={children.slice(1, sliceIndex)} onAction={onAction} />\n {children.slice(sliceIndex).map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n </>\n ) : (\n <>\n {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n </>\n )}\n </>\n );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {ActionButton} from './ActionButton';\nimport {\n Breadcrumb as AriaBreadcrumb,\n BreadcrumbsProps as AriaBreadcrumbsProps,\n CollectionRenderer,\n CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\ninterface BreadcrumbsStyleProps {\n /**\n * Size of the Breadcrumbs including spacing and layout.\n *\n * @default 'M'\n */\n size?: 'M' | 'L',\n /** Whether the breadcrumbs are disabled. */\n isDisabled?: boolean\n /**\n * Whether to place the last Breadcrumb item onto a new line.\n */\n // TODO: isMultiline?: boolean\n /** Whether to always show the root item if the items are collapsed. */\n // TODO: showRoot?: boolean,\n}\n\nexport interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n /** The children of the Breadcrumbs. */\n children: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\n position: 'relative',\n display: 'flex',\n justifyContent: 'start',\n listStyleType: 'none',\n flexWrap: 'nowrap',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 0,\n gap: {\n size: {\n // TODO: why do these scale but other spacings don't?\n M: size(6), // breadcrumbs-text-to-separator-medium\n L: size(9) // breadcrumbs-text-to-separator-large\n }\n },\n padding: 0,\n transition: 'default',\n marginTop: 0,\n marginBottom: 0,\n marginStart: {\n size: {\n M: size(6),\n L: size(9)\n }\n }\n}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nexport const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);\n let domRef = useDOMRef(ref);\n let {\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size = 'M',\n children,\n isDisabled,\n ...otherProps\n } = props;\n\n return (\n <Provider\n values={[\n [InternalBreadcrumbsContext, {size, isDisabled}]\n ]}>\n <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n <RACBreadcrumbs\n {...otherProps}\n isDisabled={isDisabled}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size\n }, styles)}>\n {children}\n </RACBreadcrumbs>\n </CollapsingCollection>\n </Provider>\n );\n});\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {items, onAction} = props;\n let {direction} = useLocale();\n let {size, isDisabled} = useContext(InternalBreadcrumbsContext);\n let label = stringFormatter.format('breadcrumbs.more');\n return (\n <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n <MenuTrigger>\n <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n <Menu items={items} onAction={onAction}>\n {(item: Node<any>) => (\n <MenuItem\n {...item.props.originalProps}\n key={item.key}>\n <Text slot=\"label\">\n {item.props.children({size, isCurrent: false, isMenu: true})}\n </Text>\n </MenuItem>\n )}\n </Menu>\n </MenuTrigger>\n <ChevronIcon\n size={size}\n className={chevronStyles({direction, isMenu: true})} />\n </li>\n </CollectionRendererContext.Provider>\n );\n};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n let {listRef, items, size} = props;\n return (\n <div\n // @ts-ignore\n inert={inertValue(true)}\n ref={listRef}\n className={style({\n display: '[inherit]',\n gap: '[inherit]',\n flexWrap: '[inherit]',\n position: 'absolute',\n top: 0,\n bottom: 0,\n start: 0,\n end: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item, idx) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-breadcrumb\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, isCurrent: idx === items.length - 1})}>\n {item.props.children({size, isCurrent: idx === items.length - 1})}\n </div>\n );\n })}\n <ActionButton data-hidden-button isQuiet><FolderIcon /></ActionButton>\n </div>\n );\n};\n\nconst breadcrumbStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'start',\n height: 'control',\n transition: 'default',\n position: 'relative',\n flexShrink: 0,\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderStyle: 'none',\n marginStart: {\n // adjusts with the parent flex gap\n isMenu: size(-6)\n }\n});\n\nconst chevronStyles = style({\n scale: {\n direction: {\n rtl: -1\n }\n },\n marginStart: {\n default: 'text-to-visual',\n isMenu: 0\n },\n color: {\n default: 'neutral',\n forcedColors: {\n default: 'LinkText'\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst linkStyles = style({\n ...focusRing(),\n borderRadius: 'sm',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled',\n isCurrent: 'neutral',\n forcedColors: {\n default: 'LinkText',\n isDisabled: 'GrayText'\n }\n },\n transition: 'default',\n textDecoration: {\n default: 'none',\n isHovered: 'underline',\n isFocusVisible: 'underline',\n isDisabled: 'none'\n },\n cursor: {\n default: 'pointer',\n isDisabled: 'default'\n },\n outlineColor: {\n default: 'focus-ring',\n forcedColors: 'Highlight'\n },\n disableTapHighlight: true\n});\n\nconst currentStyles = style<{size: string}>({\n font: 'control',\n fontWeight: 'bold'\n});\n\n// TODO: support user heading size customization, for now just set it to large\nconst heading = style({\n margin: 0,\n font: 'heading-lg',\n fontWeight: 'extra-bold'\n});\n\nexport interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n /** The children of the breadcrumb item. */\n children: ReactNode\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nexport const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\n let {href, target, rel, download, ping, referrerPolicy} = props;\n let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n return (\n <AriaBreadcrumb\n {...props}\n ref={domRef}\n // @ts-ignore\n originalProps={props}\n className={({isCurrent, isDisabled}) => breadcrumbStyles({size, isCurrent, isDisabled})}>\n {({\n isCurrent,\n isDisabled,\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return children;\n }\n return (\n isCurrent ?\n <div\n className={currentStyles({size})}>\n <Provider\n values={[\n [HeadingContext, {className: heading}]\n ]}>\n {children}\n </Provider>\n </div>\n : (\n <>\n <Link\n style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}\n href={href}\n target={target}\n rel={rel}\n download={download}\n ping={ping}\n referrerPolicy={referrerPolicy}\n isDisabled={isDisabled || isCurrent}\n className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\n )\n );\n }}\n </AriaBreadcrumb>\n );\n});\n\n// Context for passing the count for the custom renderer\nlet CollapseContext = createContext<{\n containerRef: RefObject<HTMLOListElement | null>,\n onAction: BreadcrumbsProps<unknown>['onAction']\n} | null>(null);\n\nfunction CollapsingCollection({children, containerRef, onAction}) {\n return (\n <CollapseContext.Provider value={{containerRef, onAction}}>\n <CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n {children}\n </CollectionRendererContext.Provider>\n </CollapseContext.Provider>\n );\n}\n\nlet CollapsingCollectionRenderer: CollectionRenderer = {\n CollectionRoot({collection}) {\n return useCollectionRender(collection);\n },\n CollectionBranch({collection}) {\n return useCollectionRender(collection);\n }\n};\n\nlet useCollectionRender = (collection: Collection<Node<unknown>>) => {\n let {containerRef, onAction} = useContext(CollapseContext) ?? {};\n let [visibleItems, setVisibleItems] = useState(collection.size);\n let {size = 'M'} = useContext(InternalBreadcrumbsContext);\n\n let children = useMemo(() => {\n let result: Node<any>[] = [];\n for (let key of collection.getKeys()) {\n result.push(collection.getItem(key)!);\n }\n return result;\n }, [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useCallback(() => {\n let currListRef: HTMLDivElement | null = listRef.current;\n if (!currListRef) {\n setVisibleItems(collection.size);\n return;\n }\n let container = currListRef.parentElement;\n if (!container) {\n setVisibleItems(collection.size);\n return;\n }\n\n let listItems = Array.from(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) as HTMLLIElement[];\n let folder = currListRef.querySelector('button') as HTMLButtonElement;\n if (listItems.length <= 0) {\n setVisibleItems(collection.size);\n return;\n }\n let containerWidth = container.offsetWidth;\n let containerGap = parseInt(getComputedStyle(container).gap, 10);\n let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);\n let newVisibleItems = 0;\n let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n let widths: Array<number> = [];\n let totalWidth = 0;\n for (let breadcrumb of listItems) {\n let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down\n widths.push(width);\n totalWidth += width;\n }\n\n // can we fit all the items without collapsing\n if (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\n setVisibleItems(collection.size);\n return;\n }\n\n // we know there is always at least one item because of the listItems.length check up above\n let widthOfFirst = widths.shift()!;\n let availableWidth = containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;\n maxVisibleItems -= 2; // account for the first item and folder\n for (let width of widths.reverse()) {\n availableWidth -= width;\n if (availableWidth <= 0) {\n break;\n }\n availableWidth -= containerGap;\n newVisibleItems++;\n }\n\n setVisibleItems(Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));\n }, [collection.size, setVisibleItems]);\n\n // making bad assumption that i can listen to containerRef when it's declared in the parent?\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n let sliceIndex = collection.size - visibleItems;\n\n return (\n <>\n <HiddenBreadcrumbs items={children} size={size} listRef={listRef} />\n {visibleItems < collection.size && collection.size > 2 ? (\n <>\n {children[0].render?.(children[0])}\n <BreadcrumbMenu items={children.slice(1, sliceIndex)} onAction={onAction} />\n {children.slice(sliceIndex).map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n </>\n ) : (\n <>\n {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n </>\n )}\n </>\n );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.mjs.map"}
|
package/dist/Button.cjs
CHANGED
|
@@ -432,7 +432,7 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
432
432
|
{
|
|
433
433
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
434
434
|
slot: 'icon',
|
|
435
|
-
styles: "
|
|
435
|
+
styles: " __B-3t1x"
|
|
436
436
|
}),
|
|
437
437
|
styles: function anonymous(props) {
|
|
438
438
|
let rules = " .";
|
|
@@ -523,7 +523,7 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
523
523
|
[
|
|
524
524
|
(0, $6367bc87eb7d24ad$exports.TextContext),
|
|
525
525
|
{
|
|
526
|
-
styles: "
|
|
526
|
+
styles: " E-1gogtue F-1gogtue __B-3t1y",
|
|
527
527
|
// @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
|
|
528
528
|
'data-rsp-slot': 'text'
|
|
529
529
|
}
|
|
@@ -533,9 +533,9 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
533
533
|
{
|
|
534
534
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
535
535
|
slot: 'icon',
|
|
536
|
-
styles: "
|
|
536
|
+
styles: " __B-3t1x"
|
|
537
537
|
}),
|
|
538
|
-
styles: "
|
|
538
|
+
styles: " l-1sthc3k k-1sthc3k y-oelgqu _9-3t1x"
|
|
539
539
|
}
|
|
540
540
|
]
|
|
541
541
|
],
|