@react-spectrum/s2 1.4.0 → 1.5.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/CenterBaseline.cjs +12 -0
- package/dist/exports/CenterBaseline.cjs.map +1 -0
- package/dist/exports/CenterBaseline.mjs +7 -0
- package/dist/exports/CenterBaseline.mjs.map +1 -0
- package/dist/exports/Skeleton.cjs +1 -0
- package/dist/exports/Skeleton.cjs.map +1 -1
- package/dist/exports/Skeleton.mjs +2 -2
- package/dist/exports/Skeleton.mjs.map +1 -1
- package/dist/exports/index.cjs +3 -0
- package/dist/exports/index.cjs.map +1 -1
- package/dist/exports/index.mjs +3 -1
- package/dist/exports/index.mjs.map +1 -1
- package/dist/private/Accordion.cjs +2 -2
- package/dist/private/Accordion.css +2 -2
- package/dist/private/Accordion.mjs +2 -2
- package/dist/private/ActionBar.cjs +59 -59
- package/dist/private/ActionBar.cjs.map +1 -1
- package/dist/private/ActionBar.css +58 -58
- package/dist/private/ActionBar.css.map +1 -1
- package/dist/private/ActionBar.mjs +59 -59
- package/dist/private/ActionBar.mjs.map +1 -1
- package/dist/private/ActionButton.cjs +247 -247
- package/dist/private/ActionButton.cjs.map +1 -1
- package/dist/private/ActionButton.css +169 -169
- package/dist/private/ActionButton.css.map +1 -1
- package/dist/private/ActionButton.mjs +247 -247
- package/dist/private/ActionButton.mjs.map +1 -1
- package/dist/private/ActionButtonGroup.cjs +15 -15
- package/dist/private/ActionButtonGroup.css +9 -9
- package/dist/private/ActionButtonGroup.mjs +15 -15
- package/dist/private/ActionMenu.cjs.map +1 -1
- package/dist/private/ActionMenu.mjs.map +1 -1
- package/dist/private/Add.cjs +10 -10
- package/dist/private/Add.css +6 -6
- package/dist/private/Add.mjs +10 -10
- package/dist/private/AlertDialog.cjs +3 -3
- package/dist/private/AlertDialog.cjs.map +1 -1
- package/dist/private/AlertDialog.css +3 -3
- package/dist/private/AlertDialog.css.map +1 -1
- package/dist/private/AlertDialog.mjs +3 -3
- package/dist/private/AlertDialog.mjs.map +1 -1
- package/dist/private/Asterisk.cjs +6 -6
- package/dist/private/Asterisk.css +4 -4
- package/dist/private/Asterisk.mjs +6 -6
- package/dist/private/Avatar.cjs +16 -16
- package/dist/private/Avatar.css +16 -16
- package/dist/private/Avatar.mjs +16 -16
- package/dist/private/AvatarGroup.cjs +120 -120
- package/dist/private/AvatarGroup.css +31 -31
- package/dist/private/AvatarGroup.mjs +120 -120
- package/dist/private/Badge.cjs +197 -197
- package/dist/private/Badge.css +125 -125
- package/dist/private/Badge.mjs +197 -197
- package/dist/private/Breadcrumbs.cjs +234 -234
- package/dist/private/Breadcrumbs.cjs.map +1 -1
- package/dist/private/Breadcrumbs.css +100 -100
- package/dist/private/Breadcrumbs.css.map +1 -1
- package/dist/private/Breadcrumbs.mjs +234 -234
- package/dist/private/Breadcrumbs.mjs.map +1 -1
- package/dist/private/Button.cjs +326 -326
- package/dist/private/Button.cjs.map +1 -1
- package/dist/private/Button.css +172 -172
- package/dist/private/Button.css.map +1 -1
- package/dist/private/Button.mjs +326 -326
- package/dist/private/Button.mjs.map +1 -1
- package/dist/private/ButtonGroup.cjs +23 -20
- package/dist/private/ButtonGroup.cjs.map +1 -1
- package/dist/private/ButtonGroup.css +19 -15
- package/dist/private/ButtonGroup.css.map +1 -1
- package/dist/private/ButtonGroup.mjs +23 -20
- package/dist/private/ButtonGroup.mjs.map +1 -1
- package/dist/private/Calendar.cjs +232 -232
- package/dist/private/Calendar.cjs.map +1 -1
- package/dist/private/Calendar.css +149 -149
- package/dist/private/Calendar.css.map +1 -1
- package/dist/private/Calendar.mjs +232 -232
- package/dist/private/Calendar.mjs.map +1 -1
- package/dist/private/Card.cjs +309 -309
- package/dist/private/Card.css +206 -206
- package/dist/private/Card.mjs +309 -309
- package/dist/private/CardView.cjs +17 -17
- package/dist/private/CardView.css +17 -17
- package/dist/private/CardView.mjs +17 -17
- package/dist/private/CenterBaseline.cjs +1 -1
- package/dist/private/CenterBaseline.cjs.map +1 -1
- package/dist/private/CenterBaseline.css +2 -2
- package/dist/private/CenterBaseline.css.map +1 -1
- package/dist/private/CenterBaseline.mjs +1 -1
- package/dist/private/CenterBaseline.mjs.map +1 -1
- package/dist/private/Checkbox.cjs +188 -188
- package/dist/private/Checkbox.css +110 -110
- package/dist/private/Checkbox.mjs +188 -188
- package/dist/private/CheckboxGroup.cjs +43 -43
- package/dist/private/CheckboxGroup.css +37 -37
- package/dist/private/CheckboxGroup.mjs +43 -43
- package/dist/private/Checkmark.cjs +12 -12
- package/dist/private/Checkmark.css +8 -8
- package/dist/private/Checkmark.mjs +12 -12
- package/dist/private/Chevron.cjs +12 -12
- package/dist/private/Chevron.css +10 -10
- package/dist/private/Chevron.mjs +12 -12
- package/dist/private/ClearButton.cjs +30 -30
- package/dist/private/ClearButton.css +30 -30
- package/dist/private/ClearButton.mjs +30 -30
- package/dist/private/CloseButton.cjs +52 -52
- package/dist/private/CloseButton.cjs.map +1 -1
- package/dist/private/CloseButton.css +46 -46
- package/dist/private/CloseButton.css.map +1 -1
- package/dist/private/CloseButton.mjs +52 -52
- package/dist/private/CloseButton.mjs.map +1 -1
- package/dist/private/ColorArea.cjs +16 -16
- package/dist/private/ColorArea.css +16 -16
- package/dist/private/ColorArea.mjs +16 -16
- package/dist/private/ColorField.cjs +31 -31
- package/dist/private/ColorField.css +27 -27
- package/dist/private/ColorField.mjs +31 -31
- package/dist/private/ColorHandle.cjs +27 -27
- package/dist/private/ColorHandle.css +42 -42
- package/dist/private/ColorHandle.mjs +27 -27
- package/dist/private/ColorSlider.cjs +108 -108
- package/dist/private/ColorSlider.css +52 -52
- package/dist/private/ColorSlider.mjs +108 -108
- package/dist/private/ColorSwatch.cjs +29 -29
- package/dist/private/ColorSwatch.css +29 -29
- package/dist/private/ColorSwatch.mjs +29 -29
- package/dist/private/ColorSwatchPicker.cjs +29 -29
- package/dist/private/ColorSwatchPicker.css +48 -48
- package/dist/private/ColorSwatchPicker.mjs +29 -29
- package/dist/private/ColorWheel.cjs +26 -26
- package/dist/private/ColorWheel.css +17 -17
- package/dist/private/ColorWheel.mjs +26 -26
- package/dist/private/ComboBox.cjs +381 -381
- package/dist/private/ComboBox.cjs.map +1 -1
- package/dist/private/ComboBox.css +188 -188
- package/dist/private/ComboBox.css.map +1 -1
- package/dist/private/ComboBox.mjs +381 -381
- package/dist/private/ComboBox.mjs.map +1 -1
- package/dist/private/ContextualHelp.cjs +5 -5
- package/dist/private/ContextualHelp.cjs.map +1 -1
- package/dist/private/ContextualHelp.css +50 -50
- package/dist/private/ContextualHelp.css.map +1 -1
- package/dist/private/ContextualHelp.mjs +5 -5
- package/dist/private/ContextualHelp.mjs.map +1 -1
- package/dist/private/CornerTriangle.cjs +8 -8
- package/dist/private/CornerTriangle.css +6 -6
- package/dist/private/CornerTriangle.mjs +8 -8
- package/dist/private/Cross.cjs +14 -14
- package/dist/private/Cross.css +10 -10
- package/dist/private/Cross.mjs +14 -14
- package/dist/private/CustomDialog.cjs +25 -25
- package/dist/private/CustomDialog.css +25 -25
- package/dist/private/CustomDialog.mjs +25 -25
- package/dist/private/Dash.cjs +10 -10
- package/dist/private/Dash.css +6 -6
- package/dist/private/Dash.mjs +10 -10
- package/dist/private/DateField.cjs +73 -73
- package/dist/private/DateField.css +77 -77
- package/dist/private/DateField.mjs +73 -73
- package/dist/private/DatePicker.cjs +172 -172
- package/dist/private/DatePicker.cjs.map +1 -1
- package/dist/private/DatePicker.css +128 -128
- package/dist/private/DatePicker.css.map +1 -1
- package/dist/private/DatePicker.mjs +172 -172
- package/dist/private/DatePicker.mjs.map +1 -1
- package/dist/private/DateRangePicker.cjs +55 -55
- package/dist/private/DateRangePicker.cjs.map +1 -1
- package/dist/private/DateRangePicker.css +59 -59
- package/dist/private/DateRangePicker.css.map +1 -1
- package/dist/private/DateRangePicker.mjs +55 -55
- package/dist/private/DateRangePicker.mjs.map +1 -1
- package/dist/private/Dialog.cjs +17 -17
- package/dist/private/Dialog.css +70 -70
- package/dist/private/Dialog.mjs +17 -17
- package/dist/private/Disclosure.cjs +144 -122
- package/dist/private/Disclosure.cjs.map +1 -1
- package/dist/private/Disclosure.css +112 -112
- package/dist/private/Disclosure.css.map +1 -1
- package/dist/private/Disclosure.mjs +144 -122
- package/dist/private/Disclosure.mjs.map +1 -1
- package/dist/private/Divider.cjs +25 -25
- package/dist/private/Divider.css +25 -25
- package/dist/private/Divider.mjs +25 -25
- package/dist/private/DragHandle.cjs +8 -8
- package/dist/private/DragHandle.css +6 -6
- package/dist/private/DragHandle.mjs +8 -8
- package/dist/private/DragPreview.cjs +154 -154
- package/dist/private/DragPreview.css +106 -106
- package/dist/private/DragPreview.mjs +154 -154
- package/dist/private/DropZone.cjs +61 -61
- package/dist/private/DropZone.cjs.map +1 -1
- package/dist/private/DropZone.css +57 -57
- package/dist/private/DropZone.css.map +1 -1
- package/dist/private/DropZone.mjs +61 -61
- package/dist/private/DropZone.mjs.map +1 -1
- package/dist/private/Field.cjs +360 -360
- package/dist/private/Field.cjs.map +1 -1
- package/dist/private/Field.css +160 -160
- package/dist/private/Field.css.map +1 -1
- package/dist/private/Field.mjs +360 -360
- package/dist/private/Field.mjs.map +1 -1
- package/dist/private/Form.cjs +9 -9
- package/dist/private/Form.css +9 -9
- package/dist/private/Form.mjs +9 -9
- package/dist/private/FullscreenDialog.cjs +5 -5
- package/dist/private/FullscreenDialog.css +78 -78
- package/dist/private/FullscreenDialog.mjs +5 -5
- package/dist/private/IllustratedMessage.cjs +228 -228
- package/dist/private/IllustratedMessage.css +72 -72
- package/dist/private/IllustratedMessage.mjs +228 -228
- package/dist/private/Image.cjs +14 -14
- package/dist/private/Image.css +14 -14
- package/dist/private/Image.mjs +14 -14
- package/dist/private/InlineAlert.cjs +100 -100
- package/dist/private/InlineAlert.cjs.map +1 -1
- package/dist/private/InlineAlert.css +76 -76
- package/dist/private/InlineAlert.css.map +1 -1
- package/dist/private/InlineAlert.mjs +100 -100
- package/dist/private/InlineAlert.mjs.map +1 -1
- package/dist/private/LabeledValue.cjs +134 -134
- package/dist/private/LabeledValue.css +63 -63
- package/dist/private/LabeledValue.mjs +134 -134
- package/dist/private/Link.cjs +49 -49
- package/dist/private/Link.css +41 -41
- package/dist/private/Link.mjs +49 -49
- package/dist/private/LinkOut.cjs +8 -8
- package/dist/private/LinkOut.css +8 -8
- package/dist/private/LinkOut.mjs +8 -8
- package/dist/private/ListView.cjs +245 -245
- package/dist/private/ListView.cjs.map +1 -1
- package/dist/private/ListView.css +177 -177
- package/dist/private/ListView.css.map +1 -1
- package/dist/private/ListView.mjs +245 -245
- package/dist/private/ListView.mjs.map +1 -1
- package/dist/private/Menu.cjs +446 -446
- package/dist/private/Menu.cjs.map +1 -1
- package/dist/private/Menu.css +196 -196
- package/dist/private/Menu.css.map +1 -1
- package/dist/private/Menu.mjs +446 -446
- package/dist/private/Menu.mjs.map +1 -1
- package/dist/private/Meter.cjs +153 -153
- package/dist/private/Meter.css +91 -91
- package/dist/private/Meter.mjs +153 -153
- package/dist/private/Modal.cjs +74 -74
- package/dist/private/Modal.css +59 -59
- package/dist/private/Modal.mjs +74 -74
- package/dist/private/NotificationBadge.cjs +56 -56
- package/dist/private/NotificationBadge.cjs.map +1 -1
- package/dist/private/NotificationBadge.css +49 -49
- package/dist/private/NotificationBadge.css.map +1 -1
- package/dist/private/NotificationBadge.mjs +56 -56
- package/dist/private/NotificationBadge.mjs.map +1 -1
- package/dist/private/NumberField.cjs +114 -114
- package/dist/private/NumberField.css +99 -99
- package/dist/private/NumberField.mjs +114 -114
- package/dist/private/Picker.cjs +275 -275
- package/dist/private/Picker.cjs.map +1 -1
- package/dist/private/Picker.css +173 -173
- package/dist/private/Picker.css.map +1 -1
- package/dist/private/Picker.mjs +275 -275
- package/dist/private/Picker.mjs.map +1 -1
- package/dist/private/Popover.cjs +95 -95
- package/dist/private/Popover.cjs.map +1 -1
- package/dist/private/Popover.css +75 -75
- package/dist/private/Popover.css.map +1 -1
- package/dist/private/Popover.mjs +95 -95
- package/dist/private/Popover.mjs.map +1 -1
- package/dist/private/ProgressBar.cjs +163 -163
- package/dist/private/ProgressBar.css +99 -99
- package/dist/private/ProgressBar.mjs +163 -163
- package/dist/private/ProgressCircle.cjs +34 -31
- package/dist/private/ProgressCircle.cjs.map +1 -1
- package/dist/private/ProgressCircle.css +24 -24
- package/dist/private/ProgressCircle.css.map +1 -1
- package/dist/private/ProgressCircle.mjs +34 -31
- package/dist/private/ProgressCircle.mjs.map +1 -1
- package/dist/private/Provider.cjs +19 -19
- package/dist/private/Provider.css +15 -15
- package/dist/private/Provider.mjs +19 -19
- package/dist/private/RadioGroup.cjs +208 -208
- package/dist/private/RadioGroup.css +113 -113
- package/dist/private/RadioGroup.mjs +208 -208
- package/dist/private/RangeCalendar.cjs +16 -16
- package/dist/private/RangeCalendar.cjs.map +1 -1
- package/dist/private/RangeCalendar.css +17 -17
- package/dist/private/RangeCalendar.css.map +1 -1
- package/dist/private/RangeCalendar.mjs +16 -16
- package/dist/private/RangeCalendar.mjs.map +1 -1
- package/dist/private/RangeSlider.cjs.map +1 -1
- package/dist/private/RangeSlider.mjs.map +1 -1
- package/dist/private/SearchField.cjs +41 -41
- package/dist/private/SearchField.css +45 -45
- package/dist/private/SearchField.mjs +41 -41
- package/dist/private/SegmentedControl.cjs +178 -178
- package/dist/private/SegmentedControl.css +123 -123
- package/dist/private/SegmentedControl.mjs +178 -178
- package/dist/private/SelectBoxGroup.cjs +142 -142
- package/dist/private/SelectBoxGroup.css +120 -120
- package/dist/private/SelectBoxGroup.mjs +142 -142
- package/dist/private/Slider.cjs +292 -292
- package/dist/private/Slider.css +159 -159
- package/dist/private/Slider.mjs +292 -292
- package/dist/private/StatusLight.cjs +115 -115
- package/dist/private/StatusLight.css +59 -59
- package/dist/private/StatusLight.mjs +115 -115
- package/dist/private/Switch.cjs +171 -171
- package/dist/private/Switch.css +85 -85
- package/dist/private/Switch.mjs +171 -171
- package/dist/private/TableView.cjs +551 -534
- package/dist/private/TableView.cjs.map +1 -1
- package/dist/private/TableView.css +329 -303
- package/dist/private/TableView.css.map +1 -1
- package/dist/private/TableView.mjs +551 -534
- package/dist/private/TableView.mjs.map +1 -1
- package/dist/private/Tabs.cjs +131 -125
- package/dist/private/Tabs.cjs.map +1 -1
- package/dist/private/Tabs.css +105 -105
- package/dist/private/Tabs.css.map +1 -1
- package/dist/private/Tabs.mjs +131 -125
- package/dist/private/Tabs.mjs.map +1 -1
- package/dist/private/TabsPicker.cjs +127 -127
- package/dist/private/TabsPicker.css +108 -108
- package/dist/private/TabsPicker.mjs +127 -127
- package/dist/private/TagGroup.cjs +203 -203
- package/dist/private/TagGroup.cjs.map +1 -1
- package/dist/private/TagGroup.css +146 -146
- package/dist/private/TagGroup.css.map +1 -1
- package/dist/private/TagGroup.mjs +203 -203
- package/dist/private/TagGroup.mjs.map +1 -1
- package/dist/private/TextField.cjs +58 -58
- package/dist/private/TextField.css +54 -54
- package/dist/private/TextField.mjs +58 -58
- package/dist/private/TimeField.cjs +51 -51
- package/dist/private/TimeField.css +47 -47
- package/dist/private/TimeField.mjs +51 -51
- package/dist/private/Toast.cjs +120 -120
- package/dist/private/Toast.cjs.map +1 -1
- package/dist/private/Toast.css +110 -110
- package/dist/private/Toast.css.map +1 -1
- package/dist/private/Toast.mjs +120 -120
- package/dist/private/Toast.mjs.map +1 -1
- package/dist/private/ToggleButton.cjs +16 -16
- package/dist/private/ToggleButton.css +23 -23
- package/dist/private/ToggleButton.mjs +16 -16
- package/dist/private/Tooltip.cjs +86 -86
- package/dist/private/Tooltip.css +70 -70
- package/dist/private/Tooltip.mjs +86 -86
- package/dist/private/TreeView.cjs +229 -229
- package/dist/private/TreeView.cjs.map +1 -1
- package/dist/private/TreeView.css +184 -184
- package/dist/private/TreeView.css.map +1 -1
- package/dist/private/TreeView.mjs +229 -229
- package/dist/private/TreeView.mjs.map +1 -1
- package/dist/private/dnd-utils.cjs +42 -42
- package/dist/private/dnd-utils.css +39 -39
- package/dist/private/dnd-utils.mjs +42 -42
- package/dist/types/exports/CenterBaseline.d.ts +1 -0
- package/dist/types/exports/Skeleton.d.ts +1 -1
- package/dist/types/exports/index.d.ts +1 -0
- package/dist/types/src/CenterBaseline.d.ts +17 -0
- package/dist/types/src/ContextualHelp.d.ts +1 -1
- package/dist/types/src/Disclosure.d.ts +6 -1
- package/dist/types/src/ListView.d.ts +1 -1
- package/dist/types/src/Menu.d.ts +1 -1
- package/dist/types/src/Popover.d.ts +2 -2
- package/dist/types/src/style-utils.d.ts +4 -1
- package/exports/CenterBaseline.ts +1 -0
- package/exports/Skeleton.ts +1 -1
- package/exports/index.ts +2 -0
- package/icons/Icon.cjs +10 -10
- package/icons/Icon.css +9 -9
- package/icons/Icon.mjs +10 -10
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +6 -6
- package/icons/Skeleton.mjs +2 -2
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +6 -6
- package/src/ActionBar.tsx +0 -1
- package/src/ActionButton.tsx +0 -1
- package/src/ActionMenu.tsx +0 -1
- package/src/AlertDialog.tsx +0 -1
- package/src/Breadcrumbs.tsx +0 -4
- package/src/Button.tsx +0 -1
- package/src/ButtonGroup.tsx +1 -0
- package/src/Calendar.tsx +0 -1
- package/src/CenterBaseline.tsx +17 -0
- package/src/CloseButton.tsx +0 -1
- package/src/ComboBox.tsx +0 -1
- package/src/ContextualHelp.tsx +1 -2
- package/src/DatePicker.tsx +0 -1
- package/src/DateRangePicker.tsx +0 -1
- package/src/Disclosure.tsx +92 -79
- package/src/DropZone.tsx +0 -1
- package/src/Field.tsx +0 -1
- package/src/InlineAlert.tsx +0 -1
- package/src/ListView.tsx +0 -2
- package/src/Menu.tsx +1 -8
- package/src/NotificationBadge.tsx +0 -1
- package/src/Picker.tsx +0 -1
- package/src/Popover.tsx +2 -1
- package/src/ProgressCircle.tsx +1 -1
- package/src/RangeCalendar.tsx +0 -1
- package/src/RangeSlider.tsx +0 -1
- package/src/TableView.tsx +75 -37
- package/src/Tabs.tsx +9 -2
- package/src/TagGroup.tsx +0 -1
- package/src/Toast.tsx +0 -3
- package/src/TreeView.tsx +0 -1
- package/src/style-utils.ts +13 -2
- package/style/__tests__/style-macro.test.js +71 -71
- package/style/dist/main.cjs +25 -25
- package/style/dist/module.mjs +13 -13
- package/style/dist/properties.mjs +3 -3
- package/style/dist/spectrum-theme.cjs +224 -224
- package/style/dist/spectrum-theme.mjs +217 -217
- package/style/dist/style-macro.cjs +100 -100
- package/style/dist/style-macro.mjs +94 -94
- package/style/dist/style-utils.cjs +51 -39
- package/style/dist/style-utils.cjs.map +1 -1
- package/style/dist/style-utils.mjs +50 -38
- package/style/dist/style-utils.mjs.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ListBoxSection as AriaListBoxSection,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxLoadMoreItem,\n ListBoxProps,\n ListBoxSectionProps\n} from 'react-aria-components/ListBox';\nimport {PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover';\nimport {\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n SelectStateContext,\n SelectValue\n} from 'react-aria-components/Select';\nimport {\n AsyncLoadable,\n FocusableRef,\n FocusableRefValue,\n GlobalDOMAttributes,\n HelpTextProps,\n LoadingState,\n PressEvent,\n RefObject,\n SpectrumLabelableProps\n} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles as checkboxIconStyles} from './Checkbox';\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkbox,\n checkmark,\n description,\n icon,\n iconCenterWrapper,\n label,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {\n control,\n controlBorderRadius,\n controlFont,\n field,\n fieldInput,\n getAllowedOverrides,\n StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createHideableComponent} from 'react-aria/private/collections/Hidden';\nimport {createShadowTreeWalker} from 'react-aria/private/utils/shadowdom/ShadowTreeWalker';\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {Divider, listbox, listboxHeader, listboxItem, LOADER_ROW_HEIGHTS} from './ComboBox';\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\nimport {FieldErrorIcon, FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {getOwnerDocument} from 'react-aria/private/utils/domHelpers';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {isFocusable} from 'react-aria/private/utils/isFocusable';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover} from './Popover';\n// @ts-ignore\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport React, {\n createContext,\n forwardRef,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useFocusableRef} from './useDOMRef';\nimport {useGlobalListeners} from 'react-aria/private/utils/useGlobalListeners';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useScale} from './utils';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {Virtualizer} from 'react-aria-components/Virtualizer';\n\nexport interface PickerStyleProps {\n /**\n * The size of the Picker.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL';\n /**\n * Whether the picker should be displayed with a quiet style.\n */\n isQuiet?: boolean;\n}\n\ntype SelectionMode = 'single' | 'multiple';\nexport interface PickerProps<T, M extends SelectionMode = 'single'>\n extends\n Omit<\n AriaSelectProps<T, M>,\n | 'children'\n | 'style'\n | 'className'\n | 'render'\n | 'allowsEmptyCollection'\n | keyof GlobalDOMAttributes\n >,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items' | 'dependencies'>,\n Pick<AriaPopoverProps, 'shouldFlip'>,\n Pick<AsyncLoadable, 'onLoadMore'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode);\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end';\n /**\n * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n * dropdown is always equal to the trigger's width.\n */\n menuWidth?: number;\n /** The current loading state of the Picker. */\n loadingState?: LoadingState;\n /**\n * Custom renderer for the picker value. Allows one to provide a custom element to render selected\n * items.\n *\n * @note The returned ReactNode should not have interactable elements as it will break accessibility.\n */\n renderValue?: (selectedItems: T[]) => ReactNode;\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext =\n createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(\n null\n );\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n transition: 'default',\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: baseColor('neutral'),\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n width: 'full',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: 'inherit',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: controlFont(),\n gridAutoRows: 'min-content'\n});\n\nconst invalidBorder = style({\n ...controlBorderRadius(),\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: baseColor('negative'),\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center',\n height: '100%'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n color: {\n isLoading: 'disabled'\n }\n});\n\nconst avatar = style({\n gridArea: 'icon',\n marginEnd: 'text-to-visual'\n});\n\nconst loadingWrapperStyles = style({\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginY: 8\n});\n\nconst progressCircleStyles = style({\n size: {\n size: {\n S: 16,\n M: 20,\n L: 22,\n XL: 26\n }\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<\n T,\n M extends SelectionMode = 'single'\n>(props: PickerProps<T, M>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n loadingState,\n renderValue,\n onLoadMore,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let renderer;\n let showButtonSpinner = useMemo(() => loadingState === 'loading', [loadingState]);\n let spinnerId = useSlotId([showButtonSpinner]);\n\n let listBoxLoadingCircle = (\n <ListBoxLoadMoreItem\n className={loadingWrapperStyles}\n isLoading={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}>\n <PickerProgressCircle size={size} aria-label={stringFormatter.format('table.loadingMore')} />\n </ListBoxLoadMoreItem>\n );\n\n if (typeof children === 'function' && items) {\n renderer = (\n <>\n <Collection items={items} dependencies={props.dependencies}>\n {children}\n </Collection>\n {listBoxLoadingCircle}\n </>\n );\n } else {\n renderer = (\n <>\n {children}\n {listBoxLoadingCircle}\n </>\n );\n }\n let scale = useScale();\n let {direction: dir} = useLocale();\n let RTLFlipOffset = dir === 'rtl' ? -1 : 1;\n\n return (\n <AriaSelect\n {...pickerProps}\n aria-describedby={spinnerId}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={\n UNSAFE_className +\n style(field(), getAllowedOverrides())(\n {\n isInForm: !!formContext,\n labelPosition,\n size\n },\n props.styles\n )\n }>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n includeNecessityIndicatorInAccessibilityName\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <PickerButton\n loadingState={loadingState}\n renderValue={renderValue}\n isOpen={isOpen}\n isQuiet={isQuiet}\n isFocusVisible={isFocusVisible}\n size={size}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n buttonRef={domRef}\n loadingCircle={\n <PickerProgressCircle\n id={spinnerId}\n size={size}\n aria-label={stringFormatter.format('table.loading')}\n />\n }\n />\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n estimatedRowHeight: 32,\n estimatedHeadingHeight: 50,\n padding: 8,\n loaderHeight: LOADER_ROW_HEIGHTS[size][scale]\n }}>\n <Popover\n hideArrow\n padding=\"none\"\n offset={menuOffset}\n crossOffset={isQuiet ? RTLFlipOffset * -12 : undefined}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n minWidth: {\n default: '--trigger-width',\n isQuiet: 192\n },\n width: {\n default: '--trigger-width',\n isQuiet: '[calc(var(--trigger-width) - 24)]'\n }\n })(props)}>\n <div\n className={style({\n display: 'flex',\n size: 'full'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: listboxHeader({size})}],\n [\n HeadingContext,\n {\n // @ts-ignore\n role: 'presentation',\n styles: sectionHeading\n }\n ],\n [\n TextContext,\n {\n slots: {\n description: {\n styles: description({size, isFocused: false, isDisabled: false})\n }\n }\n }\n ]\n ]}>\n <ListBox\n dependencies={props.dependencies}\n items={items}\n className={listbox({size})}>\n {renderer}\n </ListBox>\n </Provider>\n </div>\n </Popover>\n </Virtualizer>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nfunction PickerProgressCircle(props) {\n let {id, size, 'aria-label': ariaLabel} = props;\n return (\n <ProgressCircle\n id={id}\n isIndeterminate\n size=\"S\"\n aria-label={ariaLabel}\n styles={progressCircleStyles({size})}\n />\n );\n}\n\nconst avatarSize = {\n S: 16,\n M: 20,\n L: 22,\n XL: 26\n} as const;\n\n// https://w3c.github.io/aria/#widget_roles\nlet INTERACTIVE_ARIA_ROLES = new Set([\n 'application',\n 'button',\n 'checkbox',\n 'combobox',\n 'gridcell',\n 'link',\n 'menuitem',\n 'menuitemcheckbox',\n 'menuitemradio',\n 'option',\n 'radio',\n 'searchbox',\n 'separator',\n 'slider',\n 'spinbutton',\n 'switch',\n 'tab',\n 'textbox',\n 'treeitem'\n]);\n\ninterface PickerButtonInnerProps<T>\n extends\n PickerStyleProps,\n Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>,\n Pick<PickerProps<T>, 'loadingState' | 'renderValue'> {\n loadingCircle: ReactNode;\n buttonRef: RefObject<HTMLButtonElement | null>;\n}\n\n// Needs to be hidable component or otherwise the PressResponder throws a warning when rendered in the fake DOM and tries to register\nconst PickerButton = createHideableComponent(function PickerButton<T>(\n props: PickerButtonInnerProps<T>\n) {\n let {\n isOpen,\n isQuiet,\n isFocusVisible,\n size,\n isInvalid,\n isDisabled,\n loadingState,\n loadingCircle,\n buttonRef,\n renderValue\n } = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let renderValueRef = useRef(null);\n\n let state = useContext(SelectStateContext)!;\n useEffect(() => {\n if (process.env.NODE_ENV === 'production' || !renderValue) {\n return;\n }\n\n if (!renderValueRef.current) {\n return;\n }\n\n let doc = getOwnerDocument(renderValueRef.current);\n let walker = createShadowTreeWalker(doc, renderValueRef.current, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node: Element) {\n let role = node.getAttribute('role');\n let interactive = isFocusable(node) || (role != null && INTERACTIVE_ARIA_ROLES.has(role));\n return interactive ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n }\n });\n let next = walker.nextNode();\n if (next) {\n console.warn(\"Picker's value should not have interactive children for accessibility.\");\n }\n }, [state.selectedItems, renderValue]);\n\n // For mouse interactions, pickers open on press start. When the popover underlay appears\n // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n // to occur. We override this by listening for pointerup on the document ourselves.\n let [isPressed, setPressed] = useState(false);\n let {addGlobalListener} = useGlobalListeners();\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'mouse') {\n return;\n }\n setPressed(true);\n addGlobalListener(\n document,\n 'pointerup',\n () => {\n setPressed(false);\n },\n {once: true, capture: true}\n );\n };\n\n return (\n <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n <Button\n ref={buttonRef}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps =>\n inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })\n }>\n {renderProps => (\n <>\n <SelectValue\n className={\n valueStyles({isQuiet}) +\n (renderValue\n ? ''\n : ' ' +\n css(\n '&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}'\n ))\n }>\n {({selectedItems, defaultChildren}) => {\n const selectedValues = selectedItems.filter((item): item is T => item != null);\n const defaultRenderedValue =\n selectedItems.length <= 1 ? (\n defaultChildren\n ) : (\n <Text slot=\"label\">\n {stringFormatter.format('picker.selectedCount', {\n count: selectedItems.length\n })}\n </Text>\n );\n const renderedValue =\n selectedItems.length > 0 && renderValue\n ? renderValue(selectedValues)\n : defaultRenderedValue;\n\n return (\n <Provider\n values={[\n [\n IconContext,\n {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }\n ],\n [\n AvatarContext,\n {\n slots: {\n avatar: {\n size: avatarSize[size ?? 'M'],\n styles: avatar\n }\n }\n }\n ],\n [\n TextContext,\n {\n slots: {\n description: {},\n [DEFAULT_SLOT]: {\n styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n }),\n // @ts-ignore\n 'data-slot': 'label'\n },\n label: {\n styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n }),\n // @ts-ignore not technically necessary, but good for consistency\n 'data-slot': 'label'\n }\n }\n }\n ],\n [InsideSelectValueContext, true]\n ]}>\n {renderValue ? (\n <div ref={renderValueRef} style={{display: 'contents'}}>\n {renderedValue}\n </div>\n ) : (\n renderedValue\n )}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n {loadingState === 'loading' && !isOpen && loadingCircle}\n <ChevronIcon\n size={size}\n className={iconStyles({isLoading: loadingState === 'loading'})}\n />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} />}\n {isInvalid && !isDisabled && !isQuiet && (\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n )}\n </>\n )}\n </Button>\n </PressResponder>\n );\n});\n\nexport interface PickerItemProps\n extends\n Omit<\n ListBoxItemProps,\n 'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n >,\n StyleProps {\n children: ReactNode;\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps): ReactNode {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={\n props.textValue ||\n (typeof props.children === 'string' ? (props.children as string) : undefined)\n }\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps =>\n (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)\n }>\n {renderProps => {\n let {children} = props;\n let checkboxRenderProps = {\n ...renderProps,\n size,\n isFocused: false,\n isFocusVisible: false,\n isIndeterminate: false,\n isReadOnly: false,\n isInvalid: false,\n isRequired: false\n };\n return (\n <DefaultProvider\n context={IconContext}\n value={{\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }}>\n <DefaultProvider\n context={AvatarContext}\n value={{\n slots: {\n avatar: {size: avatarSize[size], styles: avatar}\n }\n }}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n [DEFAULT_SLOT]: {styles: label({size})},\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {renderProps.selectionMode === 'single' && !isLink && (\n <CheckmarkIcon\n size={checkmarkIconSize[size]}\n className={checkmark({...renderProps, size})}\n />\n )}\n {renderProps.selectionMode === 'multiple' && !isLink && (\n <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n <CheckmarkIcon size={size} className={checkboxIconStyles} />\n </div>\n )}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({\n context,\n value,\n children\n}: {\n context: React.Context<any>;\n value: any;\n children: any;\n}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T> extends Omit<\n ListBoxSectionProps<T>,\n 'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n> {}\nexport function PickerSection<T>(props: PickerSectionProps<T>): ReactNode {\n let {size} = useContext(InternalPickerContext);\n return (\n <>\n <AriaListBoxSection {...props}>{props.children}</AriaListBoxSection>\n <Divider size={size} />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ListBoxSection as AriaListBoxSection,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxLoadMoreItem,\n ListBoxProps,\n ListBoxSectionProps\n} from 'react-aria-components/ListBox';\nimport {PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover';\nimport {\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n SelectStateContext,\n SelectValue\n} from 'react-aria-components/Select';\nimport {\n AsyncLoadable,\n FocusableRef,\n FocusableRefValue,\n GlobalDOMAttributes,\n HelpTextProps,\n LoadingState,\n PressEvent,\n RefObject,\n SpectrumLabelableProps\n} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles as checkboxIconStyles} from './Checkbox';\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkbox,\n checkmark,\n description,\n icon,\n iconCenterWrapper,\n label,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {\n control,\n controlBorderRadius,\n controlFont,\n field,\n fieldInput,\n getAllowedOverrides,\n StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createHideableComponent} from 'react-aria/private/collections/Hidden';\nimport {createShadowTreeWalker} from 'react-aria/private/utils/shadowdom/ShadowTreeWalker';\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {Divider, listbox, listboxHeader, listboxItem, LOADER_ROW_HEIGHTS} from './ComboBox';\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\nimport {FieldErrorIcon, FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {getOwnerDocument} from 'react-aria/private/utils/domHelpers';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {isFocusable} from 'react-aria/private/utils/isFocusable';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover} from './Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport React, {\n createContext,\n forwardRef,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport {useFocusableRef} from './useDOMRef';\nimport {useGlobalListeners} from 'react-aria/private/utils/useGlobalListeners';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useScale} from './utils';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {Virtualizer} from 'react-aria-components/Virtualizer';\n\nexport interface PickerStyleProps {\n /**\n * The size of the Picker.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL';\n /**\n * Whether the picker should be displayed with a quiet style.\n */\n isQuiet?: boolean;\n}\n\ntype SelectionMode = 'single' | 'multiple';\nexport interface PickerProps<T, M extends SelectionMode = 'single'>\n extends\n Omit<\n AriaSelectProps<T, M>,\n | 'children'\n | 'style'\n | 'className'\n | 'render'\n | 'allowsEmptyCollection'\n | keyof GlobalDOMAttributes\n >,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items' | 'dependencies'>,\n Pick<AriaPopoverProps, 'shouldFlip'>,\n Pick<AsyncLoadable, 'onLoadMore'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode);\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top';\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end';\n /**\n * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n * dropdown is always equal to the trigger's width.\n */\n menuWidth?: number;\n /** The current loading state of the Picker. */\n loadingState?: LoadingState;\n /**\n * Custom renderer for the picker value. Allows one to provide a custom element to render selected\n * items.\n *\n * @note The returned ReactNode should not have interactable elements as it will break accessibility.\n */\n renderValue?: (selectedItems: T[]) => ReactNode;\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext =\n createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(\n null\n );\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n transition: 'default',\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: baseColor('neutral'),\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n width: 'full',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: 'inherit',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: controlFont(),\n gridAutoRows: 'min-content'\n});\n\nconst invalidBorder = style({\n ...controlBorderRadius(),\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: baseColor('negative'),\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center',\n height: '100%'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n color: {\n isLoading: 'disabled'\n }\n});\n\nconst avatar = style({\n gridArea: 'icon',\n marginEnd: 'text-to-visual'\n});\n\nconst loadingWrapperStyles = style({\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginY: 8\n});\n\nconst progressCircleStyles = style({\n size: {\n size: {\n S: 16,\n M: 20,\n L: 22,\n XL: 26\n }\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<\n T,\n M extends SelectionMode = 'single'\n>(props: PickerProps<T, M>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n loadingState,\n renderValue,\n onLoadMore,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let renderer;\n let showButtonSpinner = useMemo(() => loadingState === 'loading', [loadingState]);\n let spinnerId = useSlotId([showButtonSpinner]);\n\n let listBoxLoadingCircle = (\n <ListBoxLoadMoreItem\n className={loadingWrapperStyles}\n isLoading={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}>\n <PickerProgressCircle size={size} aria-label={stringFormatter.format('table.loadingMore')} />\n </ListBoxLoadMoreItem>\n );\n\n if (typeof children === 'function' && items) {\n renderer = (\n <>\n <Collection items={items} dependencies={props.dependencies}>\n {children}\n </Collection>\n {listBoxLoadingCircle}\n </>\n );\n } else {\n renderer = (\n <>\n {children}\n {listBoxLoadingCircle}\n </>\n );\n }\n let scale = useScale();\n let {direction: dir} = useLocale();\n let RTLFlipOffset = dir === 'rtl' ? -1 : 1;\n\n return (\n <AriaSelect\n {...pickerProps}\n aria-describedby={spinnerId}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={\n UNSAFE_className +\n style(field(), getAllowedOverrides())(\n {\n isInForm: !!formContext,\n labelPosition,\n size\n },\n props.styles\n )\n }>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n includeNecessityIndicatorInAccessibilityName\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <PickerButton\n loadingState={loadingState}\n renderValue={renderValue}\n isOpen={isOpen}\n isQuiet={isQuiet}\n isFocusVisible={isFocusVisible}\n size={size}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n buttonRef={domRef}\n loadingCircle={\n <PickerProgressCircle\n id={spinnerId}\n size={size}\n aria-label={stringFormatter.format('table.loading')}\n />\n }\n />\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <Virtualizer\n layout={ListLayout}\n layoutOptions={{\n estimatedRowHeight: 32,\n estimatedHeadingHeight: 50,\n padding: 8,\n loaderHeight: LOADER_ROW_HEIGHTS[size][scale]\n }}>\n <Popover\n hideArrow\n padding=\"none\"\n offset={menuOffset}\n crossOffset={isQuiet ? RTLFlipOffset * -12 : undefined}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n minWidth: {\n default: '--trigger-width',\n isQuiet: 192\n },\n width: {\n default: '--trigger-width',\n isQuiet: '[calc(var(--trigger-width) - 24)]'\n }\n })(props)}>\n <div\n className={style({\n display: 'flex',\n size: 'full'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: listboxHeader({size})}],\n [\n HeadingContext,\n {\n // @ts-ignore\n role: 'presentation',\n styles: sectionHeading\n }\n ],\n [\n TextContext,\n {\n slots: {\n description: {\n styles: description({size, isFocused: false, isDisabled: false})\n }\n }\n }\n ]\n ]}>\n <ListBox\n dependencies={props.dependencies}\n items={items}\n className={listbox({size})}>\n {renderer}\n </ListBox>\n </Provider>\n </div>\n </Popover>\n </Virtualizer>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nfunction PickerProgressCircle(props) {\n let {id, size, 'aria-label': ariaLabel} = props;\n return (\n <ProgressCircle\n id={id}\n isIndeterminate\n size=\"S\"\n aria-label={ariaLabel}\n styles={progressCircleStyles({size})}\n />\n );\n}\n\nconst avatarSize = {\n S: 16,\n M: 20,\n L: 22,\n XL: 26\n} as const;\n\n// https://w3c.github.io/aria/#widget_roles\nlet INTERACTIVE_ARIA_ROLES = new Set([\n 'application',\n 'button',\n 'checkbox',\n 'combobox',\n 'gridcell',\n 'link',\n 'menuitem',\n 'menuitemcheckbox',\n 'menuitemradio',\n 'option',\n 'radio',\n 'searchbox',\n 'separator',\n 'slider',\n 'spinbutton',\n 'switch',\n 'tab',\n 'textbox',\n 'treeitem'\n]);\n\ninterface PickerButtonInnerProps<T>\n extends\n PickerStyleProps,\n Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>,\n Pick<PickerProps<T>, 'loadingState' | 'renderValue'> {\n loadingCircle: ReactNode;\n buttonRef: RefObject<HTMLButtonElement | null>;\n}\n\n// Needs to be hidable component or otherwise the PressResponder throws a warning when rendered in the fake DOM and tries to register\nconst PickerButton = createHideableComponent(function PickerButton<T>(\n props: PickerButtonInnerProps<T>\n) {\n let {\n isOpen,\n isQuiet,\n isFocusVisible,\n size,\n isInvalid,\n isDisabled,\n loadingState,\n loadingCircle,\n buttonRef,\n renderValue\n } = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let renderValueRef = useRef(null);\n\n let state = useContext(SelectStateContext)!;\n useEffect(() => {\n if (process.env.NODE_ENV === 'production' || !renderValue) {\n return;\n }\n\n if (!renderValueRef.current) {\n return;\n }\n\n let doc = getOwnerDocument(renderValueRef.current);\n let walker = createShadowTreeWalker(doc, renderValueRef.current, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node: Element) {\n let role = node.getAttribute('role');\n let interactive = isFocusable(node) || (role != null && INTERACTIVE_ARIA_ROLES.has(role));\n return interactive ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n }\n });\n let next = walker.nextNode();\n if (next) {\n console.warn(\"Picker's value should not have interactive children for accessibility.\");\n }\n }, [state.selectedItems, renderValue]);\n\n // For mouse interactions, pickers open on press start. When the popover underlay appears\n // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n // to occur. We override this by listening for pointerup on the document ourselves.\n let [isPressed, setPressed] = useState(false);\n let {addGlobalListener} = useGlobalListeners();\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'mouse') {\n return;\n }\n setPressed(true);\n addGlobalListener(\n document,\n 'pointerup',\n () => {\n setPressed(false);\n },\n {once: true, capture: true}\n );\n };\n\n return (\n <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n <Button\n ref={buttonRef}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps =>\n inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })\n }>\n {renderProps => (\n <>\n <SelectValue\n className={\n valueStyles({isQuiet}) +\n (renderValue\n ? ''\n : ' ' +\n css(\n '&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}'\n ))\n }>\n {({selectedItems, defaultChildren}) => {\n const selectedValues = selectedItems.filter((item): item is T => item != null);\n const defaultRenderedValue =\n selectedItems.length <= 1 ? (\n defaultChildren\n ) : (\n <Text slot=\"label\">\n {stringFormatter.format('picker.selectedCount', {\n count: selectedItems.length\n })}\n </Text>\n );\n const renderedValue =\n selectedItems.length > 0 && renderValue\n ? renderValue(selectedValues)\n : defaultRenderedValue;\n\n return (\n <Provider\n values={[\n [\n IconContext,\n {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }\n ],\n [\n AvatarContext,\n {\n slots: {\n avatar: {\n size: avatarSize[size ?? 'M'],\n styles: avatar\n }\n }\n }\n ],\n [\n TextContext,\n {\n slots: {\n description: {},\n [DEFAULT_SLOT]: {\n styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n }),\n // @ts-ignore\n 'data-slot': 'label'\n },\n label: {\n styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n }),\n // @ts-ignore not technically necessary, but good for consistency\n 'data-slot': 'label'\n }\n }\n }\n ],\n [InsideSelectValueContext, true]\n ]}>\n {renderValue ? (\n <div ref={renderValueRef} style={{display: 'contents'}}>\n {renderedValue}\n </div>\n ) : (\n renderedValue\n )}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n {loadingState === 'loading' && !isOpen && loadingCircle}\n <ChevronIcon\n size={size}\n className={iconStyles({isLoading: loadingState === 'loading'})}\n />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} />}\n {isInvalid && !isDisabled && !isQuiet && (\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n )}\n </>\n )}\n </Button>\n </PressResponder>\n );\n});\n\nexport interface PickerItemProps\n extends\n Omit<\n ListBoxItemProps,\n 'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n >,\n StyleProps {\n children: ReactNode;\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps): ReactNode {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={\n props.textValue ||\n (typeof props.children === 'string' ? (props.children as string) : undefined)\n }\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps =>\n (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)\n }>\n {renderProps => {\n let {children} = props;\n let checkboxRenderProps = {\n ...renderProps,\n size,\n isFocused: false,\n isFocusVisible: false,\n isIndeterminate: false,\n isReadOnly: false,\n isInvalid: false,\n isRequired: false\n };\n return (\n <DefaultProvider\n context={IconContext}\n value={{\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }}>\n <DefaultProvider\n context={AvatarContext}\n value={{\n slots: {\n avatar: {size: avatarSize[size], styles: avatar}\n }\n }}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n [DEFAULT_SLOT]: {styles: label({size})},\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {renderProps.selectionMode === 'single' && !isLink && (\n <CheckmarkIcon\n size={checkmarkIconSize[size]}\n className={checkmark({...renderProps, size})}\n />\n )}\n {renderProps.selectionMode === 'multiple' && !isLink && (\n <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n <CheckmarkIcon size={size} className={checkboxIconStyles} />\n </div>\n )}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({\n context,\n value,\n children\n}: {\n context: React.Context<any>;\n value: any;\n children: any;\n}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T> extends Omit<\n ListBoxSectionProps<T>,\n 'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n> {}\nexport function PickerSection<T>(props: PickerSectionProps<T>): ReactNode {\n let {size} = useContext(InternalPickerContext);\n return (\n <>\n <AriaListBoxSection {...props}>{props.children}</AriaListBoxSection>\n <Divider size={size} />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.mjs.map"}
|
package/dist/private/Popover.cjs
CHANGED
|
@@ -50,117 +50,117 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
|
|
|
50
50
|
if (p[1] === "L") maxWidth = true;
|
|
51
51
|
rules += p[0];
|
|
52
52
|
}
|
|
53
|
-
if (props.colorScheme === "dark") rules += ' -ICUGx-
|
|
54
|
-
else if (props.colorScheme === "light") rules += ' -ICUGx-
|
|
55
|
-
else if (props.colorScheme === "light dark") rules += ' -ICUGx-
|
|
56
|
-
rules += '
|
|
57
|
-
if (props.colorScheme === "dark") rules += ' -NvXmrd-
|
|
58
|
-
else if (props.colorScheme === "light") rules += ' -NvXmrd-
|
|
53
|
+
if (props.colorScheme === "dark") rules += ' -ICUGx-_pa15';
|
|
54
|
+
else if (props.colorScheme === "light") rules += ' -ICUGx-_pb15';
|
|
55
|
+
else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc15';
|
|
56
|
+
rules += ' _pK8eoyd15';
|
|
57
|
+
if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU15';
|
|
58
|
+
else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c15';
|
|
59
59
|
else if (props.colorScheme === "light dark") {
|
|
60
|
-
rules += ' -NvXmrd-
|
|
61
|
-
rules += ' -NvXmrd-
|
|
60
|
+
rules += ' -NvXmrd-_ZN8Gi4c15';
|
|
61
|
+
rules += ' -NvXmrd-D1v0V_ZLmU15';
|
|
62
62
|
}
|
|
63
|
-
if (props.colorScheme === "dark") rules += ' -j9blY-
|
|
64
|
-
else if (props.colorScheme === "light") rules += ' -j9blY-
|
|
63
|
+
if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c15';
|
|
64
|
+
else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU15';
|
|
65
65
|
else if (props.colorScheme === "light dark") {
|
|
66
|
-
rules += ' -j9blY-
|
|
67
|
-
rules += ' -j9blY-
|
|
66
|
+
rules += ' -j9blY-_ZLmU15';
|
|
67
|
+
rules += ' -j9blY-D1v0V_ZN8Gi4c15';
|
|
68
68
|
}
|
|
69
|
-
rules += ' -Ovbhqd-
|
|
70
|
-
rules += ' -Ovbhqd-
|
|
71
|
-
rules += '
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
74
|
-
rules += '
|
|
75
|
-
rules += '
|
|
76
|
-
if (props.isArrowShown) rules += '
|
|
77
|
-
if (props.isArrowShown) rules += '
|
|
78
|
-
else rules += '
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
81
|
-
rules += '
|
|
82
|
-
rules += '
|
|
69
|
+
rules += ' -Ovbhqd-g_g15';
|
|
70
|
+
rules += ' -Ovbhqd-lga15';
|
|
71
|
+
rules += ' gEzkoQe15';
|
|
72
|
+
rules += ' oc15';
|
|
73
|
+
rules += ' nc15';
|
|
74
|
+
rules += ' kc15';
|
|
75
|
+
rules += ' jc15';
|
|
76
|
+
if (props.isArrowShown) rules += ' _rgr5H3d15';
|
|
77
|
+
if (props.isArrowShown) rules += ' _nd15';
|
|
78
|
+
else rules += ' _nLeasBb15';
|
|
79
|
+
rules += ' _Lf15';
|
|
80
|
+
rules += ' _Mb15';
|
|
81
|
+
rules += ' Oye39g15';
|
|
82
|
+
rules += ' Ola15';
|
|
83
83
|
if (props.size === "L") {
|
|
84
|
-
if (!width) rules += '
|
|
84
|
+
if (!width) rules += ' ZE15';
|
|
85
85
|
} else if (props.size === "M") {
|
|
86
|
-
if (!width) rules += '
|
|
86
|
+
if (!width) rules += ' ZB15';
|
|
87
87
|
} else if (props.size === "S") {
|
|
88
|
-
if (!width) rules += '
|
|
88
|
+
if (!width) rules += ' Zz15';
|
|
89
89
|
}
|
|
90
|
-
if (!maxWidth) rules += '
|
|
91
|
-
rules += '
|
|
92
|
-
rules += '
|
|
93
|
-
if (props.isExiting) rules += '
|
|
94
|
-
else if (props.isEntering) rules += '
|
|
90
|
+
if (!maxWidth) rules += ' LEmL1Zb15';
|
|
91
|
+
rules += ' _oa15';
|
|
92
|
+
rules += ' sd15';
|
|
93
|
+
if (props.isExiting) rules += ' _Ia15';
|
|
94
|
+
else if (props.isEntering) rules += ' _Ia15';
|
|
95
95
|
if (props.isSubmenu) {
|
|
96
|
-
rules += ' -_8PloMd-
|
|
97
|
-
rules += '
|
|
96
|
+
rules += ' -_8PloMd-s15';
|
|
97
|
+
rules += ' __Ya15';
|
|
98
98
|
} else if (props.placement === "bottom") {
|
|
99
99
|
if (props.isExiting) {
|
|
100
|
-
rules += ' -_8PloMd-
|
|
101
|
-
rules += '
|
|
100
|
+
rules += ' -_8PloMd-l15';
|
|
101
|
+
rules += ' __Ya15';
|
|
102
102
|
} else if (props.isEntering) {
|
|
103
|
-
rules += ' -_8PloMd-
|
|
104
|
-
rules += '
|
|
103
|
+
rules += ' -_8PloMd-l15';
|
|
104
|
+
rules += ' __Ya15';
|
|
105
105
|
}
|
|
106
106
|
} else if (props.placement === "top") {
|
|
107
107
|
if (props.isExiting) {
|
|
108
|
-
rules += ' -_8PloMd-
|
|
109
|
-
rules += '
|
|
108
|
+
rules += ' -_8PloMd-F15';
|
|
109
|
+
rules += ' __Ya15';
|
|
110
110
|
} else if (props.isEntering) {
|
|
111
|
-
rules += ' -_8PloMd-
|
|
112
|
-
rules += '
|
|
111
|
+
rules += ' -_8PloMd-F15';
|
|
112
|
+
rules += ' __Ya15';
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
if (props.isSubmenu) {
|
|
116
|
-
rules += ' -_7PloMd-
|
|
117
|
-
rules += '
|
|
116
|
+
rules += ' -_7PloMd-s15';
|
|
117
|
+
rules += ' __Ya15';
|
|
118
118
|
} else if (props.placement === "right") {
|
|
119
119
|
if (props.isExiting) {
|
|
120
|
-
rules += ' -_7PloMd-
|
|
121
|
-
rules += '
|
|
120
|
+
rules += ' -_7PloMd-m15';
|
|
121
|
+
rules += ' __Ya15';
|
|
122
122
|
} else if (props.isEntering) {
|
|
123
|
-
rules += ' -_7PloMd-
|
|
124
|
-
rules += '
|
|
123
|
+
rules += ' -_7PloMd-m15';
|
|
124
|
+
rules += ' __Ya15';
|
|
125
125
|
}
|
|
126
126
|
} else if (props.placement === "left") {
|
|
127
127
|
if (props.isExiting) {
|
|
128
|
-
rules += ' -_7PloMd-
|
|
129
|
-
rules += '
|
|
128
|
+
rules += ' -_7PloMd-G15';
|
|
129
|
+
rules += ' __Ya15';
|
|
130
130
|
} else if (props.isEntering) {
|
|
131
|
-
rules += ' -_7PloMd-
|
|
132
|
-
rules += '
|
|
131
|
+
rules += ' -_7PloMd-G15';
|
|
132
|
+
rules += ' __Ya15';
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
|
-
rules += '
|
|
136
|
-
rules += '
|
|
137
|
-
if (props.isExiting) rules += '
|
|
138
|
-
rules += '
|
|
139
|
-
if (props.isExiting) rules += '
|
|
135
|
+
rules += ' YmenWad15';
|
|
136
|
+
rules += ' Xc15';
|
|
137
|
+
if (props.isExiting) rules += ' _2c15';
|
|
138
|
+
rules += ' _Bb15';
|
|
139
|
+
if (props.isExiting) rules += ' _Ob15';
|
|
140
140
|
return rules;
|
|
141
141
|
};
|
|
142
142
|
// TODO: animations and real Popover Arrow
|
|
143
143
|
let $493371ef39bf7a55$var$arrow = function anonymous(props) {
|
|
144
144
|
let rules = " ";
|
|
145
|
-
rules += '
|
|
146
|
-
rules += '
|
|
147
|
-
rules += '
|
|
148
|
-
rules += '
|
|
149
|
-
if (props.placement === "right") rules += '
|
|
150
|
-
else if (props.placement === "left") rules += '
|
|
151
|
-
else if (props.placement === "bottom") rules += '
|
|
152
|
-
else if (props.placement === "top") rules += '
|
|
153
|
-
else rules += '
|
|
145
|
+
rules += ' sb15';
|
|
146
|
+
rules += ' tEzkoQe15';
|
|
147
|
+
rules += ' Zl15';
|
|
148
|
+
rules += ' Fh15';
|
|
149
|
+
if (props.placement === "right") rules += ' _Sd15';
|
|
150
|
+
else if (props.placement === "left") rules += ' _Sa15';
|
|
151
|
+
else if (props.placement === "bottom") rules += ' _Sc15';
|
|
152
|
+
else if (props.placement === "top") rules += ' _Sb15';
|
|
153
|
+
else rules += ' _Sc15';
|
|
154
154
|
if (props.placement === "right") {
|
|
155
|
-
rules += ' -_7PloMd-
|
|
156
|
-
rules += '
|
|
155
|
+
rules += ' -_7PloMd-y15';
|
|
156
|
+
rules += ' __Ya15';
|
|
157
157
|
} else if (props.placement === "left") {
|
|
158
|
-
rules += ' -_7PloMd-
|
|
159
|
-
rules += '
|
|
158
|
+
rules += ' -_7PloMd-e15';
|
|
159
|
+
rules += ' __Ya15';
|
|
160
160
|
}
|
|
161
|
-
rules += '
|
|
162
|
-
rules += '
|
|
163
|
-
rules += '
|
|
161
|
+
rules += ' _Vb15';
|
|
162
|
+
rules += ' Vye39g15';
|
|
163
|
+
rules += ' Vlb15';
|
|
164
164
|
return rules;
|
|
165
165
|
};
|
|
166
166
|
const $493371ef39bf7a55$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $16fRD$react.createContext)(null);
|
|
@@ -256,26 +256,26 @@ const $493371ef39bf7a55$var$innerDivStyle = function anonymous(props, overrides)
|
|
|
256
256
|
if (p[1] === "K") maxHeight = true;
|
|
257
257
|
rules += p[0];
|
|
258
258
|
}
|
|
259
|
-
if (props.padding === "none") rules += '
|
|
260
|
-
else if (props.padding === "default") rules += '
|
|
261
|
-
if (props.padding === "none") rules += '
|
|
262
|
-
else if (props.padding === "default") rules += '
|
|
263
|
-
if (props.padding === "none") rules += '
|
|
264
|
-
else if (props.padding === "default") rules += '
|
|
265
|
-
if (props.padding === "none") rules += '
|
|
266
|
-
else if (props.padding === "default") rules += '
|
|
267
|
-
rules += '
|
|
268
|
-
rules += '
|
|
269
|
-
rules += '
|
|
270
|
-
rules += '
|
|
271
|
-
rules += '
|
|
272
|
-
rules += '
|
|
273
|
-
rules += '
|
|
274
|
-
rules += '
|
|
275
|
-
if (!position) rules += '
|
|
276
|
-
if (!width) rules += '
|
|
277
|
-
if (!maxWidth) rules += '
|
|
278
|
-
if (!maxHeight) rules += '
|
|
259
|
+
if (props.padding === "none") rules += ' Td15';
|
|
260
|
+
else if (props.padding === "default") rules += ' Tt15';
|
|
261
|
+
if (props.padding === "none") rules += ' Qd15';
|
|
262
|
+
else if (props.padding === "default") rules += ' Qt15';
|
|
263
|
+
if (props.padding === "none") rules += ' Sd15';
|
|
264
|
+
else if (props.padding === "default") rules += ' St15';
|
|
265
|
+
if (props.padding === "none") rules += ' Rd15';
|
|
266
|
+
else if (props.padding === "default") rules += ' Rt15';
|
|
267
|
+
rules += ' _oa15';
|
|
268
|
+
rules += ' _Le15';
|
|
269
|
+
rules += ' oi15';
|
|
270
|
+
rules += ' ni15';
|
|
271
|
+
rules += ' ki15';
|
|
272
|
+
rules += ' ji15';
|
|
273
|
+
rules += ' _Na15';
|
|
274
|
+
rules += ' Pa15';
|
|
275
|
+
if (!position) rules += ' _Pc15';
|
|
276
|
+
if (!width) rules += ' Za15';
|
|
277
|
+
if (!maxWidth) rules += ' L40ub4c15';
|
|
278
|
+
if (!maxHeight) rules += ' K40ub4c15';
|
|
279
279
|
return rules;
|
|
280
280
|
};
|
|
281
281
|
const $493371ef39bf7a55$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $16fRD$react.forwardRef)(function Popover(props, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n OverlayArrow\n} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n createContext,\n ForwardedRef,\n forwardRef,\n ReactNode,\n useCallback,\n useContext,\n useMemo\n} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n getAllowedOverrides,\n heightProperties,\n UnsafeStyles,\n widthProperties\n} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps\n extends\n UnsafeStyles,\n Omit<\n AriaPopoverProps,\n | 'arrowSize'\n | 'isNonModal'\n | 'arrowBoundaryOffset'\n | 'isKeyboardDismissDisabled'\n | 'shouldCloseOnInteractOutside'\n | 'shouldUpdatePosition'\n | 'style'\n | 'className'\n | 'render'\n | keyof GlobalDOMAttributes\n > {\n /**\n * The styles of the popover.\n */\n styles?: StyleString;\n /**\n * Whether a popover's arrow should be hidden.\n *\n * @default false\n */\n hideArrow?: boolean;\n /**\n * The size of the Popover. If not specified, the popover fits its contents.\n */\n size?: 'S' | 'M' | 'L';\n /** The type of overlay that should be rendered when on a mobile device. */\n // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style(\n {\n ...setColorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n default: 'layer-2',\n forcedColors: 'Background'\n }\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n outlineStyle: 'solid',\n outlineWidth: 1,\n outlineColor: {\n default: lightDark('transparent-white-25', 'gray-200'),\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 * containerPadding\n maxWidth: 'calc(100vw - 24px)',\n boxSizing: 'border-box',\n display: 'flex',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n },\n getAllowedOverrides()\n);\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n width: 18,\n height: 9,\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: '-25%',\n right: '25%'\n }\n },\n strokeWidth: 1,\n stroke: {\n default: lightDark('transparent-white-25', 'gray-200'),\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverContext =\n createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(\n props: PopoverProps,\n ref: ForwardedRef<HTMLDivElement | null>\n) {\n let {hideArrow = false, UNSAFE_className = '', UNSAFE_style, styles, size} = props;\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback(\n (el: HTMLDivElement) => {\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n },\n [locale, direction]\n );\n // Memoed so it doesn't break ComboBox/Picker scrolling\n let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. */}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={mergedRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={renderProps =>\n UNSAFE_className +\n mergeStyles(\n popover({\n ...renderProps,\n size,\n isArrowShown: !hideArrow,\n colorScheme,\n isSubmenu: renderProps.trigger === 'SubmenuTrigger'\n }),\n styles\n )\n }>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow className=\"\">\n <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path\n transform=\"translate(0 -1)\"\n d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\"\n />\n </svg>\n </OverlayArrow>\n )}\n <InPopoverContext.Provider value>{children}</InPopoverContext.Provider>\n </>\n ))}\n </AriaPopover>\n );\n});\n\ntype PopoverStylesProp = StyleString<\n (typeof widthProperties)[number] | (typeof heightProperties)[number]\n>;\nexport interface PopoverDialogProps\n extends\n Pick<\n PopoverProps,\n | 'size'\n | 'hideArrow'\n | 'placement'\n | 'shouldFlip'\n | 'containerPadding'\n | 'offset'\n | 'crossOffset'\n | 'triggerRef'\n | 'isOpen'\n | 'onOpenChange'\n >,\n Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n UnsafeStyles {\n /**\n * The children of the popover.\n */\n children?: ReactNode;\n /**\n * The amount of padding around the contents of the dialog.\n *\n * @default 'default'\n */\n padding?: 'default' | 'none';\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: PopoverStylesProp;\n}\n\nconst innerDivStyle = style(\n {\n padding: {\n padding: {\n default: 8,\n none: 0\n }\n },\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: 'inherit',\n overflow: 'auto',\n position: 'relative',\n width: 'full',\n maxSize: 'inherit'\n },\n getAllowedOverrides({height: true})\n);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(\n props: PopoverDialogProps,\n ref: DOMRef<HTMLDivElement>\n) {\n [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className, UNSAFE_style, styles, padding = 'default', ...otherProps} = props;\n\n return (\n <PopoverBase {...otherProps} ref={domRef}>\n {composeRenderProps(props.children, children => (\n <div\n style={UNSAFE_style}\n className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n </div>\n ))}\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n OverlayArrow\n} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n createContext,\n ForwardedRef,\n forwardRef,\n ReactNode,\n useCallback,\n useContext,\n useMemo\n} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n getAllowedOverrides,\n heightProperties,\n UnsafeStyles,\n widthProperties\n} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps\n extends\n UnsafeStyles,\n Omit<\n AriaPopoverProps,\n | 'arrowSize'\n | 'arrowBoundaryOffset'\n | 'isKeyboardDismissDisabled'\n | 'shouldCloseOnInteractOutside'\n | 'shouldUpdatePosition'\n | 'style'\n | 'className'\n | 'render'\n | keyof GlobalDOMAttributes\n > {\n /**\n * The styles of the popover.\n */\n styles?: StyleString;\n /**\n * Whether a popover's arrow should be hidden.\n *\n * @default false\n */\n hideArrow?: boolean;\n /**\n * The size of the Popover. If not specified, the popover fits its contents.\n */\n size?: 'S' | 'M' | 'L';\n /** The type of overlay that should be rendered when on a mobile device. */\n // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style(\n {\n ...setColorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n default: 'layer-2',\n forcedColors: 'Background'\n }\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n outlineStyle: 'solid',\n outlineWidth: 1,\n outlineColor: {\n default: lightDark('transparent-white-25', 'gray-200'),\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 * containerPadding\n maxWidth: 'calc(100vw - 24px)',\n boxSizing: 'border-box',\n display: 'flex',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n },\n getAllowedOverrides()\n);\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n width: 18,\n height: 9,\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: '-25%',\n right: '25%'\n }\n },\n strokeWidth: 1,\n stroke: {\n default: lightDark('transparent-white-25', 'gray-200'),\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverContext =\n createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(\n props: PopoverProps,\n ref: ForwardedRef<HTMLDivElement | null>\n) {\n let {hideArrow = false, UNSAFE_className = '', UNSAFE_style, styles, size} = props;\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback(\n (el: HTMLDivElement) => {\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n },\n [locale, direction]\n );\n // Memoed so it doesn't break ComboBox/Picker scrolling\n let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. */}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={mergedRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={renderProps =>\n UNSAFE_className +\n mergeStyles(\n popover({\n ...renderProps,\n size,\n isArrowShown: !hideArrow,\n colorScheme,\n isSubmenu: renderProps.trigger === 'SubmenuTrigger'\n }),\n styles\n )\n }>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow className=\"\">\n <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path\n transform=\"translate(0 -1)\"\n d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\"\n />\n </svg>\n </OverlayArrow>\n )}\n <InPopoverContext.Provider value>{children}</InPopoverContext.Provider>\n </>\n ))}\n </AriaPopover>\n );\n});\n\ntype PopoverStylesProp = StyleString<\n (typeof widthProperties)[number] | (typeof heightProperties)[number]\n>;\nexport interface PopoverDialogProps\n extends\n Pick<\n PopoverProps,\n | 'size'\n | 'hideArrow'\n | 'placement'\n | 'shouldFlip'\n | 'containerPadding'\n | 'offset'\n | 'crossOffset'\n | 'getTargetRect'\n | 'isNonModal'\n | 'triggerRef'\n | 'isOpen'\n | 'onOpenChange'\n >,\n Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n UnsafeStyles {\n /**\n * The children of the popover.\n */\n children?: ReactNode;\n /**\n * The amount of padding around the contents of the dialog.\n *\n * @default 'default'\n */\n padding?: 'default' | 'none';\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: PopoverStylesProp;\n}\n\nconst innerDivStyle = style(\n {\n padding: {\n padding: {\n default: 8,\n none: 0\n }\n },\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: 'inherit',\n overflow: 'auto',\n position: 'relative',\n width: 'full',\n maxSize: 'inherit'\n },\n getAllowedOverrides({height: true})\n);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(\n props: PopoverDialogProps,\n ref: DOMRef<HTMLDivElement>\n) {\n [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className, UNSAFE_style, styles, padding = 'default', ...otherProps} = props;\n\n return (\n <PopoverBase {...otherProps} ref={domRef}>\n {composeRenderProps(props.children, children => (\n <div\n style={UNSAFE_style}\n className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n </div>\n ))}\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
|