@primer/react 38.29.1-rc.42909d47c → 38.30.0-rc.dc0369509

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # @primer/react
 
-## 38.29.1
+## 38.30.0
+
+### Minor Changes
+
+- [#7991](https://github.com/primer/react/pull/7991) [`b906268`](https://github.com/primer/react/commit/b906268b7ebe8d684d8b5e9b1c4e9b528a5dd67a) Thanks [@llastflowers](https://github.com/llastflowers)! - Add data-component attributes and associated tests for:
+
+  Radio
+  RadioGroup
+  RelativeTime
+  ScrollableRegion
+  SegmentedControl
+  Select
+  SideNav
+  SkeletonBox
+  SkeletonAvatar
+  SkeletonText
+  Spinner
 
 ### Patch Changes
 

package/dist/Radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAqB,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAChF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;AAEzC;;GAEG;AACH,QAAA,MAAM,KAAK,kGA8CV,CAAA;wBAKuB,cAAc,CAAC,OAAO,KAAK,CAAC;AAApD,wBAAoD"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAqB,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAChF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;AAEzC;;GAEG;AACH,QAAA,MAAM,KAAK,kGA+CV,CAAA;wBAKuB,cAAc,CAAC,OAAO,KAAK,CAAC;AAApD,wBAAoD"}

package/dist/Radio/Radio.js

@@ -94,7 +94,8 @@ const Radio = /*#__PURE__*/React.forwardRef((t0, ref) => {
       required: required,
       onChange: handleOnChange,
       className: t4,
-      ...rest
+      ...rest,
+      "data-component": "Radio"
     });
     $[15] = checked;
     $[16] = disabled;

package/dist/RadioGroup/RadioGroup.js

@@ -87,6 +87,7 @@ const RadioGroup = t0 => {
   if ($[16] !== children || $[17] !== disabled || $[18] !== rest) {
     t4 = /*#__PURE__*/jsx(CheckboxOrRadioGroup, {
       disabled: disabled,
+      "data-component": "RadioGroup",
       ...rest,
       children: children
     });

package/dist/RelativeTime/RelativeTime.js

@@ -65,6 +65,7 @@ function RelativeTime(t0) {
       ...props,
       date: date,
       "no-title": t1,
+      "data-component": "RelativeTime",
       children: t2
     });
     $[11] = date;

package/dist/ScrollableRegion/ScrollableRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableRegion.d.ts","sourceRoot":"","sources":["../../src/ScrollableRegion/ScrollableRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,QAAQ,GACT;IACE,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAC1B,GACD;IACE,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAA;AAE7E,iBAAS,gBAAgB,CAAC,EACxB,YAAY,EAAE,KAAK,EACnB,iBAAiB,EAAE,UAAU,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,qBAAqB,qBAiBvB;AAED,OAAO,EAAC,gBAAgB,EAAC,CAAA;AACzB,YAAY,EAAC,qBAAqB,EAAC,CAAA"}
+{"version":3,"file":"ScrollableRegion.d.ts","sourceRoot":"","sources":["../../src/ScrollableRegion/ScrollableRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,QAAQ,GACT;IACE,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAC1B,GACD;IACE,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAA;AAE7E,iBAAS,gBAAgB,CAAC,EACxB,YAAY,EAAE,KAAK,EACnB,iBAAiB,EAAE,UAAU,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,qBAAqB,qBAuBvB;AAED,OAAO,EAAC,gBAAgB,EAAC,CAAA;AACzB,YAAY,EAAC,qBAAqB,EAAC,CAAA"}

package/dist/ScrollableRegion/ScrollableRegion.js

@@ -66,6 +66,7 @@ function ScrollableRegion(t0) {
       ...regionProps,
       ref: ref,
       className: t2,
+      "data-component": "ScrollableRegion",
       children: children
     });
     $[12] = children;

package/dist/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,0BAA0B,CAAA;AAEzE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAA;AAIjF,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,kCAAkC,CAAA;AAMhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAC9C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAsMD,eAAO,MAAM,gBAAgB;;;CAG3B,CAAA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,0BAA0B,CAAA;AAEzE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAA;AAIjF,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,kCAAkC,CAAA;AAMhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAC9C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAuMD,eAAO,MAAM,gBAAgB;;;CAG3B,CAAA"}

package/dist/SegmentedControl/SegmentedControl.js

@@ -226,6 +226,7 @@ const Root = t0 => {
       ...t7,
       "data-size": size,
       ...rest,
+      "data-component": "SegmentedControl",
       children: t8
     });
     $[41] = ariaLabel;

package/dist/SegmentedControl/SegmentedControlButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAMrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,2BAA2B,GAAG;IACxC,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAA;IAChB,oKAAoK;IACpK,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sKAAsK;IACtK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iDAAiD;IAEjD,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACrG,wFAAwF;IAExF,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACnG,gHAAgH;IAChH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,QAAA,MAAM,sBAAsB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,CAAC,CAyClG,CAAA;AAED,eAAe,sBAAsB,CAAA"}
+{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAMrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,2BAA2B,GAAG;IACxC,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAA;IAChB,oKAAoK;IACpK,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sKAAsK;IACtK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iDAAiD;IAEjD,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACrG,wFAAwF;IAExF,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACnG,gHAAgH;IAChH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,QAAA,MAAM,sBAAsB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,CAAC,CA6ClG,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/SegmentedControl/SegmentedControlButton.js

@@ -174,6 +174,7 @@ const SegmentedControlButton = t0 => {
     t12 = /*#__PURE__*/jsx("li", {
       className: t1,
       "data-selected": t2,
+      "data-component": "SegmentedControl.Button",
       children: t11
     });
     $[33] = t11;

package/dist/SegmentedControl/SegmentedControlIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlIconButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAIlD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,0DAA0D;IAE1D,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC3F,8JAA8J;IAC9J,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kKAAkK;IAClK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,eAAO,MAAM,0BAA0B,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAiCjH,CAAA;AAID,eAAe,0BAA0B,CAAA"}
+{"version":3,"file":"SegmentedControlIconButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAIlD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,0DAA0D;IAE1D,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC3F,8JAA8J;IAC9J,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kKAAkK;IAClK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,eAAO,MAAM,0BAA0B,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAqCjH,CAAA;AAID,eAAe,0BAA0B,CAAA"}

package/dist/SegmentedControl/SegmentedControlIconButton.js

@@ -146,6 +146,7 @@ const SegmentedControlIconButton = t0 => {
     t13 = /*#__PURE__*/jsx("li", {
       className: t1,
       "data-selected": t2,
+      "data-component": "SegmentedControl.IconButton",
       children: t12
     });
     $[31] = t1;

package/dist/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAA;AAE/E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,UAAU,CAAC,EAC/F,UAAU,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,IAAI,CAC7D,GAAG;IACF,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;;;;eAoE2F,MAAM;;;;AAQlG,wBAIE"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAA;AAE/E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,UAAU,CAAC,EAC/F,UAAU,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,IAAI,CAC7D,GAAG;IACF,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;;;;eAqE2F,MAAM;;;;AAQlG,wBAIE"}

package/dist/Select/Select.js

@@ -137,6 +137,7 @@ const Select = /*#__PURE__*/React.forwardRef((t0, ref) => {
       value: "",
       disabled: required,
       hidden: required,
+      "data-component": "Select.Option",
       children: placeholder
     });
     $[15] = placeholder;
@@ -156,6 +157,7 @@ const Select = /*#__PURE__*/React.forwardRef((t0, ref) => {
       className: t4,
       "data-hasplaceholder": t5,
       defaultValue: t6,
+      "data-component": "Select",
       children: [t7, children]
     });
     $[18] = children;
@@ -208,7 +210,8 @@ const Option = props => {
   let t0;
   if ($[0] !== props) {
     t0 = /*#__PURE__*/jsx("option", {
-      ...props
+      ...props,
+      "data-component": "Select.Option"
     });
     $[0] = props;
     $[1] = t0;
@@ -222,7 +225,8 @@ const OptGroup = props => {
   let t0;
   if ($[0] !== props) {
     t0 = /*#__PURE__*/jsx("optgroup", {
-      ...props
+      ...props,
+      "data-component": "Select.OptGroup"
     });
     $[0] = props;
     $[1] = t0;

package/dist/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../src/SideNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,eAAe,CAAA;AACjD,OAAa,EAAC,KAAK,SAAS,EAAC,MAAM,QAAQ,CAAA;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI5C,KAAK,gBAAgB,GAAG;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,OAAO,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,OAAO,CAAC,EACf,EAAE,EAAE,SAAiB,EACrB,OAAkB,EAClB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,GACxB,EAAE,gBAAgB,qBAkBlB;AAED,KAAK,sBAAsB,GAAG,iBAAiB,CAAC;IAC9C,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAC5B,CAAC,GACA,SAAS,CAAA;AAEX,QAAA,MAAM,WAAW;8DAA2D,sBAAsB;;CAUjG,CAAA;AAID,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAEjE,4EAA4E;;;kEAjBA,sBAAsB;;;;AAkBlG,wBAA0D"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../src/SideNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,eAAe,CAAA;AACjD,OAAa,EAAC,KAAK,SAAS,EAAC,MAAM,QAAQ,CAAA;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI5C,KAAK,gBAAgB,GAAG;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,OAAO,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,OAAO,CAAC,EACf,EAAE,EAAE,SAAiB,EACrB,OAAkB,EAClB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,GACxB,EAAE,gBAAgB,qBAkBlB;AAED,KAAK,sBAAsB,GAAG,iBAAiB,CAAC;IAC9C,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAC5B,CAAC,GACA,SAAS,CAAA;AAEX,QAAA,MAAM,WAAW;8DAA2D,sBAAsB;;CAejG,CAAA;AAID,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAEjE,4EAA4E;;;kEAtBA,sBAAsB;;;;AAuBlG,wBAA0D"}

package/dist/SideNav.js

@@ -18,6 +18,7 @@ function SideNav({
   return /*#__PURE__*/jsx(Component, {
     className: newClassName,
     "aria-label": ariaLabel,
+    "data-component": "SideNav",
     children: children
   });
 }
@@ -40,6 +41,7 @@ const SideNavLink = ({
     "aria-current": isReactRouter || selected ? 'page' : undefined,
     className: newClassName,
     ...rest,
+    "data-component": "SideNav.Link",
     children: children
   });
 };

package/dist/Skeleton/SkeletonBox.d.ts

@@ -9,6 +9,7 @@ export type SkeletonBoxProps = {
     className?: string;
     /** Controls whether and how long to delay rendering the SkeletonBox. Set to 'short' to delay by 300ms, 'long' to delay by 1000ms, or provide a custom number of milliseconds.*/
     delay?: 'short' | 'long' | number;
+    'data-component'?: string;
 } & HTMLProps<HTMLElement>;
 export declare const SkeletonBox: React.ForwardRefExoticComponent<Omit<SkeletonBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=SkeletonBox.d.ts.map

package/dist/Skeleton/SkeletonBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonBox.d.ts","sourceRoot":"","sources":["../../src/Skeleton/SkeletonBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAIxD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gLAAgL;IAChL,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;CAClC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,eAAO,MAAM,WAAW,mGA+BtB,CAAA"}
+{"version":3,"file":"SkeletonBox.d.ts","sourceRoot":"","sources":["../../src/Skeleton/SkeletonBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAIxD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gLAAgL;IAChL,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,eAAO,MAAM,WAAW,mGAgCtB,CAAA"}

package/dist/Skeleton/SkeletonBox.js

@@ -5,12 +5,13 @@ import classes from './SkeletonBox.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 
 const SkeletonBox = /*#__PURE__*/React.forwardRef(function SkeletonBox(t0, ref) {
-  const $ = c(23);
+  const $ = c(25);
   let className;
   let delay;
   let height;
   let props;
   let style;
+  let t1;
   let width;
   if ($[0] !== t0) {
     ({
@@ -19,6 +20,7 @@ const SkeletonBox = /*#__PURE__*/React.forwardRef(function SkeletonBox(t0, ref)
       className,
       style,
       delay,
+      "data-component": t1,
       ...props
     } = t0);
     $[0] = t0;
@@ -27,20 +29,23 @@ const SkeletonBox = /*#__PURE__*/React.forwardRef(function SkeletonBox(t0, ref)
     $[3] = height;
     $[4] = props;
     $[5] = style;
-    $[6] = width;
+    $[6] = t1;
+    $[7] = width;
   } else {
     className = $[1];
     delay = $[2];
     height = $[3];
     props = $[4];
     style = $[5];
-    width = $[6];
+    t1 = $[6];
+    width = $[7];
   }
+  const dataComponent = t1 === undefined ? "SkeletonBox" : t1;
   const [isVisible, setIsVisible] = useState(!delay);
-  let t1;
   let t2;
-  if ($[7] !== delay) {
-    t1 = () => {
+  let t3;
+  if ($[8] !== delay) {
+    t2 = () => {
       if (delay) {
         const timeoutId = setTimeout(() => {
           setIsVisible(true);
@@ -48,66 +53,68 @@ const SkeletonBox = /*#__PURE__*/React.forwardRef(function SkeletonBox(t0, ref)
         return () => clearTimeout(timeoutId);
       }
     };
-    t2 = [delay];
-    $[7] = delay;
-    $[8] = t1;
+    t3 = [delay];
+    $[8] = delay;
     $[9] = t2;
+    $[10] = t3;
   } else {
-    t1 = $[8];
     t2 = $[9];
+    t3 = $[10];
   }
-  useEffect(t1, t2);
+  useEffect(t2, t3);
   if (!isVisible) {
     return null;
   }
-  const t3 = ref;
-  let t4;
-  if ($[10] !== className) {
-    t4 = clsx(className, classes.SkeletonBox);
-    $[10] = className;
-    $[11] = t4;
-  } else {
-    t4 = $[11];
-  }
+  const t4 = ref;
   let t5;
-  if ($[12] !== style) {
-    t5 = style || {};
-    $[12] = style;
-    $[13] = t5;
+  if ($[11] !== className) {
+    t5 = clsx(className, classes.SkeletonBox);
+    $[11] = className;
+    $[12] = t5;
   } else {
-    t5 = $[13];
+    t5 = $[12];
   }
   let t6;
-  if ($[14] !== height || $[15] !== t5 || $[16] !== width) {
-    t6 = {
+  if ($[13] !== style) {
+    t6 = style || {};
+    $[13] = style;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== height || $[16] !== t6 || $[17] !== width) {
+    t7 = {
       height,
       width,
-      ...t5
+      ...t6
     };
-    $[14] = height;
-    $[15] = t5;
-    $[16] = width;
-    $[17] = t6;
+    $[15] = height;
+    $[16] = t6;
+    $[17] = width;
+    $[18] = t7;
   } else {
-    t6 = $[17];
+    t7 = $[18];
   }
-  let t7;
-  if ($[18] !== props || $[19] !== t3 || $[20] !== t4 || $[21] !== t6) {
-    t7 = /*#__PURE__*/jsx("div", {
-      ref: t3,
-      className: t4,
-      style: t6,
-      ...props
+  let t8;
+  if ($[19] !== dataComponent || $[20] !== props || $[21] !== t4 || $[22] !== t5 || $[23] !== t7) {
+    t8 = /*#__PURE__*/jsx("div", {
+      ref: t4,
+      className: t5,
+      style: t7,
+      ...props,
+      "data-component": dataComponent
     });
-    $[18] = props;
-    $[19] = t3;
-    $[20] = t4;
-    $[21] = t6;
-    $[22] = t7;
+    $[19] = dataComponent;
+    $[20] = props;
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t7;
+    $[24] = t8;
   } else {
-    t7 = $[22];
+    t8 = $[24];
   }
-  return t7;
+  return t8;
 });
 
 export { SkeletonBox };

package/dist/SkeletonText/SkeletonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../src/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAKpC,UAAU,iBAAkB,SAAQ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IACtE,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,CAAA;IACtH,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,iBAAS,YAAY,CAAC,EAAC,KAAS,EAAE,QAAQ,EAAE,IAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,qBAsC7G;AAED,OAAO,EAAC,YAAY,EAAC,CAAA;AACrB,YAAY,EAAC,iBAAiB,EAAC,CAAA"}
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../src/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAKpC,UAAU,iBAAkB,SAAQ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IACtE,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,CAAA;IACtH,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,iBAAS,YAAY,CAAC,EAAC,KAAS,EAAE,QAAQ,EAAE,IAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,qBAuC7G;AAED,OAAO,EAAC,YAAY,EAAC,CAAA;AACrB,YAAY,EAAC,iBAAiB,EAAC,CAAA"}

package/dist/SkeletonText/SkeletonText.js

@@ -62,12 +62,12 @@ function SkeletonText(t0) {
     let t5;
     if ($[12] !== rest || $[13] !== size || $[14] !== t3 || $[15] !== t4) {
       t5 = /*#__PURE__*/jsx(SkeletonBox, {
-        "data-component": "SkeletonText",
         "data-text-skeleton-size": size,
         width: "100%",
         className: t3,
         style: t4,
-        ...rest
+        ...rest,
+        "data-component": "SkeletonText"
       });
       $[12] = rest;
       $[13] = size;

package/dist/Spinner/Spinner.js

@@ -191,6 +191,7 @@ function Spinner(t0) {
   if ($[32] !== t14 || $[33] !== t15) {
     t16 = /*#__PURE__*/jsxs("span", {
       className: classes.Box,
+      "data-component": "Spinner",
       children: [t14, t15]
     });
     $[32] = t14;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.29.1-rc.42909d47c",
+  "version": "38.30.0-rc.dc0369509",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -131,7 +131,7 @@
     "@types/lodash.isempty": "4.4.9",
     "@types/lodash.isobject": "3.0.9",
     "@types/lodash.keyby": "4.6.9",
-    "@types/node": "20.12.11",
+    "@types/node": "26.0.0",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@types/react-is": "18.3.1",