@primer/react 38.8.0-rc.d3b27e56d → 38.8.0-rc.e1ad889fa

package/CHANGELOG.md

@@ -6,13 +6,17 @@
 
 - [#7455](https://github.com/primer/react/pull/7455) [`a86c183`](https://github.com/primer/react/commit/a86c183f5ea7add7584f895cff3027a7db35675e) Thanks [@HiroAgustin](https://github.com/HiroAgustin)! - Remove ConfirmationDialog custom renders to ensure visual parity with Dialog
 
+- [#7438](https://github.com/primer/react/pull/7438) [`160c1c4`](https://github.com/primer/react/commit/160c1c4cf1c5111dd46b68471d49733f47f524cc) Thanks [@francinelucca](https://github.com/francinelucca)! - feat: make Spinner's delay customizable
+
 - [#7436](https://github.com/primer/react/pull/7436) [`9a4e46c`](https://github.com/primer/react/commit/9a4e46cf902a5c2e046ca7771211536ae0bd08ed) Thanks [@TylerJDev](https://github.com/TylerJDev)! - FilteredActionList: Adds new prop `scrollBehavior` to allow customization of scroll behavior
 
+- [#7448](https://github.com/primer/react/pull/7448) [`838859d`](https://github.com/primer/react/commit/838859d8ee2afc2afca71a28114020a14a68b297) Thanks [@francinelucca](https://github.com/francinelucca)! - feat(SkeletonBox): add customizable delay
+
 ### Patch Changes
 
 - [#7427](https://github.com/primer/react/pull/7427) [`4bb6620`](https://github.com/primer/react/commit/4bb66203f0e6cd5d717b27d591ec5df169c1ad1a) Thanks [@barmo](https://github.com/barmo)! - Change actionlist item inline description styling from flex to block to fix overflow
 
-- [#7451](https://github.com/primer/react/pull/7451) [`0fc4523`](https://github.com/primer/react/commit/0fc45237ef3f912c86663817eb8983875b4c8d7e) Thanks [@daantosaurus](https://github.com/daantosaurus)! - UnderlineNav.Item: Fix layout issues when children contain React elements by extracting only direct text content for the `data-content` attribute.
+- [#7462](https://github.com/primer/react/pull/7462) [`5579c9b`](https://github.com/primer/react/commit/5579c9b0298091ba83c3ea1957ff5878651cc9a8) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - UnderlineNav.Item: Fix layout issues when children contain React elements by extracting only direct text content for the `data-content` attribute [#7451](https://github.com/primer/react/pull/7451)
 
 ## 38.7.1
 

package/dist/Skeleton/SkeletonBox.d.ts

@@ -7,6 +7,8 @@ export type SkeletonBoxProps = {
     width?: CSSProperties['width'];
     /** The className of the skeleton box */
     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;
 } & 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,KAAK,MAAM,OAAO,CAAA;AACzB,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;CACnB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,eAAO,MAAM,WAAW,mGAYtB,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;CAClC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,eAAO,MAAM,WAAW,mGA+BtB,CAAA"}

package/dist/Skeleton/SkeletonBox.js

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

package/dist/Spinner/Spinner.d.ts

@@ -14,8 +14,8 @@ export type SpinnerProps = {
     'aria-label'?: string;
     className?: string;
     style?: React.CSSProperties;
-    /** Whether to delay the spinner before rendering by the defined 1000ms. */
-    delay?: boolean;
+    /** Controls whether and how long to delay rendering the spinner. Set to `true` to delay by 1000ms, `'short'` to delay by 300ms, `'long'` to delay by 1000ms, or provide a custom number of milliseconds. */
+    delay?: boolean | 'short' | 'long' | number;
 } & HTMLDataAttributes;
 declare function Spinner({ size: sizeKey, srText, 'aria-label': ariaLabel, className, style, delay, ...props }: SpinnerProps): React.JSX.Element | null;
 declare namespace Spinner {

package/dist/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAMlE,QAAA,MAAM,OAAO;;;;CAIZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,0KAA0K;IAC1K,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,GAAG,kBAAkB,CAAA;AAEtB,iBAAS,OAAO,CAAC,EACf,IAAI,EAAE,OAAkB,EACxB,MAAkB,EAClB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,KAAK,EACL,KAAa,EACb,GAAG,KAAK,EACT,EAAE,YAAY,4BA2Dd;kBAnEQ,OAAO;;;AAkMhB,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAMlE,QAAA,MAAM,OAAO;;;;CAIZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,0KAA0K;IAC1K,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,4MAA4M;IAC5M,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;CAC5C,GAAG,kBAAkB,CAAA;AAEtB,iBAAS,OAAO,CAAC,EACf,IAAI,EAAE,OAAkB,EACxB,MAAkB,EAClB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,KAAK,EACL,KAAa,EACb,GAAG,KAAK,EACT,EAAE,YAAY,4BA4Dd;kBApEQ,OAAO;;;AAmMhB,eAAe,OAAO,CAAA"}

package/dist/Spinner/Spinner.js

@@ -64,9 +64,10 @@ function Spinner(t0) {
   if ($[8] !== delay) {
     t4 = () => {
       if (delay) {
+        const delayDuration = typeof delay === "number" ? delay : delay === "short" ? 300 : 1000;
         const timeoutId = setTimeout(() => {
           setIsVisible(true);
-        }, 1000);
+        }, delayDuration);
         return () => clearTimeout(timeoutId);
       }
     };

package/generated/components.json

@@ -6307,6 +6307,12 @@
       ],
       "importPath": "@primer/react",
       "props": [
+        {
+          "name": "delay",
+          "type": "'short' | 'long' | number",
+          "description": "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.",
+          "defaultValue": "false"
+        },
         {
           "name": "width",
           "type": "string",
@@ -6492,9 +6498,9 @@
         },
         {
           "defaultValue": "false",
-          "description": "Whether to delay the spinner before rendering by the defined 1000ms.",
+          "description": "Controls whether and how long to delay rendering the spinner. Set to `true` to delay by 1000ms, `'short'` to delay by 300ms, `'long'` to delay by 1000ms, or provide a custom number of milliseconds.",
           "name": "delay",
-          "type": "boolean"
+          "type": "boolean | 'short' | 'long' | number"
         }
       ],
       "status": "alpha",
@@ -6517,7 +6523,7 @@
         },
         {
           "id": "components-spinner-features--with-delay",
-          "code": "() => <Spinner delay />"
+          "code": "() => <Spinner delay=\"long\" />"
         }
       ],
       "subcomponents": []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.8.0-rc.d3b27e56d",
+  "version": "38.8.0-rc.e1ad889fa",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",