@react-spectrum/s2 0.5.0 → 0.6.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/Accordion.cjs +5 -8
- package/dist/Accordion.cjs.map +1 -1
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.css.map +1 -1
- package/dist/Accordion.mjs +5 -8
- package/dist/Accordion.mjs.map +1 -1
- package/dist/ActionBar.cjs +264 -0
- package/dist/ActionBar.cjs.map +1 -0
- package/dist/ActionBar.css +267 -0
- package/dist/ActionBar.css.map +1 -0
- package/dist/ActionBar.mjs +257 -0
- package/dist/ActionBar.mjs.map +1 -0
- package/dist/ActionButton.cjs +121 -147
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +133 -153
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +122 -148
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.cjs +6 -9
- package/dist/ActionButtonGroup.cjs.map +1 -1
- package/dist/ActionButtonGroup.css +3 -3
- package/dist/ActionButtonGroup.css.map +1 -1
- package/dist/ActionButtonGroup.mjs +6 -9
- package/dist/ActionButtonGroup.mjs.map +1 -1
- package/dist/ActionMenu.cjs +2 -5
- package/dist/ActionMenu.cjs.map +1 -1
- package/dist/ActionMenu.mjs +2 -5
- package/dist/ActionMenu.mjs.map +1 -1
- package/dist/AlertDialog.cjs +2 -5
- package/dist/AlertDialog.cjs.map +1 -1
- package/dist/AlertDialog.css.map +1 -1
- package/dist/AlertDialog.mjs +2 -5
- package/dist/AlertDialog.mjs.map +1 -1
- package/dist/Avatar.cjs +12 -15
- package/dist/Avatar.cjs.map +1 -1
- package/dist/Avatar.css +11 -11
- package/dist/Avatar.css.map +1 -1
- package/dist/Avatar.mjs +12 -15
- package/dist/Avatar.mjs.map +1 -1
- package/dist/AvatarGroup.cjs +99 -102
- package/dist/AvatarGroup.cjs.map +1 -1
- package/dist/AvatarGroup.css +31 -31
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup.mjs +99 -102
- package/dist/AvatarGroup.mjs.map +1 -1
- package/dist/Badge.cjs +99 -102
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +76 -76
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +99 -102
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +93 -94
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +70 -64
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +94 -95
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +305 -278
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +255 -182
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +307 -280
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +17 -20
- package/dist/ButtonGroup.cjs.map +1 -1
- package/dist/ButtonGroup.css +11 -11
- package/dist/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup.mjs +18 -21
- package/dist/ButtonGroup.mjs.map +1 -1
- package/dist/Card.cjs +167 -167
- package/dist/Card.css +121 -121
- package/dist/Card.mjs +167 -167
- package/dist/CardView.cjs +47 -21
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css +39 -15
- package/dist/CardView.css.map +1 -1
- package/dist/CardView.mjs +49 -23
- package/dist/CardView.mjs.map +1 -1
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +58 -62
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +54 -54
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +59 -63
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +43 -45
- package/dist/CheckboxGroup.cjs.map +1 -1
- package/dist/CheckboxGroup.css +32 -32
- package/dist/CheckboxGroup.css.map +1 -1
- package/dist/CheckboxGroup.mjs +44 -46
- package/dist/CheckboxGroup.mjs.map +1 -1
- package/dist/ClearButton.cjs +7 -8
- package/dist/ClearButton.cjs.map +1 -1
- package/dist/ClearButton.css +5 -5
- package/dist/ClearButton.css.map +1 -1
- package/dist/ClearButton.mjs +7 -8
- package/dist/ClearButton.mjs.map +1 -1
- package/dist/CloseButton.cjs +40 -53
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css +45 -49
- package/dist/CloseButton.css.map +1 -1
- package/dist/CloseButton.mjs +40 -53
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs +12 -15
- package/dist/ColorArea.cjs.map +1 -1
- package/dist/ColorArea.css +10 -10
- package/dist/ColorArea.css.map +1 -1
- package/dist/ColorArea.mjs +12 -15
- package/dist/ColorArea.mjs.map +1 -1
- package/dist/ColorField.cjs +31 -34
- package/dist/ColorField.cjs.map +1 -1
- package/dist/ColorField.css +24 -24
- package/dist/ColorField.css.map +1 -1
- package/dist/ColorField.mjs +32 -35
- package/dist/ColorField.mjs.map +1 -1
- package/dist/ColorHandle.cjs +11 -11
- package/dist/ColorHandle.css +19 -19
- package/dist/ColorHandle.mjs +11 -11
- package/dist/ColorSlider.cjs +43 -46
- package/dist/ColorSlider.cjs.map +1 -1
- package/dist/ColorSlider.css +43 -43
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSlider.mjs +44 -47
- package/dist/ColorSlider.mjs.map +1 -1
- package/dist/ColorSwatch.cjs +8 -11
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +14 -14
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +9 -12
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +15 -18
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css +33 -33
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +15 -18
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/ColorWheel.cjs +18 -21
- package/dist/ColorWheel.cjs.map +1 -1
- package/dist/ColorWheel.css +15 -15
- package/dist/ColorWheel.css.map +1 -1
- package/dist/ColorWheel.mjs +18 -21
- package/dist/ColorWheel.mjs.map +1 -1
- package/dist/ComboBox.cjs +61 -61
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +52 -52
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +62 -62
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/Content.cjs +12 -19
- package/dist/Content.cjs.map +1 -1
- package/dist/Content.mjs +12 -19
- package/dist/Content.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +7 -10
- package/dist/ContextualHelp.cjs.map +1 -1
- package/dist/ContextualHelp.css +23 -23
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +7 -10
- package/dist/ContextualHelp.mjs.map +1 -1
- package/dist/CustomDialog.cjs +10 -13
- package/dist/CustomDialog.cjs.map +1 -1
- package/dist/CustomDialog.css +9 -9
- package/dist/CustomDialog.css.map +1 -1
- package/dist/CustomDialog.mjs +10 -13
- package/dist/CustomDialog.mjs.map +1 -1
- package/dist/Dialog.cjs +12 -16
- package/dist/Dialog.cjs.map +1 -1
- package/dist/Dialog.css +39 -39
- package/dist/Dialog.css.map +1 -1
- package/dist/Dialog.mjs +12 -16
- package/dist/Dialog.mjs.map +1 -1
- package/dist/Disclosure.cjs +60 -69
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +49 -49
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +61 -70
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +15 -19
- package/dist/Divider.cjs.map +1 -1
- package/dist/Divider.css +18 -18
- package/dist/Divider.css.map +1 -1
- package/dist/Divider.mjs +15 -19
- package/dist/Divider.mjs.map +1 -1
- package/dist/DropZone.cjs +30 -33
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +26 -26
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +30 -33
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +133 -131
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +76 -84
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +133 -131
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +6 -9
- package/dist/Form.cjs.map +1 -1
- package/dist/Form.css +3 -3
- package/dist/Form.css.map +1 -1
- package/dist/Form.mjs +6 -9
- package/dist/Form.mjs.map +1 -1
- package/dist/FullscreenDialog.cjs +7 -10
- package/dist/FullscreenDialog.cjs.map +1 -1
- package/dist/FullscreenDialog.css +54 -54
- package/dist/FullscreenDialog.css.map +1 -1
- package/dist/FullscreenDialog.mjs +7 -10
- package/dist/FullscreenDialog.mjs.map +1 -1
- package/dist/IllustratedMessage.cjs +128 -132
- package/dist/IllustratedMessage.cjs.map +1 -1
- package/dist/IllustratedMessage.css +58 -58
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/IllustratedMessage.mjs +128 -132
- package/dist/IllustratedMessage.mjs.map +1 -1
- package/dist/Image.cjs +12 -13
- package/dist/Image.cjs.map +1 -1
- package/dist/Image.css +11 -11
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +13 -14
- package/dist/Image.mjs.map +1 -1
- package/dist/InlineAlert.cjs +75 -84
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +59 -63
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +76 -85
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +36 -39
- package/dist/Link.cjs.map +1 -1
- package/dist/Link.css +42 -42
- package/dist/Link.css.map +1 -1
- package/dist/Link.mjs +37 -40
- package/dist/Link.mjs.map +1 -1
- package/dist/Menu.cjs +322 -234
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +118 -116
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +323 -235
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +66 -70
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +69 -73
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +66 -70
- package/dist/Meter.mjs.map +1 -1
- package/dist/Modal.cjs +36 -45
- package/dist/Modal.cjs.map +1 -1
- package/dist/Modal.css +48 -72
- package/dist/Modal.css.map +1 -1
- package/dist/Modal.mjs +37 -46
- package/dist/Modal.mjs.map +1 -1
- package/dist/NumberField.cjs +66 -69
- package/dist/NumberField.cjs.map +1 -1
- package/dist/NumberField.css +70 -70
- package/dist/NumberField.css.map +1 -1
- package/dist/NumberField.mjs +67 -70
- package/dist/NumberField.mjs.map +1 -1
- package/dist/Picker.cjs +122 -122
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +84 -84
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +123 -123
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +47 -69
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +55 -126
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +48 -70
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +85 -87
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +81 -85
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +85 -87
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/ProgressCircle.cjs +16 -18
- package/dist/ProgressCircle.cjs.map +1 -1
- package/dist/ProgressCircle.css +16 -16
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/ProgressCircle.mjs +16 -18
- package/dist/ProgressCircle.mjs.map +1 -1
- package/dist/Provider.cjs +5 -5
- package/dist/Provider.css +6 -6
- package/dist/Provider.mjs +5 -5
- package/dist/Radio.cjs +54 -58
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +50 -50
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +55 -59
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +39 -43
- package/dist/RadioGroup.cjs.map +1 -1
- package/dist/RadioGroup.css +32 -32
- package/dist/RadioGroup.css.map +1 -1
- package/dist/RadioGroup.mjs +40 -44
- package/dist/RadioGroup.mjs.map +1 -1
- package/dist/RangeSlider.cjs +2 -3
- package/dist/RangeSlider.cjs.map +1 -1
- package/dist/RangeSlider.mjs +3 -4
- package/dist/RangeSlider.mjs.map +1 -1
- package/dist/SearchField.cjs +34 -37
- package/dist/SearchField.cjs.map +1 -1
- package/dist/SearchField.css +30 -30
- package/dist/SearchField.css.map +1 -1
- package/dist/SearchField.mjs +35 -38
- package/dist/SearchField.mjs.map +1 -1
- package/dist/SegmentedControl.cjs +67 -73
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +63 -63
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +68 -74
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +111 -112
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +87 -87
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +112 -113
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +28 -32
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css +26 -26
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +28 -32
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/Switch.cjs +56 -60
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +48 -48
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +57 -61
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +209 -196
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +95 -95
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +211 -198
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +59 -62
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +42 -42
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +59 -62
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TagGroup.cjs +122 -124
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +93 -93
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +122 -124
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +44 -55
- package/dist/TextField.cjs.map +1 -1
- package/dist/TextField.css +33 -33
- package/dist/TextField.css.map +1 -1
- package/dist/TextField.mjs +45 -56
- package/dist/TextField.mjs.map +1 -1
- package/dist/ToggleButton.cjs +6 -9
- package/dist/ToggleButton.cjs.map +1 -1
- package/dist/ToggleButton.css +7 -7
- package/dist/ToggleButton.css.map +1 -1
- package/dist/ToggleButton.mjs +6 -9
- package/dist/ToggleButton.mjs.map +1 -1
- package/dist/ToggleButtonGroup.cjs +2 -5
- package/dist/ToggleButtonGroup.cjs.map +1 -1
- package/dist/ToggleButtonGroup.mjs +2 -5
- package/dist/ToggleButtonGroup.mjs.map +1 -1
- package/dist/Tooltip.cjs +48 -48
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +55 -70
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +49 -49
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/ar-AE.cjs +10 -2
- package/dist/ar-AE.cjs.map +1 -1
- package/dist/ar-AE.mjs +10 -2
- package/dist/ar-AE.mjs.map +1 -1
- package/dist/bg-BG.cjs +11 -2
- package/dist/bg-BG.cjs.map +1 -1
- package/dist/bg-BG.mjs +11 -2
- package/dist/bg-BG.mjs.map +1 -1
- package/dist/cs-CZ.cjs +7 -2
- package/dist/cs-CZ.cjs.map +1 -1
- package/dist/cs-CZ.mjs +7 -2
- package/dist/cs-CZ.mjs.map +1 -1
- package/dist/da-DK.cjs +12 -4
- package/dist/da-DK.cjs.map +1 -1
- package/dist/da-DK.mjs +12 -4
- package/dist/da-DK.mjs.map +1 -1
- package/dist/de-DE.cjs +11 -2
- package/dist/de-DE.cjs.map +1 -1
- package/dist/de-DE.mjs +11 -2
- package/dist/de-DE.mjs.map +1 -1
- package/dist/el-GR.cjs +11 -2
- package/dist/el-GR.cjs.map +1 -1
- package/dist/el-GR.mjs +11 -2
- package/dist/el-GR.mjs.map +1 -1
- package/dist/en-US.cjs +8 -0
- package/dist/en-US.cjs.map +1 -1
- package/dist/en-US.mjs +8 -0
- package/dist/en-US.mjs.map +1 -1
- package/dist/es-ES.cjs +11 -2
- package/dist/es-ES.cjs.map +1 -1
- package/dist/es-ES.mjs +11 -2
- package/dist/es-ES.mjs.map +1 -1
- package/dist/et-EE.cjs +10 -2
- package/dist/et-EE.cjs.map +1 -1
- package/dist/et-EE.mjs +10 -2
- package/dist/et-EE.mjs.map +1 -1
- package/dist/fi-FI.cjs +10 -2
- package/dist/fi-FI.cjs.map +1 -1
- package/dist/fi-FI.mjs +10 -2
- package/dist/fi-FI.mjs.map +1 -1
- package/dist/fr-FR.cjs +11 -2
- package/dist/fr-FR.cjs.map +1 -1
- package/dist/fr-FR.mjs +11 -2
- package/dist/fr-FR.mjs.map +1 -1
- package/dist/he-IL.cjs +11 -2
- package/dist/he-IL.cjs.map +1 -1
- package/dist/he-IL.mjs +11 -2
- package/dist/he-IL.mjs.map +1 -1
- package/dist/hr-HR.cjs +7 -2
- package/dist/hr-HR.cjs.map +1 -1
- package/dist/hr-HR.mjs +7 -2
- package/dist/hr-HR.mjs.map +1 -1
- package/dist/hu-HU.cjs +10 -2
- package/dist/hu-HU.cjs.map +1 -1
- package/dist/hu-HU.mjs +10 -2
- package/dist/hu-HU.mjs.map +1 -1
- package/dist/it-IT.cjs +11 -2
- package/dist/it-IT.cjs.map +1 -1
- package/dist/it-IT.mjs +11 -2
- package/dist/it-IT.mjs.map +1 -1
- package/dist/ja-JP.cjs +10 -2
- package/dist/ja-JP.cjs.map +1 -1
- package/dist/ja-JP.mjs +10 -2
- package/dist/ja-JP.mjs.map +1 -1
- package/dist/ko-KR.cjs +12 -4
- package/dist/ko-KR.cjs.map +1 -1
- package/dist/ko-KR.mjs +12 -4
- package/dist/ko-KR.mjs.map +1 -1
- package/dist/lt-LT.cjs +9 -4
- package/dist/lt-LT.cjs.map +1 -1
- package/dist/lt-LT.mjs +9 -4
- package/dist/lt-LT.mjs.map +1 -1
- package/dist/lv-LV.cjs +11 -3
- package/dist/lv-LV.cjs.map +1 -1
- package/dist/lv-LV.mjs +11 -3
- package/dist/lv-LV.mjs.map +1 -1
- package/dist/main.cjs +4 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/nb-NO.cjs +9 -4
- package/dist/nb-NO.cjs.map +1 -1
- package/dist/nb-NO.mjs +9 -4
- package/dist/nb-NO.mjs.map +1 -1
- package/dist/nl-NL.cjs +10 -2
- package/dist/nl-NL.cjs.map +1 -1
- package/dist/nl-NL.mjs +10 -2
- package/dist/nl-NL.mjs.map +1 -1
- package/dist/pl-PL.cjs +8 -3
- package/dist/pl-PL.cjs.map +1 -1
- package/dist/pl-PL.mjs +8 -3
- package/dist/pl-PL.mjs.map +1 -1
- package/dist/pt-BR.cjs +11 -2
- package/dist/pt-BR.cjs.map +1 -1
- package/dist/pt-BR.mjs +11 -2
- package/dist/pt-BR.mjs.map +1 -1
- package/dist/pt-PT.cjs +11 -2
- package/dist/pt-PT.cjs.map +1 -1
- package/dist/pt-PT.mjs +11 -2
- package/dist/pt-PT.mjs.map +1 -1
- package/dist/ro-RO.cjs +12 -3
- package/dist/ro-RO.cjs.map +1 -1
- package/dist/ro-RO.mjs +12 -3
- package/dist/ro-RO.mjs.map +1 -1
- package/dist/ru-RU.cjs +7 -2
- package/dist/ru-RU.cjs.map +1 -1
- package/dist/ru-RU.mjs +7 -2
- package/dist/ru-RU.mjs.map +1 -1
- package/dist/sk-SK.cjs +7 -2
- package/dist/sk-SK.cjs.map +1 -1
- package/dist/sk-SK.mjs +7 -2
- package/dist/sk-SK.mjs.map +1 -1
- package/dist/sl-SI.cjs +7 -2
- package/dist/sl-SI.cjs.map +1 -1
- package/dist/sl-SI.mjs +7 -2
- package/dist/sl-SI.mjs.map +1 -1
- package/dist/sr-SP.cjs +7 -2
- package/dist/sr-SP.cjs.map +1 -1
- package/dist/sr-SP.mjs +7 -2
- package/dist/sr-SP.mjs.map +1 -1
- package/dist/sv-SE.cjs +11 -2
- package/dist/sv-SE.cjs.map +1 -1
- package/dist/sv-SE.mjs +11 -2
- package/dist/sv-SE.mjs.map +1 -1
- package/dist/tr-TR.cjs +10 -2
- package/dist/tr-TR.cjs.map +1 -1
- package/dist/tr-TR.mjs +10 -2
- package/dist/tr-TR.mjs.map +1 -1
- package/dist/types.d.ts +109 -89
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.cjs +7 -2
- package/dist/uk-UA.cjs.map +1 -1
- package/dist/uk-UA.mjs +7 -2
- package/dist/uk-UA.mjs.map +1 -1
- package/dist/zh-CN.cjs +10 -2
- package/dist/zh-CN.cjs.map +1 -1
- package/dist/zh-CN.mjs +10 -2
- package/dist/zh-CN.mjs.map +1 -1
- package/dist/zh-TW.cjs +10 -2
- package/dist/zh-TW.cjs.map +1 -1
- package/dist/zh-TW.mjs +10 -2
- package/dist/zh-TW.mjs.map +1 -1
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.css +5 -5
- package/icons/Skeleton.mjs +2 -2
- package/package.json +20 -21
- package/src/Accordion.tsx +5 -8
- package/src/ActionBar.tsx +229 -0
- package/src/ActionButton.tsx +25 -52
- package/src/ActionButtonGroup.tsx +9 -11
- package/src/ActionMenu.tsx +5 -8
- package/src/AlertDialog.tsx +5 -8
- package/src/Avatar.tsx +5 -8
- package/src/AvatarGroup.tsx +5 -8
- package/src/Badge.tsx +5 -8
- package/src/Breadcrumbs.tsx +6 -12
- package/src/Button.tsx +197 -154
- package/src/ButtonGroup.tsx +5 -8
- package/src/CardView.tsx +37 -12
- package/src/Checkbox.tsx +6 -9
- package/src/CheckboxGroup.tsx +6 -9
- package/src/ClearButton.tsx +2 -5
- package/src/CloseButton.tsx +21 -31
- package/src/ColorArea.tsx +5 -8
- package/src/ColorField.tsx +5 -8
- package/src/ColorSlider.tsx +5 -8
- package/src/ColorSwatch.tsx +5 -8
- package/src/ColorSwatchPicker.tsx +5 -8
- package/src/ColorWheel.tsx +5 -8
- package/src/ComboBox.tsx +7 -9
- package/src/Content.tsx +12 -30
- package/src/ContextualHelp.tsx +5 -8
- package/src/CustomDialog.tsx +5 -8
- package/src/Dialog.tsx +6 -9
- package/src/Disclosure.tsx +15 -24
- package/src/Divider.tsx +16 -25
- package/src/DropZone.tsx +5 -8
- package/src/Field.tsx +25 -32
- package/src/Form.tsx +5 -8
- package/src/FullscreenDialog.tsx +5 -8
- package/src/IllustratedMessage.tsx +6 -9
- package/src/Image.tsx +3 -6
- package/src/InlineAlert.tsx +6 -10
- package/src/Link.tsx +13 -21
- package/src/Menu.tsx +69 -33
- package/src/Meter.tsx +13 -23
- package/src/Modal.tsx +22 -52
- package/src/NumberField.tsx +5 -8
- package/src/Picker.tsx +7 -9
- package/src/Popover.tsx +30 -104
- package/src/ProgressBar.tsx +14 -24
- package/src/ProgressCircle.tsx +18 -24
- package/src/Radio.tsx +6 -9
- package/src/RadioGroup.tsx +6 -9
- package/src/RangeSlider.tsx +2 -5
- package/src/SearchField.tsx +5 -8
- package/src/SegmentedControl.tsx +10 -16
- package/src/Slider.tsx +2 -5
- package/src/StatusLight.tsx +6 -9
- package/src/Switch.tsx +6 -9
- package/src/TableView.tsx +53 -50
- package/src/Tabs.tsx +5 -8
- package/src/TagGroup.tsx +7 -14
- package/src/TextField.tsx +20 -28
- package/src/ToggleButton.tsx +7 -9
- package/src/ToggleButtonGroup.tsx +5 -8
- package/src/Tooltip.tsx +30 -51
- package/src/bar-utils.ts +3 -10
- package/src/index.ts +2 -0
- package/src/style-utils.ts +15 -8
- package/style/dist/main.cjs +1 -0
- package/style/dist/main.cjs.map +1 -1
- package/style/dist/module.mjs +2 -2
- package/style/dist/module.mjs.map +1 -1
- package/style/dist/spectrum-theme.cjs +72 -5
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +72 -6
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/style-macro.cjs +13 -1
- package/style/dist/style-macro.cjs.map +1 -1
- package/style/dist/style-macro.mjs +13 -1
- package/style/dist/style-macro.mjs.map +1 -1
- package/style/dist/types.d.ts +50 -29
- package/style/dist/types.d.ts.map +1 -1
- package/style/index.ts +1 -1
- package/style/spectrum-theme.ts +72 -7
- package/style/style-macro.ts +20 -4
- package/style/tokens.ts +30 -0
- package/style/types.ts +1 -1
package/dist/Picker.cjs
CHANGED
|
@@ -61,57 +61,57 @@ $parcel$export(module.exports, "PickerSection", () => $b9c30139cd63c62a$export$a
|
|
|
61
61
|
const $b9c30139cd63c62a$export$b72b8dade9393cd5 = /*#__PURE__*/ (0, $ceqeb$react.createContext)(null);
|
|
62
62
|
const $b9c30139cd63c62a$var$inputButton = function anonymous(props) {
|
|
63
63
|
let rules = " .";
|
|
64
|
-
if (props.isQuiet) rules += '
|
|
65
|
-
else if (props.isFocusVisible) rules += '
|
|
66
|
-
else rules += '
|
|
67
|
-
rules += '
|
|
64
|
+
if (props.isQuiet) rules += ' _Ma';
|
|
65
|
+
else if (props.isFocusVisible) rules += ' _Mb';
|
|
66
|
+
else rules += ' _Ma';
|
|
67
|
+
rules += ' da_____M';
|
|
68
68
|
rules += ' dx';
|
|
69
|
-
rules += '
|
|
70
|
-
rules += '
|
|
71
|
-
rules += '
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
74
|
-
rules += '
|
|
69
|
+
rules += ' _Oc';
|
|
70
|
+
rules += ' _N-3t1z';
|
|
71
|
+
rules += ' __b-g2ozi1';
|
|
72
|
+
rules += ' __c-g2ozi1';
|
|
73
|
+
rules += ' __d-g2ozi1';
|
|
74
|
+
rules += ' __e-g2ozi1';
|
|
75
75
|
if (props.size === "XL") rules += ' qj';
|
|
76
76
|
else if (props.size === "L") rules += ' qi';
|
|
77
77
|
else if (props.size === "S") rules += ' qh';
|
|
78
78
|
else if (props.size === "XS") rules += ' qg';
|
|
79
79
|
else rules += ' qf';
|
|
80
|
-
if (props.isQuiet) rules += '
|
|
81
|
-
else rules += '
|
|
80
|
+
if (props.isQuiet) rules += ' __na';
|
|
81
|
+
else rules += ' __n-1s8glxue';
|
|
82
82
|
if (props.size === "XL") rules += ' -usygro_l-____g';
|
|
83
83
|
else if (props.size === "L") rules += ' -usygro_l-___0';
|
|
84
84
|
else if (props.size === "S") rules += ' -usygro_l-___u';
|
|
85
85
|
else rules += ' -usygro_l-___K';
|
|
86
86
|
rules += ' m-rwozxi';
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
91
|
-
rules += '
|
|
92
|
-
rules += '
|
|
93
|
-
rules += '
|
|
94
|
-
rules += '
|
|
95
|
-
rules += '
|
|
87
|
+
rules += ' Vc';
|
|
88
|
+
rules += ' _d-bc1l9oh';
|
|
89
|
+
rules += ' _d-1uotwbwg';
|
|
90
|
+
rules += ' _d-eo0c6sf';
|
|
91
|
+
rules += ' _d-enzzrge';
|
|
92
|
+
rules += ' _d-enzykdd';
|
|
93
|
+
rules += ' _d-enzwzjc';
|
|
94
|
+
rules += ' _d-enzrfpb';
|
|
95
|
+
rules += ' _da';
|
|
96
96
|
if (props.size === "XL") {
|
|
97
|
-
rules += '
|
|
98
|
-
rules += '
|
|
97
|
+
rules += ' _ebj';
|
|
98
|
+
rules += ' _ei';
|
|
99
99
|
} else if (props.size === "L") {
|
|
100
|
-
rules += '
|
|
101
|
-
rules += '
|
|
100
|
+
rules += ' _ebh';
|
|
101
|
+
rules += ' _eg';
|
|
102
102
|
} else if (props.size === "S") {
|
|
103
|
-
rules += '
|
|
104
|
-
rules += '
|
|
103
|
+
rules += ' _ebd';
|
|
104
|
+
rules += ' _ec';
|
|
105
105
|
} else if (props.size === "XS") {
|
|
106
|
-
rules += '
|
|
107
|
-
rules += '
|
|
106
|
+
rules += ' _ebb';
|
|
107
|
+
rules += ' _ea';
|
|
108
108
|
} else {
|
|
109
|
-
rules += '
|
|
110
|
-
rules += '
|
|
109
|
+
rules += ' _ebf';
|
|
110
|
+
rules += ' _ee';
|
|
111
111
|
}
|
|
112
|
-
rules += '
|
|
113
|
-
rules += '
|
|
114
|
-
rules += '
|
|
112
|
+
rules += ' _fb';
|
|
113
|
+
rules += ' _g-1x99dlob';
|
|
114
|
+
rules += ' _ga';
|
|
115
115
|
if (props.isDisabled) rules += ' aj';
|
|
116
116
|
else {
|
|
117
117
|
if (props.isPressed) rules += ' ao';
|
|
@@ -119,21 +119,21 @@ const $b9c30139cd63c62a$var$inputButton = function anonymous(props) {
|
|
|
119
119
|
else if (props.isHovered) rules += ' ao';
|
|
120
120
|
else rules += ' an';
|
|
121
121
|
}
|
|
122
|
-
rules += '
|
|
123
|
-
rules += '
|
|
122
|
+
rules += ' _0d';
|
|
123
|
+
rules += ' _ka';
|
|
124
124
|
rules += ' waa';
|
|
125
125
|
rules += ' wf';
|
|
126
|
-
if (props.isDisabled) rules += '
|
|
127
|
-
else rules += '
|
|
128
|
-
rules += ' _vh';
|
|
126
|
+
if (props.isDisabled) rules += ' ca_____O';
|
|
127
|
+
else rules += ' ca_____K';
|
|
129
128
|
rules += ' _wh';
|
|
130
129
|
rules += ' _xh';
|
|
131
130
|
rules += ' _yh';
|
|
132
|
-
rules += '
|
|
131
|
+
rules += ' _zh';
|
|
132
|
+
rules += ' _2c';
|
|
133
133
|
rules += ' k-375toq';
|
|
134
|
-
rules += '
|
|
135
|
-
rules += '
|
|
136
|
-
rules += '
|
|
134
|
+
rules += ' _Pa';
|
|
135
|
+
rules += ' _R-375x7f';
|
|
136
|
+
rules += ' _Sa';
|
|
137
137
|
if (props.isQuiet) {
|
|
138
138
|
rules += ' jbH';
|
|
139
139
|
rules += ' jG';
|
|
@@ -150,7 +150,7 @@ const $b9c30139cd63c62a$var$inputButton = function anonymous(props) {
|
|
|
150
150
|
else rules += ' bg';
|
|
151
151
|
}
|
|
152
152
|
if (props.isQuiet) rules += ' rd';
|
|
153
|
-
rules += '
|
|
153
|
+
rules += ' __S-yksgrp';
|
|
154
154
|
if (props.isQuiet) rules += ' -_375tnm_C-a';
|
|
155
155
|
else rules += ' -_375tnm_C-I';
|
|
156
156
|
if (props.isQuiet) rules += ' -_375tnn_D-a';
|
|
@@ -162,61 +162,61 @@ const $b9c30139cd63c62a$var$inputButton = function anonymous(props) {
|
|
|
162
162
|
else rules += ' -_375toq_k-f';
|
|
163
163
|
return rules;
|
|
164
164
|
};
|
|
165
|
-
const $b9c30139cd63c62a$var$quietFocusLine = " . lb k-375zlr
|
|
165
|
+
const $b9c30139cd63c62a$var$quietFocusLine = " . lb k-375zlr Va _aa _wf _xf _yf _zf bx ba_____M";
|
|
166
166
|
let $b9c30139cd63c62a$export$b1e5508a851be14d = function anonymous(props) {
|
|
167
167
|
let rules = " .";
|
|
168
|
-
rules += '
|
|
169
|
-
rules += '
|
|
170
|
-
if (props.size === "XL") rules += '
|
|
171
|
-
else if (props.size === "L") rules += '
|
|
172
|
-
else if (props.size === "M") rules += '
|
|
173
|
-
else if (props.size === "S") rules += '
|
|
174
|
-
rules += '
|
|
168
|
+
rules += ' _Ma';
|
|
169
|
+
rules += ' _0f';
|
|
170
|
+
if (props.size === "XL") rules += ' __i-14g31og';
|
|
171
|
+
else if (props.size === "L") rules += ' __i-1pqbi84';
|
|
172
|
+
else if (props.size === "M") rules += ' __i-n6rb9a';
|
|
173
|
+
else if (props.size === "S") rules += ' __i-iov3cy';
|
|
174
|
+
rules += ' __oa';
|
|
175
175
|
rules += ' p-17zqamw';
|
|
176
|
-
rules += ' __va';
|
|
177
176
|
rules += ' __wa';
|
|
177
|
+
rules += ' __xa';
|
|
178
178
|
rules += ' Ed';
|
|
179
179
|
rules += ' Fd';
|
|
180
180
|
rules += ' Cd';
|
|
181
181
|
rules += ' Dd';
|
|
182
|
-
rules += '
|
|
183
|
-
rules += '
|
|
184
|
-
rules += '
|
|
185
|
-
rules += '
|
|
186
|
-
rules += '
|
|
187
|
-
rules += '
|
|
188
|
-
rules += '
|
|
189
|
-
rules += '
|
|
182
|
+
rules += ' _d-bc1l9oh';
|
|
183
|
+
rules += ' _d-1uotwbwg';
|
|
184
|
+
rules += ' _d-eo0c6sf';
|
|
185
|
+
rules += ' _d-enzzrge';
|
|
186
|
+
rules += ' _d-enzykdd';
|
|
187
|
+
rules += ' _d-enzwzjc';
|
|
188
|
+
rules += ' _d-enzrfpb';
|
|
189
|
+
rules += ' _da';
|
|
190
190
|
if (props.size === "XL") {
|
|
191
|
-
rules += '
|
|
192
|
-
rules += '
|
|
191
|
+
rules += ' _ebj';
|
|
192
|
+
rules += ' _ei';
|
|
193
193
|
} else if (props.size === "L") {
|
|
194
|
-
rules += '
|
|
195
|
-
rules += '
|
|
194
|
+
rules += ' _ebh';
|
|
195
|
+
rules += ' _eg';
|
|
196
196
|
} else if (props.size === "S") {
|
|
197
|
-
rules += '
|
|
198
|
-
rules += '
|
|
197
|
+
rules += ' _ebd';
|
|
198
|
+
rules += ' _ec';
|
|
199
199
|
} else if (props.size === "XS") {
|
|
200
|
-
rules += '
|
|
201
|
-
rules += '
|
|
200
|
+
rules += ' _ebb';
|
|
201
|
+
rules += ' _ea';
|
|
202
202
|
} else {
|
|
203
|
-
rules += '
|
|
204
|
-
rules += '
|
|
203
|
+
rules += ' _ebf';
|
|
204
|
+
rules += ' _ee';
|
|
205
205
|
}
|
|
206
206
|
return rules;
|
|
207
207
|
};
|
|
208
208
|
const $b9c30139cd63c62a$var$invalidBorder = function anonymous(props) {
|
|
209
209
|
let rules = " .";
|
|
210
|
-
rules += '
|
|
211
|
-
rules += ' Xa';
|
|
210
|
+
rules += ' Va';
|
|
212
211
|
rules += ' Ya';
|
|
213
212
|
rules += ' Za';
|
|
214
213
|
rules += ' _aa';
|
|
215
|
-
rules += '
|
|
216
|
-
rules += '
|
|
214
|
+
rules += ' _ba';
|
|
215
|
+
rules += ' __Ca';
|
|
217
216
|
rules += ' _wh';
|
|
218
217
|
rules += ' _xh';
|
|
219
218
|
rules += ' _yh';
|
|
219
|
+
rules += ' _zh';
|
|
220
220
|
rules += ' wa';
|
|
221
221
|
rules += ' uc';
|
|
222
222
|
rules += ' vc';
|
|
@@ -226,29 +226,29 @@ const $b9c30139cd63c62a$var$invalidBorder = function anonymous(props) {
|
|
|
226
226
|
else if (props.isFocusVisible) rules += ' cP';
|
|
227
227
|
else if (props.isHovered) rules += ' cP';
|
|
228
228
|
else rules += ' cO';
|
|
229
|
-
rules += '
|
|
230
|
-
rules += '
|
|
231
|
-
rules += '
|
|
229
|
+
rules += ' _Pa';
|
|
230
|
+
rules += ' _R-375x7f';
|
|
231
|
+
rules += ' _Sa';
|
|
232
232
|
return rules;
|
|
233
233
|
};
|
|
234
234
|
const $b9c30139cd63c62a$var$valueStyles = function anonymous(props) {
|
|
235
235
|
let rules = " .";
|
|
236
|
-
if (props.isQuiet) rules += '
|
|
237
|
-
else rules += '
|
|
238
|
-
rules += ' __vb';
|
|
236
|
+
if (props.isQuiet) rules += ' __a-3t1x';
|
|
237
|
+
else rules += ' __a-3t1y';
|
|
239
238
|
rules += ' __wb';
|
|
240
|
-
rules += '
|
|
241
|
-
rules += '
|
|
242
|
-
rules += '
|
|
243
|
-
rules += '
|
|
239
|
+
rules += ' __xb';
|
|
240
|
+
rules += ' _na';
|
|
241
|
+
rules += ' _qb';
|
|
242
|
+
rules += ' _0d';
|
|
243
|
+
rules += ' _2c';
|
|
244
244
|
return rules;
|
|
245
245
|
};
|
|
246
|
-
const $b9c30139cd63c62a$var$iconStyles = " .
|
|
246
|
+
const $b9c30139cd63c62a$var$iconStyles = " . _9-3t1x R-3hn0u -rwx0fg_e-b";
|
|
247
247
|
let $b9c30139cd63c62a$var$InternalPickerContext = /*#__PURE__*/ (0, $ceqeb$react.createContext)({
|
|
248
248
|
size: 'M'
|
|
249
249
|
});
|
|
250
250
|
let $b9c30139cd63c62a$var$InsideSelectValueContext = /*#__PURE__*/ (0, $ceqeb$react.createContext)(false);
|
|
251
|
-
|
|
251
|
+
const $b9c30139cd63c62a$export$ba25329847403e11 = /*#__PURE__*/ (0, $ceqeb$react.forwardRef)(function Picker(props1, ref) {
|
|
252
252
|
let stringFormatter = (0, $ceqeb$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
|
|
253
253
|
[props1, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props1, ref, $b9c30139cd63c62a$export$b72b8dade9393cd5);
|
|
254
254
|
let domRef = (0, $ceqeb$reactspectrumutils.useFocusableRef)(ref);
|
|
@@ -267,51 +267,51 @@ function $b9c30139cd63c62a$var$Picker(props1, ref) {
|
|
|
267
267
|
style: UNSAFE_style,
|
|
268
268
|
className: UNSAFE_className + function anonymous(props, overrides) {
|
|
269
269
|
let rules = " .";
|
|
270
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|
|
|
270
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
|
|
271
271
|
rules += matches.join('');
|
|
272
|
-
let $__a = false;
|
|
273
272
|
let $__b = false;
|
|
273
|
+
let $__c = false;
|
|
274
274
|
for (let p of matches){
|
|
275
|
-
if (/^\s*__a/.test(p)) $__a = true;
|
|
276
275
|
if (/^\s*__b/.test(p)) $__b = true;
|
|
276
|
+
if (/^\s*__c/.test(p)) $__c = true;
|
|
277
277
|
}
|
|
278
|
-
rules += '
|
|
279
|
-
if (!$__a) {
|
|
280
|
-
if (props.isInForm) rules += ' __a-3t1y';
|
|
281
|
-
}
|
|
278
|
+
rules += ' _0f';
|
|
282
279
|
if (!$__b) {
|
|
280
|
+
if (props.isInForm) rules += ' __b-3t1y';
|
|
281
|
+
}
|
|
282
|
+
if (!$__c) {
|
|
283
283
|
if (props.isInForm) {
|
|
284
|
-
if (props.labelPosition === "side") rules += '
|
|
284
|
+
if (props.labelPosition === "side") rules += ' __c-yqnebx';
|
|
285
285
|
}
|
|
286
286
|
}
|
|
287
|
-
if (props.isInForm) rules += '
|
|
287
|
+
if (props.isInForm) rules += ' __i-1a97rzt';
|
|
288
288
|
else {
|
|
289
|
-
if (props.labelPosition === "side") rules += '
|
|
290
|
-
else if (props.labelPosition === "top") rules += '
|
|
289
|
+
if (props.labelPosition === "side") rules += ' __i-ar5vcf';
|
|
290
|
+
else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
|
|
291
291
|
}
|
|
292
|
-
if (props.labelPosition === "side") rules += '
|
|
293
|
-
else if (props.labelPosition === "top") rules += '
|
|
294
|
-
if (props.labelPosition === "side") rules += '
|
|
295
|
-
else if (props.labelPosition === "top") rules += '
|
|
292
|
+
if (props.labelPosition === "side") rules += ' __j-ar5vcf';
|
|
293
|
+
else if (props.labelPosition === "top") rules += ' __j-1a6w430';
|
|
294
|
+
if (props.labelPosition === "side") rules += ' __k-18h2yqz';
|
|
295
|
+
else if (props.labelPosition === "top") rules += ' __k-1srn173';
|
|
296
296
|
if (props.size === "XL") {
|
|
297
|
-
rules += '
|
|
298
|
-
rules += '
|
|
297
|
+
rules += ' _ebj';
|
|
298
|
+
rules += ' _ei';
|
|
299
299
|
} else if (props.size === "L") {
|
|
300
|
-
rules += '
|
|
301
|
-
rules += '
|
|
300
|
+
rules += ' _ebh';
|
|
301
|
+
rules += ' _eg';
|
|
302
302
|
} else if (props.size === "S") {
|
|
303
|
-
rules += '
|
|
304
|
-
rules += '
|
|
303
|
+
rules += ' _ebd';
|
|
304
|
+
rules += ' _ec';
|
|
305
305
|
} else if (props.size === "XS") {
|
|
306
|
-
rules += '
|
|
307
|
-
rules += '
|
|
306
|
+
rules += ' _ebb';
|
|
307
|
+
rules += ' _ea';
|
|
308
308
|
} else {
|
|
309
|
-
rules += '
|
|
310
|
-
rules += '
|
|
309
|
+
rules += ' _ebf';
|
|
310
|
+
rules += ' _ee';
|
|
311
311
|
}
|
|
312
|
-
rules += '
|
|
313
|
-
rules += '
|
|
314
|
-
rules += '
|
|
312
|
+
rules += ' _2d';
|
|
313
|
+
rules += ' _g-1x99dlob';
|
|
314
|
+
rules += ' _ga';
|
|
315
315
|
if (props.size === "XL") rules += ' -aqrvqh_k-j';
|
|
316
316
|
else if (props.size === "L") rules += ' -aqrvqh_k-i';
|
|
317
317
|
else if (props.size === "S") rules += ' -aqrvqh_k-h';
|
|
@@ -319,7 +319,7 @@ function $b9c30139cd63c62a$var$Picker(props1, ref) {
|
|
|
319
319
|
else rules += ' -aqrvqh_k-f';
|
|
320
320
|
rules += ' -_1inj1bc_i--prjw07';
|
|
321
321
|
rules += ' je';
|
|
322
|
-
rules += '
|
|
322
|
+
rules += ' __S-yksgrp';
|
|
323
323
|
return rules;
|
|
324
324
|
}({
|
|
325
325
|
isInForm: !!formContext,
|
|
@@ -384,7 +384,7 @@ function $b9c30139cd63c62a$var$Picker(props1, ref) {
|
|
|
384
384
|
slots: {
|
|
385
385
|
description: {},
|
|
386
386
|
label: {
|
|
387
|
-
styles: " .
|
|
387
|
+
styles: " . _0a __a-3t1y __wb __xb _na _qb"
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
390
|
}
|
|
@@ -485,10 +485,7 @@ function $b9c30139cd63c62a$var$Picker(props1, ref) {
|
|
|
485
485
|
})
|
|
486
486
|
})
|
|
487
487
|
});
|
|
488
|
-
}
|
|
489
|
-
/**
|
|
490
|
-
* Pickers allow users to choose a single option from a collapsible list of options when space is limited.
|
|
491
|
-
*/ let $b9c30139cd63c62a$export$ba25329847403e11 = /*#__PURE__*/ (0, $ceqeb$react.forwardRef)($b9c30139cd63c62a$var$Picker);
|
|
488
|
+
});
|
|
492
489
|
const $b9c30139cd63c62a$var$checkmarkIconSize = {
|
|
493
490
|
S: 'XS',
|
|
494
491
|
M: 'M',
|
|
@@ -569,11 +566,14 @@ function $b9c30139cd63c62a$var$DefaultProvider({ context: context, value: value,
|
|
|
569
566
|
});
|
|
570
567
|
}
|
|
571
568
|
function $b9c30139cd63c62a$export$a340772aca6155cd(props) {
|
|
569
|
+
let { size: size } = (0, $ceqeb$react.useContext)($b9c30139cd63c62a$var$InternalPickerContext);
|
|
572
570
|
return /*#__PURE__*/ (0, $ceqeb$reactjsxruntime.jsxs)((0, $ceqeb$reactjsxruntime.Fragment), {
|
|
573
571
|
children: [
|
|
574
572
|
/*#__PURE__*/ (0, $ceqeb$reactjsxruntime.jsx)((0, $ceqeb$reactariacomponents.ListBoxSection), {
|
|
575
573
|
...props,
|
|
576
|
-
className: (0, $e741ea6b88ce4866$exports.section)
|
|
574
|
+
className: (0, $e741ea6b88ce4866$exports.section)({
|
|
575
|
+
size: size
|
|
576
|
+
}),
|
|
577
577
|
children: props.children
|
|
578
578
|
}),
|
|
579
579
|
/*#__PURE__*/ (0, $ceqeb$reactjsxruntime.jsx)((0, $e741ea6b88ce4866$exports.Divider), {})
|
package/dist/Picker.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /**\n * The size of the Picker.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the picker should be displayed with a quiet style.\n * @private\n */\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\nfunction Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n SelectRenderProps as AriaSelectRenderProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps,\n SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldErrorIcon,\n FieldLabel,\n HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n /**\n * The size of the Picker.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the picker should be displayed with a quiet style.\n * @private\n */\n isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n isQuiet: 'none'\n },\n position: 'relative',\n font: 'control',\n display: 'flex',\n textAlign: 'start',\n borderStyle: {\n default: 'none',\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'control',\n alignItems: 'center',\n height: 'control',\n transition: 'default',\n columnGap: {\n default: 'text-to-control',\n isQuiet: 'text-to-visual'\n },\n paddingX: {\n default: 'edge-to-text',\n isQuiet: 0\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n isQuiet: 'transparent'\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n width: 'full',\n // Use pixels since we are emulating a border.\n height: '[2px]',\n position: 'absolute',\n bottom: 0,\n borderRadius: 'full',\n backgroundColor: {\n default: 'blue-800',\n forcedColors: 'Highlight'\n }\n});\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n },\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\n\nconst invalidBorder = style({\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n pointerEvents: 'none',\n borderRadius: 'control',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: 'negative',\n transition: 'default'\n});\n\nconst valueStyles = style({\n flexGrow: {\n default: 1,\n isQuiet: 0\n },\n truncate: true,\n display: 'flex',\n alignItems: 'center'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n placeholder = stringFormatter.format('picker.placeholder'),\n isQuiet,\n ...pickerProps\n } = props;\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n return (\n <AriaSelect\n {...pickerProps}\n placeholder={placeholder}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n <>\n <InternalPickerContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n isQuiet={isQuiet}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: size,\n isOpen,\n isQuiet\n })}>\n {(renderProps) => (\n <>\n <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n description: {},\n label: {styles: style({\n display: 'block',\n flexGrow: 1,\n truncate: true\n })}\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n {isInvalid && (\n <FieldErrorIcon isDisabled={isDisabled} />\n )}\n <ChevronIcon\n size={size}\n className={iconStyles} />\n {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n {isInvalid && !isDisabled && !isQuiet &&\n // @ts-ignore known limitation detecting functions from the theme\n <div className={invalidBorder({...renderProps, size})} />\n }\n </>\n )}\n </Button>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n }}\n styles={style({\n marginStart: {\n isQuiet: -12\n },\n minWidth: {\n default: '[var(--trigger-width)]',\n isQuiet: 192\n },\n width: {\n default: '[var(--trigger-width)]',\n isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n }\n })(props)}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalPickerContext.Provider>\n </>\n )}\n </AriaSelect>\n );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalPickerContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n let {size} = useContext(InternalPickerContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"Picker.cjs.map"}
|