@primer/react 38.29.1-rc.4254fa28f → 38.30.0-rc.dc0369509

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.
Files changed (52) hide show
  1. package/CHANGELOG.md +25 -1
  2. package/dist/ButtonGroup/ButtonGroup-be1c1123.css +2 -0
  3. package/dist/ButtonGroup/ButtonGroup-be1c1123.css.map +1 -0
  4. package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  5. package/dist/ButtonGroup/ButtonGroup.js +1 -0
  6. package/dist/ButtonGroup/ButtonGroup.module.css.js +2 -2
  7. package/dist/Checkbox/Checkbox-7476a7ba.css +2 -0
  8. package/dist/Checkbox/Checkbox-7476a7ba.css.map +1 -0
  9. package/dist/Checkbox/Checkbox.module.css.js +1 -1
  10. package/dist/DataTable/Pagination-aebe86e8.css +2 -0
  11. package/dist/DataTable/Pagination-aebe86e8.css.map +1 -0
  12. package/dist/DataTable/Pagination.module.css.js +1 -1
  13. package/dist/Radio/Radio.d.ts.map +1 -1
  14. package/dist/Radio/Radio.js +2 -1
  15. package/dist/RadioGroup/RadioGroup.js +1 -0
  16. package/dist/RelativeTime/RelativeTime.js +1 -0
  17. package/dist/ScrollableRegion/ScrollableRegion.d.ts.map +1 -1
  18. package/dist/ScrollableRegion/ScrollableRegion.js +1 -0
  19. package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  20. package/dist/SegmentedControl/SegmentedControl.js +1 -0
  21. package/dist/SegmentedControl/SegmentedControlButton.d.ts.map +1 -1
  22. package/dist/SegmentedControl/SegmentedControlButton.js +1 -0
  23. package/dist/SegmentedControl/SegmentedControlIconButton.d.ts.map +1 -1
  24. package/dist/SegmentedControl/SegmentedControlIconButton.js +1 -0
  25. package/dist/Select/Select.d.ts.map +1 -1
  26. package/dist/Select/Select.js +6 -2
  27. package/dist/SideNav.d.ts.map +1 -1
  28. package/dist/SideNav.js +2 -0
  29. package/dist/Skeleton/SkeletonBox.d.ts +1 -0
  30. package/dist/Skeleton/SkeletonBox.d.ts.map +1 -1
  31. package/dist/Skeleton/SkeletonBox.js +54 -47
  32. package/dist/SkeletonText/SkeletonText.d.ts.map +1 -1
  33. package/dist/SkeletonText/SkeletonText.js +2 -2
  34. package/dist/Spinner/Spinner.js +1 -0
  35. package/dist/TextInput/TextInput.d.ts.map +1 -1
  36. package/dist/TextInput/TextInput.js +27 -68
  37. package/dist/Textarea/Textarea.d.ts.map +1 -1
  38. package/dist/Textarea/Textarea.js +158 -186
  39. package/dist/_VisuallyHidden.js +2 -2
  40. package/dist/_VisuallyHidden.module.css.js +2 -2
  41. package/dist/live-region/Announce.d.ts.map +1 -1
  42. package/dist/live-region/Announce.js +51 -36
  43. package/dist/utils/character-counter.d.ts +16 -21
  44. package/dist/utils/character-counter.d.ts.map +1 -1
  45. package/dist/utils/character-counter.js +23 -59
  46. package/package.json +2 -2
  47. package/dist/ButtonGroup/ButtonGroup-54ba293b.css +0 -2
  48. package/dist/ButtonGroup/ButtonGroup-54ba293b.css.map +0 -1
  49. package/dist/Checkbox/Checkbox-edc5dc3e.css +0 -2
  50. package/dist/Checkbox/Checkbox-edc5dc3e.css.map +0 -1
  51. package/dist/DataTable/Pagination-b6f8418c.css +0 -2
  52. package/dist/DataTable/Pagination-b6f8418c.css.map +0 -1
@@ -1,6 +1,6 @@
1
1
  import { c } from 'react-compiler-runtime';
2
2
  import { announceFromElement } from '@primer/live-region-element';
3
- import { useRef, useState, useEffect } from 'react';
3
+ import { useRef, useEffect } from 'react';
4
4
  import { useEffectOnce } from '../internal/hooks/useEffectOnce.js';
5
5
  import { useEffectCallback } from '../internal/hooks/useEffectCallback.js';
6
6
  import { jsx } from 'react/jsx-runtime';
@@ -11,7 +11,7 @@ import { jsx } from 'react/jsx-runtime';
11
11
  * will also announce any changes to the text content of `children`
12
12
  */
13
13
  function Announce(props) {
14
- const $ = c(25);
14
+ const $ = c(24);
15
15
  let children;
16
16
  let delayMs;
17
17
  let rest;
@@ -51,10 +51,10 @@ function Announce(props) {
51
51
  const hidden = t2 === undefined ? false : t2;
52
52
  const politeness = t3 === undefined ? "polite" : t3;
53
53
  const ref = useRef(null);
54
- const [previousAnnouncementText, setPreviousAnnouncementText] = useState(null);
54
+ const previousAnnouncementText = useRef(null);
55
55
  const savedAnnouncement = useRef(null);
56
56
  let t4;
57
- if ($[8] !== delayMs || $[9] !== hidden || $[10] !== politeness || $[11] !== previousAnnouncementText) {
57
+ if ($[8] !== delayMs || $[9] !== hidden || $[10] !== politeness) {
58
58
  t4 = () => {
59
59
  var _savedAnnouncement$cu;
60
60
  const {
@@ -70,14 +70,10 @@ function Announce(props) {
70
70
  if (!textContent) {
71
71
  return;
72
72
  }
73
- if (textContent === previousAnnouncementText) {
73
+ if (textContent === previousAnnouncementText.current) {
74
74
  return;
75
75
  }
76
- const style = window.getComputedStyle(element);
77
- if (style.display === "none") {
78
- return;
79
- }
80
- if (style.visibility === "hidden") {
76
+ if (!isVisible(element)) {
81
77
  return;
82
78
  }
83
79
  (_savedAnnouncement$cu = savedAnnouncement.current) === null || _savedAnnouncement$cu === void 0 ? void 0 : _savedAnnouncement$cu.cancel();
@@ -87,34 +83,33 @@ function Announce(props) {
87
83
  politeness,
88
84
  delayMs
89
85
  });
90
- setPreviousAnnouncementText(textContent);
86
+ previousAnnouncementText.current = textContent;
91
87
  };
92
88
  $[8] = delayMs;
93
89
  $[9] = hidden;
94
90
  $[10] = politeness;
95
- $[11] = previousAnnouncementText;
96
- $[12] = t4;
91
+ $[11] = t4;
97
92
  } else {
98
- t4 = $[12];
93
+ t4 = $[11];
99
94
  }
100
95
  const announce = useEffectCallback(t4);
101
96
  let t5;
102
- if ($[13] !== announce || $[14] !== announceOnShow) {
97
+ if ($[12] !== announce || $[13] !== announceOnShow) {
103
98
  t5 = () => {
104
99
  if (announceOnShow) {
105
100
  announce();
106
101
  }
107
102
  };
108
- $[13] = announce;
109
- $[14] = announceOnShow;
110
- $[15] = t5;
103
+ $[12] = announce;
104
+ $[13] = announceOnShow;
105
+ $[14] = t5;
111
106
  } else {
112
- t5 = $[15];
107
+ t5 = $[14];
113
108
  }
114
109
  useEffectOnce(t5);
115
110
  let t6;
116
111
  let t7;
117
- if ($[16] !== announce) {
112
+ if ($[15] !== announce) {
118
113
  t6 = () => {
119
114
  const {
120
115
  current: container
@@ -135,17 +130,17 @@ function Announce(props) {
135
130
  };
136
131
  };
137
132
  t7 = [announce];
138
- $[16] = announce;
139
- $[17] = t6;
140
- $[18] = t7;
133
+ $[15] = announce;
134
+ $[16] = t6;
135
+ $[17] = t7;
141
136
  } else {
142
- t6 = $[17];
143
- t7 = $[18];
137
+ t6 = $[16];
138
+ t7 = $[17];
144
139
  }
145
140
  useEffect(t6, t7);
146
141
  let t8;
147
142
  let t9;
148
- if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
143
+ if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
149
144
  t8 = () => () => {
150
145
  if (savedAnnouncement.current !== null) {
151
146
  savedAnnouncement.current.cancel();
@@ -153,26 +148,26 @@ function Announce(props) {
153
148
  }
154
149
  };
155
150
  t9 = [];
156
- $[19] = t8;
157
- $[20] = t9;
151
+ $[18] = t8;
152
+ $[19] = t9;
158
153
  } else {
159
- t8 = $[19];
160
- t9 = $[20];
154
+ t8 = $[18];
155
+ t9 = $[19];
161
156
  }
162
157
  useEffect(t8, t9);
163
158
  let t10;
164
- if ($[21] !== BaseComponent || $[22] !== children || $[23] !== rest) {
159
+ if ($[20] !== BaseComponent || $[21] !== children || $[22] !== rest) {
165
160
  t10 = /*#__PURE__*/jsx(BaseComponent, {
166
161
  ...rest,
167
162
  ref: ref,
168
163
  children: children
169
164
  });
170
- $[21] = BaseComponent;
171
- $[22] = children;
172
- $[23] = rest;
173
- $[24] = t10;
165
+ $[20] = BaseComponent;
166
+ $[21] = children;
167
+ $[22] = rest;
168
+ $[23] = t10;
174
169
  } else {
175
- t10 = $[24];
170
+ t10 = $[23];
176
171
  }
177
172
  return t10;
178
173
  }
@@ -186,4 +181,24 @@ function getTextContent(element) {
186
181
  return value ? value.trim() : '';
187
182
  }
188
183
 
184
+ /**
185
+ * Determine if an element is visible (not hidden via `display: none` or
186
+ * `visibility: hidden`). Prefers the native `checkVisibility()` API when
187
+ * available and falls back to `getComputedStyle` for older browsers.
188
+ */
189
+ function isVisible(element) {
190
+ if (typeof element.checkVisibility === 'function') {
191
+ return element.checkVisibility({
192
+ // `visibilityProperty` is the standard option name (Chrome 116+, Firefox
193
+ // 125+, Safari 17.4+); `checkVisibilityCSS` is the legacy Chromium name
194
+ // (Chrome 105+). Unknown options are ignored, so passing both ensures
195
+ // `visibility: hidden` is treated as not visible across all engines.
196
+ visibilityProperty: true,
197
+ checkVisibilityCSS: true
198
+ });
199
+ }
200
+ const style = window.getComputedStyle(element);
201
+ return style.display !== 'none' && style.visibility !== 'hidden';
202
+ }
203
+
189
204
  export { Announce };
@@ -1,27 +1,22 @@
1
1
  /**
2
- * Shared character counting functionality for text inputs with character limits.
3
- * Handles real-time character count updates, validation, and aria-live announcements.
2
+ * Shared character counting helpers for text inputs with character limits.
3
+ * Provides the pure derivation used to render the counter and validation state.
4
4
  */
5
- export interface CharacterCounterCallbacks {
6
- onCountUpdate: (count: number, isOverLimit: boolean, message: string) => void;
7
- onScreenReaderAnnounce: (message: string) => void;
8
- }
9
- export declare class CharacterCounter {
10
- private announceTimeout;
11
- private callbacks;
12
- private isInitialLoad;
13
- constructor(callbacks: CharacterCounterCallbacks);
14
- /**
15
- * Update the character count based on current input value
16
- */
17
- updateCharacterCount(currentLength: number, maxLength: number): void;
5
+ export declare const SCREEN_READER_DELAY = 500;
6
+ export interface CharacterCountState {
18
7
  /**
19
- * Announce character count to screen readers with debouncing
8
+ * Number of characters remaining before the limit is reached, or the number of
9
+ * characters over the limit when it has been exceeded.
20
10
  */
21
- private announceToScreenReader;
22
- /**
23
- * Clean up any pending timeouts
24
- */
25
- cleanup(): void;
11
+ count: number;
12
+ /** Whether the current length exceeds the limit. */
13
+ isOverLimit: boolean;
14
+ /** Human readable description of the remaining or over count. */
15
+ message: string;
26
16
  }
17
+ /**
18
+ * Compute the character count state for a given length and limit. This is a pure
19
+ * function so the counter can be derived during render without component state.
20
+ */
21
+ export declare function getCharacterCountState(currentLength: number, maxLength: number): CharacterCountState;
27
22
  //# sourceMappingURL=character-counter.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"character-counter.d.ts","sourceRoot":"","sources":["../../src/utils/character-counter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7E,sBAAsB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,aAAa,CAAgB;gBAEzB,SAAS,EAAE,yBAAyB;IAIhD;;OAEG;IACH,oBAAoB,CAAC,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;IA0BpE;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAc9B;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB"}
1
+ {"version":3,"file":"character-counter.d.ts","sourceRoot":"","sources":["../../src/utils/character-counter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,mBAAmB,MAAM,CAAA;AAEtC,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,WAAW,EAAE,OAAO,CAAA;IACpB,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAA;CAChB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,mBAAmB,CAmBpG"}
@@ -1,66 +1,30 @@
1
1
  /**
2
- * Shared character counting functionality for text inputs with character limits.
3
- * Handles real-time character count updates, validation, and aria-live announcements.
2
+ * Shared character counting helpers for text inputs with character limits.
3
+ * Provides the pure derivation used to render the counter and validation state.
4
4
  */
5
5
 
6
6
  const SCREEN_READER_DELAY = 500;
7
- class CharacterCounter {
8
- announceTimeout = null;
9
- isInitialLoad = true;
10
- constructor(callbacks) {
11
- this.callbacks = callbacks;
12
- }
13
-
14
- /**
15
- * Update the character count based on current input value
16
- */
17
- updateCharacterCount(currentLength, maxLength) {
18
- const charactersRemaining = maxLength - currentLength;
19
- // eslint-disable-next-line no-useless-assignment
20
- let message = '';
21
- if (charactersRemaining >= 0) {
22
- const characterText = charactersRemaining === 1 ? 'character' : 'characters';
23
- message = `${charactersRemaining} ${characterText} remaining`;
24
- this.callbacks.onCountUpdate(charactersRemaining, false, message);
25
- } else {
26
- const charactersOver = -charactersRemaining;
27
- const characterText = charactersOver === 1 ? 'character' : 'characters';
28
- message = `${charactersOver} ${characterText} over`;
29
- this.callbacks.onCountUpdate(charactersOver, true, message);
30
- }
31
- if (!this.isInitialLoad) {
32
- this.announceToScreenReader(message);
33
- }
34
-
35
- // After first update, set isInitialLoad to false
36
- if (this.isInitialLoad) {
37
- this.isInitialLoad = false;
38
- }
39
- }
40
-
41
- /**
42
- * Announce character count to screen readers with debouncing
43
- */
44
- announceToScreenReader(message) {
45
- if (this.announceTimeout) {
46
- clearTimeout(this.announceTimeout);
47
- }
48
- if (typeof window === 'undefined' || typeof window.setTimeout !== 'function') {
49
- return;
50
- }
51
- this.announceTimeout = window.setTimeout(() => {
52
- this.callbacks.onScreenReaderAnnounce(message);
53
- }, SCREEN_READER_DELAY);
54
- }
55
-
56
- /**
57
- * Clean up any pending timeouts
58
- */
59
- cleanup() {
60
- if (this.announceTimeout) {
61
- clearTimeout(this.announceTimeout);
62
- }
7
+ /**
8
+ * Compute the character count state for a given length and limit. This is a pure
9
+ * function so the counter can be derived during render without component state.
10
+ */
11
+ function getCharacterCountState(currentLength, maxLength) {
12
+ const charactersRemaining = maxLength - currentLength;
13
+ if (charactersRemaining >= 0) {
14
+ const characterText = charactersRemaining === 1 ? 'character' : 'characters';
15
+ return {
16
+ count: charactersRemaining,
17
+ isOverLimit: false,
18
+ message: `${charactersRemaining} ${characterText} remaining`
19
+ };
63
20
  }
21
+ const charactersOver = -charactersRemaining;
22
+ const characterText = charactersOver === 1 ? 'character' : 'characters';
23
+ return {
24
+ count: charactersOver,
25
+ isOverLimit: true,
26
+ message: `${charactersOver} ${characterText} over`
27
+ };
64
28
  }
65
29
 
66
- export { CharacterCounter };
30
+ export { SCREEN_READER_DELAY, getCharacterCountState };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.29.1-rc.4254fa28f",
4
+ "version": "38.30.0-rc.dc0369509",
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",
@@ -131,7 +131,7 @@
131
131
  "@types/lodash.isempty": "4.4.9",
132
132
  "@types/lodash.isobject": "3.0.9",
133
133
  "@types/lodash.keyby": "4.6.9",
134
- "@types/node": "20.12.11",
134
+ "@types/node": "26.0.0",
135
135
  "@types/react": "18.3.11",
136
136
  "@types/react-dom": "18.3.1",
137
137
  "@types/react-is": "18.3.1",
@@ -1,2 +0,0 @@
1
- .prc-ButtonGroup-ButtonGroup-vFUrY{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]){margin-inline-end:-1px;position:relative}.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]) a,.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]) button{border-radius:0}.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]):first-child a,.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]):last-child a,.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]):active,.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]):focus,.prc-ButtonGroup-ButtonGroup-vFUrY>:not([data-loading-wrapper]):hover{z-index:1}.prc-ButtonGroup-ButtonGroup-vFUrY:has(div:last-child:empty) a,.prc-ButtonGroup-ButtonGroup-vFUrY:has(div:last-child:empty) button{border-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper]{margin-inline-end:-1px;position:relative}.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper] a,.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper] button{border-radius:0}.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper]:active,.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper]:focus,.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper]:hover{z-index:1}.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper]:first-child a,.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper]:first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper]:last-child a,.prc-ButtonGroup-ButtonGroup-vFUrY>[data-loading-wrapper]:last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}
2
- /*# sourceMappingURL=ButtonGroup-54ba293b.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css.js"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAgFF,CA7EE,gEAEE,sBAAuB,CACvB,iBA6BF,CA1BE,yIAEE,eACF,CAGE,iKAGE,4DAAqD,CADrD,yDAEF,CAIA,+JAGE,6DAAsD,CADtD,0DAEF,CAGF,mNAGE,SACF,CAMA,mIAEE,gDACF,CAIF,0DAEE,sBAAuB,CACvB,iBA6BF,CA1BE,6HAEE,eACF,CAEA,iMAGE,SACF,CAGE,qJAGE,4DAAqD,CADrD,yDAEF,CAIA,mJAGE,6DAAsD,CADtD,0DAEF","file":"ButtonGroup-54ba293b.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n vertical-align: middle;\n isolation: isolate;\n\n & > *:not([data-loading-wrapper]) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n\n /* reset border-radius */\n button,\n a {\n border-radius: 0;\n }\n\n &:first-child {\n button,\n a {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n button,\n a {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n }\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n /* this is a workaround until portal based tooltips are fully removed from dotcom */\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(div:last-child:empty) {\n button,\n a {\n border-radius: var(--borderRadius-medium);\n }\n }\n\n /* if child is loading button */\n & > *[data-loading-wrapper] {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n\n /* reset border-radius */\n button,\n a {\n border-radius: 0;\n }\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n\n &:first-child {\n button,\n a {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n button,\n a {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n }\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- .prc-Checkbox-Checkbox-jjOgT{border-radius:var(--borderRadius-small,.1875rem);transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1)}.prc-Checkbox-Checkbox-jjOgT:before{animation:prc-Checkbox-checkmarkOut-mrgEX 80ms cubic-bezier(.65,0,.35,1) forwards;background-color:var(--fgColor-onEmphasis,#fff);clip-path:inset(var(--base-size-16,1rem) 0 0 0);content:"";height:var(--base-size-16,1rem);mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-position:center;mask-repeat:no-repeat;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,1rem)}.prc-Checkbox-Checkbox-jjOgT:checked,.prc-Checkbox-Checkbox-jjOgT:indeterminate{background:var(--control-checked-bgColor-rest,#0969da);border-color:var(--control-checked-bgColor-rest,#0969da)}.prc-Checkbox-Checkbox-jjOgT:checked:before{animation:prc-Checkbox-checkmarkIn-73iWj 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}.prc-Checkbox-Checkbox-jjOgT:indeterminate:before{animation:prc-Checkbox-checkmarkIn-73iWj 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}.prc-Checkbox-Checkbox-jjOgT:checked:disabled{background-color:var(--control-checked-bgColor-disabled,#818b98);border-color:var(--control-checked-borderColor-disabled,#818b98);opacity:1}.prc-Checkbox-Checkbox-jjOgT:indeterminate:disabled{background-color:var(--control-checked-bgColor-disabled,#818b98);border-color:var(--control-checked-borderColor-disabled,#818b98);opacity:1}.prc-Checkbox-Checkbox-jjOgT:checked:disabled:before{background-color:var(--control-checked-fgColor-disabled,#fff)}.prc-Checkbox-Checkbox-jjOgT:indeterminate:disabled:before{background-color:var(--control-checked-fgColor-disabled,#fff)}@media (forced-colors:active){.prc-Checkbox-Checkbox-jjOgT:checked,.prc-Checkbox-Checkbox-jjOgT:indeterminate{background-color:canvastext;border-color:canvastext}}.prc-Checkbox-Checkbox-jjOgT:disabled{cursor:not-allowed}.prc-Checkbox-Checkbox-jjOgT:checked{transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}.prc-Checkbox-Checkbox-jjOgT:checked:before{transition:visibility 0s linear 0s;visibility:visible}.prc-Checkbox-Checkbox-jjOgT:indeterminate{background:var(--control-checked-bgColor-rest,#0969da)}.prc-Checkbox-Checkbox-jjOgT:indeterminate:before{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}.prc-Checkbox-Checkbox-jjOgT:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,#0969da));outline-offset:2px}@keyframes prc-Checkbox-checkmarkIn-73iWj{0%{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes prc-Checkbox-checkmarkOut-mrgEX{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}}
2
- /*# sourceMappingURL=Checkbox-edc5dc3e.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Checkbox/Checkbox.module.css.js","../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"AAAA,6BACE,gDAAwC,CAGxC,uEA6EF,CAzEE,oCAaE,iFAAoE,CAPpE,+CAA2C,CAE3C,+CAA2C,CAJ3C,UAAW,CAFX,+BAA2B,CAO3B,ocAA69B,CAG79B,oBAAqB,CADrB,qBAAsB,CADtB,aAAc,CAHd,oCAAsC,CAJtC,iBAAkB,CAFlB,8BAaF,CAEA,gFAEE,sDAA+C,CAI/C,wDAsBF,CApBE,4CACE,qFACF,CAFA,kDACE,qFACF,CAEA,8CACE,gEAAyD,CACzD,gEAAyD,CACzD,SAMF,CATA,oDACE,gEAAyD,CACzD,gEAAyD,CACzD,SAMF,CAJE,qDAEE,6DACF,CAHA,2DAEE,6DACF,CAIF,8BAxBF,gFAyBI,2BAA4B,CAC5B,uBAEJ,CADE,CAGF,sCACE,kBACF,CAEA,qCACE,0EAQF,CAJE,4CAEE,kCAAmC,CADnC,kBAEF,CAGF,2CACE,sDAMF,CAJE,kDACE,wUAAia,CACja,kBACF,CAGF,0DC3EA,eAAgB,CAFhB,8EAAgC,CAChC,kBD8EA,CAGF,0CACE,GACE,+CACF,CAEA,GACE,wBACF,CACF,CAEA,2CACE,GACE,wBACF,CAEA,GACE,+CACF,CACF","file":"Checkbox-edc5dc3e.css","sourcesContent":[".Checkbox {\n border-radius: var(--borderRadius-small);\n\n /* checked -> unchecked - add 120ms delay to fully see animation-out */\n transition:\n background-color,\n border-color 80ms cubic-bezier(0.33, 1, 0.68, 1);\n\n &::before {\n width: var(--base-size-16);\n height: var(--base-size-16);\n visibility: hidden;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--fgColor-onEmphasis);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16) 0 0 0);\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;\n }\n\n &:checked,\n &:indeterminate {\n background: var(--control-checked-bgColor-rest);\n\n /* using bgColor here to avoid a border change in dark high contrast */\n /* stylelint-disable-next-line primer/colors */\n border-color: var(--control-checked-bgColor-rest);\n\n &::before {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n\n &:disabled {\n background-color: var(--control-checked-bgColor-disabled);\n border-color: var(--control-checked-borderColor-disabled);\n opacity: 1;\n\n &::before {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--control-checked-fgColor-disabled);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:checked {\n transition:\n background-color,\n border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n }\n }\n\n &:indeterminate {\n background: var(--control-checked-bgColor-rest);\n\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n\n &:focus-visible:not(:disabled) {\n @mixin focusOutline 2px;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
@@ -1,2 +0,0 @@
1
- .prc-DataTable-TablePagination-AJ0K7{align-items:center;border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);border-end-end-radius:var(--borderRadius-medium,.375rem);border-end-start-radius:var(--borderRadius-medium,.375rem);border-top-width:0;column-gap:1rem;display:flex;grid-area:footer;justify-content:space-between;padding:var(--base-size-8,.5rem) var(--base-size-16,1rem);width:100%}@media ((max-width:calc(768px - 0.02px))){.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=narrow]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=narrow]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=narrow]>:last-child{margin-inline-start:0}}@media ((min-width:768px)){.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=regular]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=regular]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=regular]>:last-child{margin-inline-start:0}}@media ((min-width:1400px)){.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=wide]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=wide]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Vxbth[data-hidden-viewport-ranges*=wide]>:last-child{margin-inline-start:0}}.prc-DataTable-TablePaginationRange-R7KK2{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);margin:0}.prc-DataTable-TablePaginationSteps-Vxbth{align-items:center;color:var(--fgColor-default,#1f2328);display:flex;flex-wrap:wrap;font-size:var(--text-body-size-medium,.875rem);list-style:none;margin:0;padding:0}.prc-DataTable-TablePaginationStep-jdto6:first-of-type{margin-right:var(--base-size-16,1rem)}.prc-DataTable-TablePaginationStep-jdto6:last-of-type{margin-left:var(--base-size-16,1rem)}.prc-DataTable-TablePaginationAction-SPa7Q{align-items:center;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,#59636e);display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:1.42857;padding:var(--base-size-8,.5rem);-webkit-user-select:none;user-select:none}.prc-DataTable-TablePaginationAction-SPa7Q[data-has-page]{color:var(--fgColor-accent,#0969da)}.prc-DataTable-TablePaginationPage-Fn3s-{align-items:center;border-radius:var(--borderRadius-medium,.375rem);display:flex;font-size:var(--text-body-size-medium,.875rem);justify-content:center;line-height:1.42857;min-height:2rem;min-width:2rem;padding:var(--base-size-8,.5rem) calc((var(--base-size-32,2rem) - var(--base-size-20,1.25rem))/2);-webkit-user-select:none;user-select:none}.prc-DataTable-TablePaginationAction-SPa7Q[data-has-page]:focus,.prc-DataTable-TablePaginationAction-SPa7Q[data-has-page]:hover,.prc-DataTable-TablePaginationPage-Fn3s-:focus,.prc-DataTable-TablePaginationPage-Fn3s-:hover{background-color:var(--control-transparent-bgColor-hover,#818b981a)}.prc-DataTable-TablePaginationPage-Fn3s-[data-active=true]{background-color:var(--bgColor-accent-emphasis,#0969da);color:var(--fgColor-onEmphasis,#fff)}.prc-DataTable-TablePaginationPage-Fn3s-[data-active=true]:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,#fff);outline:2px solid var(--bgColor-accent-emphasis,#0969da);outline-offset:-2px}.prc-DataTable-TablePaginationTruncationStep-gRyLp{align-items:center;display:flex;justify-content:center;min-height:2rem;min-width:2rem;-webkit-user-select:none;user-select:none}
2
- /*# sourceMappingURL=Pagination-b6f8418c.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/DataTable/Pagination.module.css.js"],"names":[],"mappings":"AAAA,qCAEE,kBAAmB,CAOnB,gFAAmB,CAEnB,wDAAiD,CADjD,0DAAmD,CADnD,kBAAmB,CALnB,eAAgB,CAHhB,YAAa,CAKb,gBAAiB,CAHjB,6BAA8B,CAI9B,yDAA+C,CAF/C,UAOF,CAEA,0CACE,mHACE,YACF,CAEA,4FACE,mBACF,CAEA,2FACE,qBACF,CACF,CAEA,2BACE,oHACE,YACF,CAEA,6FACE,mBACF,CAEA,4FACE,qBACF,CACF,CAEA,4BACE,iHACE,YACF,CAEA,0FACE,mBACF,CAEA,yFACE,qBACF,CACF,CAEA,0CACE,kCAA2B,CAC3B,4CAAsC,CACtC,QACF,CAEA,0CAEE,kBAAmB,CAGnB,oCAA6B,CAJ7B,YAAa,CAEb,cAAe,CAGf,8CAAuC,CAFvC,eAAgB,CAGhB,QAAS,CACT,SACF,CAEA,uDACE,qCACF,CAEA,sDACE,oCACF,CAEA,2CAEE,kBAAmB,CAOnB,gDAAyC,CANzC,kCAA2B,CAF3B,YAAa,CAGb,8CAAuC,CAEvC,mBAA0B,CAE1B,gCAA2B,CAD3B,wBAAiB,CAAjB,gBAGF,CAEA,0DACE,mCACF,CAEA,yCAIE,kBAAmB,CAMnB,gDAAyC,CAPzC,YAAa,CAGb,8CAAuC,CADvC,sBAAuB,CAGvB,mBAA0B,CAN1B,eAAgB,CADhB,cAAe,CAUf,iGAAiF,CAFjF,wBAAiB,CAAjB,gBAGF,CAEA,8NAIE,mEACF,CAEA,2DACE,uDAAgD,CAChD,oCACF,CAEA,yEAIE,yDAAqD,CAHrD,wDAAiD,CACjD,mBAGF,CAEA,mDAEE,kBAAmB,CADnB,YAAa,CAEb,sBAAuB,CAEvB,eAAgB,CADhB,cAAe,CAEf,wBAAiB,CAAjB,gBACF","file":"Pagination-b6f8418c.css","sourcesContent":[".TablePagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: 1rem;\n width: 100%;\n grid-area: footer;\n padding: var(--base-size-8) var(--base-size-16);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-top-width: 0;\n border-end-start-radius: var(--borderRadius-medium);\n border-end-end-radius: var(--borderRadius-medium);\n}\n\n@media ((max-width: calc(768px - 0.02px))) {\n .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {\n display: none;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {\n margin-inline-end: 0;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {\n margin-inline-start: 0;\n }\n}\n\n@media ((min-width: 768px)) {\n .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {\n display: none;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {\n margin-inline-end: 0;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {\n margin-inline-start: 0;\n }\n}\n\n@media ((min-width: 1400px)) {\n .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {\n display: none;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {\n margin-inline-end: 0;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {\n margin-inline-start: 0;\n }\n}\n\n.TablePaginationRange {\n color: var(--fgColor-muted);\n font-size: var(--text-body-size-small);\n margin: 0;\n}\n\n.TablePaginationSteps {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n list-style: none;\n color: var(--fgColor-default);\n font-size: var(--text-body-size-medium);\n margin: 0;\n padding: 0;\n}\n\n.TablePaginationStep:first-of-type {\n margin-right: var(--base-size-16);\n}\n\n.TablePaginationStep:last-of-type {\n margin-left: var(--base-size-16);\n}\n\n.TablePaginationAction {\n display: flex;\n align-items: center;\n color: var(--fgColor-muted);\n font-size: var(--text-body-size-medium);\n /* stylelint-disable-next-line primer/typography */\n line-height: calc(20 / 14);\n user-select: none;\n padding: var(--base-size-8);\n border-radius: var(--borderRadius-medium);\n}\n\n.TablePaginationAction[data-has-page] {\n color: var(--fgColor-accent);\n}\n\n.TablePaginationPage {\n min-width: 2rem;\n min-height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--text-body-size-medium);\n /* stylelint-disable-next-line primer/typography */\n line-height: calc(20 / 14);\n user-select: none;\n border-radius: var(--borderRadius-medium);\n padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */\n}\n\n.TablePaginationAction[data-has-page]:hover,\n.TablePaginationAction[data-has-page]:focus,\n.TablePaginationPage:hover,\n.TablePaginationPage:focus {\n background-color: var(--control-transparent-bgColor-hover);\n}\n\n.TablePaginationPage[data-active='true'] {\n background-color: var(--bgColor-accent-emphasis);\n color: var(--fgColor-onEmphasis);\n}\n\n.TablePaginationPage[data-active='true']:focus-visible {\n outline: 2px solid var(--bgColor-accent-emphasis);\n outline-offset: -2px;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n\n.TablePaginationTruncationStep {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 2rem;\n min-height: 2rem;\n user-select: none;\n}\n"]}