@primer/react 38.3.0 → 38.4.0-rc.3baa9bd2c

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.

Potentially problematic release.


This version of @primer/react might be problematic. Click here for more details.

Files changed (39) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/Banner/Banner-f672cdf9.css +2 -0
  3. package/dist/Banner/Banner-f672cdf9.css.map +1 -0
  4. package/dist/Banner/Banner.d.ts +8 -0
  5. package/dist/Banner/Banner.d.ts.map +1 -1
  6. package/dist/Banner/Banner.js +2 -0
  7. package/dist/Banner/Banner.module.css.js +1 -1
  8. package/dist/Banner/index.d.ts +1 -0
  9. package/dist/Banner/index.d.ts.map +1 -1
  10. package/dist/DataTable/Pagination.d.ts.map +1 -1
  11. package/dist/DataTable/Pagination.js +181 -187
  12. package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
  13. package/dist/FeatureFlags/DefaultFeatureFlags.js +0 -1
  14. package/dist/FilteredActionList/FilteredActionList.js +15 -13
  15. package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
  16. package/dist/LabelGroup/LabelGroup.js +12 -5
  17. package/dist/SegmentedControl/{SegmentedControl-5cfe12ab.css → SegmentedControl-6389d0da.css} +2 -2
  18. package/dist/SegmentedControl/SegmentedControl-6389d0da.css.map +1 -0
  19. package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  20. package/dist/SegmentedControl/SegmentedControl.js +11 -5
  21. package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
  22. package/dist/SegmentedControl/SegmentedControlButton.d.ts +2 -0
  23. package/dist/SegmentedControl/SegmentedControlButton.d.ts.map +1 -1
  24. package/dist/SegmentedControl/SegmentedControlButton.js +104 -82
  25. package/dist/SegmentedControl/SegmentedControlIconButton.d.ts +2 -0
  26. package/dist/SegmentedControl/SegmentedControlIconButton.d.ts.map +1 -1
  27. package/dist/SegmentedControl/SegmentedControlIconButton.js +122 -181
  28. package/dist/TreeView/TreeView.d.ts.map +1 -1
  29. package/dist/TreeView/TreeView.js +5 -7
  30. package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map +1 -1
  31. package/dist/experimental/SelectPanel2/SelectPanel.js +4 -5
  32. package/generated/components.json +6 -0
  33. package/package.json +2 -2
  34. package/dist/Banner/Banner-c1744c4b.css +0 -2
  35. package/dist/Banner/Banner-c1744c4b.css.map +0 -1
  36. package/dist/SegmentedControl/SegmentedControl-5cfe12ab.css.map +0 -1
  37. package/dist/internal/components/LiveRegion.d.ts +0 -14
  38. package/dist/internal/components/LiveRegion.d.ts.map +0 -1
  39. package/dist/internal/components/LiveRegion.js +0 -130
@@ -3,16 +3,16 @@ import { isElement } from 'react-is';
3
3
  import classes from './SegmentedControl.module.css.js';
4
4
  import { clsx } from 'clsx';
5
5
  import { jsx } from 'react/jsx-runtime';
6
- import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
7
6
  import { Tooltip } from '../TooltipV2/Tooltip.js';
8
7
 
9
8
  const SegmentedControlIconButton = t0 => {
10
- const $ = c(47);
9
+ const $ = c(35);
11
10
  let Icon;
12
11
  let ariaLabel;
13
12
  let className;
14
13
  let description;
15
- let rest;
14
+ let disabled;
15
+ let props;
16
16
  let selected;
17
17
  let tooltipDirection;
18
18
  if ($[0] !== t0) {
@@ -23,198 +23,139 @@ const SegmentedControlIconButton = t0 => {
23
23
  className,
24
24
  description,
25
25
  tooltipDirection,
26
- ...rest
26
+ disabled,
27
+ ...props
27
28
  } = t0);
28
29
  $[0] = t0;
29
30
  $[1] = Icon;
30
31
  $[2] = ariaLabel;
31
32
  $[3] = className;
32
33
  $[4] = description;
33
- $[5] = rest;
34
- $[6] = selected;
35
- $[7] = tooltipDirection;
34
+ $[5] = disabled;
35
+ $[6] = props;
36
+ $[7] = selected;
37
+ $[8] = tooltipDirection;
36
38
  } else {
37
39
  Icon = $[1];
38
40
  ariaLabel = $[2];
39
41
  className = $[3];
40
42
  description = $[4];
41
- rest = $[5];
42
- selected = $[6];
43
- tooltipDirection = $[7];
43
+ disabled = $[5];
44
+ props = $[6];
45
+ selected = $[7];
46
+ tooltipDirection = $[8];
47
+ }
48
+ let ariaDisabled;
49
+ let rest;
50
+ if ($[9] !== props) {
51
+ ({
52
+ "aria-disabled": ariaDisabled,
53
+ ...rest
54
+ } = props);
55
+ $[9] = props;
56
+ $[10] = ariaDisabled;
57
+ $[11] = rest;
58
+ } else {
59
+ ariaDisabled = $[10];
60
+ rest = $[11];
61
+ }
62
+ let t1;
63
+ if ($[12] !== className) {
64
+ t1 = clsx(classes.Item, className);
65
+ $[12] = className;
66
+ $[13] = t1;
67
+ } else {
68
+ t1 = $[13];
69
+ }
70
+ const t2 = selected || undefined;
71
+ const t3 = description ? undefined : "label";
72
+ const t4 = description ? description : ariaLabel;
73
+ const t5 = description ? ariaLabel : undefined;
74
+ const t6 = disabled || ariaDisabled || undefined;
75
+ let t7;
76
+ if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
77
+ t7 = clsx(classes.Button, classes.IconButton);
78
+ $[14] = t7;
79
+ } else {
80
+ t7 = $[14];
81
+ }
82
+ let t8;
83
+ if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
84
+ t8 = clsx(classes.Content, "segmentedControl-content");
85
+ $[15] = t8;
86
+ } else {
87
+ t8 = $[15];
88
+ }
89
+ let t9;
90
+ if ($[16] !== Icon) {
91
+ t9 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
92
+ $[16] = Icon;
93
+ $[17] = t9;
94
+ } else {
95
+ t9 = $[17];
96
+ }
97
+ let t10;
98
+ if ($[18] !== t9) {
99
+ t10 = /*#__PURE__*/jsx("span", {
100
+ className: t8,
101
+ children: t9
102
+ });
103
+ $[18] = t9;
104
+ $[19] = t10;
105
+ } else {
106
+ t10 = $[19];
107
+ }
108
+ let t11;
109
+ if ($[20] !== rest || $[21] !== selected || $[22] !== t10 || $[23] !== t5 || $[24] !== t6) {
110
+ t11 = /*#__PURE__*/jsx("button", {
111
+ type: "button",
112
+ "aria-current": selected,
113
+ "aria-label": t5,
114
+ "aria-disabled": t6,
115
+ className: t7,
116
+ ...rest,
117
+ children: t10
118
+ });
119
+ $[20] = rest;
120
+ $[21] = selected;
121
+ $[22] = t10;
122
+ $[23] = t5;
123
+ $[24] = t6;
124
+ $[25] = t11;
125
+ } else {
126
+ t11 = $[25];
127
+ }
128
+ let t12;
129
+ if ($[26] !== t11 || $[27] !== t3 || $[28] !== t4 || $[29] !== tooltipDirection) {
130
+ t12 = /*#__PURE__*/jsx(Tooltip, {
131
+ type: t3,
132
+ text: t4,
133
+ direction: tooltipDirection,
134
+ children: t11
135
+ });
136
+ $[26] = t11;
137
+ $[27] = t3;
138
+ $[28] = t4;
139
+ $[29] = tooltipDirection;
140
+ $[30] = t12;
141
+ } else {
142
+ t12 = $[30];
44
143
  }
45
- const tooltipFlagEnabled = useFeatureFlag("primer_react_segmented_control_tooltip");
46
- if (tooltipFlagEnabled) {
47
- let t1;
48
- if ($[8] !== className) {
49
- t1 = clsx(classes.Item, className);
50
- $[8] = className;
51
- $[9] = t1;
52
- } else {
53
- t1 = $[9];
54
- }
55
- const t2 = selected || undefined;
56
- const t3 = description ? undefined : "label";
57
- const t4 = description ? description : ariaLabel;
58
- const t5 = description ? ariaLabel : undefined;
59
- let t6;
60
- if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
61
- t6 = clsx(classes.Button, classes.IconButton);
62
- $[10] = t6;
63
- } else {
64
- t6 = $[10];
65
- }
66
- let t7;
67
- if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
68
- t7 = clsx(classes.Content, "segmentedControl-content");
69
- $[11] = t7;
70
- } else {
71
- t7 = $[11];
72
- }
73
- let t8;
74
- if ($[12] !== Icon) {
75
- t8 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
76
- $[12] = Icon;
77
- $[13] = t8;
78
- } else {
79
- t8 = $[13];
80
- }
81
- let t9;
82
- if ($[14] !== t8) {
83
- t9 = /*#__PURE__*/jsx("span", {
84
- className: t7,
85
- children: t8
86
- });
87
- $[14] = t8;
88
- $[15] = t9;
89
- } else {
90
- t9 = $[15];
91
- }
92
- let t10;
93
- if ($[16] !== rest || $[17] !== selected || $[18] !== t5 || $[19] !== t9) {
94
- t10 = /*#__PURE__*/jsx("button", {
95
- type: "button",
96
- "aria-current": selected,
97
- "aria-label": t5,
98
- className: t6,
99
- ...rest,
100
- children: t9
101
- });
102
- $[16] = rest;
103
- $[17] = selected;
104
- $[18] = t5;
105
- $[19] = t9;
106
- $[20] = t10;
107
- } else {
108
- t10 = $[20];
109
- }
110
- let t11;
111
- if ($[21] !== t10 || $[22] !== t3 || $[23] !== t4 || $[24] !== tooltipDirection) {
112
- t11 = /*#__PURE__*/jsx(Tooltip, {
113
- type: t3,
114
- text: t4,
115
- direction: tooltipDirection,
116
- children: t10
117
- });
118
- $[21] = t10;
119
- $[22] = t3;
120
- $[23] = t4;
121
- $[24] = tooltipDirection;
122
- $[25] = t11;
123
- } else {
124
- t11 = $[25];
125
- }
126
- let t12;
127
- if ($[26] !== t1 || $[27] !== t11 || $[28] !== t2) {
128
- t12 = /*#__PURE__*/jsx("li", {
129
- className: t1,
130
- "data-selected": t2,
131
- children: t11
132
- });
133
- $[26] = t1;
134
- $[27] = t11;
135
- $[28] = t2;
136
- $[29] = t12;
137
- } else {
138
- t12 = $[29];
139
- }
140
- return t12;
144
+ let t13;
145
+ if ($[31] !== t1 || $[32] !== t12 || $[33] !== t2) {
146
+ t13 = /*#__PURE__*/jsx("li", {
147
+ className: t1,
148
+ "data-selected": t2,
149
+ children: t12
150
+ });
151
+ $[31] = t1;
152
+ $[32] = t12;
153
+ $[33] = t2;
154
+ $[34] = t13;
141
155
  } else {
142
- let t1;
143
- if ($[30] !== className) {
144
- t1 = clsx(classes.Item, className);
145
- $[30] = className;
146
- $[31] = t1;
147
- } else {
148
- t1 = $[31];
149
- }
150
- const t2 = selected || undefined;
151
- let t3;
152
- if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
153
- t3 = clsx(classes.Button, classes.IconButton);
154
- $[32] = t3;
155
- } else {
156
- t3 = $[32];
157
- }
158
- let t4;
159
- if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
160
- t4 = clsx(classes.Content, "segmentedControl-content");
161
- $[33] = t4;
162
- } else {
163
- t4 = $[33];
164
- }
165
- let t5;
166
- if ($[34] !== Icon) {
167
- t5 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
168
- $[34] = Icon;
169
- $[35] = t5;
170
- } else {
171
- t5 = $[35];
172
- }
173
- let t6;
174
- if ($[36] !== t5) {
175
- t6 = /*#__PURE__*/jsx("span", {
176
- className: t4,
177
- children: t5
178
- });
179
- $[36] = t5;
180
- $[37] = t6;
181
- } else {
182
- t6 = $[37];
183
- }
184
- let t7;
185
- if ($[38] !== ariaLabel || $[39] !== rest || $[40] !== selected || $[41] !== t6) {
186
- t7 = /*#__PURE__*/jsx("button", {
187
- type: "button",
188
- "aria-label": ariaLabel,
189
- "aria-current": selected,
190
- className: t3,
191
- ...rest,
192
- children: t6
193
- });
194
- $[38] = ariaLabel;
195
- $[39] = rest;
196
- $[40] = selected;
197
- $[41] = t6;
198
- $[42] = t7;
199
- } else {
200
- t7 = $[42];
201
- }
202
- let t8;
203
- if ($[43] !== t1 || $[44] !== t2 || $[45] !== t7) {
204
- t8 = /*#__PURE__*/jsx("li", {
205
- className: t1,
206
- "data-selected": t2,
207
- children: t7
208
- });
209
- $[43] = t1;
210
- $[44] = t2;
211
- $[45] = t7;
212
- $[46] = t8;
213
- } else {
214
- t8 = $[46];
215
- }
216
- return t8;
156
+ t13 = $[34];
217
157
  }
158
+ return t13;
218
159
  };
219
160
  SegmentedControlIconButton.__SLOT__ = Symbol('SegmentedControl.IconButton');
220
161
 
@@ -1 +1 @@
1
- {"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"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"}
@@ -19,6 +19,7 @@ import { ActionList } from '../ActionList/index.js';
19
19
  import { isSlot } from '../utils/is-slot.js';
20
20
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
21
21
  import { useIsMacOS } from '../hooks/useIsMacOS.js';
22
+ import { AriaStatus } from '../live-region/AriaStatus.js';
22
23
  import Spinner from '../Spinner/Spinner.js';
23
24
  import { Tooltip } from '../TooltipV2/Tooltip.js';
24
25
  import Text from '../Text/Text.js';
@@ -26,9 +27,6 @@ import { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
26
27
  import { SkeletonText } from '../SkeletonText/SkeletonText.js';
27
28
  import { getAccessibleKeybindingHintString } from '../KeybindingHint/KeybindingHint.js';
28
29
 
29
- // ----------------------------------------------------------------------------
30
- // Context
31
-
32
30
  const RootContext = /*#__PURE__*/React.createContext({
33
31
  announceUpdate: () => {},
34
32
  expandedStateCache: {
@@ -153,10 +151,10 @@ const Root = t0 => {
153
151
  let t9;
154
152
  if ($[8] !== ariaLiveMessage) {
155
153
  t9 = /*#__PURE__*/jsx(VisuallyHidden, {
156
- role: "status",
157
- "aria-live": "polite",
158
- "aria-atomic": "true",
159
- children: ariaLiveMessage
154
+ children: /*#__PURE__*/jsx(AriaStatus, {
155
+ announceOnShow: true,
156
+ children: ariaLiveMessage
157
+ })
160
158
  });
161
159
  $[8] = ariaLiveMessage;
162
160
  $[9] = t9;
@@ -1 +1 @@
1
- {"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAMvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAudD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;AAuCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;iBAxRoE,MAAM,IAAI;;;;;;;;;4BA6NxC,KAAK,CAAC,iBAAiB;;;CAmEnF,CAAA"}
1
+ {"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAMvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAudD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;AAqCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;iBAtRoE,MAAM,IAAI;;;;;;;;;4BA6NxC,KAAK,CAAC,iBAAiB;;;CAiEnF,CAAA"}
@@ -14,6 +14,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
14
14
  import { useProvidedRefOrCreate } from '../../hooks/useProvidedRefOrCreate.js';
15
15
  import { useId } from '../../hooks/useId.js';
16
16
  import { useAnchoredPosition } from '../../hooks/useAnchoredPosition.js';
17
+ import { AriaStatus } from '../../live-region/AriaStatus.js';
17
18
  import Octicon from '../../Octicon/Octicon.js';
18
19
  import TextInput from '../../TextInput/TextInput.js';
19
20
  import { useFormControlForwardedProps } from '../../FormControl/_FormControlContext.js';
@@ -23,7 +24,6 @@ import Checkbox from '../../Checkbox/Checkbox.js';
23
24
  import { IconButton } from '../../Button/IconButton.js';
24
25
  import Heading from '../../Heading/Heading.js';
25
26
  import Spinner from '../../Spinner/Spinner.js';
26
- import { AriaStatus } from '../../live-region/AriaStatus.js';
27
27
 
28
28
  const SelectPanelContext = /*#__PURE__*/React.createContext({
29
29
  title: '',
@@ -932,9 +932,9 @@ const SelectPanelMessage = ({
932
932
  title,
933
933
  children
934
934
  }) => {
935
+ const MessageWrapper = variant === 'empty' ? 'div' : AriaStatus;
935
936
  if (size === 'full') {
936
- return /*#__PURE__*/jsxs("div", {
937
- "aria-live": variant === 'empty' ? undefined : 'polite',
937
+ return /*#__PURE__*/jsxs(MessageWrapper, {
938
938
  className: classes.MessageFull,
939
939
  children: [variant !== 'empty' ? /*#__PURE__*/jsx(Octicon, {
940
940
  icon: AlertIcon,
@@ -948,8 +948,7 @@ const SelectPanelMessage = ({
948
948
  })]
949
949
  });
950
950
  } else {
951
- return /*#__PURE__*/jsxs("div", {
952
- "aria-live": variant === 'empty' ? undefined : 'polite',
951
+ return /*#__PURE__*/jsxs(MessageWrapper, {
953
952
  className: classes.MessageInline,
954
953
  "data-variant": variant,
955
954
  children: [/*#__PURE__*/jsx(AlertIcon, {
@@ -1419,6 +1419,12 @@
1419
1419
  "name": "actionsLayout",
1420
1420
  "type": "'default' | 'inline' | 'stacked'",
1421
1421
  "description": "Override the responsive layout of the action buttons. 'inline' layout will display the buttons inline with the title and description, while 'stacked' layout will always render the buttons in a new row."
1422
+ },
1423
+ {
1424
+ "name": "flush",
1425
+ "type": "boolean",
1426
+ "defaultValue": "false",
1427
+ "description": "Full width banner specifically for use within confined spaces, such as dialogs, tables, cards, or boxes where available space is limited."
1422
1428
  }
1423
1429
  ],
1424
1430
  "subcomponents": [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.3.0",
4
+ "version": "38.4.0-rc.3baa9bd2c",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
@@ -172,7 +172,7 @@
172
172
  "react-is": "18.3.1",
173
173
  "recast": "0.23.7",
174
174
  "rimraf": "5.0.5",
175
- "rollup": "4.53.1",
175
+ "rollup": "4.53.3",
176
176
  "rollup-plugin-import-css": "^0.0.0",
177
177
  "rollup-plugin-postcss": "4.0.2",
178
178
  "rollup-plugin-visualizer": "6.0.5",
@@ -1,2 +0,0 @@
1
- .prc-Banner-Banner-IR8eJ{align-items:start;background-color:var(--banner-bgColor);border:var(--borderWidth-thin,.0625rem) solid var(--banner-borderColor);border-radius:var(--borderRadius-medium,.375rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:var(--base-size-8,.5rem)}@supports (container-type:inline-size){.prc-Banner-Banner-IR8eJ[data-actions-layout=default]{container:banner/inline-size}}.prc-Banner-Banner-IR8eJ[data-actions-layout=stacked] .prc-Banner-BannerContainer-lbx3d{flex-direction:column}.prc-Banner-Banner-IR8eJ[data-actions-layout=stacked] .prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:none}.prc-Banner-Banner-IR8eJ[data-actions-layout=stacked] .prc-Banner-BannerActions-XCfHL :where([data-primary-action=leading]){display:flex}.prc-Banner-Banner-IR8eJ[data-actions-layout=inline] .prc-Banner-BannerContainer-lbx3d{flex-wrap:nowrap}.prc-Banner-Banner-IR8eJ[data-actions-layout=inline] .prc-Banner-BannerActions-XCfHL{flex:0 0 auto}.prc-Banner-Banner-IR8eJ[data-actions-layout=inline] .prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:flex}.prc-Banner-Banner-IR8eJ[data-actions-layout=inline] .prc-Banner-BannerActions-XCfHL :where([data-primary-action=leading]){display:none}.prc-Banner-Banner-IR8eJ[data-layout=compact]{padding:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-variant=critical]{--banner-bgColor:var(--bgColor-danger-muted,var(--color-danger-subtle));--banner-borderColor:var(--borderColor-danger-muted,var(--color-danger-muted));--banner-icon-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-Banner-Banner-IR8eJ[data-variant=info]{--banner-bgColor:var(--bgColor-accent-muted,var(--color-accent-subtle));--banner-borderColor:var(--borderColor-accent-muted,var(--color-accent-muted));--banner-icon-fgColor:var(--fgColor-accent,var(--color-accent-fg))}.prc-Banner-Banner-IR8eJ[data-variant=success]{--banner-bgColor:var(--bgColor-success-muted,var(--color-success-subtle));--banner-borderColor:var(--borderColor-success-muted,var(--color-success-muted));--banner-icon-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-Banner-Banner-IR8eJ[data-variant=upsell]{--banner-bgColor:var(--bgColor-upsell-muted,#fbefff);--banner-borderColor:var(--borderColor-upsell-muted,#c297ff66);--banner-icon-fgColor:var(--fgColor-upsell,#8250df)}.prc-Banner-Banner-IR8eJ[data-variant=warning]{--banner-bgColor:var(--bgColor-attention-muted,var(--color-attention-subtle));--banner-borderColor:var(--borderColor-attention-muted,var(--color-attention-muted));--banner-icon-fgColor:var(--fgColor-attention,var(--color-attention-fg))}.prc-Banner-BannerContainer-lbx3d{align-items:start;column-gap:var(--base-size-4,.25rem);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.42857);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ :where(.prc-Banner-BannerContainer-lbx3d){display:flex;flex-wrap:wrap;justify-content:space-between}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto;grid-template-rows:auto}.prc-Banner-BannerContent-zTITK{display:grid;grid-column-start:1;margin-block:var(--base-size-8,.5rem);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerContent-zTITK{margin-block:var(--base-size-6,.375rem)}@media screen and (min-width:544px){.prc-Banner-BannerContent-zTITK{flex:1 1 0%}}.prc-Banner-BannerTitle-TcuJl{font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-Banner-BannerIcon-WuOyf{display:grid;padding:var(--base-size-8,.5rem);place-items:center}.prc-Banner-BannerIcon-WuOyf svg{color:var(--banner-icon-fgColor);height:var(--base-size-20,1.25rem);fill:var(--banner-icon-fgColor)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerIcon-WuOyf svg{height:var(--base-size-16,1rem)}.prc-Banner-BannerDismiss-uBZVm{display:grid;margin-inline-start:var(--base-size-4,.25rem);padding:var(--base-size-8,.5rem);place-items:center}:where(.prc-Banner-Banner-IR8eJ):has(.prc-Banner-BannerActions-XCfHL) .prc-Banner-BannerDismiss-uBZVm{margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerDismiss-uBZVm svg{color:var(--banner-icon-fgColor)}.prc-Banner-BannerActionsContainer-ukGMH{align-items:center;column-gap:var(--base-size-12,.75rem);display:flex;margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:none}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]{display:none}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=leading]{display:flex}@container banner (max-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid}.prc-Banner-BannerContainer-lbx3d:has(.prc-Banner-BannerActionsContainer-ukGMH){grid-template-rows:auto auto}.prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:none}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:flex}}@container banner (min-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto auto}:where(.prc-Banner-Banner-IR8eJ):not([data-dismissible]) :where(.prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]) :where([data-variant=link]:only-child){padding-inline:0 var(--base-size-12,.75rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:flex;min-height:var(--base-size-32,2rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:none}}
2
- /*# sourceMappingURL=Banner-c1744c4b.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Banner/Banner.module.css"],"names":[],"mappings":"AAAA,yBASE,iBAAkB,CALlB,sCAAuC,CAEvC,uEAA+D,CAC/D,gDAAyC,CANzC,YAAa,CAOb,6CAA+C,CAN/C,gCAgFF,CAtEI,uCADF,sDAEI,4BAEJ,CADE,CAIA,wFACE,qBACF,CAEA,6HACE,YACF,CAEA,4HACE,YACF,CAIA,uFACE,gBACF,CAEA,qFACE,aACF,CAEA,4HACE,YACF,CAEA,2HACE,YACF,CAGF,8CACE,iCACF,CAEA,gDACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,4CACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,+CACE,yEAA8C,CAC9C,gFAAsD,CACtD,oEACF,CAEA,8CACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,+CACE,6EAAgD,CAChD,oFAAwD,CACxD,wEACF,CAKF,kCAEE,iBAAkB,CAGlB,oCAA8B,CAJ9B,8CAAuC,CAEvC,sDAA+C,CAC/C,iCAEF,CAEA,mEACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,mIACE,YAAa,CACb,0BAA2B,CAC3B,uBACF,CAIA,gCACE,YAAa,CAEb,mBAAoB,CACpB,qCAAgC,CAFhC,iCAGF,CAEA,uHACE,uCACF,CAEA,oCACE,gCACE,WACF,CACF,CAEA,8BAEE,iBAAkB,CAClB,gDAA6C,CAF7C,QAGF,CAIA,6BACE,YAAa,CAEb,gCAA2B,CAD3B,kBAEF,CAEA,iCAIE,gCAAiC,CAFjC,kCAA2B,CAI3B,+BACF,CAGA,wHACE,+BACF,CAIA,gCACE,YAAa,CAGb,6CAAuC,CADvC,gCAA2B,CAD3B,kBAGF,CAEA,sGACE,uCACF,CAEA,oCAEE,gCACF,CAIA,yCAGE,kBAAmB,CADnB,qCAA+B,CAD/B,YAAa,CAGb,uCACF,CAEA,uEACE,YACF,CAEA,iIACE,2CACF,CAGA,wKAEE,YACF,CAGA,uKAEE,YACF,CAIA,qCACE,kCACE,YACF,CAEA,gFACE,4BACF,CAEA,gCACE,2CACF,CAEA,+DACE,YACF,CAEA,8DACE,YACF,CACF,CAEA,qCACE,kCACE,YAAa,CACb,+BACF,CAEA,+KAGE,2CACF,CAEA,+DACE,YAAa,CACb,mCACF,CAEA,8DACE,YACF,CACF","file":"Banner-c1744c4b.css","sourcesContent":[".Banner {\n display: grid;\n padding: var(--base-size-8);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--banner-bgColor);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thin) solid var(--banner-borderColor);\n border-radius: var(--borderRadius-medium);\n grid-template-columns: auto minmax(0, 1fr) auto;\n align-items: start;\n\n &[data-actions-layout='default'] {\n @supports (container-type: inline-size) {\n container: banner / inline-size;\n }\n }\n\n &[data-actions-layout='stacked'] {\n & .BannerContainer {\n flex-direction: column;\n }\n\n & .BannerActions :where([data-primary-action='trailing']) {\n display: none;\n }\n\n & .BannerActions :where([data-primary-action='leading']) {\n display: flex;\n }\n }\n\n &[data-actions-layout='inline'] {\n & .BannerContainer {\n flex-wrap: nowrap;\n }\n\n & .BannerActions {\n flex: 0 0 auto;\n }\n\n & .BannerActions :where([data-primary-action='trailing']) {\n display: flex;\n }\n\n & .BannerActions :where([data-primary-action='leading']) {\n display: none;\n }\n }\n\n &[data-layout='compact'] {\n padding: var(--base-size-4);\n }\n\n &[data-variant='critical'] {\n --banner-bgColor: var(--bgColor-danger-muted);\n --banner-borderColor: var(--borderColor-danger-muted);\n --banner-icon-fgColor: var(--fgColor-danger);\n }\n\n &[data-variant='info'] {\n --banner-bgColor: var(--bgColor-accent-muted);\n --banner-borderColor: var(--borderColor-accent-muted);\n --banner-icon-fgColor: var(--fgColor-accent);\n }\n\n &[data-variant='success'] {\n --banner-bgColor: var(--bgColor-success-muted);\n --banner-borderColor: var(--borderColor-success-muted);\n --banner-icon-fgColor: var(--fgColor-success);\n }\n\n &[data-variant='upsell'] {\n --banner-bgColor: var(--bgColor-upsell-muted);\n --banner-borderColor: var(--borderColor-upsell-muted);\n --banner-icon-fgColor: var(--fgColor-upsell);\n }\n\n &[data-variant='warning'] {\n --banner-bgColor: var(--bgColor-attention-muted);\n --banner-borderColor: var(--borderColor-attention-muted);\n --banner-icon-fgColor: var(--fgColor-attention);\n }\n}\n\n/* BannerContainer -------------------------------------------------------- */\n\n.BannerContainer {\n font-size: var(--text-body-size-medium);\n align-items: start;\n line-height: var(--text-body-lineHeight-medium);\n row-gap: var(--base-size-4);\n column-gap: var(--base-size-4);\n}\n\n.Banner :where(.BannerContainer) {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerContainer {\n display: grid;\n grid-template-columns: auto;\n grid-template-rows: auto;\n}\n\n/* BannerContent ---------------------------------------------------------- */\n\n.BannerContent {\n display: grid;\n row-gap: var(--base-size-4);\n grid-column-start: 1;\n margin-block: var(--base-size-8);\n}\n\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {\n margin-block: var(--base-size-6);\n}\n\n@media screen and (min-width: 544px) {\n .BannerContent {\n flex: 1 1 0%;\n }\n}\n\n.BannerTitle {\n margin: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold);\n}\n\n/* BannerIcon ------------------------------------------------------------- */\n\n.BannerIcon {\n display: grid;\n place-items: center;\n padding: var(--base-size-8);\n}\n\n.BannerIcon svg {\n /* 20px is the line box height of the trailing action buttons */\n height: var(--base-size-20);\n /* stylelint-disable-next-line primer/colors */\n color: var(--banner-icon-fgColor);\n /* stylelint-disable-next-line primer/colors */\n fill: var(--banner-icon-fgColor);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg {\n height: var(--base-size-16);\n}\n\n/* BannerDismiss ---------------------------------------------------------- */\n\n.BannerDismiss {\n display: grid;\n place-items: center;\n padding: var(--base-size-8);\n margin-inline-start: var(--base-size-4);\n}\n\n:where(.Banner):has(.BannerActions) .BannerDismiss {\n margin-block: var(--base-size-2);\n}\n\n.BannerDismiss svg {\n /* stylelint-disable-next-line primer/colors */\n color: var(--banner-icon-fgColor);\n}\n\n/* BannerActions ---------------------------------------------------------- */\n\n.BannerActionsContainer {\n display: flex;\n column-gap: var(--base-size-12);\n align-items: center;\n margin-block: var(--base-size-2);\n}\n\n.BannerActions :where([data-primary-action='trailing']) {\n display: none;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerActions {\n margin-block-end: var(--base-size-6);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])\n .BannerActionsContainer[data-primary-action='trailing'] {\n display: none;\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])\n .BannerActionsContainer[data-primary-action='leading'] {\n display: flex;\n}\n\n/* Layout ------------------------------------------------------------------- */\n\n@container banner (max-width: 500px) {\n .BannerContainer {\n display: grid;\n }\n\n .BannerContainer:has(.BannerActionsContainer) {\n grid-template-rows: auto auto;\n }\n\n .BannerActions {\n margin-block-end: var(--base-size-6);\n }\n\n .BannerActions [data-primary-action='trailing'] {\n display: none;\n }\n\n .BannerActions [data-primary-action='leading'] {\n display: flex;\n }\n}\n\n@container banner (min-width: 500px) {\n .BannerContainer {\n display: grid;\n grid-template-columns: auto auto;\n }\n\n :where(.Banner):not([data-dismissible])\n :where(.BannerActionsContainer[data-primary-action='trailing'])\n :where([data-variant='link']:only-child) {\n padding-inline: 0 var(--base-size-12);\n }\n\n .BannerActions [data-primary-action='trailing'] {\n display: flex;\n min-height: var(--base-size-32, 2rem);\n }\n\n .BannerActions [data-primary-action='leading'] {\n display: none;\n }\n}\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,8EAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAwDF,CAzCE,uCACE,+CAA0B,CAC1B,gDACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,4EAAiD,CACjD,gFAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,sGACE,qFACF,CAEA,uGACE,uFACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-5cfe12ab.css","sourcesContent":[".SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:focus-within:has(:focus-visible) {\n background-color: transparent;\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-current='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n}\n\n.Button:not([aria-current='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- type LiveRegionContext = {
3
- announce: (message: string) => void;
4
- message: string;
5
- };
6
- declare const LiveRegionContext: React.Context<LiveRegionContext | null>;
7
- declare function useLiveRegion(): LiveRegionContext;
8
- declare function LiveRegion({ children }: React.PropsWithChildren): React.JSX.Element;
9
- declare function LiveRegionOutlet(): React.JSX.Element;
10
- declare function Message({ value }: {
11
- value: string;
12
- }): null;
13
- export { LiveRegion, LiveRegionOutlet, Message, useLiveRegion };
14
- //# sourceMappingURL=LiveRegion.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../src/internal/components/LiveRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,iBAAiB,yCAAsD,CAAA;AAE7E,iBAAS,aAAa,sBAMrB;AAED,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAC,EAAE,KAAK,CAAC,iBAAiB,qBAUtD;AAED,iBAAS,gBAAgB,sBAOxB;AAED,iBAAS,OAAO,CAAC,EAAC,KAAK,EAAC,EAAE;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,QA6BxC;AAED,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAC,CAAA"}