fix(react-motion): Add guard to check if globals can be used (#31907)

change/@fluentui-react-motion-f6019e1f-96a3-4d91-b14a-5263e24433f4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Check if DOM is available before using Element global to avoid breaks in build.",
+  "packageName": "@fluentui/react-motion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion/library/src/hooks/useAnimateAtoms-node.test.tsx

@@ -0,0 +1,17 @@
+/*
+ * @jest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+describe('useAnimateAtoms (node)', () => {
+  it('handles node/server environments', () => {
+    const win = typeof document === 'object' ? document.defaultView?.window : undefined;
+    const SUPPORTS_WEB_ANIMATIONS = win && typeof win.Element.prototype.animate === 'function';
+
+    expect(win).toBe(undefined);
+    expect(SUPPORTS_WEB_ANIMATIONS).toBeFalsy();
+  });
+});
+
+export {};

packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import type { AnimationHandle, AtomMotion } from '../types';
 
+// eslint-disable-next-line no-restricted-globals
+const win = typeof document === 'object' ? document.defaultView?.window : undefined;
+
 // Heads up! "Element." is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.
-const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (() => typeof Element.prototype.animate === 'function')();
+const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (() => win && typeof win.Element.prototype.animate === 'function')();
 
 /**
  * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary