@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250430
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 +4 -5
- package/dist/Accordion.cjs.map +1 -1
- package/dist/Accordion.css +2 -4
- package/dist/Accordion.css.map +1 -1
- package/dist/Accordion.mjs +4 -5
- package/dist/Accordion.mjs.map +1 -1
- package/dist/ActionBar.cjs +72 -63
- package/dist/ActionBar.cjs.map +1 -1
- package/dist/ActionBar.css +70 -63
- package/dist/ActionBar.css.map +1 -1
- package/dist/ActionBar.mjs +72 -63
- package/dist/ActionBar.mjs.map +1 -1
- package/dist/ActionButton.cjs +161 -160
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +174 -168
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +161 -160
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.cjs +17 -18
- package/dist/ActionButtonGroup.cjs.map +1 -1
- package/dist/ActionButtonGroup.css +9 -11
- package/dist/ActionButtonGroup.css.map +1 -1
- package/dist/ActionButtonGroup.mjs +17 -18
- package/dist/ActionButtonGroup.mjs.map +1 -1
- package/dist/AlertDialog.cjs +4 -4
- package/dist/AlertDialog.css +3 -5
- package/dist/AlertDialog.css.map +1 -1
- package/dist/AlertDialog.mjs +4 -4
- package/dist/Avatar.cjs +21 -21
- package/dist/Avatar.css +14 -16
- package/dist/Avatar.css.map +1 -1
- package/dist/Avatar.mjs +21 -21
- package/dist/AvatarGroup.cjs +131 -110
- package/dist/AvatarGroup.cjs.map +1 -1
- package/dist/AvatarGroup.css +43 -49
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup.mjs +131 -110
- package/dist/AvatarGroup.mjs.map +1 -1
- package/dist/Badge.cjs +150 -149
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +140 -134
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +150 -149
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +169 -154
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +119 -105
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +169 -154
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +321 -275
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +245 -215
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +321 -275
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +27 -25
- package/dist/ButtonGroup.cjs.map +1 -1
- package/dist/ButtonGroup.css +15 -17
- package/dist/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup.mjs +27 -25
- package/dist/ButtonGroup.mjs.map +1 -1
- package/dist/Card.cjs +316 -299
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +242 -215
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +316 -299
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +29 -30
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css +19 -19
- package/dist/CardView.mjs +29 -30
- package/dist/CardView.mjs.map +1 -1
- package/dist/CenterBaseline.cjs +2 -2
- package/dist/CenterBaseline.css +3 -5
- package/dist/CenterBaseline.css.map +1 -1
- package/dist/CenterBaseline.mjs +2 -2
- package/dist/Checkbox.cjs +114 -112
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +99 -93
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +114 -112
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +54 -54
- package/dist/CheckboxGroup.css +42 -42
- package/dist/CheckboxGroup.mjs +54 -54
- package/dist/ClearButton.cjs +19 -19
- package/dist/ClearButton.css +19 -21
- package/dist/ClearButton.css.map +1 -1
- package/dist/ClearButton.mjs +19 -19
- package/dist/CloseButton.cjs +64 -62
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css +48 -48
- package/dist/CloseButton.mjs +64 -62
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs +28 -28
- package/dist/ColorArea.css +17 -17
- package/dist/ColorArea.mjs +28 -28
- package/dist/ColorField.cjs +41 -41
- package/dist/ColorField.css +33 -33
- package/dist/ColorField.mjs +41 -41
- package/dist/ColorHandle.cjs +29 -29
- package/dist/ColorHandle.css +45 -45
- package/dist/ColorHandle.mjs +29 -29
- package/dist/ColorSlider.cjs +68 -64
- package/dist/ColorSlider.cjs.map +1 -1
- package/dist/ColorSlider.css +64 -58
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSlider.mjs +68 -64
- package/dist/ColorSlider.mjs.map +1 -1
- package/dist/ColorSwatch.cjs +44 -38
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +29 -31
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +44 -38
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +31 -32
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css +48 -48
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +31 -32
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/ColorWheel.cjs +28 -28
- package/dist/ColorWheel.css +18 -18
- package/dist/ColorWheel.mjs +28 -28
- package/dist/ComboBox.cjs +108 -108
- package/dist/ComboBox.css +101 -101
- package/dist/ComboBox.mjs +108 -108
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +58 -44
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +38 -38
- package/dist/CustomDialog.css +26 -26
- package/dist/CustomDialog.mjs +38 -38
- package/dist/Dialog.cjs +18 -18
- package/dist/Dialog.css +86 -72
- package/dist/Dialog.css.map +1 -1
- package/dist/Dialog.mjs +18 -18
- package/dist/Disclosure.cjs +139 -133
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +144 -120
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +139 -133
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +47 -47
- package/dist/Divider.css +26 -26
- package/dist/Divider.mjs +47 -47
- package/dist/DropZone.cjs +68 -64
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +66 -60
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +68 -64
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +192 -186
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +167 -159
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +192 -186
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +11 -12
- package/dist/Form.cjs.map +1 -1
- package/dist/Form.css +9 -11
- package/dist/Form.css.map +1 -1
- package/dist/Form.mjs +11 -12
- package/dist/Form.mjs.map +1 -1
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +94 -80
- package/dist/FullscreenDialog.css.map +1 -1
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +185 -160
- package/dist/IllustratedMessage.cjs.map +1 -1
- package/dist/IllustratedMessage.css +93 -91
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/IllustratedMessage.mjs +185 -160
- package/dist/IllustratedMessage.mjs.map +1 -1
- package/dist/Image.cjs +14 -14
- package/dist/Image.css +14 -16
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +14 -14
- package/dist/InlineAlert.cjs +130 -122
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +109 -95
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +130 -122
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +57 -47
- package/dist/Link.cjs.map +1 -1
- package/dist/Link.css +52 -44
- package/dist/Link.css.map +1 -1
- package/dist/Link.mjs +57 -47
- package/dist/Link.mjs.map +1 -1
- package/dist/Menu.cjs +353 -325
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +189 -189
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +353 -325
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +116 -114
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +106 -104
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +116 -114
- package/dist/Meter.mjs.map +1 -1
- package/dist/Modal.cjs +62 -59
- package/dist/Modal.cjs.map +1 -1
- package/dist/Modal.css +52 -51
- package/dist/Modal.css.map +1 -1
- package/dist/Modal.mjs +62 -59
- package/dist/Modal.mjs.map +1 -1
- package/dist/NotificationBadge.cjs +66 -62
- package/dist/NotificationBadge.cjs.map +1 -1
- package/dist/NotificationBadge.css +78 -72
- package/dist/NotificationBadge.css.map +1 -1
- package/dist/NotificationBadge.mjs +66 -62
- package/dist/NotificationBadge.mjs.map +1 -1
- package/dist/NumberField.cjs +133 -133
- package/dist/NumberField.css +120 -120
- package/dist/NumberField.mjs +133 -133
- package/dist/Picker.cjs +209 -207
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +179 -173
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +209 -207
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +124 -93
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +67 -83
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +124 -93
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +132 -130
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +119 -117
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +132 -130
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/ProgressCircle.cjs +32 -32
- package/dist/ProgressCircle.css +20 -20
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/ProgressCircle.mjs +32 -32
- package/dist/Provider.cjs +11 -11
- package/dist/Provider.css +9 -11
- package/dist/Provider.css.map +1 -1
- package/dist/Provider.mjs +11 -11
- package/dist/Radio.cjs +101 -99
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +101 -95
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +101 -99
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +52 -52
- package/dist/RadioGroup.css +42 -42
- package/dist/RadioGroup.mjs +52 -52
- package/dist/SearchField.cjs +52 -52
- package/dist/SearchField.css +54 -54
- package/dist/SearchField.mjs +52 -52
- package/dist/SegmentedControl.cjs +123 -119
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +110 -104
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +123 -119
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +251 -248
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +166 -157
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +251 -248
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +74 -70
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css +70 -64
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +74 -70
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/Switch.cjs +110 -108
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +86 -80
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +110 -108
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +334 -329
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +193 -193
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +334 -329
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +153 -149
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +102 -96
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +153 -149
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +131 -129
- package/dist/TabsPicker.cjs.map +1 -1
- package/dist/TabsPicker.css +132 -126
- package/dist/TabsPicker.css.map +1 -1
- package/dist/TabsPicker.mjs +131 -129
- package/dist/TabsPicker.mjs.map +1 -1
- package/dist/TagGroup.cjs +197 -193
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +164 -158
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +197 -193
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +67 -65
- package/dist/TextField.cjs.map +1 -1
- package/dist/TextField.css +71 -65
- package/dist/TextField.css.map +1 -1
- package/dist/TextField.mjs +67 -65
- package/dist/TextField.mjs.map +1 -1
- package/dist/Toast.cjs +138 -136
- package/dist/Toast.cjs.map +1 -1
- package/dist/Toast.css +117 -111
- package/dist/Toast.css.map +1 -1
- package/dist/Toast.mjs +138 -136
- package/dist/Toast.mjs.map +1 -1
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -14
- package/dist/ToggleButton.css.map +1 -1
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +99 -72
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +87 -87
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +99 -72
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +169 -157
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +155 -153
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +169 -157
- package/dist/TreeView.mjs.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +3 -3
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +8 -10
- package/icons/Skeleton.css.map +1 -1
- package/icons/Skeleton.mjs +3 -3
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +22 -22
- package/src/Card.tsx +3 -3
- package/src/Disclosure.tsx +3 -3
- package/src/TableView.tsx +1 -4
- package/src/style-utils.ts +0 -2
- package/style/__tests__/style-macro.test.js +323 -27
- package/style/dist/properties.cjs +4 -0
- package/style/dist/properties.cjs.map +1 -0
- package/style/dist/properties.mjs +6 -0
- package/style/dist/properties.mjs.map +1 -0
- package/style/dist/spectrum-theme.cjs +123 -124
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +124 -125
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/style-macro.cjs +244 -263
- package/style/dist/style-macro.cjs.map +1 -1
- package/style/dist/style-macro.mjs +240 -259
- package/style/dist/style-macro.mjs.map +1 -1
- package/style/dist/types.d.ts +84 -80
- package/style/dist/types.d.ts.map +1 -1
- package/style/properties.json +2422 -0
- package/style/spectrum-theme.ts +101 -110
- package/style/style-macro.ts +319 -220
- package/style/types.ts +8 -4
|
@@ -32,140 +32,144 @@ import {useLayoutEffect as $ae3Tm$useLayoutEffect} from "@react-aria/utils";
|
|
|
32
32
|
|
|
33
33
|
const $c679c2152e03f8bf$export$c083c44d8a07dd35 = /*#__PURE__*/ (0, $ae3Tm$createContext)(null);
|
|
34
34
|
const $c679c2152e03f8bf$var$segmentedControl = function anonymous(props, overrides) {
|
|
35
|
-
let rules = "
|
|
36
|
-
let
|
|
37
|
-
|
|
38
|
-
let
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
rules += '
|
|
43
|
-
rules += '
|
|
44
|
-
rules += '
|
|
45
|
-
rules += '
|
|
46
|
-
rules += '
|
|
47
|
-
rules += '
|
|
48
|
-
|
|
35
|
+
let rules = " ";
|
|
36
|
+
let width = false;
|
|
37
|
+
let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
|
|
38
|
+
for (let p of matches){
|
|
39
|
+
if (p[1] === "f") width = true;
|
|
40
|
+
rules += p[0];
|
|
41
|
+
}
|
|
42
|
+
rules += ' ma';
|
|
43
|
+
rules += ' pb';
|
|
44
|
+
rules += ' ke';
|
|
45
|
+
rules += ' ca';
|
|
46
|
+
rules += ' zc';
|
|
47
|
+
rules += ' xc';
|
|
48
|
+
rules += ' wc';
|
|
49
|
+
rules += ' yc';
|
|
50
|
+
if (!width) rules += ' fe';
|
|
49
51
|
return rules;
|
|
50
52
|
};
|
|
51
53
|
const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
|
|
52
|
-
let rules = "
|
|
53
|
-
let
|
|
54
|
-
|
|
55
|
-
let
|
|
56
|
-
let
|
|
57
|
-
let
|
|
58
|
-
let
|
|
59
|
-
let $q = false;
|
|
54
|
+
let rules = " ";
|
|
55
|
+
let position = false;
|
|
56
|
+
let flexGrow = false;
|
|
57
|
+
let flexBasis = false;
|
|
58
|
+
let flexShrink = false;
|
|
59
|
+
let minWidth = false;
|
|
60
|
+
let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
|
|
60
61
|
for (let p of matches){
|
|
61
|
-
if (
|
|
62
|
-
if (
|
|
63
|
-
if (
|
|
64
|
-
if (
|
|
65
|
-
if (
|
|
62
|
+
if (p[1] === "K") position = true;
|
|
63
|
+
if (p[1] === "_H") flexGrow = true;
|
|
64
|
+
if (p[1] === "M") flexBasis = true;
|
|
65
|
+
if (p[1] === "_r") flexShrink = true;
|
|
66
|
+
if (p[1] === "u") minWidth = true;
|
|
67
|
+
rules += p[0];
|
|
66
68
|
}
|
|
67
|
-
if (props.isFocusVisible) rules += '
|
|
68
|
-
else rules += '
|
|
69
|
-
rules += '
|
|
70
|
-
rules += '
|
|
71
|
-
rules += '
|
|
72
|
-
rules += '
|
|
73
|
-
if (
|
|
74
|
-
rules += '
|
|
75
|
-
rules += '
|
|
76
|
-
rules += '
|
|
77
|
-
rules += '
|
|
78
|
-
rules += '
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
81
|
-
rules += '
|
|
82
|
-
rules += '
|
|
83
|
-
rules += '
|
|
69
|
+
if (props.isFocusVisible) rules += ' tb';
|
|
70
|
+
else rules += ' ta';
|
|
71
|
+
rules += ' Bb';
|
|
72
|
+
rules += ' Bba';
|
|
73
|
+
rules += ' _ga';
|
|
74
|
+
rules += ' _ya';
|
|
75
|
+
if (!position) rules += ' Ka';
|
|
76
|
+
rules += ' ma';
|
|
77
|
+
rules += ' _0a';
|
|
78
|
+
rules += ' bh';
|
|
79
|
+
rules += ' bdf';
|
|
80
|
+
rules += ' beg';
|
|
81
|
+
rules += ' bfa';
|
|
82
|
+
rules += ' bgb';
|
|
83
|
+
rules += ' bhd';
|
|
84
|
+
rules += ' bje';
|
|
85
|
+
rules += ' bic';
|
|
84
86
|
if (props.size === "XL") {
|
|
85
|
-
rules += '
|
|
86
|
-
rules += '
|
|
87
|
+
rules += ' ah';
|
|
88
|
+
rules += ' aac';
|
|
87
89
|
} else if (props.size === "L") {
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
+
rules += ' ae';
|
|
91
|
+
rules += ' aad';
|
|
90
92
|
} else if (props.size === "S") {
|
|
91
|
-
rules += '
|
|
92
|
-
rules += '
|
|
93
|
+
rules += ' af';
|
|
94
|
+
rules += ' aag';
|
|
93
95
|
} else if (props.size === "XS") {
|
|
94
|
-
rules += '
|
|
95
|
-
rules += '
|
|
96
|
+
rules += ' ai';
|
|
97
|
+
rules += ' aaj';
|
|
96
98
|
} else {
|
|
97
|
-
rules += '
|
|
98
|
-
rules += '
|
|
99
|
+
rules += ' aa';
|
|
100
|
+
rules += ' aab';
|
|
99
101
|
}
|
|
100
|
-
rules += '
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
if (props.isDisabled) rules += ' aj';
|
|
102
|
+
rules += ' Da';
|
|
103
|
+
rules += ' Ea';
|
|
104
|
+
rules += ' Ca';
|
|
105
|
+
rules += ' gb';
|
|
106
|
+
rules += ' gca';
|
|
107
|
+
if (props.isDisabled) rules += ' dc';
|
|
107
108
|
else if (props.isSelected) {
|
|
108
|
-
if (props.isPressed) rules += '
|
|
109
|
-
else if (props.isFocusVisible) rules += '
|
|
110
|
-
else if (props.isHovered) rules += '
|
|
111
|
-
else rules += '
|
|
109
|
+
if (props.isPressed) rules += ' db';
|
|
110
|
+
else if (props.isFocusVisible) rules += ' db';
|
|
111
|
+
else if (props.isHovered) rules += ' db';
|
|
112
|
+
else rules += ' da';
|
|
112
113
|
} else if (props.isHovered) {
|
|
113
|
-
if (props.isPressed) rules += '
|
|
114
|
-
else if (props.isFocusVisible) rules += '
|
|
115
|
-
else if (props.isHovered) rules += '
|
|
116
|
-
else rules += '
|
|
117
|
-
} else rules += '
|
|
118
|
-
rules += '
|
|
119
|
-
rules += '
|
|
120
|
-
rules += '
|
|
121
|
-
rules += '
|
|
122
|
-
rules += '
|
|
123
|
-
rules += '
|
|
124
|
-
|
|
125
|
-
|
|
114
|
+
if (props.isPressed) rules += ' da';
|
|
115
|
+
else if (props.isFocusVisible) rules += ' da';
|
|
116
|
+
else if (props.isHovered) rules += ' da';
|
|
117
|
+
else rules += ' dg';
|
|
118
|
+
} else rules += ' dg';
|
|
119
|
+
if (props.isSelected) rules += ' dbm';
|
|
120
|
+
else if (props.isDisabled) rules += ' dbe';
|
|
121
|
+
else rules += ' dbf';
|
|
122
|
+
rules += ' ob';
|
|
123
|
+
rules += ' ogLWx3bWJpoB';
|
|
124
|
+
rules += ' nb';
|
|
125
|
+
rules += ' ngLWx3bWJpoB';
|
|
126
|
+
rules += ' emLFGYc';
|
|
127
|
+
rules += ' Fa';
|
|
128
|
+
if (props.isJustified) {
|
|
129
|
+
if (!flexGrow) rules += ' _Ha';
|
|
126
130
|
}
|
|
127
|
-
if (
|
|
128
|
-
if (
|
|
131
|
+
if (props.isJustified) {
|
|
132
|
+
if (!flexBasis) rules += ' Ma';
|
|
129
133
|
}
|
|
130
|
-
if (
|
|
131
|
-
if (
|
|
132
|
-
rules += '
|
|
133
|
-
rules += '
|
|
134
|
-
rules += '
|
|
135
|
-
rules += '
|
|
136
|
-
rules += '
|
|
137
|
-
rules += '
|
|
138
|
-
rules += '
|
|
139
|
-
rules += '
|
|
140
|
-
rules += '
|
|
141
|
-
rules += '
|
|
142
|
-
rules += ' -
|
|
143
|
-
rules += ' -
|
|
134
|
+
if (!flexShrink) rules += ' _ra';
|
|
135
|
+
if (!minWidth) rules += ' uf';
|
|
136
|
+
rules += ' _pa';
|
|
137
|
+
rules += ' _za';
|
|
138
|
+
rules += ' _Ga';
|
|
139
|
+
rules += ' _Qa';
|
|
140
|
+
rules += ' cd';
|
|
141
|
+
rules += ' Rb';
|
|
142
|
+
rules += ' zc';
|
|
143
|
+
rules += ' xc';
|
|
144
|
+
rules += ' wc';
|
|
145
|
+
rules += ' yc';
|
|
146
|
+
rules += ' -_8sjo0b-Oa';
|
|
147
|
+
rules += ' -e_-ec';
|
|
144
148
|
return rules;
|
|
145
149
|
};
|
|
146
150
|
const $c679c2152e03f8bf$var$slider = function anonymous(props) {
|
|
147
|
-
let rules = "
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
rules += '
|
|
151
|
-
rules += '
|
|
152
|
-
rules += '
|
|
153
|
-
rules += '
|
|
154
|
-
rules += '
|
|
155
|
-
rules += '
|
|
156
|
-
rules += '
|
|
157
|
-
rules += '
|
|
158
|
-
rules += '
|
|
159
|
-
rules += '
|
|
160
|
-
rules += '
|
|
161
|
-
if (props.isDisabled) rules += '
|
|
162
|
-
else rules += '
|
|
163
|
-
if (props.isDisabled) rules += '
|
|
164
|
-
else rules += '
|
|
165
|
-
rules += '
|
|
166
|
-
rules += '
|
|
167
|
-
rules += '
|
|
168
|
-
rules += '
|
|
151
|
+
let rules = " ";
|
|
152
|
+
rules += ' cj';
|
|
153
|
+
if (props.isDisabled) rules += ' cbo';
|
|
154
|
+
else rules += ' cbg';
|
|
155
|
+
rules += ' Pa';
|
|
156
|
+
rules += ' fa';
|
|
157
|
+
rules += ' ef';
|
|
158
|
+
rules += ' Kb';
|
|
159
|
+
rules += ' _qa';
|
|
160
|
+
rules += ' Ra';
|
|
161
|
+
rules += ' _nb';
|
|
162
|
+
rules += ' _ma';
|
|
163
|
+
rules += ' _ta';
|
|
164
|
+
rules += ' _sa';
|
|
165
|
+
if (props.isDisabled) rules += ' qb';
|
|
166
|
+
else rules += ' qa';
|
|
167
|
+
if (props.isDisabled) rules += ' qbd';
|
|
168
|
+
else rules += ' qbi';
|
|
169
|
+
rules += ' zd';
|
|
170
|
+
rules += ' xe';
|
|
171
|
+
rules += ' we';
|
|
172
|
+
rules += ' yd';
|
|
169
173
|
return rules;
|
|
170
174
|
};
|
|
171
175
|
const $c679c2152e03f8bf$var$InternalSegmentedControlContext = /*#__PURE__*/ (0, $ae3Tm$createContext)({});
|
|
@@ -289,7 +293,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
|
|
|
289
293
|
{
|
|
290
294
|
render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
|
|
291
295
|
slot: 'icon',
|
|
292
|
-
styles: "
|
|
296
|
+
styles: " _Ma _ra"
|
|
293
297
|
})
|
|
294
298
|
}
|
|
295
299
|
],
|
|
@@ -304,7 +308,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
|
|
|
304
308
|
[
|
|
305
309
|
(0, $8e847109a6ab556d$export$9afb8bc826b033ea),
|
|
306
310
|
{
|
|
307
|
-
styles: "
|
|
311
|
+
styles: " _Mb _oa _ha _Ta _za"
|
|
308
312
|
}
|
|
309
313
|
]
|
|
310
314
|
],
|
|
@@ -313,7 +317,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
|
|
|
313
317
|
style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(divRef)({
|
|
314
318
|
isPressed: isPressed
|
|
315
319
|
}),
|
|
316
|
-
className: "
|
|
320
|
+
className: " ma pc pad kb kac _ia _ka _ea Fa uf",
|
|
317
321
|
children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
|
|
318
322
|
children: props.children
|
|
319
323
|
}) : props.children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display in the segmented control.\n */\n children: ReactNode,\n /**\n * Whether the segmented control is disabled.\n */\n isDisabled?: boolean,\n /** Whether the items should divide the container width equally. */\n isJustified?: boolean,\n /** The id of the currently selected item (controlled). */\n selectedKey?: Key | null,\n /** The id of the initial selected item (uncontrolled). */\n defaultSelectedKey?: Key,\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n /**\n * The content to display in the segmented control item.\n */\n children: ReactNode,\n /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n id: Key,\n /** Whether the item is disabled or not. */\n isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n display: 'flex',\n gap: 4,\n backgroundColor: 'gray-100',\n borderRadius: 'default',\n width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({\n ...focusRing(),\n position: 'relative',\n display: 'flex',\n forcedColorAdjust: 'none',\n font: 'control',\n color: {\n default: 'gray-700',\n isHovered: 'neutral-subdued',\n isSelected: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText',\n isSelected: 'HighlightText'\n }\n },\n // TODO: update this padding for icon-only items when we introduce the non-track style back\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)\n },\n height: 32,\n alignItems: 'center',\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n flexShrink: 0,\n minWidth: 0,\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n disableTapHighlight: true,\n userSelect: 'none',\n backgroundColor: 'transparent',\n borderStyle: 'none',\n borderRadius: 'default',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\n backgroundColor: {\n default: 'gray-25',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n left: 0,\n width: 'full',\n height: 'full',\n position: 'absolute',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: {\n default: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n register?: (value: Key, isDisabled?: boolean) => void,\n prevRef?: RefObject<DOMRect | null>,\n currentSelectedRef?: RefObject<HTMLDivElement | null>,\n isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n defaultValue?: Key | null,\n value?: Key | null,\n children: ReactNode,\n prevRef: RefObject<DOMRect | null>,\n currentSelectedRef: RefObject<HTMLDivElement | null>,\n isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n let {\n defaultSelectedKey,\n selectedKey,\n onSelectionChange\n } = props;\n let domRef = useDOMRef(ref);\n\n let prevRef = useRef<DOMRect>(null);\n let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n let onChange = (values: Set<Key>) => {\n if (currentSelectedRef.current) {\n prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n }\n\n if (onSelectionChange) {\n let firstKey = values.values().next().value;\n if (firstKey != null) {\n onSelectionChange(firstKey);\n }\n }\n };\n\n return (\n <ToggleButtonGroup\n {...props}\n selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n disallowEmptySelection\n ref={domRef}\n orientation=\"horizontal\"\n style={props.UNSAFE_style}\n onSelectionChange={onChange}\n className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n aria-label={props['aria-label']}>\n <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n {props.children}\n </DefaultSelectionTracker>\n </ToggleButtonGroup>\n );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n let state = useContext(ToggleGroupStateContext);\n let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n // default select the first available item\n let register = useCallback((value: Key) => {\n if (state && !isRegistered.current) {\n isRegistered.current = true;\n state.toggleKey(value);\n }\n }, []);\n\n return (\n <Provider\n values={[\n [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n ]}>\n {props.children}\n </Provider>\n );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n let domRef = useFocusableRef(ref);\n let divRef = useRef<HTMLDivElement>(null);\n let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n let state = useContext(ToggleGroupStateContext);\n let isSelected = state?.selectedKeys.has(props.id);\n // do not apply animation if a user has the prefers-reduced-motion setting\n let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n useLayoutEffect(() => {\n register?.(props.id);\n }, []);\n\n useLayoutEffect(() => {\n if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {\n let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n let deltaX = prevRef?.current.left - currentItem?.left;\n\n currentSelectedRef.current.animate(\n [\n {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n ],\n {\n duration: 200,\n easing: 'ease-out'\n }\n );\n\n prevRef.current = null;\n }\n }, [isSelected, reduceMotion]);\n\n return (\n <ToggleButton\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n {({isSelected, isPressed, isDisabled}) => (\n <>\n {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n <Provider\n values={[\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n }],\n [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n [TextContext, {styles: style({order: 1, truncate: true})}]\n ]}>\n <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </div>\n </Provider>\n </>\n )\n }\n </ToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display in the segmented control.\n */\n children: ReactNode,\n /**\n * Whether the segmented control is disabled.\n */\n isDisabled?: boolean,\n /** Whether the items should divide the container width equally. */\n isJustified?: boolean,\n /** The id of the currently selected item (controlled). */\n selectedKey?: Key | null,\n /** The id of the initial selected item (uncontrolled). */\n defaultSelectedKey?: Key,\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n /**\n * The content to display in the segmented control item.\n */\n children: ReactNode,\n /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n id: Key,\n /** Whether the item is disabled or not. */\n isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n display: 'flex',\n gap: 4,\n backgroundColor: 'gray-100',\n borderRadius: 'default',\n width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({\n ...focusRing(),\n position: 'relative',\n display: 'flex',\n forcedColorAdjust: 'none',\n font: 'control',\n color: {\n default: 'gray-700',\n isHovered: 'neutral-subdued',\n isSelected: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText',\n isSelected: 'HighlightText'\n }\n },\n // TODO: update this padding for icon-only items when we introduce the non-track style back\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)\n },\n height: 32,\n alignItems: 'center',\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n flexShrink: 0,\n minWidth: 0,\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n disableTapHighlight: true,\n userSelect: 'none',\n backgroundColor: 'transparent',\n borderStyle: 'none',\n borderRadius: 'default',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\n backgroundColor: {\n default: 'gray-25',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n left: 0,\n width: 'full',\n height: 'full',\n position: 'absolute',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: {\n default: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n register?: (value: Key, isDisabled?: boolean) => void,\n prevRef?: RefObject<DOMRect | null>,\n currentSelectedRef?: RefObject<HTMLDivElement | null>,\n isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n defaultValue?: Key | null,\n value?: Key | null,\n children: ReactNode,\n prevRef: RefObject<DOMRect | null>,\n currentSelectedRef: RefObject<HTMLDivElement | null>,\n isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n let {\n defaultSelectedKey,\n selectedKey,\n onSelectionChange\n } = props;\n let domRef = useDOMRef(ref);\n\n let prevRef = useRef<DOMRect>(null);\n let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n let onChange = (values: Set<Key>) => {\n if (currentSelectedRef.current) {\n prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n }\n\n if (onSelectionChange) {\n let firstKey = values.values().next().value;\n if (firstKey != null) {\n onSelectionChange(firstKey);\n }\n }\n };\n\n return (\n <ToggleButtonGroup\n {...props}\n selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n disallowEmptySelection\n ref={domRef}\n orientation=\"horizontal\"\n style={props.UNSAFE_style}\n onSelectionChange={onChange}\n className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n aria-label={props['aria-label']}>\n <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n {props.children}\n </DefaultSelectionTracker>\n </ToggleButtonGroup>\n );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n let state = useContext(ToggleGroupStateContext);\n let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n // default select the first available item\n let register = useCallback((value: Key) => {\n if (state && !isRegistered.current) {\n isRegistered.current = true;\n state.toggleKey(value);\n }\n }, []);\n\n return (\n <Provider\n values={[\n [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n ]}>\n {props.children}\n </Provider>\n );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n let domRef = useFocusableRef(ref);\n let divRef = useRef<HTMLDivElement>(null);\n let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n let state = useContext(ToggleGroupStateContext);\n let isSelected = state?.selectedKeys.has(props.id);\n // do not apply animation if a user has the prefers-reduced-motion setting\n let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n useLayoutEffect(() => {\n register?.(props.id);\n }, []);\n\n useLayoutEffect(() => {\n if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {\n let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n let deltaX = prevRef?.current.left - currentItem?.left;\n\n currentSelectedRef.current.animate(\n [\n {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n ],\n {\n duration: 200,\n easing: 'ease-out'\n }\n );\n\n prevRef.current = null;\n }\n }, [isSelected, reduceMotion]);\n\n return (\n <ToggleButton\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n {({isSelected, isPressed, isDisabled}) => (\n <>\n {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n <Provider\n values={[\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n }],\n [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n [TextContext, {styles: style({order: 1, truncate: true})}]\n ]}>\n <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </div>\n </Provider>\n </>\n )\n }\n </ToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.mjs.map"}
|