@primer/react 38.6.0-rc.7ef904ff4 → 38.6.0-rc.83fd63ead

package/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Minor Changes
 
+- [#7157](https://github.com/primer/react/pull/7157) [`eddd934`](https://github.com/primer/react/commit/eddd9340cab24ebf8054c79ca855028ed511c495) Thanks [@joshblack](https://github.com/joshblack)! - Add feature flag to control whether Spinner animations are synchronized
+
 - [#7277](https://github.com/primer/react/pull/7277) [`4a1c9a5`](https://github.com/primer/react/commit/4a1c9a5e48cdce7059358cd37a6d7f3f23e20c43) Thanks [@kendallgassner](https://github.com/kendallgassner)! - Added callback prop onActiveDescendantChanged to FilteredActionList
 
 ## 38.5.0

package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAO9B,CAAA"}
+{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAQ9B,CAAA"}

package/dist/FeatureFlags/DefaultFeatureFlags.js

@@ -6,7 +6,8 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_overlay_overflow: false,
   primer_react_select_panel_fullscreen_on_narrow: false,
   primer_react_select_panel_order_selected_at_top: false,
-  primer_react_select_panel_remove_active_descendant: false
+  primer_react_select_panel_remove_active_descendant: false,
+  primer_react_spinner_synchronize_animations: false
 });
 
 export { DefaultFeatureFlags };

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAKlE,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,4BAwDd;kBAhEQ,OAAO;;;AAoEhB,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,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"}

package/dist/Spinner/Spinner.js

@@ -1,8 +1,10 @@
 import { c } from 'react-compiler-runtime';
-import { useState, useEffect } from 'react';
-import classes from './Spinner.module.css.js';
 import { clsx } from 'clsx';
+import { useState, useEffect, useRef, useSyncExternalStore } from 'react';
+import classes from './Spinner.module.css.js';
+import { useMedia } from '../hooks/useMedia.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 import { useId } from '../hooks/useId.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
@@ -13,7 +15,7 @@ const sizeMap = {
 };
 function Spinner(t0) {
   var _ariaLabel;
-  const $ = c(29);
+  const $ = c(30);
   let ariaLabel;
   let className;
   let props;
@@ -51,6 +53,8 @@ function Spinner(t0) {
   const sizeKey = t1 === undefined ? "medium" : t1;
   const srText = t2 === undefined ? "Loading" : t2;
   const delay = t3 === undefined ? false : t3;
+  const syncAnimationsEnabled = useFeatureFlag("primer_react_spinner_synchronize_animations");
+  const animationRef = useSpinnerAnimation();
   const size = sizeMap[sizeKey];
   const hasHiddenLabel = srText !== null && ariaLabel === undefined;
   const labelId = useId();
@@ -78,20 +82,21 @@ function Spinner(t0) {
   if (!isVisible) {
     return null;
   }
-  const t6 = (_ariaLabel = ariaLabel) !== null && _ariaLabel !== void 0 ? _ariaLabel : undefined;
-  const t7 = hasHiddenLabel ? labelId : undefined;
-  let t8;
+  const t6 = syncAnimationsEnabled ? animationRef : undefined;
+  const t7 = (_ariaLabel = ariaLabel) !== null && _ariaLabel !== void 0 ? _ariaLabel : undefined;
+  const t8 = hasHiddenLabel ? labelId : undefined;
+  let t9;
   if ($[11] !== className) {
-    t8 = clsx(className, classes.SpinnerAnimation);
+    t9 = clsx(className, classes.SpinnerAnimation);
     $[11] = className;
-    $[12] = t8;
+    $[12] = t9;
   } else {
-    t8 = $[12];
+    t9 = $[12];
   }
   let t10;
-  let t9;
+  let t11;
   if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = /*#__PURE__*/jsx("circle", {
+    t10 = /*#__PURE__*/jsx("circle", {
       cx: "8",
       cy: "8",
       r: "7",
@@ -100,7 +105,7 @@ function Spinner(t0) {
       strokeWidth: "2",
       vectorEffect: "non-scaling-stroke"
     });
-    t10 = /*#__PURE__*/jsx("path", {
+    t11 = /*#__PURE__*/jsx("path", {
       d: "M15 8a7.002 7.002 0 00-7-7",
       stroke: "currentColor",
       strokeWidth: "2",
@@ -108,25 +113,26 @@ function Spinner(t0) {
       vectorEffect: "non-scaling-stroke"
     });
     $[13] = t10;
-    $[14] = t9;
+    $[14] = t11;
   } else {
     t10 = $[13];
-    t9 = $[14];
+    t11 = $[14];
   }
-  let t11;
-  if ($[15] !== props || $[16] !== size || $[17] !== style || $[18] !== t6 || $[19] !== t7 || $[20] !== t8) {
-    t11 = /*#__PURE__*/jsxs("svg", {
+  let t12;
+  if ($[15] !== props || $[16] !== size || $[17] !== style || $[18] !== t6 || $[19] !== t7 || $[20] !== t8 || $[21] !== t9) {
+    t12 = /*#__PURE__*/jsxs("svg", {
+      ref: t6,
       height: size,
       width: size,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": true,
-      "aria-label": t6,
-      "aria-labelledby": t7,
-      className: t8,
+      "aria-label": t7,
+      "aria-labelledby": t8,
+      className: t9,
       style: style,
       ...props,
-      children: [t9, t10]
+      children: [t10, t11]
     });
     $[15] = props;
     $[16] = size;
@@ -134,37 +140,128 @@ function Spinner(t0) {
     $[18] = t6;
     $[19] = t7;
     $[20] = t8;
-    $[21] = t11;
+    $[21] = t9;
+    $[22] = t12;
   } else {
-    t11 = $[21];
+    t12 = $[22];
   }
-  let t12;
-  if ($[22] !== hasHiddenLabel || $[23] !== labelId || $[24] !== srText) {
-    t12 = hasHiddenLabel ? /*#__PURE__*/jsx(VisuallyHidden, {
+  let t13;
+  if ($[23] !== hasHiddenLabel || $[24] !== labelId || $[25] !== srText) {
+    t13 = hasHiddenLabel ? /*#__PURE__*/jsx(VisuallyHidden, {
       id: labelId,
       children: srText
     }) : null;
-    $[22] = hasHiddenLabel;
-    $[23] = labelId;
-    $[24] = srText;
-    $[25] = t12;
+    $[23] = hasHiddenLabel;
+    $[24] = labelId;
+    $[25] = srText;
+    $[26] = t13;
   } else {
-    t12 = $[25];
+    t13 = $[26];
   }
-  let t13;
-  if ($[26] !== t11 || $[27] !== t12) {
-    t13 = /*#__PURE__*/jsxs("span", {
+  let t14;
+  if ($[27] !== t12 || $[28] !== t13) {
+    t14 = /*#__PURE__*/jsxs("span", {
       className: classes.Box,
-      children: [t11, t12]
+      children: [t12, t13]
     });
-    $[26] = t11;
     $[27] = t12;
     $[28] = t13;
+    $[29] = t14;
   } else {
-    t13 = $[28];
+    t14 = $[29];
   }
-  return t13;
+  return t14;
 }
 Spinner.displayName = 'Spinner';
+const animationTimingStore = {
+  subscribers: new Set(),
+  value: {
+    startTime: null
+  },
+  update(startTime) {
+    const value = {
+      startTime
+    };
+    animationTimingStore.value = value;
+    for (const subscriber of animationTimingStore.subscribers) {
+      subscriber();
+    }
+  },
+  subscribe(subscriber) {
+    animationTimingStore.subscribers.add(subscriber);
+    return () => {
+      animationTimingStore.subscribers.delete(subscriber);
+    };
+  },
+  getSnapshot() {
+    return animationTimingStore.value;
+  },
+  getServerSnapshot() {
+    return animationTimingStore.value;
+  }
+};
+
+/**
+ * A utility hook for reading a common `startTime` value so that all animations
+ * are in sync. This is a global value and is coordinated through `useSyncExternalStore`.
+ */
+function useAnimationTiming() {
+  return useSyncExternalStore(animationTimingStore.subscribe, animationTimingStore.getSnapshot, animationTimingStore.getServerSnapshot);
+}
+
+/**
+ * Uses a technique from Spectrum to coordinate animations:
+ * @see https://github.com/adobe/react-spectrum/blob/ab5e6f3dba4235dafab9f81f8b5c506ce5f11230/packages/%40react-spectrum/s2/src/Skeleton.tsx#L21
+ */
+function useSpinnerAnimation() {
+  const $ = c(3);
+  const ref = useRef(null);
+  const noMotionPreference = useMedia("(prefers-reduced-motion: no-preference)", false);
+  const animationTiming = useAnimationTiming();
+  let t0;
+  if ($[0] !== animationTiming || $[1] !== noMotionPreference) {
+    t0 = element => {
+      if (!element) {
+        return;
+      }
+      if (ref.current !== null) {
+        return;
+      }
+      if (noMotionPreference) {
+        const cssAnimation = element.getAnimations().find(_temp);
+        cssAnimation === null || cssAnimation === void 0 ? void 0 : cssAnimation.pause();
+        ref.current = element.animate([{
+          transform: "rotate(0deg)"
+        }, {
+          transform: "rotate(360deg)"
+        }], {
+          duration: 1000,
+          easing: "cubic-bezier(0,0,1,1)",
+          iterations: Infinity
+        });
+        if (animationTiming.startTime === null) {
+          var _cssAnimation$startTi;
+          const startTime = (_cssAnimation$startTi = cssAnimation === null || cssAnimation === void 0 ? void 0 : cssAnimation.startTime) !== null && _cssAnimation$startTi !== void 0 ? _cssAnimation$startTi : 0;
+          animationTimingStore.update(startTime);
+          ref.current.startTime = startTime;
+        } else {
+          ref.current.startTime = animationTiming.startTime;
+        }
+      }
+    };
+    $[0] = animationTiming;
+    $[1] = noMotionPreference;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+function _temp(animation) {
+  if (animation instanceof CSSAnimation) {
+    return animation.animationName.startsWith("Spinner") && animation.animationName.endsWith("rotate-keyframes");
+  }
+  return false;
+}
 
 export { Spinner as default };

package/package.json

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