@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/Picker.mjs
CHANGED
|
@@ -13,8 +13,10 @@ import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressSc
|
|
|
13
13
|
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
|
|
14
14
|
import {jsx as $c77I5$jsx, Fragment as $c77I5$Fragment, jsxs as $c77I5$jsxs} from "react/jsx-runtime";
|
|
15
15
|
import {Select as $c77I5$Select, Button as $c77I5$Button, SelectValue as $c77I5$SelectValue, Provider as $c77I5$Provider, ListBox as $c77I5$ListBox, ListBoxItem as $c77I5$ListBoxItem, ListBoxSection as $c77I5$ListBoxSection} from "react-aria-components";
|
|
16
|
-
import {
|
|
16
|
+
import {PressResponder as $c77I5$PressResponder} from "@react-aria/interactions";
|
|
17
|
+
import {createContext as $c77I5$createContext, forwardRef as $c77I5$forwardRef, useContext as $c77I5$useContext, useState as $c77I5$useState, useRef as $c77I5$useRef} from "react";
|
|
17
18
|
import {useFocusableRef as $c77I5$useFocusableRef} from "@react-spectrum/utils";
|
|
19
|
+
import {useGlobalListeners as $c77I5$useGlobalListeners} from "@react-aria/utils";
|
|
18
20
|
import {useLocalizedStringFormatter as $c77I5$useLocalizedStringFormatter} from "@react-aria/i18n";
|
|
19
21
|
|
|
20
22
|
|
|
@@ -48,6 +50,8 @@ function $parcel$interopDefault(a) {
|
|
|
48
50
|
|
|
49
51
|
|
|
50
52
|
|
|
53
|
+
|
|
54
|
+
|
|
51
55
|
const $b41c15d27fbaff7d$export$b72b8dade9393cd5 = /*#__PURE__*/ (0, $c77I5$createContext)(null);
|
|
52
56
|
const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
|
|
53
57
|
let rules = " .";
|
|
@@ -152,11 +156,12 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
|
|
|
152
156
|
else rules += ' -_375toq_k-f';
|
|
153
157
|
return rules;
|
|
154
158
|
};
|
|
155
|
-
const $b41c15d27fbaff7d$var$quietFocusLine = "
|
|
159
|
+
const $b41c15d27fbaff7d$var$quietFocusLine = " lb k-375zlr Va _aa _wf _xf _yf _zf bx ba_____M";
|
|
156
160
|
let $b41c15d27fbaff7d$export$b1e5508a851be14d = function anonymous(props) {
|
|
157
161
|
let rules = " .";
|
|
158
162
|
rules += ' _Ma';
|
|
159
163
|
rules += ' _0f';
|
|
164
|
+
rules += ' lb';
|
|
160
165
|
if (props.size === "XL") rules += ' __i-14g31og';
|
|
161
166
|
else if (props.size === "L") rules += ' __i-1pqbi84';
|
|
162
167
|
else if (props.size === "M") rules += ' __i-n6rb9a';
|
|
@@ -193,6 +198,7 @@ let $b41c15d27fbaff7d$export$b1e5508a851be14d = function anonymous(props) {
|
|
|
193
198
|
rules += ' _ebf';
|
|
194
199
|
rules += ' _ee';
|
|
195
200
|
}
|
|
201
|
+
rules += ' __g-zexzcl';
|
|
196
202
|
return rules;
|
|
197
203
|
};
|
|
198
204
|
const $b41c15d27fbaff7d$var$invalidBorder = function anonymous(props) {
|
|
@@ -233,7 +239,7 @@ const $b41c15d27fbaff7d$var$valueStyles = function anonymous(props) {
|
|
|
233
239
|
rules += ' _2c';
|
|
234
240
|
return rules;
|
|
235
241
|
};
|
|
236
|
-
const $b41c15d27fbaff7d$var$iconStyles = "
|
|
242
|
+
const $b41c15d27fbaff7d$var$iconStyles = " _9-3t1x R-3hn0u -rwx0fg_e-b";
|
|
237
243
|
let $b41c15d27fbaff7d$var$InternalPickerContext = /*#__PURE__*/ (0, $c77I5$createContext)({
|
|
238
244
|
size: 'M'
|
|
239
245
|
});
|
|
@@ -251,6 +257,21 @@ const $b41c15d27fbaff7d$export$ba25329847403e11 = /*#__PURE__*/ (0, $c77I5$forwa
|
|
|
251
257
|
else if (size === 'M') menuOffset = 6;
|
|
252
258
|
else if (size === 'L') menuOffset = 7;
|
|
253
259
|
else menuOffset = 8;
|
|
260
|
+
// For mouse interactions, pickers open on press start. When the popover underlay appears
|
|
261
|
+
// it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
|
|
262
|
+
// to occur. We override this by listening for pointerup on the document ourselves.
|
|
263
|
+
let [isPressed, setPressed] = (0, $c77I5$useState)(false);
|
|
264
|
+
let { addGlobalListener: addGlobalListener } = (0, $c77I5$useGlobalListeners)();
|
|
265
|
+
let onPressStart = (e)=>{
|
|
266
|
+
if (e.pointerType !== 'mouse') return;
|
|
267
|
+
setPressed(true);
|
|
268
|
+
addGlobalListener(document, 'pointerup', ()=>{
|
|
269
|
+
setPressed(false);
|
|
270
|
+
}, {
|
|
271
|
+
once: true,
|
|
272
|
+
capture: true
|
|
273
|
+
});
|
|
274
|
+
};
|
|
254
275
|
return /*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$Select), {
|
|
255
276
|
...pickerProps,
|
|
256
277
|
placeholder: placeholder,
|
|
@@ -333,80 +354,84 @@ const $b41c15d27fbaff7d$export$ba25329847403e11 = /*#__PURE__*/ (0, $c77I5$forwa
|
|
|
333
354
|
contextualHelp: props1.contextualHelp,
|
|
334
355
|
children: label
|
|
335
356
|
}),
|
|
336
|
-
/*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
357
|
+
/*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$PressResponder), {
|
|
358
|
+
onPressStart: onPressStart,
|
|
359
|
+
isPressed: isPressed,
|
|
360
|
+
children: /*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$Button), {
|
|
361
|
+
ref: domRef,
|
|
362
|
+
style: (renderProps)=>(0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef)(renderProps),
|
|
363
|
+
// Prevent press scale from sticking while Picker is open.
|
|
364
|
+
// @ts-ignore
|
|
365
|
+
isPressed: false,
|
|
366
|
+
className: (renderProps)=>$b41c15d27fbaff7d$var$inputButton({
|
|
367
|
+
...renderProps,
|
|
368
|
+
size: size,
|
|
369
|
+
isOpen: isOpen,
|
|
370
|
+
isQuiet: isQuiet
|
|
371
|
+
}),
|
|
372
|
+
children: (renderProps)=>/*#__PURE__*/ (0, $c77I5$jsxs)((0, $c77I5$Fragment), {
|
|
373
|
+
children: [
|
|
374
|
+
/*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$SelectValue), {
|
|
375
|
+
className: $b41c15d27fbaff7d$var$valueStyles({
|
|
376
|
+
isQuiet: isQuiet
|
|
377
|
+
}) + ' ' + "-u6zm92",
|
|
378
|
+
children: ({ defaultChildren: defaultChildren })=>{
|
|
379
|
+
return /*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$Provider), {
|
|
380
|
+
values: [
|
|
381
|
+
[
|
|
382
|
+
(0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
|
|
383
|
+
{
|
|
384
|
+
slots: {
|
|
385
|
+
icon: {
|
|
386
|
+
render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
|
|
387
|
+
slot: 'icon',
|
|
388
|
+
styles: (0, $13afb0ea5f0ed767$export$31d1842a0fd736e6)
|
|
389
|
+
}),
|
|
390
|
+
styles: (0, $13afb0ea5f0ed767$export$1ca1ec8b29a4ce27)
|
|
391
|
+
}
|
|
367
392
|
}
|
|
368
393
|
}
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
394
|
+
],
|
|
395
|
+
[
|
|
396
|
+
(0, $8e847109a6ab556d$export$9afb8bc826b033ea),
|
|
397
|
+
{
|
|
398
|
+
slots: {
|
|
399
|
+
description: {},
|
|
400
|
+
label: {
|
|
401
|
+
styles: " _0a __a-3t1y __wb __xb _na _qb"
|
|
402
|
+
}
|
|
378
403
|
}
|
|
379
404
|
}
|
|
380
|
-
|
|
405
|
+
],
|
|
406
|
+
[
|
|
407
|
+
$b41c15d27fbaff7d$var$InsideSelectValueContext,
|
|
408
|
+
true
|
|
409
|
+
]
|
|
381
410
|
],
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
/*#__PURE__*/ (0, $c77I5$jsx)("div", {
|
|
403
|
-
className: $b41c15d27fbaff7d$var$invalidBorder({
|
|
404
|
-
...renderProps,
|
|
405
|
-
size: size
|
|
411
|
+
children: defaultChildren
|
|
412
|
+
});
|
|
413
|
+
}
|
|
414
|
+
}),
|
|
415
|
+
isInvalid && /*#__PURE__*/ (0, $c77I5$jsx)((0, $9afd80978c252040$export$bda0d075e0e342c9), {
|
|
416
|
+
isDisabled: isDisabled
|
|
417
|
+
}),
|
|
418
|
+
/*#__PURE__*/ (0, $c77I5$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
|
|
419
|
+
size: size,
|
|
420
|
+
className: $b41c15d27fbaff7d$var$iconStyles
|
|
421
|
+
}),
|
|
422
|
+
isFocusVisible && isQuiet && /*#__PURE__*/ (0, $c77I5$jsx)("span", {
|
|
423
|
+
className: $b41c15d27fbaff7d$var$quietFocusLine
|
|
424
|
+
}),
|
|
425
|
+
isInvalid && !isDisabled && !isQuiet && // @ts-ignore known limitation detecting functions from the theme
|
|
426
|
+
/*#__PURE__*/ (0, $c77I5$jsx)("div", {
|
|
427
|
+
className: $b41c15d27fbaff7d$var$invalidBorder({
|
|
428
|
+
...renderProps,
|
|
429
|
+
size: size
|
|
430
|
+
})
|
|
406
431
|
})
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
432
|
+
]
|
|
433
|
+
})
|
|
434
|
+
})
|
|
410
435
|
}),
|
|
411
436
|
/*#__PURE__*/ (0, $c77I5$jsx)((0, $9afd80978c252040$export$a67c0bc59081311a), {
|
|
412
437
|
size: size,
|
package/dist/Picker.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.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 {\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /**\n * The size of the Picker.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the picker should be displayed with a quiet style.\n * @private\n */\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n let {size} = useContext(InternalPickerContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.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 {\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, PressEvent, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef, useState} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /**\n * The size of the Picker.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the picker should be displayed with a quiet style.\n * @private\n */\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n width: 'full',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control',\n gridAutoRows: 'min-content'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n // For mouse interactions, pickers open on press start. When the popover underlay appears\n // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n // to occur. We override this by listening for pointerup on the document ourselves.\n let [isPressed, setPressed] = useState(false);\n let {addGlobalListener} = useGlobalListeners();\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'mouse') {\n return;\n }\n setPressed(true);\n addGlobalListener(document, 'pointerup', () => {\n setPressed(false);\n }, {once: true, capture: true});\n };\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n </PressResponder>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n let {size} = useContext(InternalPickerContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
|
package/dist/Popover.cjs
CHANGED
|
@@ -66,6 +66,7 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
|
|
|
66
66
|
}
|
|
67
67
|
if (!$r) rules += ' r-rtptky';
|
|
68
68
|
rules += ' __oa';
|
|
69
|
+
rules += ' _0d';
|
|
69
70
|
if (props.isExiting) rules += ' _L-3t1x';
|
|
70
71
|
else if (props.isEntering) rules += ' _L-3t1x';
|
|
71
72
|
if (props.isSubmenu) rules += ' Qa';
|
|
@@ -187,13 +188,11 @@ const $493371ef39bf7a55$var$dialogStyle = function anonymous(props, overrides) {
|
|
|
187
188
|
rules += matches.join('');
|
|
188
189
|
let $V = false;
|
|
189
190
|
let $l = false;
|
|
190
|
-
let $k = false;
|
|
191
191
|
let $r = false;
|
|
192
192
|
let $p = false;
|
|
193
193
|
for (let p of matches){
|
|
194
194
|
if (/^\s*V/.test(p)) $V = true;
|
|
195
195
|
if (/^\s*l/.test(p)) $l = true;
|
|
196
|
-
if (/^\s*k/.test(p)) $k = true;
|
|
197
196
|
if (/^\s*r/.test(p)) $r = true;
|
|
198
197
|
if (/^\s*p/.test(p)) $p = true;
|
|
199
198
|
}
|
|
@@ -211,7 +210,6 @@ const $493371ef39bf7a55$var$dialogStyle = function anonymous(props, overrides) {
|
|
|
211
210
|
rules += ' __xa';
|
|
212
211
|
if (!$V) rules += ' Vc';
|
|
213
212
|
if (!$l) rules += ' lb';
|
|
214
|
-
if (!$k) rules += ' kb';
|
|
215
213
|
if (!$r) rules += ' r-17zqamw';
|
|
216
214
|
if (!$p) rules += ' p-17zqamw';
|
|
217
215
|
return rules;
|
package/dist/Popover.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,uBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gCAAC,CAAA,GAAA,iCAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n styles?: StyleString,\n /**\n * Whether a popover's arrow should be hidden.\n *\n * @default false\n */\n hideArrow?: boolean,\n /**\n * The size of the Popover. If not specified, the popover fits its contents.\n */\n size?: 'S' | 'M' | 'L'\n /** The type of overlay that should be rendered when on a mobile device. */\n // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 * containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. */}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,uBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gCAAC,CAAA,GAAA,iCAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n styles?: StyleString,\n /**\n * Whether a popover's arrow should be hidden.\n *\n * @default false\n */\n hideArrow?: boolean,\n /**\n * The size of the Popover. If not specified, the popover fits its contents.\n */\n size?: 'S' | 'M' | 'L'\n /** The type of overlay that should be rendered when on a mobile device. */\n // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 * containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n display: 'flex',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. */}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n width: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
package/dist/Popover.css
CHANGED
|
@@ -104,6 +104,10 @@
|
|
|
104
104
|
max-width: calc(100vw - 24px);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
+
._0d {
|
|
108
|
+
display: flex;
|
|
109
|
+
}
|
|
110
|
+
|
|
107
111
|
._L-3t1x {
|
|
108
112
|
opacity: 0;
|
|
109
113
|
opacity: 0;
|
|
@@ -261,10 +265,6 @@
|
|
|
261
265
|
width: 100%;
|
|
262
266
|
}
|
|
263
267
|
|
|
264
|
-
.kb {
|
|
265
|
-
height: 100%;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
268
|
.r-17zqamw {
|
|
269
269
|
max-width: inherit;
|
|
270
270
|
}
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
}
|
|
275
275
|
}
|
|
276
276
|
|
|
277
|
-
@layer _.b
|
|
277
|
+
@layer _.b;
|
|
278
278
|
|
|
279
279
|
@layer _.b.a {
|
|
280
280
|
@media (forced-colors: active) {
|
|
@@ -287,8 +287,4 @@
|
|
|
287
287
|
}
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
|
-
|
|
291
|
-
.\.:not(#a#b) {
|
|
292
|
-
all: revert-layer;
|
|
293
|
-
}
|
|
294
290
|
/*# sourceMappingURL=Popover.css.map */
|
package/dist/Popover.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AC+Cc;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;
|
|
1
|
+
{"mappings":"AC+Cc;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6EF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAkGQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/KN;;AAAA;EAAA;IAAA;;;;IA6EF","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n styles?: StyleString,\n /**\n * Whether a popover's arrow should be hidden.\n *\n * @default false\n */\n hideArrow?: boolean,\n /**\n * The size of the Popover. If not specified, the popover fits its contents.\n */\n size?: 'S' | 'M' | 'L'\n /** The type of overlay that should be rendered when on a mobile device. */\n // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 * containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n display: 'flex',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. */}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n width: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.css.map"}
|
package/dist/Popover.mjs
CHANGED
|
@@ -59,6 +59,7 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
|
|
|
59
59
|
}
|
|
60
60
|
if (!$r) rules += ' r-rtptky';
|
|
61
61
|
rules += ' __oa';
|
|
62
|
+
rules += ' _0d';
|
|
62
63
|
if (props.isExiting) rules += ' _L-3t1x';
|
|
63
64
|
else if (props.isEntering) rules += ' _L-3t1x';
|
|
64
65
|
if (props.isSubmenu) rules += ' Qa';
|
|
@@ -180,13 +181,11 @@ const $88b746eba92c8d0d$var$dialogStyle = function anonymous(props, overrides) {
|
|
|
180
181
|
rules += matches.join('');
|
|
181
182
|
let $V = false;
|
|
182
183
|
let $l = false;
|
|
183
|
-
let $k = false;
|
|
184
184
|
let $r = false;
|
|
185
185
|
let $p = false;
|
|
186
186
|
for (let p of matches){
|
|
187
187
|
if (/^\s*V/.test(p)) $V = true;
|
|
188
188
|
if (/^\s*l/.test(p)) $l = true;
|
|
189
|
-
if (/^\s*k/.test(p)) $k = true;
|
|
190
189
|
if (/^\s*r/.test(p)) $r = true;
|
|
191
190
|
if (/^\s*p/.test(p)) $p = true;
|
|
192
191
|
}
|
|
@@ -204,7 +203,6 @@ const $88b746eba92c8d0d$var$dialogStyle = function anonymous(props, overrides) {
|
|
|
204
203
|
rules += ' __xa';
|
|
205
204
|
if (!$V) rules += ' Vc';
|
|
206
205
|
if (!$l) rules += ' lb';
|
|
207
|
-
if (!$k) rules += ' kb';
|
|
208
206
|
if (!$r) rules += ' r-17zqamw';
|
|
209
207
|
if (!$p) rules += ' p-17zqamw';
|
|
210
208
|
return rules;
|
package/dist/Popover.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gBAAC,CAAA,GAAA,aAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n styles?: StyleString,\n /**\n * Whether a popover's arrow should be hidden.\n *\n * @default false\n */\n hideArrow?: boolean,\n /**\n * The size of the Popover. If not specified, the popover fits its contents.\n */\n size?: 'S' | 'M' | 'L'\n /** The type of overlay that should be rendered when on a mobile device. */\n // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 * containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. */}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gBAAC,CAAA,GAAA,aAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n styles?: StyleString,\n /**\n * Whether a popover's arrow should be hidden.\n *\n * @default false\n */\n hideArrow?: boolean,\n /**\n * The size of the Popover. If not specified, the popover fits its contents.\n */\n size?: 'S' | 'M' | 'L'\n /** The type of overlay that should be rendered when on a mobile device. */\n // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 * containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n display: 'flex',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. */}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n width: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
|