@fluentui/react-utilities 9.18.8 → 9.18.10

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Mon, 06 May 2024 12:48:54 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Jun 2024 15:22:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.18.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.18.10)
+
+Thu, 06 Jun 2024 15:22:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.18.9..@fluentui/react-utilities_v9.18.10)
+
+### Patches
+
+- chore: useControllableState warns if controlled and uncontrolled at the same time ([PR #31461](https://github.com/microsoft/fluentui/pull/31461) by bernardo.sunderhus@gmail.com)
+- fix: use globals from Fluent context. ([PR #30967](https://github.com/microsoft/fluentui/pull/30967) by seanmonahan@microsoft.com)
+
+## [9.18.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.18.9)
+
+Mon, 20 May 2024 12:45:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.18.8..@fluentui/react-utilities_v9.18.9)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+
 ## [9.18.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.18.8)
 
-Mon, 06 May 2024 12:48:54 GMT 
+Mon, 06 May 2024 12:55:02 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.18.7..@fluentui/react-utilities_v9.18.8)
 
 ### Patches

package/lib/hooks/useAnimationFrame.js

@@ -1,5 +1,5 @@
-import { canUseDOM } from '../ssr/canUseDOM';
 import { useBrowserTimer } from './useBrowserTimer';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 const setAnimationFrameNoop = (callback)=>{
     callback(0);
     return 0;
@@ -13,9 +13,9 @@ const cancelAnimationFrameNoop = (handle)=>handle;
  *
  * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.
  */ export function useAnimationFrame() {
-    const isDOM = canUseDOM();
-    // TODO: figure it out a way to not call global.requestAnimationFrame and instead infer window from some context
-    const setAnimationFrame = isDOM ? requestAnimationFrame : setAnimationFrameNoop;
-    const clearAnimationFrame = isDOM ? cancelAnimationFrame : cancelAnimationFrameNoop;
+    const { targetDocument } = useFluent();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const setAnimationFrame = win ? win.requestAnimationFrame : setAnimationFrameNoop;
+    const clearAnimationFrame = win ? win.cancelAnimationFrame : cancelAnimationFrameNoop;
     return useBrowserTimer(setAnimationFrame, clearAnimationFrame);
 }

package/lib/hooks/useAnimationFrame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAnimationFrame.ts"],"sourcesContent":["import { canUseDOM } from '../ssr/canUseDOM';\nimport { useBrowserTimer } from './useBrowserTimer';\n\nconst setAnimationFrameNoop = (callback: FrameRequestCallback) => {\n  callback(0);\n  return 0;\n};\nconst cancelAnimationFrameNoop = (handle: number) => handle;\n\n/**\n * @internal\n * Helper to manage a browser requestAnimationFrame.\n * Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.\n */\nexport function useAnimationFrame() {\n  const isDOM = canUseDOM();\n\n  // TODO: figure it out a way to not call global.requestAnimationFrame and instead infer window from some context\n  const setAnimationFrame = isDOM ? requestAnimationFrame : setAnimationFrameNoop;\n  const clearAnimationFrame = isDOM ? cancelAnimationFrame : cancelAnimationFrameNoop;\n\n  return useBrowserTimer(setAnimationFrame, clearAnimationFrame);\n}\n"],"names":["canUseDOM","useBrowserTimer","setAnimationFrameNoop","callback","cancelAnimationFrameNoop","handle","useAnimationFrame","isDOM","setAnimationFrame","requestAnimationFrame","clearAnimationFrame","cancelAnimationFrame"],"mappings":"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,MAAMC,wBAAwB,CAACC;IAC7BA,SAAS;IACT,OAAO;AACT;AACA,MAAMC,2BAA2B,CAACC,SAAmBA;AAErD;;;;;;;CAOC,GACD,OAAO,SAASC;IACd,MAAMC,QAAQP;IAEd,gHAAgH;IAChH,MAAMQ,oBAAoBD,QAAQE,wBAAwBP;IAC1D,MAAMQ,sBAAsBH,QAAQI,uBAAuBP;IAE3D,OAAOH,gBAAgBO,mBAAmBE;AAC5C"}
+{"version":3,"sources":["useAnimationFrame.ts"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setAnimationFrameNoop = (callback: FrameRequestCallback) => {\n  callback(0);\n  return 0;\n};\nconst cancelAnimationFrameNoop = (handle: number) => handle;\n\n/**\n * @internal\n * Helper to manage a browser requestAnimationFrame.\n * Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.\n */\nexport function useAnimationFrame() {\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n\n  const setAnimationFrame = win ? win.requestAnimationFrame : setAnimationFrameNoop;\n  const clearAnimationFrame = win ? win.cancelAnimationFrame : cancelAnimationFrameNoop;\n\n  return useBrowserTimer(setAnimationFrame, clearAnimationFrame);\n}\n"],"names":["useBrowserTimer","useFluent_unstable","useFluent","setAnimationFrameNoop","callback","cancelAnimationFrameNoop","handle","useAnimationFrame","targetDocument","win","defaultView","setAnimationFrame","requestAnimationFrame","clearAnimationFrame","cancelAnimationFrame"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AACpD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,wBAAwB,CAACC;IAC7BA,SAAS;IACT,OAAO;AACT;AACA,MAAMC,2BAA2B,CAACC,SAAmBA;AAErD;;;;;;;CAOC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGN;IAC3B,MAAMO,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAMC,oBAAoBF,MAAMA,IAAIG,qBAAqB,GAAGT;IAC5D,MAAMU,sBAAsBJ,MAAMA,IAAIK,oBAAoB,GAAGT;IAE7D,OAAOL,gBAAgBW,mBAAmBE;AAC5C"}

package/lib/hooks/useControllableState.js

@@ -19,6 +19,16 @@ function isFactoryDispatch(newState) {
  * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.
  *
  */ export const useControllableState = (options)=>{
+    if (process.env.NODE_ENV !== 'production') {
+        if (options.state !== undefined && options.defaultState !== undefined) {
+            // eslint-disable-next-line no-console
+            console.error(`@fluentui/react-utilities [useControllableState]:
+A component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).
+Decide between using a controlled or uncontrolled component and remove one of this props.
+More info: https://reactjs.org/link/controlled-components
+${new Error().stack}`);
+        }
+    }
     const [internalState, setInternalState] = React.useState(()=>{
         if (options.defaultState === undefined) {
             return options.initialState;
@@ -64,7 +74,7 @@ function isInitializer(value) {
                 const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
                 const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
                 // eslint-disable-next-line no-console
-                console.error(`@fluentui/react-utilities [${useControllableState.name}]:
+                console.error(`@fluentui/react-utilities [useControllableState]:
 A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.
 Decide between using a controlled or uncontrolled input element for the lifetime of the component.
 More info: https://reactjs.org/link/controlled-components

package/lib/hooks/useControllableState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useControllableState.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n  /**\n   * User-provided default state or initializer, for uncontrolled usage.\n   */\n  defaultState?: State | (() => State);\n  /**\n   * User-provided controlled state. `undefined` means internal state will be used.\n   */\n  state: State | undefined;\n  /**\n   * Used as the initial state if `state` and `defaultState` are both `undefined`.\n   * If `undefined` is the correct initial state, pass that here.\n   */\n  initialState: State;\n};\n\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n  return typeof newState === 'function';\n}\n\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */\nexport const useControllableState = <State>(\n  options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n  const [internalState, setInternalState] = React.useState<State>(() => {\n    if (options.defaultState === undefined) {\n      return options.initialState;\n    }\n    return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n  });\n\n  // Heads up!\n  // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n\n  const stateValueRef = React.useRef<State | undefined>(options.state);\n\n  React.useEffect(() => {\n    stateValueRef.current = options.state;\n  }, [options.state]);\n\n  const setControlledState = React.useCallback((newState: React.SetStateAction<State>) => {\n    if (isFactoryDispatch(newState)) {\n      newState(stateValueRef.current as State);\n    }\n  }, []);\n\n  return useIsControlled(options.state) ? [options.state, setControlledState] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n  return typeof value === 'function';\n}\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = <V>(controlledValue: V | undefined): controlledValue is V => {\n  const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // We don't want these warnings in production even though it is against native behaviour\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (isControlled !== (controlledValue !== undefined)) {\n        const error = new Error();\n\n        const controlWarning = isControlled\n          ? 'a controlled value to be uncontrolled'\n          : 'an uncontrolled value to be controlled';\n\n        const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n        // eslint-disable-next-line no-console\n        console.error(/** #__DE-INDENT__ */ `\n          @fluentui/react-utilities [${useControllableState.name}]:\n          A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\n          Decide between using a controlled or uncontrolled input element for the lifetime of the component.\n          More info: https://reactjs.org/link/controlled-components\n          ${error.stack}\n        `);\n      }\n    }, [isControlled, controlledValue]);\n  }\n\n  return isControlled;\n};\n"],"names":["React","isFactoryDispatch","newState","useControllableState","options","internalState","setInternalState","useState","defaultState","undefined","initialState","isInitializer","stateValueRef","useRef","state","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","name","stack"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAqB/B,SAASC,kBAAyBC,QAAqC;IACrE,OAAO,OAAOA,aAAa;AAC7B;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,uBAAuB,CAClCC;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGN,MAAMO,QAAQ,CAAQ;QAC9D,IAAIH,QAAQI,YAAY,KAAKC,WAAW;YACtC,OAAOL,QAAQM,YAAY;QAC7B;QACA,OAAOC,cAAcP,QAAQI,YAAY,IAAIJ,QAAQI,YAAY,KAAKJ,QAAQI,YAAY;IAC5F;IAEA,YAAY;IACZ,6FAA6F;IAE7F,MAAMI,gBAAgBZ,MAAMa,MAAM,CAAoBT,QAAQU,KAAK;IAEnEd,MAAMe,SAAS,CAAC;QACdH,cAAcI,OAAO,GAAGZ,QAAQU,KAAK;IACvC,GAAG;QAACV,QAAQU,KAAK;KAAC;IAElB,MAAMG,qBAAqBjB,MAAMkB,WAAW,CAAC,CAAChB;QAC5C,IAAID,kBAAkBC,WAAW;YAC/BA,SAASU,cAAcI,OAAO;QAChC;IACF,GAAG,EAAE;IAEL,OAAOG,gBAAgBf,QAAQU,KAAK,IAAI;QAACV,QAAQU,KAAK;QAAEG;KAAmB,GAAG;QAACZ;QAAeC;KAAiB;AACjH,EAAE;AAEF,SAASK,cAAqBS,KAA4B;IACxD,OAAO,OAAOA,UAAU;AAC1B;AAEA;;;;CAIC,GACD,MAAMD,kBAAkB,CAAIE;IAC1B,MAAM,CAACC,aAAa,GAAGtB,MAAMO,QAAQ,CAAU,IAAMc,oBAAoBZ;IAEzE,IAAIc,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDzB,MAAMe,SAAS,CAAC;YACd,IAAIO,iBAAkBD,CAAAA,oBAAoBZ,SAAQ,GAAI;gBACpD,MAAMiB,QAAQ,IAAIC;gBAElB,MAAMC,iBAAiBN,eACnB,0CACA;gBAEJ,MAAMO,mBAAmBP,eAAe,4BAA4B;gBAEpE,sCAAsC;gBACtCQ,QAAQJ,KAAK,CAAuB,CAAC,2BACR,EAAEvB,qBAAqB4B,IAAI,CAAC;wBAC/B,EAAEH,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEH,MAAMM,KAAK,CAAC,AAChB,CAAC;YACH;QACF,GAAG;YAACV;YAAcD;SAAgB;IACpC;IAEA,OAAOC;AACT"}
+{"version":3,"sources":["useControllableState.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n  /**\n   * User-provided default state or initializer, for uncontrolled usage.\n   */\n  defaultState?: State | (() => State);\n  /**\n   * User-provided controlled state. `undefined` means internal state will be used.\n   */\n  state: State | undefined;\n  /**\n   * Used as the initial state if `state` and `defaultState` are both `undefined`.\n   * If `undefined` is the correct initial state, pass that here.\n   */\n  initialState: State;\n};\n\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n  return typeof newState === 'function';\n}\n\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */\nexport const useControllableState = <State>(\n  options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (options.state !== undefined && options.defaultState !== undefined) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n      @fluentui/react-utilities [useControllableState]:\n      A component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).\n      Decide between using a controlled or uncontrolled component and remove one of this props.\n      More info: https://reactjs.org/link/controlled-components\n      ${new Error().stack}\n    `);\n    }\n  }\n  const [internalState, setInternalState] = React.useState<State>(() => {\n    if (options.defaultState === undefined) {\n      return options.initialState;\n    }\n    return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n  });\n\n  // Heads up!\n  // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n\n  const stateValueRef = React.useRef<State | undefined>(options.state);\n\n  React.useEffect(() => {\n    stateValueRef.current = options.state;\n  }, [options.state]);\n\n  const setControlledState = React.useCallback((newState: React.SetStateAction<State>) => {\n    if (isFactoryDispatch(newState)) {\n      newState(stateValueRef.current as State);\n    }\n  }, []);\n\n  return useIsControlled(options.state) ? [options.state, setControlledState] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n  return typeof value === 'function';\n}\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = <V>(controlledValue: V | undefined): controlledValue is V => {\n  const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // We don't want these warnings in production even though it is against native behaviour\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (isControlled !== (controlledValue !== undefined)) {\n        const error = new Error();\n\n        const controlWarning = isControlled\n          ? 'a controlled value to be uncontrolled'\n          : 'an uncontrolled value to be controlled';\n\n        const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n        // eslint-disable-next-line no-console\n        console.error(/** #__DE-INDENT__ */ `\n          @fluentui/react-utilities [useControllableState]:\n          A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\n          Decide between using a controlled or uncontrolled input element for the lifetime of the component.\n          More info: https://reactjs.org/link/controlled-components\n          ${error.stack}\n        `);\n      }\n    }, [isControlled, controlledValue]);\n  }\n\n  return isControlled;\n};\n"],"names":["React","isFactoryDispatch","newState","useControllableState","options","process","env","NODE_ENV","state","undefined","defaultState","console","error","Error","stack","internalState","setInternalState","useState","initialState","isInitializer","stateValueRef","useRef","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","controlWarning","undefinedWarning"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAqB/B,SAASC,kBAAyBC,QAAqC;IACrE,OAAO,OAAOA,aAAa;AAC7B;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,uBAAuB,CAClCC;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIH,QAAQI,KAAK,KAAKC,aAAaL,QAAQM,YAAY,KAAKD,WAAW;YACrE,sCAAsC;YACtCE,QAAQC,KAAK,CAAuB,CAAC;;;;AAKrC,EAAE,IAAIC,QAAQC,KAAK,CAAC,AACtB,CAAC;QACD;IACF;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGhB,MAAMiB,QAAQ,CAAQ;QAC9D,IAAIb,QAAQM,YAAY,KAAKD,WAAW;YACtC,OAAOL,QAAQc,YAAY;QAC7B;QACA,OAAOC,cAAcf,QAAQM,YAAY,IAAIN,QAAQM,YAAY,KAAKN,QAAQM,YAAY;IAC5F;IAEA,YAAY;IACZ,6FAA6F;IAE7F,MAAMU,gBAAgBpB,MAAMqB,MAAM,CAAoBjB,QAAQI,KAAK;IAEnER,MAAMsB,SAAS,CAAC;QACdF,cAAcG,OAAO,GAAGnB,QAAQI,KAAK;IACvC,GAAG;QAACJ,QAAQI,KAAK;KAAC;IAElB,MAAMgB,qBAAqBxB,MAAMyB,WAAW,CAAC,CAACvB;QAC5C,IAAID,kBAAkBC,WAAW;YAC/BA,SAASkB,cAAcG,OAAO;QAChC;IACF,GAAG,EAAE;IAEL,OAAOG,gBAAgBtB,QAAQI,KAAK,IAAI;QAACJ,QAAQI,KAAK;QAAEgB;KAAmB,GAAG;QAACT;QAAeC;KAAiB;AACjH,EAAE;AAEF,SAASG,cAAqBQ,KAA4B;IACxD,OAAO,OAAOA,UAAU;AAC1B;AAEA;;;;CAIC,GACD,MAAMD,kBAAkB,CAAIE;IAC1B,MAAM,CAACC,aAAa,GAAG7B,MAAMiB,QAAQ,CAAU,IAAMW,oBAAoBnB;IAEzE,IAAIJ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDP,MAAMsB,SAAS,CAAC;YACd,IAAIO,iBAAkBD,CAAAA,oBAAoBnB,SAAQ,GAAI;gBACpD,MAAMG,QAAQ,IAAIC;gBAElB,MAAMiB,iBAAiBD,eACnB,0CACA;gBAEJ,MAAME,mBAAmBF,eAAe,4BAA4B;gBAEpE,sCAAsC;gBACtClB,QAAQC,KAAK,CAAuB,CAAC;wBAEX,EAAEkB,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEnB,MAAME,KAAK,CAAC,AAChB,CAAC;YACH;QACF,GAAG;YAACe;YAAcD;SAAgB;IACpC;IAEA,OAAOC;AACT"}

package/lib/hooks/useTimeout.js

@@ -1,4 +1,7 @@
 import { useBrowserTimer } from './useBrowserTimer';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const setTimeoutNoop = (_callback)=>-1;
+const clearTimeoutNoop = (_handle)=>undefined;
 /**
  * @internal
  * Helper to manage a browser timeout.
@@ -7,6 +10,9 @@ import { useBrowserTimer } from './useBrowserTimer';
  *
  * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
  */ export function useTimeout() {
-    // TODO: figure it out a way to not call global.setTimeout and instead infer window from some context
-    return useBrowserTimer(setTimeout, clearTimeout);
+    const { targetDocument } = useFluent();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const setTimerFn = win ? win.setTimeout : setTimeoutNoop;
+    const clearTimerFn = win ? win.clearTimeout : clearTimeoutNoop;
+    return useBrowserTimer(setTimerFn, clearTimerFn);
 }

package/lib/hooks/useTimeout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTimeout.ts"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\n\n/**\n * @internal\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */\nexport function useTimeout() {\n  // TODO: figure it out a way to not call global.setTimeout and instead infer window from some context\n  return useBrowserTimer(setTimeout, clearTimeout);\n}\n"],"names":["useBrowserTimer","useTimeout","setTimeout","clearTimeout"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD;;;;;;;CAOC,GACD,OAAO,SAASC;IACd,qGAAqG;IACrG,OAAOD,gBAAgBE,YAAYC;AACrC"}
+{"version":3,"sources":["useTimeout.ts"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setTimeoutNoop = (_callback: Function) => -1;\nconst clearTimeoutNoop = (_handle: number) => undefined;\n\n/**\n * @internal\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */\nexport function useTimeout() {\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n\n  const setTimerFn = win ? win.setTimeout : setTimeoutNoop;\n  const clearTimerFn = win ? win.clearTimeout : clearTimeoutNoop;\n\n  return useBrowserTimer(setTimerFn, clearTimerFn);\n}\n"],"names":["useBrowserTimer","useFluent_unstable","useFluent","setTimeoutNoop","_callback","clearTimeoutNoop","_handle","undefined","useTimeout","targetDocument","win","defaultView","setTimerFn","setTimeout","clearTimerFn","clearTimeout"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AACpD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,iBAAiB,CAACC,YAAwB,CAAC;AACjD,MAAMC,mBAAmB,CAACC,UAAoBC;AAE9C;;;;;;;CAOC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGP;IAC3B,MAAMQ,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAMC,aAAaF,MAAMA,IAAIG,UAAU,GAAGV;IAC1C,MAAMW,eAAeJ,MAAMA,IAAIK,YAAY,GAAGV;IAE9C,OAAOL,gBAAgBY,YAAYE;AACrC"}

package/lib-commonjs/hooks/useAnimationFrame.js

@@ -8,17 +8,17 @@ Object.defineProperty(exports, "useAnimationFrame", {
         return useAnimationFrame;
     }
 });
-const _canUseDOM = require("../ssr/canUseDOM");
 const _useBrowserTimer = require("./useBrowserTimer");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const setAnimationFrameNoop = (callback)=>{
     callback(0);
     return 0;
 };
 const cancelAnimationFrameNoop = (handle)=>handle;
 function useAnimationFrame() {
-    const isDOM = (0, _canUseDOM.canUseDOM)();
-    // TODO: figure it out a way to not call global.requestAnimationFrame and instead infer window from some context
-    const setAnimationFrame = isDOM ? requestAnimationFrame : setAnimationFrameNoop;
-    const clearAnimationFrame = isDOM ? cancelAnimationFrame : cancelAnimationFrameNoop;
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const setAnimationFrame = win ? win.requestAnimationFrame : setAnimationFrameNoop;
+    const clearAnimationFrame = win ? win.cancelAnimationFrame : cancelAnimationFrameNoop;
     return (0, _useBrowserTimer.useBrowserTimer)(setAnimationFrame, clearAnimationFrame);
 }

package/lib-commonjs/hooks/useAnimationFrame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAnimationFrame.js"],"sourcesContent":["import { canUseDOM } from '../ssr/canUseDOM';\nimport { useBrowserTimer } from './useBrowserTimer';\nconst setAnimationFrameNoop = (callback)=>{\n    callback(0);\n    return 0;\n};\nconst cancelAnimationFrameNoop = (handle)=>handle;\n/**\n * @internal\n * Helper to manage a browser requestAnimationFrame.\n * Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.\n */ export function useAnimationFrame() {\n    const isDOM = canUseDOM();\n    // TODO: figure it out a way to not call global.requestAnimationFrame and instead infer window from some context\n    const setAnimationFrame = isDOM ? requestAnimationFrame : setAnimationFrameNoop;\n    const clearAnimationFrame = isDOM ? cancelAnimationFrame : cancelAnimationFrameNoop;\n    return useBrowserTimer(setAnimationFrame, clearAnimationFrame);\n}\n"],"names":["useAnimationFrame","setAnimationFrameNoop","callback","cancelAnimationFrameNoop","handle","isDOM","canUseDOM","setAnimationFrame","requestAnimationFrame","clearAnimationFrame","cancelAnimationFrame","useBrowserTimer"],"mappings":";;;;+BAcoBA;;;eAAAA;;;2BAdM;iCACM;AAChC,MAAMC,wBAAwB,CAACC;IAC3BA,SAAS;IACT,OAAO;AACX;AACA,MAAMC,2BAA2B,CAACC,SAASA;AAQhC,SAASJ;IAChB,MAAMK,QAAQC,IAAAA,oBAAS;IACvB,gHAAgH;IAChH,MAAMC,oBAAoBF,QAAQG,wBAAwBP;IAC1D,MAAMQ,sBAAsBJ,QAAQK,uBAAuBP;IAC3D,OAAOQ,IAAAA,gCAAe,EAACJ,mBAAmBE;AAC9C"}
+{"version":3,"sources":["useAnimationFrame.js"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nconst setAnimationFrameNoop = (callback)=>{\n    callback(0);\n    return 0;\n};\nconst cancelAnimationFrameNoop = (handle)=>handle;\n/**\n * @internal\n * Helper to manage a browser requestAnimationFrame.\n * Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.\n */ export function useAnimationFrame() {\n    const { targetDocument } = useFluent();\n    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;\n    const setAnimationFrame = win ? win.requestAnimationFrame : setAnimationFrameNoop;\n    const clearAnimationFrame = win ? win.cancelAnimationFrame : cancelAnimationFrameNoop;\n    return useBrowserTimer(setAnimationFrame, clearAnimationFrame);\n}\n"],"names":["useAnimationFrame","setAnimationFrameNoop","callback","cancelAnimationFrameNoop","handle","targetDocument","useFluent","win","defaultView","setAnimationFrame","requestAnimationFrame","clearAnimationFrame","cancelAnimationFrame","useBrowserTimer"],"mappings":";;;;+BAcoBA;;;eAAAA;;;iCAdY;qCACgB;AAChD,MAAMC,wBAAwB,CAACC;IAC3BA,SAAS;IACT,OAAO;AACX;AACA,MAAMC,2BAA2B,CAACC,SAASA;AAQhC,SAASJ;IAChB,MAAM,EAAEK,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,MAAMF,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeG,WAAW;IACtG,MAAMC,oBAAoBF,MAAMA,IAAIG,qBAAqB,GAAGT;IAC5D,MAAMU,sBAAsBJ,MAAMA,IAAIK,oBAAoB,GAAGT;IAC7D,OAAOU,IAAAA,gCAAe,EAACJ,mBAAmBE;AAC9C"}

package/lib-commonjs/hooks/useControllableState.js

@@ -14,6 +14,16 @@ function isFactoryDispatch(newState) {
     return typeof newState === 'function';
 }
 const useControllableState = (options)=>{
+    if (process.env.NODE_ENV !== 'production') {
+        if (options.state !== undefined && options.defaultState !== undefined) {
+            // eslint-disable-next-line no-console
+            console.error(`@fluentui/react-utilities [useControllableState]:
+A component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).
+Decide between using a controlled or uncontrolled component and remove one of this props.
+More info: https://reactjs.org/link/controlled-components
+${new Error().stack}`);
+        }
+    }
     const [internalState, setInternalState] = _react.useState(()=>{
         if (options.defaultState === undefined) {
             return options.initialState;
@@ -59,7 +69,7 @@ function isInitializer(value) {
                 const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
                 const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
                 // eslint-disable-next-line no-console
-                console.error(`@fluentui/react-utilities [${useControllableState.name}]:
+                console.error(`@fluentui/react-utilities [useControllableState]:
 A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.
 Decide between using a controlled or uncontrolled input element for the lifetime of the component.
 More info: https://reactjs.org/link/controlled-components

package/lib-commonjs/hooks/useControllableState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useControllableState.js"],"sourcesContent":["import * as React from 'react';\nfunction isFactoryDispatch(newState) {\n    return typeof newState === 'function';\n}\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */ export const useControllableState = (options)=>{\n    const [internalState, setInternalState] = React.useState(()=>{\n        if (options.defaultState === undefined) {\n            return options.initialState;\n        }\n        return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n    });\n    // Heads up!\n    // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n    const stateValueRef = React.useRef(options.state);\n    React.useEffect(()=>{\n        stateValueRef.current = options.state;\n    }, [\n        options.state\n    ]);\n    const setControlledState = React.useCallback((newState)=>{\n        if (isFactoryDispatch(newState)) {\n            newState(stateValueRef.current);\n        }\n    }, []);\n    return useIsControlled(options.state) ? [\n        options.state,\n        setControlledState\n    ] : [\n        internalState,\n        setInternalState\n    ];\n};\nfunction isInitializer(value) {\n    return typeof value === 'function';\n}\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */ const useIsControlled = (controlledValue)=>{\n    const [isControlled] = React.useState(()=>controlledValue !== undefined);\n    if (process.env.NODE_ENV !== 'production') {\n        // We don't want these warnings in production even though it is against native behaviour\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        React.useEffect(()=>{\n            if (isControlled !== (controlledValue !== undefined)) {\n                const error = new Error();\n                const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';\n                const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n                // eslint-disable-next-line no-console\n                console.error(`@fluentui/react-utilities [${useControllableState.name}]:\nA component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\nDecide between using a controlled or uncontrolled input element for the lifetime of the component.\nMore info: https://reactjs.org/link/controlled-components\n${error.stack}`);\n            }\n        }, [\n            isControlled,\n            controlledValue\n        ]);\n    }\n    return isControlled;\n};\n"],"names":["useControllableState","isFactoryDispatch","newState","options","internalState","setInternalState","React","useState","defaultState","undefined","initialState","isInitializer","stateValueRef","useRef","state","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","name","stack"],"mappings":";;;;+BAoBiBA;;;eAAAA;;;;iEApBM;AACvB,SAASC,kBAAkBC,QAAQ;IAC/B,OAAO,OAAOA,aAAa;AAC/B;AAiBW,MAAMF,uBAAuB,CAACG;IACrC,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,OAAMC,QAAQ,CAAC;QACrD,IAAIJ,QAAQK,YAAY,KAAKC,WAAW;YACpC,OAAON,QAAQO,YAAY;QAC/B;QACA,OAAOC,cAAcR,QAAQK,YAAY,IAAIL,QAAQK,YAAY,KAAKL,QAAQK,YAAY;IAC9F;IACA,YAAY;IACZ,6FAA6F;IAC7F,MAAMI,gBAAgBN,OAAMO,MAAM,CAACV,QAAQW,KAAK;IAChDR,OAAMS,SAAS,CAAC;QACZH,cAAcI,OAAO,GAAGb,QAAQW,KAAK;IACzC,GAAG;QACCX,QAAQW,KAAK;KAChB;IACD,MAAMG,qBAAqBX,OAAMY,WAAW,CAAC,CAAChB;QAC1C,IAAID,kBAAkBC,WAAW;YAC7BA,SAASU,cAAcI,OAAO;QAClC;IACJ,GAAG,EAAE;IACL,OAAOG,gBAAgBhB,QAAQW,KAAK,IAAI;QACpCX,QAAQW,KAAK;QACbG;KACH,GAAG;QACAb;QACAC;KACH;AACL;AACA,SAASM,cAAcS,KAAK;IACxB,OAAO,OAAOA,UAAU;AAC5B;AACA;;;;CAIC,GAAG,MAAMD,kBAAkB,CAACE;IACzB,MAAM,CAACC,aAAa,GAAGhB,OAAMC,QAAQ,CAAC,IAAIc,oBAAoBZ;IAC9D,IAAIc,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,wFAAwF;QACxF,sDAAsD;QACtDnB,OAAMS,SAAS,CAAC;YACZ,IAAIO,iBAAkBD,CAAAA,oBAAoBZ,SAAQ,GAAI;gBAClD,MAAMiB,QAAQ,IAAIC;gBAClB,MAAMC,iBAAiBN,eAAe,0CAA0C;gBAChF,MAAMO,mBAAmBP,eAAe,4BAA4B;gBACpE,sCAAsC;gBACtCQ,QAAQJ,KAAK,CAAC,CAAC,2BAA2B,EAAE1B,qBAAqB+B,IAAI,CAAC;wBAC9D,EAAEH,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEH,MAAMM,KAAK,CAAC,CAAC;YACH;QACJ,GAAG;YACCV;YACAD;SACH;IACL;IACA,OAAOC;AACX"}
+{"version":3,"sources":["useControllableState.js"],"sourcesContent":["import * as React from 'react';\nfunction isFactoryDispatch(newState) {\n    return typeof newState === 'function';\n}\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */ export const useControllableState = (options)=>{\n    if (process.env.NODE_ENV !== 'production') {\n        if (options.state !== undefined && options.defaultState !== undefined) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-utilities [useControllableState]:\nA component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).\nDecide between using a controlled or uncontrolled component and remove one of this props.\nMore info: https://reactjs.org/link/controlled-components\n${new Error().stack}`);\n        }\n    }\n    const [internalState, setInternalState] = React.useState(()=>{\n        if (options.defaultState === undefined) {\n            return options.initialState;\n        }\n        return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n    });\n    // Heads up!\n    // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n    const stateValueRef = React.useRef(options.state);\n    React.useEffect(()=>{\n        stateValueRef.current = options.state;\n    }, [\n        options.state\n    ]);\n    const setControlledState = React.useCallback((newState)=>{\n        if (isFactoryDispatch(newState)) {\n            newState(stateValueRef.current);\n        }\n    }, []);\n    return useIsControlled(options.state) ? [\n        options.state,\n        setControlledState\n    ] : [\n        internalState,\n        setInternalState\n    ];\n};\nfunction isInitializer(value) {\n    return typeof value === 'function';\n}\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */ const useIsControlled = (controlledValue)=>{\n    const [isControlled] = React.useState(()=>controlledValue !== undefined);\n    if (process.env.NODE_ENV !== 'production') {\n        // We don't want these warnings in production even though it is against native behaviour\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        React.useEffect(()=>{\n            if (isControlled !== (controlledValue !== undefined)) {\n                const error = new Error();\n                const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';\n                const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n                // eslint-disable-next-line no-console\n                console.error(`@fluentui/react-utilities [useControllableState]:\nA component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\nDecide between using a controlled or uncontrolled input element for the lifetime of the component.\nMore info: https://reactjs.org/link/controlled-components\n${error.stack}`);\n            }\n        }, [\n            isControlled,\n            controlledValue\n        ]);\n    }\n    return isControlled;\n};\n"],"names":["useControllableState","isFactoryDispatch","newState","options","process","env","NODE_ENV","state","undefined","defaultState","console","error","Error","stack","internalState","setInternalState","React","useState","initialState","isInitializer","stateValueRef","useRef","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","controlWarning","undefinedWarning"],"mappings":";;;;+BAoBiBA;;;eAAAA;;;;iEApBM;AACvB,SAASC,kBAAkBC,QAAQ;IAC/B,OAAO,OAAOA,aAAa;AAC/B;AAiBW,MAAMF,uBAAuB,CAACG;IACrC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIH,QAAQI,KAAK,KAAKC,aAAaL,QAAQM,YAAY,KAAKD,WAAW;YACnE,sCAAsC;YACtCE,QAAQC,KAAK,CAAC,CAAC;;;;AAI3B,EAAE,IAAIC,QAAQC,KAAK,CAAC,CAAC;QACb;IACJ;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,OAAMC,QAAQ,CAAC;QACrD,IAAId,QAAQM,YAAY,KAAKD,WAAW;YACpC,OAAOL,QAAQe,YAAY;QAC/B;QACA,OAAOC,cAAchB,QAAQM,YAAY,IAAIN,QAAQM,YAAY,KAAKN,QAAQM,YAAY;IAC9F;IACA,YAAY;IACZ,6FAA6F;IAC7F,MAAMW,gBAAgBJ,OAAMK,MAAM,CAAClB,QAAQI,KAAK;IAChDS,OAAMM,SAAS,CAAC;QACZF,cAAcG,OAAO,GAAGpB,QAAQI,KAAK;IACzC,GAAG;QACCJ,QAAQI,KAAK;KAChB;IACD,MAAMiB,qBAAqBR,OAAMS,WAAW,CAAC,CAACvB;QAC1C,IAAID,kBAAkBC,WAAW;YAC7BA,SAASkB,cAAcG,OAAO;QAClC;IACJ,GAAG,EAAE;IACL,OAAOG,gBAAgBvB,QAAQI,KAAK,IAAI;QACpCJ,QAAQI,KAAK;QACbiB;KACH,GAAG;QACAV;QACAC;KACH;AACL;AACA,SAASI,cAAcQ,KAAK;IACxB,OAAO,OAAOA,UAAU;AAC5B;AACA;;;;CAIC,GAAG,MAAMD,kBAAkB,CAACE;IACzB,MAAM,CAACC,aAAa,GAAGb,OAAMC,QAAQ,CAAC,IAAIW,oBAAoBpB;IAC9D,IAAIJ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,wFAAwF;QACxF,sDAAsD;QACtDU,OAAMM,SAAS,CAAC;YACZ,IAAIO,iBAAkBD,CAAAA,oBAAoBpB,SAAQ,GAAI;gBAClD,MAAMG,QAAQ,IAAIC;gBAClB,MAAMkB,iBAAiBD,eAAe,0CAA0C;gBAChF,MAAME,mBAAmBF,eAAe,4BAA4B;gBACpE,sCAAsC;gBACtCnB,QAAQC,KAAK,CAAC,CAAC;wBACP,EAAEmB,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEpB,MAAME,KAAK,CAAC,CAAC;YACH;QACJ,GAAG;YACCgB;YACAD;SACH;IACL;IACA,OAAOC;AACX"}

package/lib-commonjs/hooks/useTimeout.js

@@ -9,7 +9,13 @@ Object.defineProperty(exports, "useTimeout", {
     }
 });
 const _useBrowserTimer = require("./useBrowserTimer");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const setTimeoutNoop = (_callback)=>-1;
+const clearTimeoutNoop = (_handle)=>undefined;
 function useTimeout() {
-    // TODO: figure it out a way to not call global.setTimeout and instead infer window from some context
-    return (0, _useBrowserTimer.useBrowserTimer)(setTimeout, clearTimeout);
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const setTimerFn = win ? win.setTimeout : setTimeoutNoop;
+    const clearTimerFn = win ? win.clearTimeout : clearTimeoutNoop;
+    return (0, _useBrowserTimer.useBrowserTimer)(setTimerFn, clearTimerFn);
 }

package/lib-commonjs/hooks/useTimeout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTimeout.js"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\n/**\n * @internal\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */ export function useTimeout() {\n    // TODO: figure it out a way to not call global.setTimeout and instead infer window from some context\n    return useBrowserTimer(setTimeout, clearTimeout);\n}\n"],"names":["useTimeout","useBrowserTimer","setTimeout","clearTimeout"],"mappings":";;;;+BAQoBA;;;eAAAA;;;iCARY;AAQrB,SAASA;IAChB,qGAAqG;IACrG,OAAOC,IAAAA,gCAAe,EAACC,YAAYC;AACvC"}
+{"version":3,"sources":["useTimeout.js"],"sourcesContent":["import { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nconst setTimeoutNoop = (_callback)=>-1;\nconst clearTimeoutNoop = (_handle)=>undefined;\n/**\n * @internal\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */ export function useTimeout() {\n    const { targetDocument } = useFluent();\n    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;\n    const setTimerFn = win ? win.setTimeout : setTimeoutNoop;\n    const clearTimerFn = win ? win.clearTimeout : clearTimeoutNoop;\n    return useBrowserTimer(setTimerFn, clearTimerFn);\n}\n"],"names":["useTimeout","setTimeoutNoop","_callback","clearTimeoutNoop","_handle","undefined","targetDocument","useFluent","win","defaultView","setTimerFn","setTimeout","clearTimerFn","clearTimeout","useBrowserTimer"],"mappings":";;;;+BAWoBA;;;eAAAA;;;iCAXY;qCACgB;AAChD,MAAMC,iBAAiB,CAACC,YAAY,CAAC;AACrC,MAAMC,mBAAmB,CAACC,UAAUC;AAQzB,SAASL;IAChB,MAAM,EAAEM,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,MAAMF,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeG,WAAW;IACtG,MAAMC,aAAaF,MAAMA,IAAIG,UAAU,GAAGV;IAC1C,MAAMW,eAAeJ,MAAMA,IAAIK,YAAY,GAAGV;IAC9C,OAAOW,IAAAA,gCAAe,EAACJ,YAAYE;AACvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-utilities",
-  "version": "9.18.8",
+  "version": "9.18.10",
   "description": "A set of general React-specific utilities.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,7 +19,7 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
-    "type-check": "tsc -b tsconfig.json",
+    "type-check": "just-scripts type-check",
     "generate-api": "just-scripts generate-api",
     "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\"",
     "e2e": "cypress run --component",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-shared-contexts": "^9.18.0",
+    "@fluentui/react-shared-contexts": "^9.19.0",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {