react-aria-components 1.17.0 → 1.19.0
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/exports/Autocomplete.cjs.map +1 -1
- package/dist/exports/Autocomplete.js.map +1 -1
- package/dist/exports/Autocomplete.mjs.map +1 -1
- package/dist/exports/Calendar.cjs +3 -0
- package/dist/exports/Calendar.cjs.map +1 -1
- package/dist/exports/Calendar.js +2 -2
- package/dist/exports/Calendar.js.map +1 -1
- package/dist/exports/Calendar.mjs +2 -2
- package/dist/exports/Calendar.mjs.map +1 -1
- package/dist/exports/Checkbox.cjs +8 -0
- package/dist/exports/Checkbox.cjs.map +1 -1
- package/dist/exports/Checkbox.js +6 -2
- package/dist/exports/Checkbox.js.map +1 -1
- package/dist/exports/Checkbox.mjs +6 -2
- package/dist/exports/Checkbox.mjs.map +1 -1
- package/dist/exports/CheckboxGroup.cjs.map +1 -1
- package/dist/exports/CheckboxGroup.js.map +1 -1
- package/dist/exports/CheckboxGroup.mjs.map +1 -1
- package/dist/exports/CollectionBuilder.cjs.map +1 -1
- package/dist/exports/CollectionBuilder.js.map +1 -1
- package/dist/exports/CollectionBuilder.mjs.map +1 -1
- package/dist/exports/ColorArea.cjs.map +1 -1
- package/dist/exports/ColorArea.js.map +1 -1
- package/dist/exports/ColorArea.mjs.map +1 -1
- package/dist/exports/ColorField.cjs.map +1 -1
- package/dist/exports/ColorField.js.map +1 -1
- package/dist/exports/ColorField.mjs.map +1 -1
- package/dist/exports/ColorPicker.cjs.map +1 -1
- package/dist/exports/ColorPicker.js.map +1 -1
- package/dist/exports/ColorPicker.mjs.map +1 -1
- package/dist/exports/ColorSlider.cjs.map +1 -1
- package/dist/exports/ColorSlider.js.map +1 -1
- package/dist/exports/ColorSlider.mjs.map +1 -1
- package/dist/exports/ColorSwatch.cjs.map +1 -1
- package/dist/exports/ColorSwatch.js.map +1 -1
- package/dist/exports/ColorSwatch.mjs.map +1 -1
- package/dist/exports/ColorSwatchPicker.cjs.map +1 -1
- package/dist/exports/ColorSwatchPicker.js.map +1 -1
- package/dist/exports/ColorSwatchPicker.mjs.map +1 -1
- package/dist/exports/ColorThumb.cjs.map +1 -1
- package/dist/exports/ColorThumb.js.map +1 -1
- package/dist/exports/ColorThumb.mjs.map +1 -1
- package/dist/exports/ColorWheel.cjs.map +1 -1
- package/dist/exports/ColorWheel.js.map +1 -1
- package/dist/exports/ColorWheel.mjs.map +1 -1
- package/dist/exports/ComboBox.cjs.map +1 -1
- package/dist/exports/ComboBox.js.map +1 -1
- package/dist/exports/ComboBox.mjs.map +1 -1
- package/dist/exports/DateField.cjs.map +1 -1
- package/dist/exports/DateField.js.map +1 -1
- package/dist/exports/DateField.mjs.map +1 -1
- package/dist/exports/DatePicker.cjs.map +1 -1
- package/dist/exports/DatePicker.js.map +1 -1
- package/dist/exports/DatePicker.mjs.map +1 -1
- package/dist/exports/DateRangePicker.cjs.map +1 -1
- package/dist/exports/DateRangePicker.js.map +1 -1
- package/dist/exports/DateRangePicker.mjs.map +1 -1
- package/dist/exports/Disclosure.cjs.map +1 -1
- package/dist/exports/Disclosure.js.map +1 -1
- package/dist/exports/Disclosure.mjs.map +1 -1
- package/dist/exports/DisclosureGroup.cjs.map +1 -1
- package/dist/exports/DisclosureGroup.js.map +1 -1
- package/dist/exports/DisclosureGroup.mjs.map +1 -1
- package/dist/exports/GridList.cjs.map +1 -1
- package/dist/exports/GridList.js.map +1 -1
- package/dist/exports/GridList.mjs.map +1 -1
- package/dist/exports/ListBox.cjs.map +1 -1
- package/dist/exports/ListBox.js.map +1 -1
- package/dist/exports/ListBox.mjs.map +1 -1
- package/dist/exports/Menu.cjs.map +1 -1
- package/dist/exports/Menu.js.map +1 -1
- package/dist/exports/Menu.mjs.map +1 -1
- package/dist/exports/RadioGroup.cjs +3 -0
- package/dist/exports/RadioGroup.cjs.map +1 -1
- package/dist/exports/RadioGroup.js +2 -2
- package/dist/exports/RadioGroup.js.map +1 -1
- package/dist/exports/RadioGroup.mjs +2 -2
- package/dist/exports/RadioGroup.mjs.map +1 -1
- package/dist/exports/RangeCalendar.cjs +3 -0
- package/dist/exports/RangeCalendar.cjs.map +1 -1
- package/dist/exports/RangeCalendar.js +2 -2
- package/dist/exports/RangeCalendar.js.map +1 -1
- package/dist/exports/RangeCalendar.mjs +2 -2
- package/dist/exports/RangeCalendar.mjs.map +1 -1
- package/dist/exports/Select.cjs.map +1 -1
- package/dist/exports/Select.js.map +1 -1
- package/dist/exports/Select.mjs.map +1 -1
- package/dist/exports/SharedElementTransition.cjs.map +1 -1
- package/dist/exports/SharedElementTransition.js.map +1 -1
- package/dist/exports/SharedElementTransition.mjs.map +1 -1
- package/dist/exports/Slider.cjs +2 -0
- package/dist/exports/Slider.cjs.map +1 -1
- package/dist/exports/Slider.js +2 -2
- package/dist/exports/Slider.js.map +1 -1
- package/dist/exports/Slider.mjs +2 -2
- package/dist/exports/Slider.mjs.map +1 -1
- package/dist/exports/Switch.cjs +8 -0
- package/dist/exports/Switch.cjs.map +1 -1
- package/dist/exports/Switch.js +6 -2
- package/dist/exports/Switch.js.map +1 -1
- package/dist/exports/Switch.mjs +6 -2
- package/dist/exports/Switch.mjs.map +1 -1
- package/dist/exports/Table.cjs +1 -0
- package/dist/exports/Table.cjs.map +1 -1
- package/dist/exports/Table.js +2 -2
- package/dist/exports/Table.js.map +1 -1
- package/dist/exports/Table.mjs +2 -2
- package/dist/exports/Table.mjs.map +1 -1
- package/dist/exports/Tabs.cjs.map +1 -1
- package/dist/exports/Tabs.js.map +1 -1
- package/dist/exports/Tabs.mjs.map +1 -1
- package/dist/exports/TagGroup.cjs.map +1 -1
- package/dist/exports/TagGroup.js.map +1 -1
- package/dist/exports/TagGroup.mjs.map +1 -1
- package/dist/exports/TimeField.cjs.map +1 -1
- package/dist/exports/TimeField.js.map +1 -1
- package/dist/exports/TimeField.mjs.map +1 -1
- package/dist/exports/Toast.cjs.map +1 -1
- package/dist/exports/Toast.js.map +1 -1
- package/dist/exports/Toast.mjs.map +1 -1
- package/dist/exports/ToggleButtonGroup.cjs.map +1 -1
- package/dist/exports/ToggleButtonGroup.js.map +1 -1
- package/dist/exports/ToggleButtonGroup.mjs.map +1 -1
- package/dist/exports/Tree.cjs.map +1 -1
- package/dist/exports/Tree.js.map +1 -1
- package/dist/exports/Tree.mjs.map +1 -1
- package/dist/exports/Virtualizer.cjs.map +1 -1
- package/dist/exports/Virtualizer.js.map +1 -1
- package/dist/exports/Virtualizer.mjs.map +1 -1
- package/dist/exports/index.cjs +19 -1
- package/dist/exports/index.cjs.map +1 -1
- package/dist/exports/index.js +11 -8
- package/dist/exports/index.js.map +1 -1
- package/dist/exports/index.mjs +11 -8
- package/dist/exports/index.mjs.map +1 -1
- package/dist/exports/useAsyncList.cjs.map +1 -1
- package/dist/exports/useAsyncList.js.map +1 -1
- package/dist/exports/useAsyncList.mjs.map +1 -1
- package/dist/exports/useDragAndDrop.cjs.map +1 -1
- package/dist/exports/useDragAndDrop.js.map +1 -1
- package/dist/exports/useDragAndDrop.mjs.map +1 -1
- package/dist/exports/useDrop.cjs.map +1 -1
- package/dist/exports/useDrop.js.map +1 -1
- package/dist/exports/useDrop.mjs.map +1 -1
- package/dist/private/Autocomplete.cjs.map +1 -1
- package/dist/private/Autocomplete.js.map +1 -1
- package/dist/private/Autocomplete.mjs.map +1 -1
- package/dist/private/Breadcrumbs.cjs.map +1 -1
- package/dist/private/Breadcrumbs.js.map +1 -1
- package/dist/private/Breadcrumbs.mjs.map +1 -1
- package/dist/private/Button.cjs.map +1 -1
- package/dist/private/Button.js.map +1 -1
- package/dist/private/Button.mjs.map +1 -1
- package/dist/private/Calendar.cjs +34 -2
- package/dist/private/Calendar.cjs.map +1 -1
- package/dist/private/Calendar.js +34 -5
- package/dist/private/Calendar.js.map +1 -1
- package/dist/private/Calendar.mjs +34 -5
- package/dist/private/Calendar.mjs.map +1 -1
- package/dist/private/Checkbox.cjs +104 -17
- package/dist/private/Checkbox.cjs.map +1 -1
- package/dist/private/Checkbox.js +102 -18
- package/dist/private/Checkbox.js.map +1 -1
- package/dist/private/Checkbox.mjs +102 -18
- package/dist/private/Checkbox.mjs.map +1 -1
- package/dist/private/Collection.cjs.map +1 -1
- package/dist/private/Collection.js.map +1 -1
- package/dist/private/Collection.mjs.map +1 -1
- package/dist/private/ColorArea.cjs.map +1 -1
- package/dist/private/ColorArea.js.map +1 -1
- package/dist/private/ColorArea.mjs.map +1 -1
- package/dist/private/ColorField.cjs.map +1 -1
- package/dist/private/ColorField.js.map +1 -1
- package/dist/private/ColorField.mjs.map +1 -1
- package/dist/private/ColorPicker.cjs.map +1 -1
- package/dist/private/ColorPicker.js.map +1 -1
- package/dist/private/ColorPicker.mjs.map +1 -1
- package/dist/private/ColorSlider.cjs.map +1 -1
- package/dist/private/ColorSlider.js.map +1 -1
- package/dist/private/ColorSlider.mjs.map +1 -1
- package/dist/private/ColorSwatch.cjs.map +1 -1
- package/dist/private/ColorSwatch.js.map +1 -1
- package/dist/private/ColorSwatch.mjs.map +1 -1
- package/dist/private/ColorSwatchPicker.cjs.map +1 -1
- package/dist/private/ColorSwatchPicker.js.map +1 -1
- package/dist/private/ColorSwatchPicker.mjs.map +1 -1
- package/dist/private/ColorThumb.cjs.map +1 -1
- package/dist/private/ColorThumb.js.map +1 -1
- package/dist/private/ColorThumb.mjs.map +1 -1
- package/dist/private/ColorWheel.cjs.map +1 -1
- package/dist/private/ColorWheel.js.map +1 -1
- package/dist/private/ColorWheel.mjs.map +1 -1
- package/dist/private/ComboBox.cjs +15 -3
- package/dist/private/ComboBox.cjs.map +1 -1
- package/dist/private/ComboBox.js +16 -4
- package/dist/private/ComboBox.js.map +1 -1
- package/dist/private/ComboBox.mjs +16 -4
- package/dist/private/ComboBox.mjs.map +1 -1
- package/dist/private/DateField.cjs.map +1 -1
- package/dist/private/DateField.js.map +1 -1
- package/dist/private/DateField.mjs.map +1 -1
- package/dist/private/DatePicker.cjs +0 -26
- package/dist/private/DatePicker.cjs.map +1 -1
- package/dist/private/DatePicker.js +1 -27
- package/dist/private/DatePicker.js.map +1 -1
- package/dist/private/DatePicker.mjs +1 -27
- package/dist/private/DatePicker.mjs.map +1 -1
- package/dist/private/Dialog.cjs +1 -17
- package/dist/private/Dialog.cjs.map +1 -1
- package/dist/private/Dialog.js +2 -18
- package/dist/private/Dialog.js.map +1 -1
- package/dist/private/Dialog.mjs +2 -18
- package/dist/private/Dialog.mjs.map +1 -1
- package/dist/private/Disclosure.cjs.map +1 -1
- package/dist/private/Disclosure.js.map +1 -1
- package/dist/private/Disclosure.mjs.map +1 -1
- package/dist/private/DragAndDrop.cjs +3 -3
- package/dist/private/DragAndDrop.cjs.map +1 -1
- package/dist/private/DragAndDrop.js +3 -3
- package/dist/private/DragAndDrop.js.map +1 -1
- package/dist/private/DragAndDrop.mjs +3 -3
- package/dist/private/DragAndDrop.mjs.map +1 -1
- package/dist/private/DropZone.cjs.map +1 -1
- package/dist/private/DropZone.js.map +1 -1
- package/dist/private/DropZone.mjs.map +1 -1
- package/dist/private/FieldError.cjs.map +1 -1
- package/dist/private/FieldError.js.map +1 -1
- package/dist/private/FieldError.mjs.map +1 -1
- package/dist/private/FileTrigger.cjs.map +1 -1
- package/dist/private/FileTrigger.js.map +1 -1
- package/dist/private/FileTrigger.mjs.map +1 -1
- package/dist/private/Form.cjs.map +1 -1
- package/dist/private/Form.js.map +1 -1
- package/dist/private/Form.mjs.map +1 -1
- package/dist/private/GridLayout.cjs +37 -0
- package/dist/private/GridLayout.cjs.map +1 -0
- package/dist/private/GridLayout.js +32 -0
- package/dist/private/GridLayout.js.map +1 -0
- package/dist/private/GridLayout.mjs +32 -0
- package/dist/private/GridLayout.mjs.map +1 -0
- package/dist/private/GridList.cjs +23 -5
- package/dist/private/GridList.cjs.map +1 -1
- package/dist/private/GridList.js +24 -6
- package/dist/private/GridList.js.map +1 -1
- package/dist/private/GridList.mjs +24 -6
- package/dist/private/GridList.mjs.map +1 -1
- package/dist/private/Group.cjs.map +1 -1
- package/dist/private/Group.js.map +1 -1
- package/dist/private/Group.mjs.map +1 -1
- package/dist/private/Header.cjs.map +1 -1
- package/dist/private/Header.js.map +1 -1
- package/dist/private/Header.mjs.map +1 -1
- package/dist/private/Heading.cjs.map +1 -1
- package/dist/private/Heading.js.map +1 -1
- package/dist/private/Heading.mjs.map +1 -1
- package/dist/private/HiddenDateInput.cjs +3 -3
- package/dist/private/HiddenDateInput.cjs.map +1 -1
- package/dist/private/HiddenDateInput.js +3 -3
- package/dist/private/HiddenDateInput.js.map +1 -1
- package/dist/private/HiddenDateInput.mjs +3 -3
- package/dist/private/HiddenDateInput.mjs.map +1 -1
- package/dist/private/Input.cjs.map +1 -1
- package/dist/private/Input.js.map +1 -1
- package/dist/private/Input.mjs.map +1 -1
- package/dist/private/Keyboard.cjs.map +1 -1
- package/dist/private/Keyboard.js.map +1 -1
- package/dist/private/Keyboard.mjs.map +1 -1
- package/dist/private/Label.cjs.map +1 -1
- package/dist/private/Label.js.map +1 -1
- package/dist/private/Label.mjs.map +1 -1
- package/dist/private/Link.cjs.map +1 -1
- package/dist/private/Link.js.map +1 -1
- package/dist/private/Link.mjs.map +1 -1
- package/dist/private/ListBox.cjs +6 -5
- package/dist/private/ListBox.cjs.map +1 -1
- package/dist/private/ListBox.js +6 -5
- package/dist/private/ListBox.js.map +1 -1
- package/dist/private/ListBox.mjs +6 -5
- package/dist/private/ListBox.mjs.map +1 -1
- package/dist/private/Menu.cjs +5 -15
- package/dist/private/Menu.cjs.map +1 -1
- package/dist/private/Menu.js +6 -16
- package/dist/private/Menu.js.map +1 -1
- package/dist/private/Menu.mjs +6 -16
- package/dist/private/Menu.mjs.map +1 -1
- package/dist/private/Meter.cjs.map +1 -1
- package/dist/private/Meter.js.map +1 -1
- package/dist/private/Meter.mjs.map +1 -1
- package/dist/private/Modal.cjs.map +1 -1
- package/dist/private/Modal.js.map +1 -1
- package/dist/private/Modal.mjs.map +1 -1
- package/dist/private/NumberField.cjs.map +1 -1
- package/dist/private/NumberField.js.map +1 -1
- package/dist/private/NumberField.mjs.map +1 -1
- package/dist/private/OverlayArrow.cjs.map +1 -1
- package/dist/private/OverlayArrow.js.map +1 -1
- package/dist/private/OverlayArrow.mjs.map +1 -1
- package/dist/private/Popover.cjs +17 -1
- package/dist/private/Popover.cjs.map +1 -1
- package/dist/private/Popover.js +19 -2
- package/dist/private/Popover.js.map +1 -1
- package/dist/private/Popover.mjs +18 -2
- package/dist/private/Popover.mjs.map +1 -1
- package/dist/private/ProgressBar.cjs.map +1 -1
- package/dist/private/ProgressBar.js.map +1 -1
- package/dist/private/ProgressBar.mjs.map +1 -1
- package/dist/private/RadioGroup.cjs +87 -7
- package/dist/private/RadioGroup.cjs.map +1 -1
- package/dist/private/RadioGroup.js +86 -9
- package/dist/private/RadioGroup.js.map +1 -1
- package/dist/private/RadioGroup.mjs +86 -9
- package/dist/private/RadioGroup.mjs.map +1 -1
- package/dist/private/SearchField.cjs.map +1 -1
- package/dist/private/SearchField.js.map +1 -1
- package/dist/private/SearchField.mjs.map +1 -1
- package/dist/private/Select.cjs +1 -17
- package/dist/private/Select.cjs.map +1 -1
- package/dist/private/Select.js +2 -18
- package/dist/private/Select.js.map +1 -1
- package/dist/private/Select.mjs +2 -18
- package/dist/private/Select.mjs.map +1 -1
- package/dist/private/SelectionIndicator.cjs.map +1 -1
- package/dist/private/SelectionIndicator.js.map +1 -1
- package/dist/private/SelectionIndicator.mjs.map +1 -1
- package/dist/private/Separator.cjs.map +1 -1
- package/dist/private/Separator.js.map +1 -1
- package/dist/private/Separator.mjs.map +1 -1
- package/dist/private/SharedElementTransition.cjs.map +1 -1
- package/dist/private/SharedElementTransition.js.map +1 -1
- package/dist/private/SharedElementTransition.mjs.map +1 -1
- package/dist/private/Slider.cjs +51 -1
- package/dist/private/Slider.cjs.map +1 -1
- package/dist/private/Slider.js +50 -2
- package/dist/private/Slider.js.map +1 -1
- package/dist/private/Slider.mjs +50 -2
- package/dist/private/Slider.mjs.map +1 -1
- package/dist/private/Switch.cjs +118 -4
- package/dist/private/Switch.cjs.map +1 -1
- package/dist/private/Switch.js +119 -7
- package/dist/private/Switch.js.map +1 -1
- package/dist/private/Switch.mjs +118 -7
- package/dist/private/Switch.mjs.map +1 -1
- package/dist/private/Table.cjs +115 -24
- package/dist/private/Table.cjs.map +1 -1
- package/dist/private/Table.js +116 -26
- package/dist/private/Table.js.map +1 -1
- package/dist/private/Table.mjs +116 -26
- package/dist/private/Table.mjs.map +1 -1
- package/dist/private/TableLayout.cjs.map +1 -1
- package/dist/private/TableLayout.js.map +1 -1
- package/dist/private/TableLayout.mjs.map +1 -1
- package/dist/private/Tabs.cjs +4 -3
- package/dist/private/Tabs.cjs.map +1 -1
- package/dist/private/Tabs.js +4 -3
- package/dist/private/Tabs.js.map +1 -1
- package/dist/private/Tabs.mjs +4 -3
- package/dist/private/Tabs.mjs.map +1 -1
- package/dist/private/TagGroup.cjs.map +1 -1
- package/dist/private/TagGroup.js.map +1 -1
- package/dist/private/TagGroup.mjs.map +1 -1
- package/dist/private/Text.cjs.map +1 -1
- package/dist/private/Text.js.map +1 -1
- package/dist/private/Text.mjs.map +1 -1
- package/dist/private/TextArea.cjs.map +1 -1
- package/dist/private/TextArea.js.map +1 -1
- package/dist/private/TextArea.mjs.map +1 -1
- package/dist/private/TextField.cjs.map +1 -1
- package/dist/private/TextField.js.map +1 -1
- package/dist/private/TextField.mjs.map +1 -1
- package/dist/private/Toast.cjs +2 -1
- package/dist/private/Toast.cjs.map +1 -1
- package/dist/private/Toast.js +2 -1
- package/dist/private/Toast.js.map +1 -1
- package/dist/private/Toast.mjs +2 -1
- package/dist/private/Toast.mjs.map +1 -1
- package/dist/private/ToggleButton.cjs.map +1 -1
- package/dist/private/ToggleButton.js.map +1 -1
- package/dist/private/ToggleButton.mjs.map +1 -1
- package/dist/private/ToggleButtonGroup.cjs.map +1 -1
- package/dist/private/ToggleButtonGroup.js.map +1 -1
- package/dist/private/ToggleButtonGroup.mjs.map +1 -1
- package/dist/private/Toolbar.cjs.map +1 -1
- package/dist/private/Toolbar.js.map +1 -1
- package/dist/private/Toolbar.mjs.map +1 -1
- package/dist/private/Tooltip.cjs.map +1 -1
- package/dist/private/Tooltip.js.map +1 -1
- package/dist/private/Tooltip.mjs.map +1 -1
- package/dist/private/Tree.cjs +18 -6
- package/dist/private/Tree.cjs.map +1 -1
- package/dist/private/Tree.js +19 -7
- package/dist/private/Tree.js.map +1 -1
- package/dist/private/Tree.mjs +19 -7
- package/dist/private/Tree.mjs.map +1 -1
- package/dist/private/TreeDropTargetDelegate.cjs +9 -4
- package/dist/private/TreeDropTargetDelegate.cjs.map +1 -1
- package/dist/private/TreeDropTargetDelegate.js +10 -4
- package/dist/private/TreeDropTargetDelegate.js.map +1 -1
- package/dist/private/TreeDropTargetDelegate.mjs +9 -4
- package/dist/private/TreeDropTargetDelegate.mjs.map +1 -1
- package/dist/private/Virtualizer.cjs.map +1 -1
- package/dist/private/Virtualizer.js.map +1 -1
- package/dist/private/Virtualizer.mjs.map +1 -1
- package/dist/private/useDragAndDrop.cjs.map +1 -1
- package/dist/private/useDragAndDrop.js.map +1 -1
- package/dist/private/useDragAndDrop.mjs.map +1 -1
- package/dist/private/utils.cjs.map +1 -1
- package/dist/private/utils.js.map +1 -1
- package/dist/private/utils.mjs.map +1 -1
- package/dist/types/exports/Calendar.d.ts +4 -3
- package/dist/types/exports/Checkbox.d.ts +7 -2
- package/dist/types/exports/RadioGroup.d.ts +2 -2
- package/dist/types/exports/RangeCalendar.d.ts +3 -2
- package/dist/types/exports/Slider.d.ts +2 -2
- package/dist/types/exports/Switch.d.ts +7 -2
- package/dist/types/exports/Table.d.ts +2 -2
- package/dist/types/exports/index.d.ts +15 -13
- package/dist/types/exports/useDragAndDrop.d.ts +1 -1
- package/dist/types/src/Autocomplete.d.ts +1 -1
- package/dist/types/src/Breadcrumbs.d.ts +13 -4
- package/dist/types/src/Button.d.ts +9 -1
- package/dist/types/src/Calendar.d.ts +93 -33
- package/dist/types/src/Checkbox.d.ts +93 -2
- package/dist/types/src/Collection.d.ts +17 -4
- package/dist/types/src/ColorArea.d.ts +6 -2
- package/dist/types/src/ColorField.d.ts +8 -1
- package/dist/types/src/ColorPicker.d.ts +4 -1
- package/dist/types/src/ColorSlider.d.ts +5 -1
- package/dist/types/src/ColorSwatch.d.ts +3 -1
- package/dist/types/src/ColorSwatchPicker.d.ts +7 -2
- package/dist/types/src/ColorThumb.d.ts +10 -2
- package/dist/types/src/ColorWheel.d.ts +7 -2
- package/dist/types/src/ComboBox.d.ts +24 -11
- package/dist/types/src/DateField.d.ts +29 -4
- package/dist/types/src/DatePicker.d.ts +15 -3
- package/dist/types/src/Dialog.d.ts +3 -1
- package/dist/types/src/Disclosure.d.ts +21 -5
- package/dist/types/src/DragAndDrop.d.ts +6 -2
- package/dist/types/src/DropZone.d.ts +8 -1
- package/dist/types/src/FieldError.d.ts +4 -1
- package/dist/types/src/FileTrigger.d.ts +2 -1
- package/dist/types/src/Form.d.ts +4 -1
- package/dist/types/src/GridLayout.d.ts +5 -0
- package/dist/types/src/GridList.d.ts +51 -13
- package/dist/types/src/Group.d.ts +9 -1
- package/dist/types/src/Heading.d.ts +12 -0
- package/dist/types/src/HiddenDateInput.d.ts +2 -1
- package/dist/types/src/Input.d.ts +8 -1
- package/dist/types/src/Link.d.ts +9 -1
- package/dist/types/src/ListBox.d.ts +35 -12
- package/dist/types/src/Menu.d.ts +22 -10
- package/dist/types/src/Meter.d.ts +4 -1
- package/dist/types/src/Modal.d.ts +9 -3
- package/dist/types/src/NumberField.d.ts +9 -2
- package/dist/types/src/OverlayArrow.d.ts +4 -1
- package/dist/types/src/Popover.d.ts +12 -3
- package/dist/types/src/ProgressBar.d.ts +5 -1
- package/dist/types/src/RadioGroup.d.ts +88 -2
- package/dist/types/src/SearchField.d.ts +8 -1
- package/dist/types/src/Select.d.ts +19 -6
- package/dist/types/src/SelectionIndicator.d.ts +7 -2
- package/dist/types/src/Separator.d.ts +5 -2
- package/dist/types/src/SharedElementTransition.d.ts +2 -0
- package/dist/types/src/Slider.d.ts +48 -4
- package/dist/types/src/Switch.d.ts +100 -3
- package/dist/types/src/Table.d.ts +138 -31
- package/dist/types/src/Tabs.d.ts +37 -12
- package/dist/types/src/TagGroup.d.ts +18 -7
- package/dist/types/src/TextArea.d.ts +3 -1
- package/dist/types/src/TextField.d.ts +7 -1
- package/dist/types/src/Toast.d.ts +13 -3
- package/dist/types/src/ToggleButton.d.ts +10 -3
- package/dist/types/src/ToggleButtonGroup.d.ts +7 -2
- package/dist/types/src/Toolbar.d.ts +6 -3
- package/dist/types/src/Tooltip.d.ts +13 -4
- package/dist/types/src/Tree.d.ts +52 -16
- package/dist/types/src/useDragAndDrop.d.ts +10 -4
- package/dist/types/src/utils.d.ts +109 -17
- package/package.json +9 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAuFM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAkD;AACzD,MAAM,0DAA0B,CAAA,GAAA,oBAAY,EAA2B;AAMvE,MAAM,4CAA4B,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB,SAAS,YAC/E,KAAuB,EACvB,GAAiC;IAEjC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,EAAC,oBAAoB,sBAAsB,EAAC,GAAG,CAAA,GAAA,yCAAgB,EAAE,CAAA,GAAA,yCAAU,MAAM,CAAC;IACtF,IAAI,qBAAqB,MAAM,kBAAkB,IAAI,0BAA0B;IAC/E,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;QAC9B,GAAG,KAAK;gBACR;4BACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,yCAAM,EAAE,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IACjF,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,wBACV,oBAAoB,wBACpB,oBAAoB,oBACpB,gBAAgB,qBAChB,iBAAiB,EACjB,GAAG,YACJ,GAAG,CAAA,GAAA,qBAAa,EACf;QACE,GAAG,CAAA,GAAA,yCAAmB,EAAE,MAAM;eAC9B;4BACA;IACF,GACA,OACA;IAGF,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;YAChC,WAAW,WAAW,SAAS,IAAI;YACnC,YAAY,MAAM,UAAU,IAAI;YAChC,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;IACpB;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC,CAAA,GAAA,yCAAO;QACN,QAAQ;YACN;gBAAC;gBAAyB;aAAM;YAChC;gBAAC,CAAA,GAAA,yCAAW;gBAAG;aAAW;YAC1B;gBAAC,CAAA,GAAA,yCAAW;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAQ;aAAE;YAC9C;gBAAC,CAAA,GAAA,yCAAW;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAQ;aAAE;YAC9C;gBACE,CAAA,GAAA,yCAAY;gBACZ;oBACE,OAAO;wBACL,WAAW;wBACX,WAAW;oBACb;gBACF;aACD;YACD;gBACE,CAAA,GAAA,yCAAU;gBACV;oBACE,OAAO;wBACL,aAAa;wBACb,cAAc;oBAChB;gBACF;aACD;YACD;gBAAC,CAAA,GAAA,yCAAgB;gBAAG;aAAW;SAChC;qBACD,gCAAC,CAAA,GAAA,yCAAE,EAAE,GAAG;QACL,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;QACnC,iBAAe,MAAM,UAAU,IAAI;QACnC,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,WAAW,SAAS,IAAI;QAEvC,MAAM,IAAI,kBACT,gCAAC;QACC,MAAK;QACL,MAAM,MAAM,IAAI;QAChB,MAAM,MAAM,IAAI;QAChB,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;QACxD,UAAU,MAAM,UAAU,IAAI;;AAKxC","sources":["packages/react-aria-components/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaNumberFieldProps, useNumberField} from 'react-aria/useNumberField';\n\nimport {ButtonContext} from './Button';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RACValidation,\n removeDataAttributes,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps,\n useSlot,\n useSlottedContext\n} from './utils';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FormContext} from './Form';\nimport {forwardRefType, GlobalDOMAttributes, InputDOMProps} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {NumberFieldState, useNumberFieldState} from 'react-stately/useNumberFieldState';\nimport React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';\nimport {TextContext} from './Text';\nimport {useLocale} from 'react-aria/I18nProvider';\n\nexport interface NumberFieldRenderProps {\n /**\n * Whether the number field is disabled.\n *\n * @selector [data-disabled]\n */\n isDisabled: boolean;\n /**\n * Whether the number field is invalid.\n *\n * @selector [data-invalid]\n */\n isInvalid: boolean;\n /**\n * Whether the number field is read only.\n *\n * @selector [data-readonly]\n */\n isReadOnly: boolean;\n /**\n * Whether the number field is required.\n *\n * @selector [data-required]\n */\n isRequired: boolean;\n /**\n * State of the number field.\n */\n state: NumberFieldState;\n}\n\nexport interface NumberFieldProps\n extends\n Omit<\n AriaNumberFieldProps,\n | 'label'\n | 'placeholder'\n | 'description'\n | 'errorMessage'\n | 'validationState'\n | 'validationBehavior'\n >,\n RACValidation,\n InputDOMProps,\n RenderProps<NumberFieldRenderProps>,\n SlotProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-NumberField'\n */\n className?: ClassNameOrFunction<NumberFieldRenderProps>;\n}\n\nexport const NumberFieldContext =\n createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);\nexport const NumberFieldStateContext = createContext<NumberFieldState | null>(null);\n\n/**\n * A number field allows a user to enter a number, and increment or decrement the value using\n * stepper buttons.\n */\nexport const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function NumberField(\n props: NumberFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n [props, ref] = useContextProps(props, ref, NumberFieldContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {locale} = useLocale();\n let state = useNumberFieldState({\n ...props,\n locale,\n validationBehavior\n });\n\n let inputRef = useRef<HTMLInputElement>(null);\n let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);\n let {\n labelProps,\n groupProps,\n inputProps,\n incrementButtonProps,\n decrementButtonProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useNumberField(\n {\n ...removeDataAttributes(props),\n label,\n validationBehavior\n },\n state,\n inputRef\n );\n\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isDisabled: props.isDisabled || false,\n isInvalid: validation.isInvalid || false,\n isRequired: props.isRequired || false,\n isReadOnly: props.isReadOnly || false\n },\n defaultClassName: 'react-aria-NumberField'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [NumberFieldStateContext, state],\n [GroupContext, groupProps],\n [InputContext, {...inputProps, ref: inputRef}],\n [LabelContext, {...labelProps, ref: labelRef}],\n [\n ButtonContext,\n {\n slots: {\n increment: incrementButtonProps,\n decrement: decrementButtonProps\n }\n }\n ],\n [\n TextContext,\n {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }\n ],\n [FieldErrorContext, validation]\n ]}>\n <dom.div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}\n data-readonly={props.isReadOnly || undefined}\n data-required={props.isRequired || undefined}\n data-invalid={validation.isInvalid || undefined}\n />\n {props.name && (\n <input\n type=\"hidden\"\n name={props.name}\n form={props.form}\n value={isNaN(state.numberValue) ? '' : state.numberValue}\n disabled={props.isDisabled || undefined}\n />\n )}\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"NumberField.mjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,MAAM,0DAAsB,CAAA,GAAA,0BAAY,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAE7C;IACA,WAAW;AACb;AA6BO,MAAM,2CAA6B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,aAChF,KAAwB,EACxB,GAAiC;IAEjC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,YAAY,AAAC,MAAmC,SAAS;IAC7D,IAAI,QAAuB;QACzB,UAAU;QACV,WACE,cAAc,SAAS,cAAc,WAAW,qBAAqB;IACzE;IACA,IAAI,aAAa,MACf,KAAK,CAAC,UAAU,GAAG;IAGrB,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;uBACN;QACF;IACF;IACA,0EAA0E;IAC1E,4CAA4C;IAC5C,IAAI,YAAY,KAAK,EACnB,OAAO,IAAI,CAAC,YAAY,KAAK,EAAE,OAAO,CACpC,CAAA,MAAO,YAAY,KAAK,AAAC,CAAC,IAAI,KAAK,aAAa,OAAO,YAAY,KAAK,AAAC,CAAC,IAAI;IAIlF,IAAI,WAAW,CAAA,GAAA,6CAAa,EAAE;IAE9B,qBACE,0DAAC,CAAA,GAAA,6BAAE,EAAE,GAAG;QACL,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,OAAO;YACL,GAAG,KAAK;YACR,GAAG,YAAY,KAAK;QACtB;QACA,KAAK;QACL,kBAAgB;;AAGtB","sources":["packages/react-aria-components/src/OverlayArrow.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DOMProps, forwardRefType} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {PlacementAxis} from 'react-aria/useOverlayPosition';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';\n\ninterface OverlayArrowContextValue extends OverlayArrowProps {\n placement: PlacementAxis | null;\n}\n\nexport const OverlayArrowContext = createContext<\n ContextValue<OverlayArrowContextValue, HTMLDivElement>\n>({\n placement: 'bottom'\n});\n\nexport interface OverlayArrowProps\n extends\n Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'render' | 'children'>,\n RenderProps<OverlayArrowRenderProps>,\n DOMProps {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-OverlayArrow'\n */\n className?: ClassNameOrFunction<OverlayArrowRenderProps>;\n}\n\nexport interface OverlayArrowRenderProps {\n /**\n * The placement of the overlay relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n}\n\n/**\n * An OverlayArrow renders a custom arrow element relative to an overlay element\n * such as a popover or tooltip such that it aligns with a trigger element.\n */\nexport const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(function OverlayArrow(\n props: OverlayArrowProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n [props, ref] = useContextProps(props, ref, OverlayArrowContext);\n let placement = (props as OverlayArrowContextValue).placement;\n let style: CSSProperties = {\n position: 'absolute',\n transform:\n placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : 'translateY(-50%)'\n };\n if (placement != null) {\n style[placement] = '100%';\n }\n\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-OverlayArrow',\n values: {\n placement\n }\n });\n // remove undefined values from renderProps.style object so that it can be\n // spread merged with the other style object\n if (renderProps.style) {\n Object.keys(renderProps.style).forEach(\n key => renderProps.style![key] === undefined && delete renderProps.style![key]\n );\n }\n\n let DOMProps = filterDOMProps(props);\n\n return (\n <dom.div\n {...DOMProps}\n {...renderProps}\n style={{\n ...style,\n ...renderProps.style\n }}\n ref={ref}\n data-placement={placement}\n />\n );\n});\n"],"names":[],"version":3,"file":"OverlayArrow.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,MAAM,0DAAsB,CAAA,GAAA,oBAAY,
|
|
1
|
+
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAE7C;IACA,WAAW;AACb;AA6BO,MAAM,2CAA6B,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB,SAAS,aAChF,KAAwB,EACxB,GAAiC;IAEjC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,YAAY,AAAC,MAAmC,SAAS;IAC7D,IAAI,QAAuB;QACzB,UAAU;QACV,WACE,cAAc,SAAS,cAAc,WAAW,qBAAqB;IACzE;IACA,IAAI,aAAa,MACf,KAAK,CAAC,UAAU,GAAG;IAGrB,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;uBACN;QACF;IACF;IACA,0EAA0E;IAC1E,4CAA4C;IAC5C,IAAI,YAAY,KAAK,EACnB,OAAO,IAAI,CAAC,YAAY,KAAK,EAAE,OAAO,CACpC,CAAA,MAAO,YAAY,KAAK,AAAC,CAAC,IAAI,KAAK,aAAa,OAAO,YAAY,KAAK,AAAC,CAAC,IAAI;IAIlF,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAE9B,qBACE,gCAAC,CAAA,GAAA,yCAAE,EAAE,GAAG;QACL,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,OAAO;YACL,GAAG,KAAK;YACR,GAAG,YAAY,KAAK;QACtB;QACA,KAAK;QACL,kBAAgB;;AAGtB","sources":["packages/react-aria-components/src/OverlayArrow.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DOMProps, forwardRefType} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {PlacementAxis} from 'react-aria/useOverlayPosition';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';\n\ninterface OverlayArrowContextValue extends OverlayArrowProps {\n placement: PlacementAxis | null;\n}\n\nexport const OverlayArrowContext = createContext<\n ContextValue<OverlayArrowContextValue, HTMLDivElement>\n>({\n placement: 'bottom'\n});\n\nexport interface OverlayArrowProps\n extends\n Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'render' | 'children'>,\n RenderProps<OverlayArrowRenderProps>,\n DOMProps {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-OverlayArrow'\n */\n className?: ClassNameOrFunction<OverlayArrowRenderProps>;\n}\n\nexport interface OverlayArrowRenderProps {\n /**\n * The placement of the overlay relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n}\n\n/**\n * An OverlayArrow renders a custom arrow element relative to an overlay element\n * such as a popover or tooltip such that it aligns with a trigger element.\n */\nexport const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(function OverlayArrow(\n props: OverlayArrowProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n [props, ref] = useContextProps(props, ref, OverlayArrowContext);\n let placement = (props as OverlayArrowContextValue).placement;\n let style: CSSProperties = {\n position: 'absolute',\n transform:\n placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : 'translateY(-50%)'\n };\n if (placement != null) {\n style[placement] = '100%';\n }\n\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-OverlayArrow',\n values: {\n placement\n }\n });\n // remove undefined values from renderProps.style object so that it can be\n // spread merged with the other style object\n if (renderProps.style) {\n Object.keys(renderProps.style).forEach(\n key => renderProps.style![key] === undefined && delete renderProps.style![key]\n );\n }\n\n let DOMProps = filterDOMProps(props);\n\n return (\n <dom.div\n {...DOMProps}\n {...renderProps}\n style={{\n ...style,\n ...renderProps.style\n }}\n ref={ref}\n data-placement={placement}\n />\n );\n});\n"],"names":[],"version":3,"file":"OverlayArrow.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,MAAM,0DAAsB,CAAA,GAAA,oBAAY,
|
|
1
|
+
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAE7C;IACA,WAAW;AACb;AA6BO,MAAM,2CAA6B,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB,SAAS,aAChF,KAAwB,EACxB,GAAiC;IAEjC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,YAAY,AAAC,MAAmC,SAAS;IAC7D,IAAI,QAAuB;QACzB,UAAU;QACV,WACE,cAAc,SAAS,cAAc,WAAW,qBAAqB;IACzE;IACA,IAAI,aAAa,MACf,KAAK,CAAC,UAAU,GAAG;IAGrB,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;uBACN;QACF;IACF;IACA,0EAA0E;IAC1E,4CAA4C;IAC5C,IAAI,YAAY,KAAK,EACnB,OAAO,IAAI,CAAC,YAAY,KAAK,EAAE,OAAO,CACpC,CAAA,MAAO,YAAY,KAAK,AAAC,CAAC,IAAI,KAAK,aAAa,OAAO,YAAY,KAAK,AAAC,CAAC,IAAI;IAIlF,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAE9B,qBACE,gCAAC,CAAA,GAAA,yCAAE,EAAE,GAAG;QACL,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,OAAO;YACL,GAAG,KAAK;YACR,GAAG,YAAY,KAAK;QACtB;QACA,KAAK;QACL,kBAAgB;;AAGtB","sources":["packages/react-aria-components/src/OverlayArrow.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DOMProps, forwardRefType} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {PlacementAxis} from 'react-aria/useOverlayPosition';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';\n\ninterface OverlayArrowContextValue extends OverlayArrowProps {\n placement: PlacementAxis | null;\n}\n\nexport const OverlayArrowContext = createContext<\n ContextValue<OverlayArrowContextValue, HTMLDivElement>\n>({\n placement: 'bottom'\n});\n\nexport interface OverlayArrowProps\n extends\n Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'render' | 'children'>,\n RenderProps<OverlayArrowRenderProps>,\n DOMProps {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-OverlayArrow'\n */\n className?: ClassNameOrFunction<OverlayArrowRenderProps>;\n}\n\nexport interface OverlayArrowRenderProps {\n /**\n * The placement of the overlay relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n}\n\n/**\n * An OverlayArrow renders a custom arrow element relative to an overlay element\n * such as a popover or tooltip such that it aligns with a trigger element.\n */\nexport const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(function OverlayArrow(\n props: OverlayArrowProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n [props, ref] = useContextProps(props, ref, OverlayArrowContext);\n let placement = (props as OverlayArrowContextValue).placement;\n let style: CSSProperties = {\n position: 'absolute',\n transform:\n placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : 'translateY(-50%)'\n };\n if (placement != null) {\n style[placement] = '100%';\n }\n\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-OverlayArrow',\n values: {\n placement\n }\n });\n // remove undefined values from renderProps.style object so that it can be\n // spread merged with the other style object\n if (renderProps.style) {\n Object.keys(renderProps.style).forEach(\n key => renderProps.style![key] === undefined && delete renderProps.style![key]\n );\n }\n\n let DOMProps = filterDOMProps(props);\n\n return (\n <dom.div\n {...DOMProps}\n {...renderProps}\n style={{\n ...style,\n ...renderProps.style\n }}\n ref={ref}\n data-placement={placement}\n />\n );\n});\n"],"names":[],"version":3,"file":"OverlayArrow.mjs.map"}
|
package/dist/private/Popover.cjs
CHANGED
|
@@ -14,6 +14,7 @@ var $kmEDY$reactariaprivateutilsanimation = require("react-aria/private/utils/an
|
|
|
14
14
|
var $kmEDY$reactariaprivatecollectionsHidden = require("react-aria/private/collections/Hidden");
|
|
15
15
|
var $kmEDY$reactariaprivateutilsuseLayoutEffect = require("react-aria/private/utils/useLayoutEffect");
|
|
16
16
|
var $kmEDY$reactariaI18nProvider = require("react-aria/I18nProvider");
|
|
17
|
+
var $kmEDY$reactariaprivateutilsuseResizeObserver = require("react-aria/private/utils/useResizeObserver");
|
|
17
18
|
|
|
18
19
|
|
|
19
20
|
function $parcel$interopDefault(a) {
|
|
@@ -52,6 +53,7 @@ $parcel$export(module.exports, "Popover", function () { return $74e35a768d38d46b
|
|
|
52
53
|
|
|
53
54
|
|
|
54
55
|
|
|
56
|
+
|
|
55
57
|
const $74e35a768d38d46b$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $kmEDY$react.createContext)(null);
|
|
56
58
|
// Stores a ref for the portal container for a group of popovers (e.g. submenus).
|
|
57
59
|
const $74e35a768d38d46b$var$PopoverGroupContext = /*#__PURE__*/ (0, $kmEDY$react.createContext)(null);
|
|
@@ -141,10 +143,24 @@ function $74e35a768d38d46b$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
141
143
|
renderProps.children,
|
|
142
144
|
clearContexts
|
|
143
145
|
]);
|
|
146
|
+
let [triggerWidth, setTriggerWidth] = (0, $kmEDY$react.useState)(null);
|
|
147
|
+
let onResize = (0, $kmEDY$react.useCallback)(()=>{
|
|
148
|
+
if (props.triggerRef.current) setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
|
|
149
|
+
}, [
|
|
150
|
+
props.triggerRef
|
|
151
|
+
]);
|
|
152
|
+
(0, $kmEDY$reactariaprivateutilsuseLayoutEffect.useLayoutEffect)(onResize, [
|
|
153
|
+
onResize
|
|
154
|
+
]);
|
|
155
|
+
(0, $kmEDY$reactariaprivateutilsuseResizeObserver.useResizeObserver)({
|
|
156
|
+
ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,
|
|
157
|
+
onResize: onResize
|
|
158
|
+
});
|
|
144
159
|
let style = {
|
|
145
160
|
...popoverProps.style,
|
|
146
161
|
'--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,
|
|
147
|
-
...renderProps.style
|
|
162
|
+
...renderProps.style,
|
|
163
|
+
'--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
|
|
148
164
|
};
|
|
149
165
|
let overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($kmEDY$react))).createElement((0, $048d76b84370f141$exports.dom).div, {
|
|
150
166
|
...(0, $kmEDY$reactariamergeProps.mergeProps)((0, $kmEDY$reactariafilterDOMProps.filterDOMProps)(props, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;AAkGM,MAAM,0DAAiB,CAAA,GAAA,0BAAY,EAAkD;AAE5F,iFAAiF;AACjF,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAoC;AAKrE,MAAM,4CAAwB,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,QAAQ,KAAmB,EAAE,GAA8B;IACtI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,eAAe,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,oDAAyB;IACvD,IAAI,aAAa,CAAA,GAAA,gEAAqB,EAAE;IACxC,IAAI,QAAQ,MAAM,MAAM,IAAI,QAAQ,MAAM,WAAW,IAAI,QAAQ,CAAC,eAAe,aAAa;IAC9F,IAAI,YAAY,CAAA,GAAA,sDAAe,EAAE,KAAK,MAAM,MAAM,KAAK,MAAM,SAAS,IAAI;IAC1E,IAAI,WAAW,CAAA,GAAA,oDAAU;IACzB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAE1B,sEAAsE;IACtE,IAAI,UAAU;QACZ,IAAI,WAAW,MAAM,QAAQ;QAC7B,IAAI,OAAO,aAAa,YACtB,WAAW,SAAS;YAClB,SAAS,MAAM,OAAO,IAAI;YAC1B,WAAW;YACX,YAAY;YACZ,WAAW;YACX,iBAAiB;QACnB;QAGF,qBAAO,sHAAG;IACZ;IAEA,IAAI,SAAS,CAAC,MAAM,MAAM,IAAI,CAAC,WAC7B,OAAO;IAGT,qBACE,0DAAC;QACE,GAAG,KAAK;QACT,YAAY,MAAM,UAAU;QAC5B,OAAO;QACP,YAAY;QACZ,WAAW;QACX,KAAK;;AAEX;AAYA,SAAS,mCAAa,SAAC,KAAK,aAAE,SAAS,4BAAE,wBAAwB,iBAAE,aAAa,EAAE,GAAG,OAAyB;IAC5G,qFAAqF;IACrF,2EAA2E;IAC3E,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAkB;IACtC,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAyB;IACjD,IAAI,WAAW,CAAA,GAAA,uBAAS,EAAE;IAC1B,IAAI,eAAe,YAAY,MAAM,OAAO,KAAK;IAEjD,IAAI,gBAAC,YAAY,iBAAE,aAAa,cAAE,UAAU,aAAE,SAAS,sBAAE,kBAAkB,EAAC,GAAG,CAAA,GAAA,qCAAS,EAAE;QACxF,GAAG,KAAK;QACR,QAAQ,MAAM,MAAM,IAAI;kBACxB;QACA,mEAAmE;QACnE,qDAAqD;QACrD,UAAU,eAAe,WAAY;IACvC,GAAG;IAEH,IAAI,MAAM,MAAM,UAAU;IAC1B,IAAI,aAAa,CAAA,GAAA,uDAAgB,EAAE,KAAK,CAAC,CAAC,cAAc,MAAM,UAAU,IAAI;IAC5E,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,SAAS,MAAM,OAAO,IAAI;uBAC1B;wBACA;uBACA;QACF;IACF;IAEA,gFAAgF;IAChF,oDAAoD;IACpD,IAAI,iBAAiB,CAAC,MAAM,UAAU,IAAI,MAAM,OAAO,KAAK;IAC5D,IAAI,CAAC,UAAU,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAE;IACrC,CAAA,GAAA,2DAAc,EAAE;QACd,IAAI,IAAI,OAAO,EACb,UAAU,kBAAkB,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC;IAE3D,GAAG;QAAC;QAAK;KAAe;IAExB,gFAAgF;IAChF,0FAA0F;IAC1F,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,YAAa,CAAA,MAAM,OAAO,KAAK,oBAAoB,CAAA,GAAA,yEAAqB,QAAQ,SAAQ,KAAM,IAAI,OAAO,IAAI,CAAC,CAAA,GAAA,+DAAY,EAAE,IAAI,OAAO,GACzI,CAAA,GAAA,0DAAU,EAAE,IAAI,OAAO;IAE3B,GAAG;QAAC;QAAU;QAAK,MAAM,OAAO;KAAC;IAEjC,IAAI,WAAW,CAAA,GAAA,oBAAM,EAAE;QACrB,IAAI,WAAW,YAAY,QAAQ;QACnC,IAAI,eACF,KAAK,IAAI,WAAW,cAClB,yBAAW,0DAAC,QAAQ,QAAQ;YAAC,OAAO;WAAO;QAG/C,OAAO;IACT,GAAG;QAAC,YAAY,QAAQ;QAAE;KAAc;IAExC,IAAI,QAAQ;QACV,GAAG,aAAa,KAAK;QACrB,0BAA0B,qBAAqB,GAAG,mBAAmB,CAAC,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,GAAG;QACvG,GAAG,YAAY,KAAK;IACtB;IAEA,IAAI,wBACF,0DAAC,CAAA,GAAA,6BAAE,EAAE,GAAG;QACL,GAAG,CAAA,GAAA,qCAAS,EAAE,CAAA,GAAA,6CAAa,EAAE,OAAO;YAAC,QAAQ;QAAI,IAAI,aAAa;QAClE,GAAG,WAAW;QACf,MAAM,WAAW,WAAW;QAC5B,UAAU,WAAW,KAAK;QAC1B,cAAY,KAAK,CAAC,aAAa;QAC/B,mBAAiB,KAAK,CAAC,kBAAkB;QACzC,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,OAAO;QACP,KAAK,MAAM,GAAG;QACd,gBAAc,MAAM,OAAO;QAC3B,kBAAgB;QAChB,iBAAe,cAAc;QAC7B,gBAAc,aAAa;OAC1B,CAAC,MAAM,UAAU,kBAAI,0DAAC,CAAA,GAAA,qCAAY;QAAE,WAAW,MAAM,KAAK;sBAC3D,0DAAC,CAAA,GAAA,6CAAkB,EAAE,QAAQ;QAAC,OAAO;YAAC,GAAG,UAAU;uBAAE;YAAW,KAAK;QAAQ;OAC1E,yBAEH,0DAAC,CAAA,GAAA,qCAAY;QAAE,WAAW,MAAM,KAAK;;IAIzC,yGAAyG;IACzG,IAAI,CAAC,cACH,qBACE,0DAAC,CAAA,GAAA,+BAAM;QAAG,GAAG,KAAK;QAAE,oBAAoB;QAAU,WAAW;QAAW,iBAAiB;OACtF,CAAC,MAAM,UAAU,IAAI,MAAM,MAAM,kBAAI,0DAAC;QAAI,eAAY;QAAY,GAAG,aAAa;QAAE,OAAO;YAAC,UAAU;YAAS,OAAO;QAAC;sBACxH,0DAAC;QAAI,KAAK;QAAc,OAAO;YAAC,SAAS;QAAU;qBACjD,0DAAC,0CAAoB,QAAQ;QAAC,OAAO;OAClC;IAOX,qEAAqE;IACrE,qBACE,0DAAC,CAAA,GAAA,+BAAM;QAAG,GAAG,KAAK;QAAE,oBAAoB;QAAU,WAAW;QAAW,iBAAiB,4BAA4B,UAAU,WAAW;OACvI;AAGP","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {Context, createContext, ForwardedRef, forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\n\nexport interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>,\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string,\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>,\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean,\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean,\n /**\n * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.\n * @default document.body\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n */\n UNSTABLE_portalContainer?: Element,\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n * @default 8\n */\n offset?: number\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null,\n /**\n * The placement of the popover relative to the trigger.\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null,\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n * @selector [data-entering]\n */\n isEntering: boolean,\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n * @selector [data-exiting]\n */\n isExiting: boolean\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[]\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction} />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState,\n isEntering?: boolean,\n isExiting: boolean,\n UNSTABLE_portalContainer?: Element,\n trigger?: string,\n dir?: 'ltr' | 'rtl',\n clearContexts?: Context<any>[]\n}\n\nfunction PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts, ...props}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover({\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n }, state);\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (isDialog && (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') && ref.current && !isFocusWithin(ref.current)) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,\n ...renderProps.style\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (\n isDialog &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n useResizeObserver({\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
package/dist/private/Popover.js
CHANGED
|
@@ -9,11 +9,12 @@ import {getInteractionModality as $jx81S$getInteractionModality} from "react-ari
|
|
|
9
9
|
import {isFocusWithin as $jx81S$isFocusWithin} from "react-aria/private/utils/shadowdom/DOMFunctions";
|
|
10
10
|
import {mergeProps as $jx81S$mergeProps} from "react-aria/mergeProps";
|
|
11
11
|
import {useOverlayTriggerState as $jx81S$useOverlayTriggerState} from "react-stately/useOverlayTriggerState";
|
|
12
|
-
import $jx81S$react, {createContext as $jx81S$createContext, forwardRef as $jx81S$forwardRef, useContext as $jx81S$useContext, useRef as $jx81S$useRef, useState as $jx81S$useState, useEffect as $jx81S$useEffect, useMemo as $jx81S$useMemo} from "react";
|
|
12
|
+
import $jx81S$react, {createContext as $jx81S$createContext, forwardRef as $jx81S$forwardRef, useContext as $jx81S$useContext, useRef as $jx81S$useRef, useState as $jx81S$useState, useEffect as $jx81S$useEffect, useMemo as $jx81S$useMemo, useCallback as $jx81S$useCallback} from "react";
|
|
13
13
|
import {useExitAnimation as $jx81S$useExitAnimation, useEnterAnimation as $jx81S$useEnterAnimation} from "react-aria/private/utils/animation";
|
|
14
14
|
import {useIsHidden as $jx81S$useIsHidden} from "react-aria/private/collections/Hidden";
|
|
15
15
|
import {useLayoutEffect as $jx81S$useLayoutEffect} from "react-aria/private/utils/useLayoutEffect";
|
|
16
16
|
import {useLocale as $jx81S$useLocale} from "react-aria/I18nProvider";
|
|
17
|
+
import {useResizeObserver as $jx81S$useResizeObserver} from "react-aria/private/utils/useResizeObserver";
|
|
17
18
|
|
|
18
19
|
/*
|
|
19
20
|
* Copyright 2022 Adobe. All rights reserved.
|
|
@@ -41,6 +42,7 @@ import {useLocale as $jx81S$useLocale} from "react-aria/I18nProvider";
|
|
|
41
42
|
|
|
42
43
|
|
|
43
44
|
|
|
45
|
+
|
|
44
46
|
const $03df2f2d3cffb62f$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $jx81S$createContext)(null);
|
|
45
47
|
// Stores a ref for the portal container for a group of popovers (e.g. submenus).
|
|
46
48
|
const $03df2f2d3cffb62f$var$PopoverGroupContext = /*#__PURE__*/ (0, $jx81S$createContext)(null);
|
|
@@ -75,6 +77,7 @@ const $03df2f2d3cffb62f$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $jx81S$forwa
|
|
|
75
77
|
});
|
|
76
78
|
});
|
|
77
79
|
function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting, UNSTABLE_portalContainer: UNSTABLE_portalContainer, clearContexts: clearContexts, ...props }) {
|
|
80
|
+
var _renderProps_style, _renderProps_style1;
|
|
78
81
|
// Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)
|
|
79
82
|
// Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
|
|
80
83
|
let arrowRef = (0, $jx81S$useRef)(null);
|
|
@@ -131,10 +134,24 @@ function $03df2f2d3cffb62f$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
131
134
|
renderProps.children,
|
|
132
135
|
clearContexts
|
|
133
136
|
]);
|
|
137
|
+
let [triggerWidth, setTriggerWidth] = (0, $jx81S$useState)(null);
|
|
138
|
+
let onResize = (0, $jx81S$useCallback)(()=>{
|
|
139
|
+
if (props.triggerRef.current) setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
|
|
140
|
+
}, [
|
|
141
|
+
props.triggerRef
|
|
142
|
+
]);
|
|
143
|
+
(0, $jx81S$useLayoutEffect)(onResize, [
|
|
144
|
+
onResize
|
|
145
|
+
]);
|
|
146
|
+
(0, $jx81S$useResizeObserver)({
|
|
147
|
+
ref: ((_renderProps_style = renderProps.style) === null || _renderProps_style === void 0 ? void 0 : _renderProps_style['--trigger-width']) ? undefined : props.triggerRef,
|
|
148
|
+
onResize: onResize
|
|
149
|
+
});
|
|
134
150
|
let style = {
|
|
135
151
|
...popoverProps.style,
|
|
136
152
|
'--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,
|
|
137
|
-
...renderProps.style
|
|
153
|
+
...renderProps.style,
|
|
154
|
+
'--trigger-width': ((_renderProps_style1 = renderProps.style) === null || _renderProps_style1 === void 0 ? void 0 : _renderProps_style1['--trigger-width']) || triggerWidth
|
|
138
155
|
};
|
|
139
156
|
let overlay = /*#__PURE__*/ (0, $jx81S$react).createElement((0, $b7b7a92703138c9b$export$df3a06d6289f983e).div, {
|
|
140
157
|
...(0, $jx81S$mergeProps)((0, $jx81S$filterDOMProps)(props, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {Context, createContext, ForwardedRef, forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\n\nexport interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>,\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string,\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>,\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean,\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean,\n /**\n * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.\n * @default document.body\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n */\n UNSTABLE_portalContainer?: Element,\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n * @default 8\n */\n offset?: number\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null,\n /**\n * The placement of the popover relative to the trigger.\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null,\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n * @selector [data-entering]\n */\n isEntering: boolean,\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n * @selector [data-exiting]\n */\n isExiting: boolean\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[]\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction} />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState,\n isEntering?: boolean,\n isExiting: boolean,\n UNSTABLE_portalContainer?: Element,\n trigger?: string,\n dir?: 'ltr' | 'rtl',\n clearContexts?: Context<any>[]\n}\n\nfunction PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts, ...props}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover({\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n }, state);\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (isDialog && (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') && ref.current && !isFocusWithin(ref.current)) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,\n ...renderProps.style\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (\n isDialog &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n useResizeObserver({\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.js.map"}
|
package/dist/private/Popover.mjs
CHANGED
|
@@ -9,11 +9,12 @@ import {getInteractionModality as $g4jvP$getInteractionModality} from "react-ari
|
|
|
9
9
|
import {isFocusWithin as $g4jvP$isFocusWithin} from "react-aria/private/utils/shadowdom/DOMFunctions";
|
|
10
10
|
import {mergeProps as $g4jvP$mergeProps} from "react-aria/mergeProps";
|
|
11
11
|
import {useOverlayTriggerState as $g4jvP$useOverlayTriggerState} from "react-stately/useOverlayTriggerState";
|
|
12
|
-
import $g4jvP$react, {createContext as $g4jvP$createContext, forwardRef as $g4jvP$forwardRef, useContext as $g4jvP$useContext, useRef as $g4jvP$useRef, useState as $g4jvP$useState, useEffect as $g4jvP$useEffect, useMemo as $g4jvP$useMemo} from "react";
|
|
12
|
+
import $g4jvP$react, {createContext as $g4jvP$createContext, forwardRef as $g4jvP$forwardRef, useContext as $g4jvP$useContext, useRef as $g4jvP$useRef, useState as $g4jvP$useState, useEffect as $g4jvP$useEffect, useMemo as $g4jvP$useMemo, useCallback as $g4jvP$useCallback} from "react";
|
|
13
13
|
import {useExitAnimation as $g4jvP$useExitAnimation, useEnterAnimation as $g4jvP$useEnterAnimation} from "react-aria/private/utils/animation";
|
|
14
14
|
import {useIsHidden as $g4jvP$useIsHidden} from "react-aria/private/collections/Hidden";
|
|
15
15
|
import {useLayoutEffect as $g4jvP$useLayoutEffect} from "react-aria/private/utils/useLayoutEffect";
|
|
16
16
|
import {useLocale as $g4jvP$useLocale} from "react-aria/I18nProvider";
|
|
17
|
+
import {useResizeObserver as $g4jvP$useResizeObserver} from "react-aria/private/utils/useResizeObserver";
|
|
17
18
|
|
|
18
19
|
/*
|
|
19
20
|
* Copyright 2022 Adobe. All rights reserved.
|
|
@@ -41,6 +42,7 @@ import {useLocale as $g4jvP$useLocale} from "react-aria/I18nProvider";
|
|
|
41
42
|
|
|
42
43
|
|
|
43
44
|
|
|
45
|
+
|
|
44
46
|
const $542a13ca2fa5b484$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $g4jvP$createContext)(null);
|
|
45
47
|
// Stores a ref for the portal container for a group of popovers (e.g. submenus).
|
|
46
48
|
const $542a13ca2fa5b484$var$PopoverGroupContext = /*#__PURE__*/ (0, $g4jvP$createContext)(null);
|
|
@@ -130,10 +132,24 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
130
132
|
renderProps.children,
|
|
131
133
|
clearContexts
|
|
132
134
|
]);
|
|
135
|
+
let [triggerWidth, setTriggerWidth] = (0, $g4jvP$useState)(null);
|
|
136
|
+
let onResize = (0, $g4jvP$useCallback)(()=>{
|
|
137
|
+
if (props.triggerRef.current) setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
|
|
138
|
+
}, [
|
|
139
|
+
props.triggerRef
|
|
140
|
+
]);
|
|
141
|
+
(0, $g4jvP$useLayoutEffect)(onResize, [
|
|
142
|
+
onResize
|
|
143
|
+
]);
|
|
144
|
+
(0, $g4jvP$useResizeObserver)({
|
|
145
|
+
ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,
|
|
146
|
+
onResize: onResize
|
|
147
|
+
});
|
|
133
148
|
let style = {
|
|
134
149
|
...popoverProps.style,
|
|
135
150
|
'--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,
|
|
136
|
-
...renderProps.style
|
|
151
|
+
...renderProps.style,
|
|
152
|
+
'--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
|
|
137
153
|
};
|
|
138
154
|
let overlay = /*#__PURE__*/ (0, $g4jvP$react).createElement((0, $7230ffa83bc0c2cf$export$df3a06d6289f983e).div, {
|
|
139
155
|
...(0, $g4jvP$mergeProps)((0, $g4jvP$filterDOMProps)(props, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {Context, createContext, ForwardedRef, forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\n\nexport interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>,\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string,\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>,\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean,\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean,\n /**\n * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.\n * @default document.body\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n */\n UNSTABLE_portalContainer?: Element,\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n * @default 8\n */\n offset?: number\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null,\n /**\n * The placement of the popover relative to the trigger.\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null,\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n * @selector [data-entering]\n */\n isEntering: boolean,\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n * @selector [data-exiting]\n */\n isExiting: boolean\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[]\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction} />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState,\n isEntering?: boolean,\n isExiting: boolean,\n UNSTABLE_portalContainer?: Element,\n trigger?: string,\n dir?: 'ltr' | 'rtl',\n clearContexts?: Context<any>[]\n}\n\nfunction PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts, ...props}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover({\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n }, state);\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (isDialog && (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') && ref.current && !isFocusWithin(ref.current)) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,\n ...renderProps.style\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 AriaLabelingProps,\n forwardRefType,\n GlobalDOMAttributes,\n RefObject\n} from '@react-types/shared';\nimport {AriaPopoverProps, usePopover} from 'react-aria/usePopover';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {DismissButton, Overlay} from 'react-aria/Overlay';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {focusSafely} from 'react-aria/private/interactions/focusSafely';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport {isFocusWithin} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {OverlayArrowContext} from './OverlayArrow';\nimport {\n OverlayTriggerProps,\n OverlayTriggerState,\n useOverlayTriggerState\n} from 'react-stately/useOverlayTriggerState';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PlacementAxis, PositionProps} from 'react-aria/useOverlayPosition';\nimport React, {\n Context,\n createContext,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';\nimport {useIsHidden} from 'react-aria/private/collections/Hidden';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface PopoverProps\n extends\n Omit<PositionProps, 'isOpen'>,\n Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>,\n OverlayTriggerProps,\n RenderProps<PopoverRenderProps>,\n SlotProps,\n AriaLabelingProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-Popover'\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * The name of the component that triggered the popover. This is reflected on the element\n * as the `data-trigger` attribute, and can be used to provide specific\n * styles for the popover depending on which element triggered it.\n */\n trigger?: string;\n /**\n * The ref for the element which the popover positions itself with respect to.\n *\n * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,\n * this is set automatically. It is only required when used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Whether the popover is currently performing an entry animation.\n */\n isEntering?: boolean;\n /**\n * Whether the popover is currently performing an exit animation.\n */\n isExiting?: boolean;\n /**\n * The container element in which the overlay portal will be placed. This may have unknown\n * behavior depending on where it is portalled to.\n *\n * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.\n * @default document.body\n */\n UNSTABLE_portalContainer?: Element;\n /**\n * The additional offset applied along the main axis between the element and its\n * anchor element.\n *\n * @default 8\n */\n offset?: number;\n}\n\nexport interface PopoverRenderProps {\n /**\n * The name of the component that triggered the popover, e.g. \"DialogTrigger\" or \"ComboBox\".\n *\n * @selector [data-trigger=\"...\"]\n */\n trigger: string | null;\n /**\n * The placement of the popover relative to the trigger.\n *\n * @selector [data-placement=\"left | right | top | bottom\"]\n */\n placement: PlacementAxis | null;\n /**\n * Whether the popover is currently entering. Use this to apply animations.\n *\n * @selector [data-entering]\n */\n isEntering: boolean;\n /**\n * Whether the popover is currently exiting. Use this to apply animations.\n *\n * @selector [data-exiting]\n */\n isExiting: boolean;\n}\n\ninterface PopoverContextValue extends PopoverProps {\n /** Contexts to clear. */\n clearContexts?: Context<any>[];\n}\n\nexport const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);\n\n// Stores a ref for the portal container for a group of popovers (e.g. submenus).\nconst PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(\n props: PopoverProps,\n ref: ForwardedRef<HTMLElement>\n) {\n [props, ref] = useContextProps(props, ref, PopoverContext);\n let contextState = useContext(OverlayTriggerStateContext);\n let localState = useOverlayTriggerState(props);\n let state =\n props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;\n let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;\n let isHidden = useIsHidden();\n let {direction} = useLocale();\n\n // If we are in a hidden tree, we still need to preserve our children.\n if (isHidden) {\n let children = props.children;\n if (typeof children === 'function') {\n children = children({\n trigger: props.trigger || null,\n placement: 'bottom',\n isEntering: false,\n isExiting: false,\n defaultChildren: null\n });\n }\n\n return <>{children}</>;\n }\n\n if (state && !state.isOpen && !isExiting) {\n return null;\n }\n\n return (\n <PopoverInner\n {...props}\n triggerRef={props.triggerRef!}\n state={state}\n popoverRef={ref}\n isExiting={isExiting}\n dir={direction}\n />\n );\n});\n\ninterface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {\n state: OverlayTriggerState;\n isEntering?: boolean;\n isExiting: boolean;\n UNSTABLE_portalContainer?: Element;\n trigger?: string;\n dir?: 'ltr' | 'rtl';\n clearContexts?: Context<any>[];\n}\n\nfunction PopoverInner({\n state,\n isExiting,\n UNSTABLE_portalContainer,\n clearContexts,\n ...props\n}: PopoverInnerProps) {\n // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)\n // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx\n let arrowRef = useRef<HTMLDivElement>(null);\n let containerRef = useRef<HTMLDivElement | null>(null);\n let groupCtx = useContext(PopoverGroupContext);\n let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';\n\n let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(\n {\n ...props,\n offset: props.offset ?? 8,\n arrowRef,\n // If this is a submenu/subdialog, use the root popover's container\n // to detect outside interaction and add aria-hidden.\n groupRef: isSubPopover ? groupCtx! : containerRef\n },\n state\n );\n\n let ref = props.popoverRef as RefObject<HTMLDivElement | null>;\n let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Popover',\n values: {\n trigger: props.trigger || null,\n placement,\n isEntering,\n isExiting\n }\n });\n\n // Automatically render Popover with role=dialog except when isNonModal is true,\n // or a dialog is already nested inside the popover.\n let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';\n let [isDialog, setDialog] = useState(false);\n useLayoutEffect(() => {\n if (ref.current) {\n setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));\n }\n }, [ref, shouldBeDialog]);\n\n // Focus the popover itself on mount, unless a child element is already focused.\n // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger\n useEffect(() => {\n if (\n isDialog &&\n (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&\n ref.current &&\n !isFocusWithin(ref.current)\n ) {\n focusSafely(ref.current);\n }\n }, [isDialog, ref, props.trigger]);\n\n let children = useMemo(() => {\n let children = renderProps.children;\n if (clearContexts) {\n for (let Context of clearContexts) {\n children = <Context.Provider value={null}>{children}</Context.Provider>;\n }\n }\n return children;\n }, [renderProps.children, clearContexts]);\n\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (props.triggerRef.current) {\n setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');\n }\n }, [props.triggerRef]);\n\n useLayoutEffect(onResize, [onResize]);\n useResizeObserver({\n ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,\n onResize: onResize\n });\n\n let style = {\n ...popoverProps.style,\n '--trigger-anchor-point': triggerAnchorPoint\n ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`\n : undefined,\n ...renderProps.style,\n '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth\n };\n\n let overlay = (\n <dom.div\n {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}\n {...renderProps}\n role={isDialog ? 'dialog' : undefined}\n tabIndex={isDialog ? -1 : undefined}\n aria-label={props['aria-label']}\n aria-labelledby={props['aria-labelledby']}\n ref={ref}\n slot={props.slot || undefined}\n style={style}\n dir={props.dir}\n data-trigger={props.trigger}\n data-placement={placement}\n data-entering={isEntering || undefined}\n data-exiting={isExiting || undefined}>\n {!props.isNonModal && <DismissButton onDismiss={state.close} />}\n <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>\n {children}\n </OverlayArrowContext.Provider>\n <DismissButton onDismiss={state.close} />\n </dom.div>\n );\n\n // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.\n if (!isSubPopover) {\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer}>\n {!props.isNonModal && state.isOpen && (\n <div data-testid=\"underlay\" {...underlayProps} style={{position: 'fixed', inset: 0}} />\n )}\n <div ref={containerRef} style={{display: 'contents'}}>\n <PopoverGroupContext.Provider value={containerRef}>\n {overlay}\n </PopoverGroupContext.Provider>\n </div>\n </Overlay>\n );\n }\n\n // Submenus/subdialogs are mounted into the root popover's container.\n return (\n <Overlay\n {...props}\n shouldContainFocus={isDialog}\n isExiting={isExiting}\n portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>\n {overlay}\n </Overlay>\n );\n}\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuDM,MAAM,0DACX,CAAA,GAAA,0BAAY,EAAkD;AAMzD,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAAiC;IAEjC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,SAAC,QAAQ,aAAG,WAAW,aAAG,WAAW,sBAAK,kBAAkB,OAAM,GAAG;IACzE,QAAQ,CAAA,GAAA,2CAAI,EAAE,OAAO,UAAU;IAE/B,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,iCAAM,EAAE,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IACjF,IAAI,oBAAC,gBAAgB,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,6CAAa,EAAE;QAAC,GAAG,KAAK;eAAE;IAAK;IAEpE,0DAA0D;IAC1D,IAAI,aAAa,kBAAkB,YAAY,AAAE,CAAA,QAAQ,QAAO,IAAM,CAAA,WAAW,QAAO,IAAM;IAE9F,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;wBACN;YACA,WAAW,gBAAgB,CAAC,iBAAiB;6BAC7C;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,6CAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAElD,qBACE,0DAAC,CAAA,GAAA,6BAAE,EAAE,GAAG;QACL,GAAG,CAAA,GAAA,qCAAS,EAAE,UAAU,aAAa,iBAAiB;QACvD,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;qBACpB,0DAAC,CAAA,GAAA,sCAAW,EAAE,QAAQ;QAAC,OAAO;YAAC,GAAG,UAAU;YAAE,KAAK;YAAU,aAAa;QAAM;OAC7E,YAAY,QAAQ;AAI7B","sources":["packages/react-aria-components/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaProgressBarProps, useProgressBar} from 'react-aria/useProgressBar';\n\nimport {clamp} from 'react-stately/private/utils/number';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps,\n useSlot\n} from './utils';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {LabelContext} from './Label';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\n\nexport interface ProgressBarProps\n extends\n Omit<AriaProgressBarProps, 'label'>,\n RenderProps<ProgressBarRenderProps>,\n SlotProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ProgressBar'\n */\n className?: ClassNameOrFunction<ProgressBarRenderProps>;\n}\n\nexport interface ProgressBarRenderProps {\n /**\n * The value as a percentage between the minimum and maximum.\n */\n percentage: number | undefined;\n /**\n * A formatted version of the value.\n *\n * @selector [aria-valuetext]\n */\n valueText: string | undefined;\n /**\n * Whether the progress bar is indeterminate.\n *\n * @selector :not([aria-valuenow])\n */\n isIndeterminate: boolean;\n}\n\nexport const ProgressBarContext =\n createContext<ContextValue<ProgressBarProps, HTMLDivElement>>(null);\n\n/**\n * Progress bars show either determinate or indeterminate progress of an operation\n * over time.\n */\nexport const ProgressBar = forwardRef(function ProgressBar(\n props: ProgressBarProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n [props, ref] = useContextProps(props, ref, ProgressBarContext);\n let {value = 0, minValue = 0, maxValue = 100, isIndeterminate = false} = props;\n value = clamp(value, minValue, maxValue);\n\n let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);\n let {progressBarProps, labelProps} = useProgressBar({...props, label});\n\n // Calculate the width of the progress bar as a percentage\n let percentage = isIndeterminate ? undefined : ((value - minValue) / (maxValue - minValue)) * 100;\n\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-ProgressBar',\n values: {\n percentage,\n valueText: progressBarProps['aria-valuetext'],\n isIndeterminate\n }\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n\n return (\n <dom.div\n {...mergeProps(DOMProps, renderProps, progressBarProps)}\n ref={ref}\n slot={props.slot || undefined}>\n <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>\n {renderProps.children}\n </LabelContext.Provider>\n </dom.div>\n );\n});\n"],"names":[],"version":3,"file":"ProgressBar.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuDM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAkD;AAMzD,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAAiC;IAEjC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,SAAC,QAAQ,aAAG,WAAW,aAAG,WAAW,sBAAK,kBAAkB,OAAM,GAAG;IACzE,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAE/B,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,yCAAM,EAAE,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IACjF,IAAI,oBAAC,gBAAgB,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QAAC,GAAG,KAAK;eAAE;IAAK;IAEpE,0DAA0D;IAC1D,IAAI,aAAa,kBAAkB,YAAY,AAAE,CAAA,QAAQ,QAAO,IAAM,CAAA,WAAW,QAAO,IAAM;IAE9F,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;wBACN;YACA,WAAW,gBAAgB,CAAC,iBAAiB;6BAC7C;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAElD,qBACE,gCAAC,CAAA,GAAA,yCAAE,EAAE,GAAG;QACL,GAAG,CAAA,GAAA,iBAAS,EAAE,UAAU,aAAa,iBAAiB;QACvD,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;qBACpB,gCAAC,CAAA,GAAA,yCAAW,EAAE,QAAQ;QAAC,OAAO;YAAC,GAAG,UAAU;YAAE,KAAK;YAAU,aAAa;QAAM;OAC7E,YAAY,QAAQ;AAI7B","sources":["packages/react-aria-components/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaProgressBarProps, useProgressBar} from 'react-aria/useProgressBar';\n\nimport {clamp} from 'react-stately/private/utils/number';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps,\n useSlot\n} from './utils';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {LabelContext} from './Label';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\n\nexport interface ProgressBarProps\n extends\n Omit<AriaProgressBarProps, 'label'>,\n RenderProps<ProgressBarRenderProps>,\n SlotProps,\n GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n * element. A function may be provided to compute the class based on component state.\n *\n * @default 'react-aria-ProgressBar'\n */\n className?: ClassNameOrFunction<ProgressBarRenderProps>;\n}\n\nexport interface ProgressBarRenderProps {\n /**\n * The value as a percentage between the minimum and maximum.\n */\n percentage: number | undefined;\n /**\n * A formatted version of the value.\n *\n * @selector [aria-valuetext]\n */\n valueText: string | undefined;\n /**\n * Whether the progress bar is indeterminate.\n *\n * @selector :not([aria-valuenow])\n */\n isIndeterminate: boolean;\n}\n\nexport const ProgressBarContext =\n createContext<ContextValue<ProgressBarProps, HTMLDivElement>>(null);\n\n/**\n * Progress bars show either determinate or indeterminate progress of an operation\n * over time.\n */\nexport const ProgressBar = forwardRef(function ProgressBar(\n props: ProgressBarProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n [props, ref] = useContextProps(props, ref, ProgressBarContext);\n let {value = 0, minValue = 0, maxValue = 100, isIndeterminate = false} = props;\n value = clamp(value, minValue, maxValue);\n\n let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);\n let {progressBarProps, labelProps} = useProgressBar({...props, label});\n\n // Calculate the width of the progress bar as a percentage\n let percentage = isIndeterminate ? undefined : ((value - minValue) / (maxValue - minValue)) * 100;\n\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-ProgressBar',\n values: {\n percentage,\n valueText: progressBarProps['aria-valuetext'],\n isIndeterminate\n }\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n\n return (\n <dom.div\n {...mergeProps(DOMProps, renderProps, progressBarProps)}\n ref={ref}\n slot={props.slot || undefined}>\n <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>\n {renderProps.children}\n </LabelContext.Provider>\n </dom.div>\n );\n});\n"],"names":[],"version":3,"file":"ProgressBar.js.map"}
|