@react-spectrum/s2 1.4.0 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/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 +335 -326
- package/dist/private/Button.cjs.map +1 -1
- package/dist/private/Button.css +176 -172
- package/dist/private/Button.css.map +1 -1
- package/dist/private/Button.mjs +335 -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.css +6 -6
- package/icons/Skeleton.mjs +2 -2
- 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 +12 -3
- 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 +73 -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/ActionButton.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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {\n baseColor,\n focusRing,\n fontRelative,\n lightDark,\n space,\n style\n} from '../style' with {type: 'macro'};\nimport {ButtonProps, ButtonRenderProps, Button as RACButton} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {\n control,\n getAllowedOverrides,\n staticColor,\n StyleProps\n} from './style-utils' with {type: 'macro'};\nimport CornerTriangle from '../ui-icons/CornerTriangle';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {usePendingState} from './Button';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white' | 'auto';\n /**\n * Whether the button should be displayed with a [quiet\n * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n */\n isQuiet?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean;\n /**\n * Whether the button should be displayed with an [emphasized\n * style](https://spectrum.adobe.com/page/action-button/#Emphasis).\n */\n isEmphasized?: boolean;\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' | 'compact';\n orientation?: 'horizontal' | 'vertical';\n isJustified?: boolean;\n}\n\nexport interface ActionButtonProps\n extends\n Omit<\n ButtonProps,\n | 'className'\n | 'style'\n | 'render'\n | 'children'\n | 'onHover'\n | 'onHoverStart'\n | 'onHoverEnd'\n | 'onHoverChange'\n | 'onClick'\n | keyof GlobalDOMAttributes\n >,\n StyleProps,\n ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children: ReactNode;\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst avatarOnly = ':has([slot=avatar]):not(:has([slot=icon], [data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nconst controlStyle = control({shape: 'default', icon: true});\nexport const btnStyles = style<\n ButtonRenderProps &\n ActionButtonStyleProps &\n ToggleButtonStyleProps &\n ActionGroupItemStyleProps & {isInGroup: boolean; isStaticColor: boolean}\n>(\n {\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n display: 'grid',\n justifyContent: 'center',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n fontWeight: 'medium',\n width: 'fit',\n userSelect: 'none',\n transition: 'default',\n forcedColorAdjust: 'none',\n position: 'relative',\n gridTemplateAreas: {\n default: ['icon text'],\n [iconOnly]: ['icon'],\n [textOnly]: ['text']\n },\n gridTemplateColumns: {\n default: ['auto', 'auto'],\n [iconOnly]: ['auto'],\n [textOnly]: ['auto']\n },\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: baseColor('neutral'),\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: 'transparent-overlay-1000',\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':first-child': controlStyle.borderRadius\n }\n }\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': controlStyle.borderRadius\n },\n vertical: {\n ':first-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': controlStyle.borderRadius\n },\n vertical: {\n ':last-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':last-child': controlStyle.borderRadius\n }\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: 'calc(self(height)/2 - var(--iconWidth)/2)',\n [textOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: '--iconWidth',\n [textOnly]: 'full'\n }\n },\n paddingX: {\n default: controlStyle.paddingX,\n [avatarOnly]: 0\n },\n // `control` sets this, but we need to override it for avatar only buttons.\n '--iconMargin': {\n type: 'marginStart',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0,\n [avatarOnly]: 0\n }\n }\n },\n getAllowedOverrides()\n);\n\n// Matching icon sizes. TBD.\nconst avatarSize: Record<NonNullable<ActionButtonStyleProps['size']>, number> = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n XL: 26\n} as const;\n\ninterface ActionButtonContextProps extends Partial<ActionButtonProps> {\n holdAffordance?: boolean;\n}\n\nexport const ActionButtonContext =\n createContext<ContextValue<ActionButtonContextProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action. They're used for similar, task-based options\n * within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of\n * attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(\n props: ActionButtonProps,\n ref: FocusableRef<HTMLButtonElement>\n) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {isPending = false, holdAffordance} = props as ActionButtonContextProps;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size || 'M',\n isDisabled\n } = ctx || {};\n\n let {isProgressVisible} = usePendingState(isPending);\n let {direction} = useLocale();\n\n return (\n <RACButton\n {...props}\n isDisabled={props.isDisabled ?? isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps =>\n (props.UNSAFE_className || '') +\n btnStyles(\n {\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n },\n props.styles\n )\n }>\n {({isDisabled}) => (\n <>\n <Provider\n values={[\n [SkeletonContext, null],\n [\n TextContext,\n {\n styles: style({\n gridArea: 'text',\n truncate: true,\n visibility: {\n isProgressVisible: 'hidden'\n }\n })({isProgressVisible})\n }\n ],\n [\n IconContext,\n {\n render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon'})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n visibility: {\n isProgressVisible: 'hidden'\n }\n })({isProgressVisible})\n }\n ],\n [\n AvatarContext,\n {\n size: avatarSize[size],\n styles: style({\n marginStart: '--iconMargin',\n gridArea: 'icon'\n })\n }\n ],\n [\n ImageContext,\n {\n styles: style({\n visibility: {\n isProgressVisible: 'hidden'\n }\n })({isProgressVisible})\n }\n ],\n [\n NotificationBadgeContext,\n {\n staticColor: staticColor,\n size: props.size === 'XS' ? undefined : props.size,\n isDisabled: isDisabled,\n styles: style({\n position: 'absolute',\n top: '--badgeTop',\n marginTop: 'calc((self(height) * -1)/2)',\n marginStart: 'calc(var(--iconMargin) * 2 + (self(height) * -1)/4)',\n gridColumnStart: 1,\n insetStart: '--badgePosition',\n visibility: {\n isProgressVisible: 'hidden'\n }\n })({isProgressVisible})\n }\n ]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending && (\n <div\n className={style({\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n visibility: {\n default: 'hidden',\n isProgressVisible: 'visible'\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n XS: 12,\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})}\n />\n </div>\n )}\n </Provider>\n {holdAffordance && (\n <CornerTriangle\n size={size === 'XS' ? 'S' : size}\n className={style({\n position: 'absolute',\n insetEnd: {\n size: {\n XS: space(3),\n S: space(3),\n M: 4,\n L: space(5),\n XL: space(6)\n }\n },\n bottom: {\n size: {\n XS: space(3),\n S: space(3),\n M: 4,\n L: space(5),\n XL: space(6)\n }\n },\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction, size})}\n />\n )}\n </>\n )}\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ActionButton.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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {\n baseColor,\n focusRing,\n fontRelative,\n lightDark,\n space,\n style\n} from '../style' with {type: 'macro'};\nimport {ButtonProps, ButtonRenderProps, Button as RACButton} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {\n control,\n getAllowedOverrides,\n staticColor,\n StyleProps\n} from './style-utils' with {type: 'macro'};\nimport CornerTriangle from '../ui-icons/CornerTriangle';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport intlMessages from '../intl/*.json';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {usePendingState} from './Button';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white' | 'auto';\n /**\n * Whether the button should be displayed with a [quiet\n * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n */\n isQuiet?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean;\n /**\n * Whether the button should be displayed with an [emphasized\n * style](https://spectrum.adobe.com/page/action-button/#Emphasis).\n */\n isEmphasized?: boolean;\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' | 'compact';\n orientation?: 'horizontal' | 'vertical';\n isJustified?: boolean;\n}\n\nexport interface ActionButtonProps\n extends\n Omit<\n ButtonProps,\n | 'className'\n | 'style'\n | 'render'\n | 'children'\n | 'onHover'\n | 'onHoverStart'\n | 'onHoverEnd'\n | 'onHoverChange'\n | 'onClick'\n | keyof GlobalDOMAttributes\n >,\n StyleProps,\n ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children: ReactNode;\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst avatarOnly = ':has([slot=avatar]):not(:has([slot=icon], [data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nconst controlStyle = control({shape: 'default', icon: true});\nexport const btnStyles = style<\n ButtonRenderProps &\n ActionButtonStyleProps &\n ToggleButtonStyleProps &\n ActionGroupItemStyleProps & {isInGroup: boolean; isStaticColor: boolean}\n>(\n {\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n display: 'grid',\n justifyContent: 'center',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n fontWeight: 'medium',\n width: 'fit',\n userSelect: 'none',\n transition: 'default',\n forcedColorAdjust: 'none',\n position: 'relative',\n gridTemplateAreas: {\n default: ['icon text'],\n [iconOnly]: ['icon'],\n [textOnly]: ['text']\n },\n gridTemplateColumns: {\n default: ['auto', 'auto'],\n [iconOnly]: ['auto'],\n [textOnly]: ['auto']\n },\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: baseColor('neutral'),\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: 'transparent-overlay-1000',\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':first-child': controlStyle.borderRadius\n }\n }\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': controlStyle.borderRadius\n },\n vertical: {\n ':first-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': controlStyle.borderRadius\n },\n vertical: {\n ':last-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':last-child': controlStyle.borderRadius\n }\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: 'calc(self(height)/2 - var(--iconWidth)/2)',\n [textOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: '--iconWidth',\n [textOnly]: 'full'\n }\n },\n paddingX: {\n default: controlStyle.paddingX,\n [avatarOnly]: 0\n },\n // `control` sets this, but we need to override it for avatar only buttons.\n '--iconMargin': {\n type: 'marginStart',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0,\n [avatarOnly]: 0\n }\n }\n },\n getAllowedOverrides()\n);\n\n// Matching icon sizes. TBD.\nconst avatarSize: Record<NonNullable<ActionButtonStyleProps['size']>, number> = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n XL: 26\n} as const;\n\ninterface ActionButtonContextProps extends Partial<ActionButtonProps> {\n holdAffordance?: boolean;\n}\n\nexport const ActionButtonContext =\n createContext<ContextValue<ActionButtonContextProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action. They're used for similar, task-based options\n * within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of\n * attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(\n props: ActionButtonProps,\n ref: FocusableRef<HTMLButtonElement>\n) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {isPending = false, holdAffordance} = props as ActionButtonContextProps;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size || 'M',\n isDisabled\n } = ctx || {};\n\n let {isProgressVisible} = usePendingState(isPending);\n let {direction} = useLocale();\n\n return (\n <RACButton\n {...props}\n isDisabled={props.isDisabled ?? isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps =>\n (props.UNSAFE_className || '') +\n btnStyles(\n {\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n },\n props.styles\n )\n }>\n {({isDisabled}) => (\n <>\n <Provider\n values={[\n [SkeletonContext, null],\n [\n TextContext,\n {\n styles: style({\n gridArea: 'text',\n truncate: true,\n visibility: {\n isProgressVisible: 'hidden'\n }\n })({isProgressVisible})\n }\n ],\n [\n IconContext,\n {\n render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon'})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n visibility: {\n isProgressVisible: 'hidden'\n }\n })({isProgressVisible})\n }\n ],\n [\n AvatarContext,\n {\n size: avatarSize[size],\n styles: style({\n marginStart: '--iconMargin',\n gridArea: 'icon'\n })\n }\n ],\n [\n ImageContext,\n {\n styles: style({\n visibility: {\n isProgressVisible: 'hidden'\n }\n })({isProgressVisible})\n }\n ],\n [\n NotificationBadgeContext,\n {\n staticColor: staticColor,\n size: props.size === 'XS' ? undefined : props.size,\n isDisabled: isDisabled,\n styles: style({\n position: 'absolute',\n top: '--badgeTop',\n marginTop: 'calc((self(height) * -1)/2)',\n marginStart: 'calc(var(--iconMargin) * 2 + (self(height) * -1)/4)',\n gridColumnStart: 1,\n insetStart: '--badgePosition',\n visibility: {\n isProgressVisible: 'hidden'\n }\n })({isProgressVisible})\n }\n ]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending && (\n <div\n className={style({\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n visibility: {\n default: 'hidden',\n isProgressVisible: 'visible'\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n XS: 12,\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})}\n />\n </div>\n )}\n </Provider>\n {holdAffordance && (\n <CornerTriangle\n size={size === 'XS' ? 'S' : size}\n className={style({\n position: 'absolute',\n insetEnd: {\n size: {\n XS: space(3),\n S: space(3),\n M: 4,\n L: space(5),\n XL: space(6)\n }\n },\n bottom: {\n size: {\n XS: space(3),\n S: space(3),\n M: 4,\n L: space(5),\n XL: space(6)\n }\n },\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction, size})}\n />\n )}\n </>\n )}\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.mjs.map"}
|
|
@@ -29,23 +29,23 @@ $parcel$export(module.exports, "ActionButtonGroup", () => $7a26131f6144af2b$expo
|
|
|
29
29
|
const $7a26131f6144af2b$export$641cbcd1f6f6802f = function anonymous(props, overrides) {
|
|
30
30
|
let rules = " ";
|
|
31
31
|
rules += (String(overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g) || []).join('');
|
|
32
|
-
rules += '
|
|
33
|
-
if (props.orientation === "vertical") rules += '
|
|
34
|
-
else if (props.orientation === "horizontal") rules += '
|
|
32
|
+
rules += ' sd151';
|
|
33
|
+
if (props.orientation === "vertical") rules += ' _ta151';
|
|
34
|
+
else if (props.orientation === "horizontal") rules += ' _tc151';
|
|
35
35
|
if (props.density === "regular") {
|
|
36
|
-
if (props.size === "XL") rules += '
|
|
37
|
-
else if (props.size === "L") rules += '
|
|
38
|
-
else if (props.size === "M") rules += '
|
|
39
|
-
else if (props.size === "S") rules += '
|
|
40
|
-
else if (props.size === "XS") rules += '
|
|
41
|
-
} else if (props.density === "compact") rules += '
|
|
36
|
+
if (props.size === "XL") rules += ' Ue151';
|
|
37
|
+
else if (props.size === "L") rules += ' Ue151';
|
|
38
|
+
else if (props.size === "M") rules += ' Ue151';
|
|
39
|
+
else if (props.size === "S") rules += ' Ub151';
|
|
40
|
+
else if (props.size === "XS") rules += ' Ub151';
|
|
41
|
+
} else if (props.density === "compact") rules += ' Ua151';
|
|
42
42
|
if (props.density === "regular") {
|
|
43
|
-
if (props.size === "XL") rules += '
|
|
44
|
-
else if (props.size === "L") rules += '
|
|
45
|
-
else if (props.size === "M") rules += '
|
|
46
|
-
else if (props.size === "S") rules += '
|
|
47
|
-
else if (props.size === "XS") rules += '
|
|
48
|
-
} else if (props.density === "compact") rules += '
|
|
43
|
+
if (props.size === "XL") rules += ' qe151';
|
|
44
|
+
else if (props.size === "L") rules += ' qe151';
|
|
45
|
+
else if (props.size === "M") rules += ' qe151';
|
|
46
|
+
else if (props.size === "S") rules += ' qb151';
|
|
47
|
+
else if (props.size === "XS") rules += ' qb151';
|
|
48
|
+
} else if (props.density === "compact") rules += ' qa151';
|
|
49
49
|
return rules;
|
|
50
50
|
};
|
|
51
51
|
const $7a26131f6144af2b$export$33f5f2f2cb85d743 = /*#__PURE__*/ (0, $jGK4W$react.createContext)(null);
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
@layer _.a {
|
|
2
|
-
.
|
|
2
|
+
.sd151 {
|
|
3
3
|
display: flex;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
._tc151 {
|
|
7
7
|
flex-direction: row;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
._ta151 {
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.Ua151 {
|
|
15
15
|
row-gap: .125rem;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.Ub151 {
|
|
19
19
|
row-gap: .25rem;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
.Ue151 {
|
|
23
23
|
row-gap: .5rem;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
26
|
+
.qa151 {
|
|
27
27
|
column-gap: .125rem;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.
|
|
30
|
+
.qb151 {
|
|
31
31
|
column-gap: .25rem;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.
|
|
34
|
+
.qe151 {
|
|
35
35
|
column-gap: .5rem;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -21,23 +21,23 @@ import {Toolbar as $aTsYn$Toolbar} from "react-aria-components/Toolbar";
|
|
|
21
21
|
const $10401bdc118cbc90$export$641cbcd1f6f6802f = function anonymous(props, overrides) {
|
|
22
22
|
let rules = " ";
|
|
23
23
|
rules += (String(overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g) || []).join('');
|
|
24
|
-
rules += '
|
|
25
|
-
if (props.orientation === "vertical") rules += '
|
|
26
|
-
else if (props.orientation === "horizontal") rules += '
|
|
24
|
+
rules += ' sd151';
|
|
25
|
+
if (props.orientation === "vertical") rules += ' _ta151';
|
|
26
|
+
else if (props.orientation === "horizontal") rules += ' _tc151';
|
|
27
27
|
if (props.density === "regular") {
|
|
28
|
-
if (props.size === "XL") rules += '
|
|
29
|
-
else if (props.size === "L") rules += '
|
|
30
|
-
else if (props.size === "M") rules += '
|
|
31
|
-
else if (props.size === "S") rules += '
|
|
32
|
-
else if (props.size === "XS") rules += '
|
|
33
|
-
} else if (props.density === "compact") rules += '
|
|
28
|
+
if (props.size === "XL") rules += ' Ue151';
|
|
29
|
+
else if (props.size === "L") rules += ' Ue151';
|
|
30
|
+
else if (props.size === "M") rules += ' Ue151';
|
|
31
|
+
else if (props.size === "S") rules += ' Ub151';
|
|
32
|
+
else if (props.size === "XS") rules += ' Ub151';
|
|
33
|
+
} else if (props.density === "compact") rules += ' Ua151';
|
|
34
34
|
if (props.density === "regular") {
|
|
35
|
-
if (props.size === "XL") rules += '
|
|
36
|
-
else if (props.size === "L") rules += '
|
|
37
|
-
else if (props.size === "M") rules += '
|
|
38
|
-
else if (props.size === "S") rules += '
|
|
39
|
-
else if (props.size === "XS") rules += '
|
|
40
|
-
} else if (props.density === "compact") rules += '
|
|
35
|
+
if (props.size === "XL") rules += ' qe151';
|
|
36
|
+
else if (props.size === "L") rules += ' qe151';
|
|
37
|
+
else if (props.size === "M") rules += ' qe151';
|
|
38
|
+
else if (props.size === "S") rules += ' qb151';
|
|
39
|
+
else if (props.size === "XS") rules += ' qb151';
|
|
40
|
+
} else if (props.density === "compact") rules += ' qa151';
|
|
41
41
|
return rules;
|
|
42
42
|
};
|
|
43
43
|
const $10401bdc118cbc90$export$33f5f2f2cb85d743 = /*#__PURE__*/ (0, $aTsYn$createContext)(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAkCM,MAAM,0DACX,CAAA,GAAA,0BAAY,EACV;AAMG,MAAM,4CAA2B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,WAC9E,KAAyB,EACzB,GAAoC;IAEpC,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,6CAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,iCAAC,CAAA,GAAA,qCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;;0BAC5B,gCAAC,CAAA,GAAA,sCAAW;gBACV,KAAK;gBACL,MAAM,MAAM,IAAI;gBAChB,YAAY,MAAM,UAAU;gBAC5B,WAAW,MAAM,SAAS;gBAC1B,SAAS,MAAM,OAAO;gBACtB,QAAQ,MAAM,MAAM;gBACnB,GAAG,WAAW;0BACf,cAAA,gCAAC,CAAA,GAAA,iCAAO;;0BAEV,gCAAC,CAAA,GAAA,8BAAG;gBACF,OAAO,MAAM,KAAK;gBAClB,cAAc,MAAM,YAAY;gBAChC,UAAU,MAAM,QAAQ;gBACxB,MAAM,MAAM,QAAQ;gBACpB,qBAAqB,MAAM,mBAAmB;0BAC7C,MAAM,QAAQ;;;;AAIvB","sources":["packages/@react-spectrum/s2/src/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton, ActionButtonProps} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef} from 'react';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {forwardRefType} from './types';\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuProps, MenuTrigger, MenuTriggerProps} from './Menu';\nimport MoreIcon from '../s2wf-icons/S2_Icon_More_20_N.svg';\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionMenuProps<T>\n extends\n Pick<\n MenuTriggerProps,\n 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'\n >,\n Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction' | 'shouldCloseOnSelect'>,\n Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus' | 'size'>,\n StyleProps,\n DOMProps,\n AriaLabelingProps {\n /**\n * The size of the Menu.\n *\n * @default 'M'\n */\n menuSize?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport const ActionMenuContext =\n createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(\n null\n );\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = /*#__PURE__*/ (forwardRef as forwardRefType)(function ActionMenu<T>(\n props: ActionMenuProps<T>,\n ref: FocusableRef<HTMLButtonElement>\n) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ActionMenuContext);\n let buttonProps = filterDOMProps(props, {labelable: true});\n if (buttonProps['aria-label'] === undefined) {\n buttonProps['aria-label'] = stringFormatter.format('menu.moreActions');\n }\n\n return (\n <MenuTrigger\n isOpen={props.isOpen}\n defaultOpen={props.defaultOpen}\n onOpenChange={props.onOpenChange}\n align={props.align}\n direction={props.direction}\n shouldFlip={props.shouldFlip}>\n <ActionButton\n ref={ref}\n size={props.size}\n isDisabled={props.isDisabled}\n autoFocus={props.autoFocus}\n isQuiet={props.isQuiet}\n styles={props.styles}\n {...buttonProps}>\n <MoreIcon />\n </ActionButton>\n <Menu\n items={props.items}\n disabledKeys={props.disabledKeys}\n onAction={props.onAction}\n size={props.menuSize}\n shouldCloseOnSelect={props.shouldCloseOnSelect}>\n {props.children}\n </Menu>\n </MenuTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ActionMenu.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAkCM,MAAM,0DACX,CAAA,GAAA,oBAAY,EACV;AAMG,MAAM,4CAA2B,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB,SAAS,WAC9E,KAAyB,EACzB,GAAoC;IAEpC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,iBAAC,CAAA,GAAA,yCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;;0BAC5B,gBAAC,CAAA,GAAA,yCAAW;gBACV,KAAK;gBACL,MAAM,MAAM,IAAI;gBAChB,YAAY,MAAM,UAAU;gBAC5B,WAAW,MAAM,SAAS;gBAC1B,SAAS,MAAM,OAAO;gBACtB,QAAQ,MAAM,MAAM;gBACnB,GAAG,WAAW;0BACf,cAAA,gBAAC,CAAA,GAAA,wCAAO;;0BAEV,gBAAC,CAAA,GAAA,yCAAG;gBACF,OAAO,MAAM,KAAK;gBAClB,cAAc,MAAM,YAAY;gBAChC,UAAU,MAAM,QAAQ;gBACxB,MAAM,MAAM,QAAQ;gBACpB,qBAAqB,MAAM,mBAAmB;0BAC7C,MAAM,QAAQ;;;;AAIvB","sources":["packages/@react-spectrum/s2/src/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton, ActionButtonProps} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef} from 'react';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {forwardRefType} from './types';\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuProps, MenuTrigger, MenuTriggerProps} from './Menu';\nimport MoreIcon from '../s2wf-icons/S2_Icon_More_20_N.svg';\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionMenuProps<T>\n extends\n Pick<\n MenuTriggerProps,\n 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'\n >,\n Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction' | 'shouldCloseOnSelect'>,\n Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus' | 'size'>,\n StyleProps,\n DOMProps,\n AriaLabelingProps {\n /**\n * The size of the Menu.\n *\n * @default 'M'\n */\n menuSize?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport const ActionMenuContext =\n createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(\n null\n );\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = /*#__PURE__*/ (forwardRef as forwardRefType)(function ActionMenu<T>(\n props: ActionMenuProps<T>,\n ref: FocusableRef<HTMLButtonElement>\n) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ActionMenuContext);\n let buttonProps = filterDOMProps(props, {labelable: true});\n if (buttonProps['aria-label'] === undefined) {\n buttonProps['aria-label'] = stringFormatter.format('menu.moreActions');\n }\n\n return (\n <MenuTrigger\n isOpen={props.isOpen}\n defaultOpen={props.defaultOpen}\n onOpenChange={props.onOpenChange}\n align={props.align}\n direction={props.direction}\n shouldFlip={props.shouldFlip}>\n <ActionButton\n ref={ref}\n size={props.size}\n isDisabled={props.isDisabled}\n autoFocus={props.autoFocus}\n isQuiet={props.isQuiet}\n styles={props.styles}\n {...buttonProps}>\n <MoreIcon />\n </ActionButton>\n <Menu\n items={props.items}\n disabledKeys={props.disabledKeys}\n onAction={props.onAction}\n size={props.menuSize}\n shouldCloseOnSelect={props.shouldCloseOnSelect}>\n {props.children}\n </Menu>\n </MenuTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ActionMenu.mjs.map"}
|
package/dist/private/Add.cjs
CHANGED
|
@@ -30,16 +30,16 @@ $parcel$export(module.exports, "default", () => $54686c7c3f031ee2$export$2e2bcd8
|
|
|
30
30
|
|
|
31
31
|
let $54686c7c3f031ee2$var$styles = function anonymous(props) {
|
|
32
32
|
let rules = " ";
|
|
33
|
-
if (props.size === "S") rules += '
|
|
34
|
-
else if (props.size === "XS") rules += '
|
|
35
|
-
else if (props.size === "XL") rules += '
|
|
36
|
-
else if (props.size === "L") rules += '
|
|
37
|
-
else if (props.size === "M") rules += '
|
|
38
|
-
if (props.size === "S") rules += '
|
|
39
|
-
else if (props.size === "XS") rules += '
|
|
40
|
-
else if (props.size === "XL") rules += '
|
|
41
|
-
else if (props.size === "L") rules += '
|
|
42
|
-
else if (props.size === "M") rules += '
|
|
33
|
+
if (props.size === "S") rules += ' Zh151';
|
|
34
|
+
else if (props.size === "XS") rules += ' Zh151';
|
|
35
|
+
else if (props.size === "XL") rules += ' Zj151';
|
|
36
|
+
else if (props.size === "L") rules += ' Zj151';
|
|
37
|
+
else if (props.size === "M") rules += ' Zi151';
|
|
38
|
+
if (props.size === "S") rules += ' Fi151';
|
|
39
|
+
else if (props.size === "XS") rules += ' Fi151';
|
|
40
|
+
else if (props.size === "XL") rules += ' Fk151';
|
|
41
|
+
else if (props.size === "L") rules += ' Fk151';
|
|
42
|
+
else if (props.size === "M") rules += ' Fj151';
|
|
43
43
|
return rules;
|
|
44
44
|
};
|
|
45
45
|
function $54686c7c3f031ee2$export$2e2bcd8739ae039(props) {
|
package/dist/private/Add.css
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
@layer _.a {
|
|
2
|
-
.
|
|
2
|
+
.Zi151 {
|
|
3
3
|
width: calc(.625rem * var(--s2-scale));
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
.Zj151 {
|
|
7
7
|
width: calc(.75rem * var(--s2-scale));
|
|
8
8
|
width: calc(.75rem * var(--s2-scale));
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.
|
|
11
|
+
.Zh151 {
|
|
12
12
|
width: calc(.5rem * var(--s2-scale));
|
|
13
13
|
width: calc(.5rem * var(--s2-scale));
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.
|
|
16
|
+
.Fj151 {
|
|
17
17
|
height: calc(.625rem * var(--s2-scale));
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
.
|
|
20
|
+
.Fk151 {
|
|
21
21
|
height: calc(.75rem * var(--s2-scale));
|
|
22
22
|
height: calc(.75rem * var(--s2-scale));
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.
|
|
25
|
+
.Fi151 {
|
|
26
26
|
height: calc(.5rem * var(--s2-scale));
|
|
27
27
|
height: calc(.5rem * var(--s2-scale));
|
|
28
28
|
}
|
package/dist/private/Add.mjs
CHANGED
|
@@ -24,16 +24,16 @@ import {jsx as $e5O6h$jsx} from "react/jsx-runtime";
|
|
|
24
24
|
|
|
25
25
|
let $053de6aaf5f9b7bd$var$styles = function anonymous(props) {
|
|
26
26
|
let rules = " ";
|
|
27
|
-
if (props.size === "S") rules += '
|
|
28
|
-
else if (props.size === "XS") rules += '
|
|
29
|
-
else if (props.size === "XL") rules += '
|
|
30
|
-
else if (props.size === "L") rules += '
|
|
31
|
-
else if (props.size === "M") rules += '
|
|
32
|
-
if (props.size === "S") rules += '
|
|
33
|
-
else if (props.size === "XS") rules += '
|
|
34
|
-
else if (props.size === "XL") rules += '
|
|
35
|
-
else if (props.size === "L") rules += '
|
|
36
|
-
else if (props.size === "M") rules += '
|
|
27
|
+
if (props.size === "S") rules += ' Zh151';
|
|
28
|
+
else if (props.size === "XS") rules += ' Zh151';
|
|
29
|
+
else if (props.size === "XL") rules += ' Zj151';
|
|
30
|
+
else if (props.size === "L") rules += ' Zj151';
|
|
31
|
+
else if (props.size === "M") rules += ' Zi151';
|
|
32
|
+
if (props.size === "S") rules += ' Fi151';
|
|
33
|
+
else if (props.size === "XS") rules += ' Fi151';
|
|
34
|
+
else if (props.size === "XL") rules += ' Fk151';
|
|
35
|
+
else if (props.size === "L") rules += ' Fk151';
|
|
36
|
+
else if (props.size === "M") rules += ' Fj151';
|
|
37
37
|
return rules;
|
|
38
38
|
};
|
|
39
39
|
function $053de6aaf5f9b7bd$export$2e2bcd8739ae039(props) {
|
|
@@ -50,9 +50,9 @@ $parcel$export(module.exports, "AlertDialog", () => $d67aa10f4fac9e2b$export$de4
|
|
|
50
50
|
|
|
51
51
|
const $d67aa10f4fac9e2b$var$icon = function anonymous(props) {
|
|
52
52
|
let rules = " ";
|
|
53
|
-
rules += '
|
|
54
|
-
if (props.variant === "warning") rules += ' -_8sjo0b-
|
|
55
|
-
else if (props.variant === "error") rules += ' -_8sjo0b-
|
|
53
|
+
rules += ' Hv151';
|
|
54
|
+
if (props.variant === "warning") rules += ' -_8sjo0b-tm151';
|
|
55
|
+
else if (props.variant === "error") rules += ' -_8sjo0b-tq151';
|
|
56
56
|
return rules;
|
|
57
57
|
};
|
|
58
58
|
const $d67aa10f4fac9e2b$export$de466dd8317b0b75 = /*#__PURE__*/ (0, $dZ5J1$react.forwardRef)(function AlertDialog(props, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAwDD,MAAM;;;;;;;AAiBC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAW;IAC7F,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,mBACF,eAAe,eACf,WAAW,wBACX,oBAAoB,sBACpB,kBAAkB,6BAClB,yBAAyB,2BACzB,uBAAuB,YACvB,WAAW,KAAO,oBAClB,kBAAkB,KAAO,sBACzB,oBAAoB,KAAO,UAC3B,KAAK,YACL,QAAQ,WACR,UAAU,gBACX,GAAG;IAEJ,IAAI,gBAAgB;IACpB,IAAI,YAAY,gBACd,gBAAgB;SACX,IAAI,YAAY,eACrB,gBAAgB;IAGlB,qBACE,gCAAC,CAAA,GAAA,gCAAK;QACJ,MAAK;QACL,KAAK;QACL,MAAM,MAAM,IAAI;QAChB,cAAc,MAAM,YAAY;QAChC,kBAAkB,MAAM,gBAAgB,IAAI;kBAC3C,CAAC,SAAC,KAAK,EAAC,iBACP;;kCACE,gCAAC,CAAA,GAAA,wCAAO;wBAAE,QAAQ;4BAAC;gCAAC,CAAA,GAAA,qCAAU;gCAAG;oCAAC,QAAQ,2BAAK;iDAAC;oCAAO;gCAAE;6BAAE;yBAAC;kCAC1D,cAAA,gCAAC,CAAA,GAAA,iCAAM;4BAAE,MAAK;sCACZ,cAAA,iCAAC,CAAA,GAAA,wCAAa;;oCACX,YAAY,yBACX,gCAAC,CAAA,GAAA,iCAAY;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCAEnD,YAAY,2BACX,gCAAC,CAAA,GAAA,iCAAW;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCAElD;;;;;kCAIP,gCAAC,CAAA,GAAA,iCAAM;kCAAG;;kCACV,iCAAC,CAAA,GAAA,qCAAU;;4BACR,6BACC,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,WAAU;gCACV,WAAW,oBAAoB;gCAC/B,eAAY;0CACX;;4BAGJ,sCACC,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,YAAY;gCACZ,WAAU;gCACV,WAAW,oBAAoB;gCAC/B,eAAY;0CACX;;0CAGL,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS;gCACT,YAAY;gCACZ,WAAW,oBAAoB;gCAC/B,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;gCAC9B,eAAY;0CACX;;;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from 'react-aria/chain';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components/slots';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /**\n * The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.\n *\n * @default 'confirmation'\n */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning';\n /** The title of the AlertDialog. */\n title: string;\n /** The contents of the AlertDialog. */\n children: ReactNode;\n /** The label to display within the cancel button. */\n cancelLabel?: string;\n /** The label to display within the confirm button. */\n primaryActionLabel: string;\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string;\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean;\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean;\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void;\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void;\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void;\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary';\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L';\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to\n * acknowledge.\n */\nexport const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={props.UNSAFE_className || ''}>\n {({close}) => (\n <>\n <Provider values={[[IconContext, {styles: icon({variant})}]]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && (\n <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />\n )}\n {variant === 'warning' && (\n <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />\n )}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel && (\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}\n data-testid=\"rsp-AlertDialog-cancelButton\">\n {cancelLabel}\n </Button>\n )}\n {secondaryActionLabel && (\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}\n data-testid=\"rsp-AlertDialog-secondaryButton\">\n {secondaryActionLabel}\n </Button>\n )}\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}\n data-testid=\"rsp-AlertDialog-confirmButton\">\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n});\n"],"names":[],"version":3,"file":"AlertDialog.cjs.map"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
@layer _.a {
|
|
2
|
-
.
|
|
2
|
+
.Hv151 {
|
|
3
3
|
margin-inline-end: .5rem;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.-_8sjo0b-
|
|
6
|
+
.-_8sjo0b-tq151 {
|
|
7
7
|
--iconPrimary: light-dark(#f03823, #fc432e);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.-_8sjo0b-
|
|
10
|
+
.-_8sjo0b-tm151 {
|
|
11
11
|
--iconPrimary: light-dark(#d45b00, #e06400);
|
|
12
12
|
}
|
|
13
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"AAkEa;EAAA;;;;EAAA;;;;EAAA","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from 'react-aria/chain';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components/slots';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /**\n * The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.\n *\n * @default 'confirmation'\n */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning';\n /** The title of the AlertDialog. */\n title: string;\n /** The contents of the AlertDialog. */\n children: ReactNode;\n /** The label to display within the cancel button. */\n cancelLabel?: string;\n /** The label to display within the confirm button. */\n primaryActionLabel: string;\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string;\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean;\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean;\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void;\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void;\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void;\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary';\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L';\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to\n * acknowledge.\n */\nexport const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={props.UNSAFE_className || ''}>\n {({close}) => (\n <>\n <Provider values={[[IconContext, {styles: icon({variant})}]]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && (\n <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />\n )}\n {variant === 'warning' && (\n <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />\n )}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel && (\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}\n data-testid=\"rsp-AlertDialog-cancelButton\">\n {cancelLabel}\n </Button>\n )}\n {secondaryActionLabel && (\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}\n data-testid=\"rsp-AlertDialog-secondaryButton\">\n {secondaryActionLabel}\n </Button>\n )}\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}\n data-testid=\"rsp-AlertDialog-confirmButton\">\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n});\n"],"names":[],"version":3,"file":"AlertDialog.css.map"}
|
|
@@ -44,9 +44,9 @@ function $parcel$interopDefault(a) {
|
|
|
44
44
|
|
|
45
45
|
const $94a8ad475d9a330c$var$icon = function anonymous(props) {
|
|
46
46
|
let rules = " ";
|
|
47
|
-
rules += '
|
|
48
|
-
if (props.variant === "warning") rules += ' -_8sjo0b-
|
|
49
|
-
else if (props.variant === "error") rules += ' -_8sjo0b-
|
|
47
|
+
rules += ' Hv151';
|
|
48
|
+
if (props.variant === "warning") rules += ' -_8sjo0b-tm151';
|
|
49
|
+
else if (props.variant === "error") rules += ' -_8sjo0b-tq151';
|
|
50
50
|
return rules;
|
|
51
51
|
};
|
|
52
52
|
const $94a8ad475d9a330c$export$de466dd8317b0b75 = /*#__PURE__*/ (0, $2iZqV$forwardRef)(function AlertDialog(props, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAwDD,MAAM;;;;;;;AAiBC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAW;IAC7F,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,mBACF,eAAe,eACf,WAAW,wBACX,oBAAoB,sBACpB,kBAAkB,6BAClB,yBAAyB,2BACzB,uBAAuB,YACvB,WAAW,KAAO,oBAClB,kBAAkB,KAAO,sBACzB,oBAAoB,KAAO,UAC3B,KAAK,YACL,QAAQ,WACR,UAAU,gBACX,GAAG;IAEJ,IAAI,gBAAgB;IACpB,IAAI,YAAY,gBACd,gBAAgB;SACX,IAAI,YAAY,eACrB,gBAAgB;IAGlB,qBACE,gBAAC,CAAA,GAAA,yCAAK;QACJ,MAAK;QACL,KAAK;QACL,MAAM,MAAM,IAAI;QAChB,cAAc,MAAM,YAAY;QAChC,kBAAkB,MAAM,gBAAgB,IAAI;kBAC3C,CAAC,SAAC,KAAK,EAAC,iBACP;;kCACE,gBAAC,CAAA,GAAA,eAAO;wBAAE,QAAQ;4BAAC;gCAAC,CAAA,GAAA,yCAAU;gCAAG;oCAAC,QAAQ,2BAAK;iDAAC;oCAAO;gCAAE;6BAAE;yBAAC;kCAC1D,cAAA,gBAAC,CAAA,GAAA,yCAAM;4BAAE,MAAK;sCACZ,cAAA,iBAAC,CAAA,GAAA,yCAAa;;oCACX,YAAY,yBACX,gBAAC,CAAA,GAAA,wCAAY;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCAEnD,YAAY,2BACX,gBAAC,CAAA,GAAA,wCAAW;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCAElD;;;;;kCAIP,gBAAC,CAAA,GAAA,yCAAM;kCAAG;;kCACV,iBAAC,CAAA,GAAA,yCAAU;;4BACR,6BACC,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,WAAU;gCACV,WAAW,oBAAoB;gCAC/B,eAAY;0CACX;;4BAGJ,sCACC,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,YAAY;gCACZ,WAAU;gCACV,WAAW,oBAAoB;gCAC/B,eAAY;0CACX;;0CAGL,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS;gCACT,YAAY;gCACZ,WAAW,oBAAoB;gCAC/B,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;gCAC9B,eAAY;0CACX;;;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from 'react-aria/chain';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components/slots';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /**\n * The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.\n *\n * @default 'confirmation'\n */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning';\n /** The title of the AlertDialog. */\n title: string;\n /** The contents of the AlertDialog. */\n children: ReactNode;\n /** The label to display within the cancel button. */\n cancelLabel?: string;\n /** The label to display within the confirm button. */\n primaryActionLabel: string;\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string;\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean;\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean;\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void;\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void;\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void;\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary';\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L';\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to\n * acknowledge.\n */\nexport const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={props.UNSAFE_className || ''}>\n {({close}) => (\n <>\n <Provider values={[[IconContext, {styles: icon({variant})}]]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && (\n <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />\n )}\n {variant === 'warning' && (\n <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />\n )}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel && (\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}\n data-testid=\"rsp-AlertDialog-cancelButton\">\n {cancelLabel}\n </Button>\n )}\n {secondaryActionLabel && (\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}\n data-testid=\"rsp-AlertDialog-secondaryButton\">\n {secondaryActionLabel}\n </Button>\n )}\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}\n data-testid=\"rsp-AlertDialog-confirmButton\">\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n});\n"],"names":[],"version":3,"file":"AlertDialog.mjs.map"}
|
|
@@ -26,12 +26,12 @@ $parcel$export(module.exports, "default", () => $5d3efbee7071458b$export$2e2bcd8
|
|
|
26
26
|
|
|
27
27
|
let $5d3efbee7071458b$var$styles = function anonymous(props) {
|
|
28
28
|
let rules = " ";
|
|
29
|
-
if (props.size === "XL") rules += '
|
|
30
|
-
else if (props.size === "L") rules += '
|
|
31
|
-
else if (props.size === "M") rules += '
|
|
32
|
-
if (props.size === "XL") rules += '
|
|
33
|
-
else if (props.size === "L") rules += '
|
|
34
|
-
else if (props.size === "M") rules += '
|
|
29
|
+
if (props.size === "XL") rules += ' Zi151';
|
|
30
|
+
else if (props.size === "L") rules += ' Zi151';
|
|
31
|
+
else if (props.size === "M") rules += ' Zh151';
|
|
32
|
+
if (props.size === "XL") rules += ' Fj151';
|
|
33
|
+
else if (props.size === "L") rules += ' Fj151';
|
|
34
|
+
else if (props.size === "M") rules += ' Fi151';
|
|
35
35
|
return rules;
|
|
36
36
|
};
|
|
37
37
|
function $5d3efbee7071458b$export$2e2bcd8739ae039(props) {
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
@layer _.a {
|
|
2
|
-
.
|
|
2
|
+
.Zh151 {
|
|
3
3
|
width: calc(.5rem * var(--s2-scale));
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
.Zi151 {
|
|
7
7
|
width: calc(.625rem * var(--s2-scale));
|
|
8
8
|
width: calc(.625rem * var(--s2-scale));
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.
|
|
11
|
+
.Fi151 {
|
|
12
12
|
height: calc(.5rem * var(--s2-scale));
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
15
|
+
.Fj151 {
|
|
16
16
|
height: calc(.625rem * var(--s2-scale));
|
|
17
17
|
height: calc(.625rem * var(--s2-scale));
|
|
18
18
|
}
|
|
@@ -20,12 +20,12 @@ import {jsx as $7AxvV$jsx} from "react/jsx-runtime";
|
|
|
20
20
|
|
|
21
21
|
let $8373af657584cab2$var$styles = function anonymous(props) {
|
|
22
22
|
let rules = " ";
|
|
23
|
-
if (props.size === "XL") rules += '
|
|
24
|
-
else if (props.size === "L") rules += '
|
|
25
|
-
else if (props.size === "M") rules += '
|
|
26
|
-
if (props.size === "XL") rules += '
|
|
27
|
-
else if (props.size === "L") rules += '
|
|
28
|
-
else if (props.size === "M") rules += '
|
|
23
|
+
if (props.size === "XL") rules += ' Zi151';
|
|
24
|
+
else if (props.size === "L") rules += ' Zi151';
|
|
25
|
+
else if (props.size === "M") rules += ' Zh151';
|
|
26
|
+
if (props.size === "XL") rules += ' Fj151';
|
|
27
|
+
else if (props.size === "L") rules += ' Fj151';
|
|
28
|
+
else if (props.size === "M") rules += ' Fi151';
|
|
29
29
|
return rules;
|
|
30
30
|
};
|
|
31
31
|
function $8373af657584cab2$export$2e2bcd8739ae039(props) {
|