@fluentui/react-utilities 9.0.0-alpha.9 → 9.0.0-beta.4

package/lib-commonjs/hooks/useMergedRefs.js

@@ -1,33 +1,36 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMergedRefs = void 0;
+
+const React = /*#__PURE__*/require("react");
 /**
  * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
  * updates all provided refs
  * @param refs - Refs to collectively update with one ref value.
  * @returns A function with an attached "current" prop, so that it can be treated like a RefObject.
  */
-function useMergedRefs() {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
+
+
+function useMergedRefs(...refs) {
+  const mergedCallback = React.useCallback(value => {
+    // Update the "current" prop hanging on the function.
+    mergedCallback.current = value;
+
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref) {
+        // work around the immutability of the React.Ref type
+        ref.current = value;
+      }
     }
-    var mergedCallback = React.useCallback(function (value) {
-        // Update the "current" prop hanging on the function.
-        mergedCallback.current = value;
-        for (var _i = 0, refs_1 = refs; _i < refs_1.length; _i++) {
-            var ref = refs_1[_i];
-            if (typeof ref === 'function') {
-                ref(value);
-            }
-            else if (ref) {
-                // work around the immutability of the React.Ref type
-                ref.current = value;
-            }
-        }
-    }, tslib_1.__spreadArrays(refs));
-    return mergedCallback;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive
+  [...refs]);
+  return mergedCallback;
 }
+
 exports.useMergedRefs = useMergedRefs;
 //# sourceMappingURL=useMergedRefs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMergedRefs.js","sourceRoot":"../src/","sources":["hooks/useMergedRefs.ts"],"names":[],"mappings":";;;AAAA,6BAA+B;AAQ/B;;;;;GAKG;AACH,SAAgB,aAAa;IAAI,cAAqC;SAArC,UAAqC,EAArC,qBAAqC,EAArC,IAAqC;QAArC,yBAAqC;;IACpE,IAAM,cAAc,GAA0B,KAAK,CAAC,WAAW,CAC7D,UAAC,KAAQ;QACP,qDAAqD;QACnD,cAAwD,CAAC,OAAO,GAAG,KAAK,CAAC;QAE3E,KAAkB,UAAI,EAAJ,aAAI,EAAJ,kBAAI,EAAJ,IAAI,EAAE;YAAnB,IAAM,GAAG,aAAA;YACZ,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;gBAC7B,GAAG,CAAC,KAAK,CAAC,CAAC;aACZ;iBAAM,IAAI,GAAG,EAAE;gBACd,qDAAqD;gBACnD,GAA6C,CAAC,OAAO,GAAG,KAAK,CAAC;aACjE;SACF;IACH,CAAC,yBAEG,IAAI,EAC2B,CAAC;IAEtC,OAAO,cAAc,CAAC;AACxB,CAAC;AApBD,sCAoBC","sourcesContent":["import * as React from 'react';\n\n/**\n * A Ref function which can be treated like a ref object in that it has an attached\n * current property, which will be updated as the ref is evaluated.\n */\nexport type RefObjectFunction<T> = React.RefObject<T> & ((value: T) => void);\n\n/**\n * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that\n * updates all provided refs\n * @param refs - Refs to collectively update with one ref value.\n * @returns A function with an attached \"current\" prop, so that it can be treated like a RefObject.\n */\nexport function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObjectFunction<T> {\n  const mergedCallback: RefObjectFunction<T> = (React.useCallback(\n    (value: T) => {\n      // Update the \"current\" prop hanging on the function.\n      ((mergedCallback as unknown) as React.MutableRefObject<T>).current = value;\n\n      for (const ref of refs) {\n        if (typeof ref === 'function') {\n          ref(value);\n        } else if (ref) {\n          // work around the immutability of the React.Ref type\n          ((ref as unknown) as React.MutableRefObject<T>).current = value;\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive\n    [...refs],\n  ) as unknown) as RefObjectFunction<T>;\n\n  return mergedCallback;\n}\n"]}
+{"version":3,"sources":["../../src/hooks/useMergedRefs.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAQA;;;;;AAKG;;;AACH,SAAgB,aAAhB,CAAiC,GAAG,IAApC,EAAsE;AACpE,QAAM,cAAc,GAA0B,KAAK,CAAC,WAAN,CAC3C,KAAD,IAAa;AACX;AACE,IAAA,cAAwD,CAAC,OAAzD,GAAmE,KAAnE;;AAEF,SAAK,MAAM,GAAX,IAAkB,IAAlB,EAAwB;AACtB,UAAI,OAAO,GAAP,KAAe,UAAnB,EAA+B;AAC7B,QAAA,GAAG,CAAC,KAAD,CAAH;AACD,OAFD,MAEO,IAAI,GAAJ,EAAS;AACd;AACE,QAAA,GAA6C,CAAC,OAA9C,GAAwD,KAAxD;AACH;AACF;AACF,GAb2C,EAc5C;AACA,GAAC,GAAG,IAAJ,CAf4C,CAA9C;AAkBA,SAAO,cAAP;AACD;;AApBD,OAAA,CAAA,aAAA,GAAA,aAAA","sourceRoot":""}

package/lib-commonjs/hooks/useMount.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook which asynchronously executes a callback once the component has been mounted.
+ *
+ * @param callback - Function to call before mount.
+ */
+export declare const useMount: (callback: () => void) => void;

package/lib-commonjs/hooks/useMount.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMount = void 0;
+
+const React = /*#__PURE__*/require("react");
+/**
+ * Hook which asynchronously executes a callback once the component has been mounted.
+ *
+ * @param callback - Function to call before mount.
+ */
+
+
+const useMount = callback => {
+  const mountRef = React.useRef(callback);
+  mountRef.current = callback;
+  React.useEffect(() => {
+    var _a;
+
+    (_a = mountRef.current) === null || _a === void 0 ? void 0 : _a.call(mountRef);
+  }, []);
+};
+
+exports.useMount = useMount;
+//# sourceMappingURL=useMount.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useMount.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,QAAQ,GAAI,QAAD,IAAyB;AAC/C,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,QAAb,CAAjB;AACA,EAAA,QAAQ,CAAC,OAAT,GAAmB,QAAnB;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;;;AACnB,KAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAA,IAAA,CAAhB,QAAgB,CAAhB;AACD,GAFD,EAEG,EAFH;AAGD,CANM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}

package/lib-commonjs/hooks/useOnClickOutside.d.ts

@@ -1,19 +1,29 @@
 import * as React from 'react';
-export declare type UseOnClickOutsideOptions = {
+export declare type UseOnClickOrScrollOutsideOptions = {
     /**
      * The element to listen for the click event
      */
-    element?: Document;
+    element: Document | undefined;
     /**
      * Refs to elements that check if the click is outside
      */
     refs: React.MutableRefObject<HTMLElement | undefined | null>[];
+    /**
+     * By default uses element.contains, but custom contain function can be provided
+     * @param parentRef - provided parent ref
+     * @param child - event target element
+     */
+    contains?(parent: HTMLElement | null, child: HTMLElement): boolean;
+    /**
+     * Disables event listeners
+     */
+    disabled?: boolean;
     /**
      * Called if the click is outside the element refs
      */
     callback: (ev: MouseEvent | TouchEvent) => void;
 };
 /**
- * Utility to perform checks where a click/touch event was made outside a compoent
+ * Utility to perform checks where a click/touch event was made outside a component
  */
-export declare const useOnClickOutside: (options: UseOnClickOutsideOptions) => void;
+export declare const useOnClickOutside: (options: UseOnClickOrScrollOutsideOptions) => void;

package/lib-commonjs/hooks/useOnClickOutside.js

@@ -1,27 +1,147 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var useEventCallback_1 = require("./useEventCallback");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnClickOutside = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useEventCallback_1 = /*#__PURE__*/require("./useEventCallback");
 /**
- * Utility to perform checks where a click/touch event was made outside a compoent
+ * Utility to perform checks where a click/touch event was made outside a component
  */
-exports.useOnClickOutside = function (options) {
-    var refs = options.refs, callback = options.callback, _a = options.element, element = _a === void 0 ? document : _a;
-    var listener = useEventCallback_1.useEventCallback(function (ev) {
-        var isOutside = refs.every(function (ref) { var _a; return !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(ev.target)); });
-        if (isOutside) {
-            callback(ev);
+
+
+const useOnClickOutside = options => {
+  const {
+    refs,
+    callback,
+    element,
+    disabled,
+    contains: containsProp
+  } = options;
+  const timeoutId = React.useRef(undefined);
+  useIFrameFocus(!disabled, element, callback);
+  const listener = useEventCallback_1.useEventCallback(ev => {
+    const contains = containsProp || ((parent, child) => !!(parent === null || parent === void 0 ? void 0 : parent.contains(child)));
+
+    const isOutside = refs.every(ref => !contains(ref.current || null, ev.target));
+
+    if (isOutside && !disabled) {
+      callback(ev);
+    }
+  });
+  React.useEffect(() => {
+    // Store the current event to avoid triggering handlers immediately
+    // Note this depends on a deprecated but extremely well supported quirk of the web platform
+    // https://github.com/facebook/react/issues/20074
+    let currentEvent = getWindowEvent(window);
+
+    const conditionalHandler = event => {
+      // Skip if this event is the same as the one running when we added the handlers
+      if (event === currentEvent) {
+        currentEvent = undefined;
+        return;
+      }
+
+      listener(event);
+    };
+
+    if (!disabled) {
+      // use capture phase because React can update DOM before the event bubbles to the document
+      element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler, true);
+      element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler, true);
+      element === null || element === void 0 ? void 0 : element.addEventListener('contextmenu', conditionalHandler, true);
+    } // Garbage collect this event after it's no longer useful to avoid memory leaks
+
+
+    timeoutId.current = window.setTimeout(() => {
+      currentEvent = undefined;
+    }, 1);
+    return () => {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('click', conditionalHandler, true);
+      element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', conditionalHandler, true);
+      element === null || element === void 0 ? void 0 : element.removeEventListener('contextmenu', conditionalHandler, true);
+      clearTimeout(timeoutId.current);
+      currentEvent = undefined;
+    };
+  }, [listener, element, disabled]);
+};
+
+exports.useOnClickOutside = useOnClickOutside;
+
+const getWindowEvent = target => {
+  var _a, _b, _c;
+
+  if (target) {
+    if (typeof target.window === 'object' && target.window === target) {
+      // eslint-disable-next-line deprecation/deprecation
+      return target.event;
+    } // eslint-disable-next-line deprecation/deprecation
+
+
+    return (_c = (_b = (_a = target.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.event) !== null && _c !== void 0 ? _c : undefined;
+  }
+
+  return undefined;
+};
+
+const FUI_FRAME_EVENT = 'fuiframefocus';
+/**
+ * Since click events do not propagate past iframes, we use focus to detect if a
+ * click has happened inside an iframe, since the only ways of focusing inside an
+ * iframe are:
+ *   - clicking inside
+ *   - tabbing inside
+ *
+ * Polls the value of `document.activeElement`. If it is an iframe, then dispatch
+ * a custom DOM event. When the custom event is received call the provided callback
+ *
+ * @param enableFrameFocusDispatch - boolean flag to start dispatching events
+ * @param targetDocument - the document to dispatch events and set timeouts
+ * @param pollDuration  - in milliseconds
+ */
+
+const useIFrameFocus = (enableFrameFocusDispatch, targetDocument, callback, pollDuration = 1000) => {
+  const timeoutRef = React.useRef();
+  const listener = useEventCallback_1.useEventCallback(e => {
+    if (callback) {
+      callback(e);
+    }
+  }); // Adds listener to the custom iframe focus event
+
+  React.useEffect(() => {
+    if (enableFrameFocusDispatch) {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener(FUI_FRAME_EVENT, listener, true);
+    }
+
+    return () => {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener(FUI_FRAME_EVENT, listener, true);
+    };
+  }, [targetDocument, enableFrameFocusDispatch, listener]); // Starts polling for the active element
+
+  React.useEffect(() => {
+    var _a;
+
+    if (enableFrameFocusDispatch) {
+      timeoutRef.current = (_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.setInterval(() => {
+        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+
+        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'IFRAME') {
+          const event = new CustomEvent(FUI_FRAME_EVENT, {
+            bubbles: true
+          });
+          activeElement.dispatchEvent(event);
         }
-    });
-    React.useEffect(function () {
-        var _a, _b;
-        (_a = element) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
-        (_b = element) === null || _b === void 0 ? void 0 : _b.addEventListener('touchstart', listener);
-        return function () {
-            var _a, _b;
-            (_a = element) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', listener);
-            (_b = element) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchstart', listener);
-        };
-    }, [listener, element]);
+      }, pollDuration);
+    }
+
+    return () => {
+      var _a;
+
+      (_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.clearTimeout(timeoutRef.current);
+    };
+  }, [targetDocument, enableFrameFocusDispatch, pollDuration]);
 };
 //# sourceMappingURL=useOnClickOutside.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.js","sourceRoot":"../src/","sources":["hooks/useOnClickOutside.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,uDAAsD;AAiBtD;;GAEG;AACU,QAAA,iBAAiB,GAAG,UAAC,OAAiC;IACzD,IAAA,mBAAI,EAAE,2BAAQ,EAAE,oBAAkB,EAAlB,uCAAkB,CAAa;IACvD,IAAM,QAAQ,GAAG,mCAAgB,CAAC,UAAC,EAA2B;QAC5D,IAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,UAAA,GAAG,YAAI,OAAA,QAAC,GAAG,CAAC,OAAO,0CAAE,QAAQ,CAAC,EAAE,CAAC,MAAqB,EAAC,CAAA,EAAA,CAAC,CAAC;QACtF,IAAI,SAAS,EAAE;YACb,QAAQ,CAAC,EAAE,CAAC,CAAC;SACd;IACH,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC;;QACd,MAAA,OAAO,0CAAE,gBAAgB,CAAC,OAAO,EAAE,QAAQ,EAAE;QAC7C,MAAA,OAAO,0CAAE,gBAAgB,CAAC,YAAY,EAAE,QAAQ,EAAE;QAElD,OAAO;;YACL,MAAA,OAAO,0CAAE,mBAAmB,CAAC,OAAO,EAAE,QAAQ,EAAE;YAChD,MAAA,OAAO,0CAAE,mBAAmB,CAAC,YAAY,EAAE,QAAQ,EAAE;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAC1B,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\n\nexport type UseOnClickOutsideOptions = {\n  /**\n   * The element to listen for the click event\n   */\n  element?: Document;\n  /**\n   * Refs to elements that check if the click is outside\n   */\n  refs: React.MutableRefObject<HTMLElement | undefined | null>[];\n  /**\n   * Called if the click is outside the element refs\n   */\n  callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\n/**\n * Utility to perform checks where a click/touch event was made outside a compoent\n */\nexport const useOnClickOutside = (options: UseOnClickOutsideOptions) => {\n  const { refs, callback, element = document } = options;\n  const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n    const isOutside = refs.every(ref => !ref.current?.contains(ev.target as HTMLElement));\n    if (isOutside) {\n      callback(ev);\n    }\n  });\n\n  React.useEffect(() => {\n    element?.addEventListener('click', listener);\n    element?.addEventListener('touchstart', listener);\n\n    return () => {\n      element?.removeEventListener('click', listener);\n      element?.removeEventListener('touchstart', listener);\n    };\n  }, [listener, element]);\n};\n"]}
+{"version":3,"sources":["../../src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib-commonjs/hooks/useOnScrollOutside.d.ts

@@ -0,0 +1,5 @@
+import type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside';
+/**
+ * Utility to perform checks where a click/touch event was made outside a component
+ */
+export declare const useOnScrollOutside: (options: UseOnClickOrScrollOutsideOptions) => void;

package/lib-commonjs/hooks/useOnScrollOutside.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnScrollOutside = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useEventCallback_1 = /*#__PURE__*/require("./useEventCallback");
+/**
+ * Utility to perform checks where a click/touch event was made outside a component
+ */
+
+
+const useOnScrollOutside = options => {
+  const {
+    refs,
+    callback,
+    element,
+    disabled,
+    contains: containsProp
+  } = options;
+  const listener = useEventCallback_1.useEventCallback(ev => {
+    const contains = containsProp || ((parent, child) => !!(parent === null || parent === void 0 ? void 0 : parent.contains(child)));
+
+    const isOutside = refs.every(ref => !contains(ref.current || null, ev.target));
+
+    if (isOutside && !disabled) {
+      callback(ev);
+    }
+  });
+  React.useEffect(() => {
+    if (!disabled) {
+      element === null || element === void 0 ? void 0 : element.addEventListener('wheel', listener);
+      element === null || element === void 0 ? void 0 : element.addEventListener('touchmove', listener);
+    }
+
+    return () => {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('wheel', listener);
+      element === null || element === void 0 ? void 0 : element.removeEventListener('touchmove', listener);
+    };
+  }, [listener, element, disabled]);
+};
+
+exports.useOnScrollOutside = useOnScrollOutside;
+//# sourceMappingURL=useOnScrollOutside.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useOnScrollOutside.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAI,OAAD,IAA8C;AAC9E,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,QAAR;AAAkB,IAAA,OAAlB;AAA2B,IAAA,QAA3B;AAAqC,IAAA,QAAQ,EAAE;AAA/C,MAAgE,OAAtE;AAEA,QAAM,QAAQ,GAAG,kBAAA,CAAA,gBAAA,CAAkB,EAAD,IAAgC;AAChE,UAAM,QAAQ,GACZ,YAAY,KAAK,CAAC,MAAD,EAAS,KAAT,KAAmB,CAAC,EAAC,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAM,KAAA,CAAN,GAAA,MAAM,CAAE,QAAR,CAAiB,KAAjB,CAAD,CAAzB,CADd;;AAGA,UAAM,SAAS,GAAG,IAAI,CAAC,KAAL,CAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAJ,IAAe,IAAhB,EAAsB,EAAE,CAAC,MAAzB,CAA3B,CAAlB;;AACA,QAAI,SAAS,IAAI,CAAC,QAAlB,EAA4B;AAC1B,MAAA,QAAQ,CAAC,EAAD,CAAR;AACD;AACF,GARgB,CAAjB;AAUA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,CAAC,QAAL,EAAe;AACb,MAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,gBAAT,CAA0B,OAA1B,EAAmC,QAAnC,CAAA;AACA,MAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,gBAAT,CAA0B,WAA1B,EAAuC,QAAvC,CAAA;AACD;;AAED,WAAO,MAAK;AACV,MAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,mBAAT,CAA6B,OAA7B,EAAsC,QAAtC,CAAA;AACA,MAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,mBAAT,CAA6B,WAA7B,EAA0C,QAA1C,CAAA;AACD,KAHD;AAID,GAVD,EAUG,CAAC,QAAD,EAAW,OAAX,EAAoB,QAApB,CAVH;AAWD,CAxBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourceRoot":""}

package/lib-commonjs/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <ValueType = unknown>(value: ValueType) => ValueType | null;

package/lib-commonjs/hooks/usePrevious.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrevious = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const usePrevious = value => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+exports.usePrevious = usePrevious;
+//# sourceMappingURL=usePrevious.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePrevious.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEO,MAAM,WAAW,GAAyB,KAAtB,IAA0C;AACnE,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAA+B,IAA/B,CAAZ;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,GAAG,CAAC,OAAJ,GAAc,KAAd;AACD,GAFD,EAEG,CAAC,KAAD,CAFH;AAGA,SAAO,GAAG,CAAC,OAAX;AACD,CANM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}

package/lib-commonjs/hooks/useTimeout.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Helper to manage a browser timeout.
+ * Ensures that the timeout isn't set multiple times at once,
+ * and is cleaned up when the component is unloaded.
+ *
+ * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
+ */
+export declare function useTimeout(): readonly [(fn: () => void, delay: number) => void, () => void];

package/lib-commonjs/hooks/useTimeout.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTimeout = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useConst_1 = /*#__PURE__*/require("./useConst");
+/**
+ * Helper to manage a browser timeout.
+ * Ensures that the timeout isn't set multiple times at once,
+ * and is cleaned up when the component is unloaded.
+ *
+ * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
+ */
+
+
+function useTimeout() {
+  const timeout = useConst_1.useConst(() => ({
+    id: undefined,
+    set: (fn, delay) => {
+      timeout.clear();
+      timeout.id = setTimeout(fn, delay);
+    },
+    clear: () => {
+      if (timeout.id !== undefined) {
+        clearTimeout(timeout.id);
+        timeout.id = undefined;
+      }
+    }
+  })); // Clean up the timeout when the component is unloaded
+
+  React.useEffect(() => timeout.clear, [timeout]);
+  return [timeout.set, timeout.clear];
+}
+
+exports.useTimeout = useTimeout;
+//# sourceMappingURL=useTimeout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useTimeout.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;;;;;AAMG;;;AACH,SAAgB,UAAhB,GAA0B;AACxB,QAAM,OAAO,GAAG,UAAA,CAAA,QAAA,CAAS,OAAO;AAC9B,IAAA,EAAE,EAAE,SAD0B;AAE9B,IAAA,GAAG,EAAE,CAAC,EAAD,EAAiB,KAAjB,KAAkC;AACrC,MAAA,OAAO,CAAC,KAAR;AACA,MAAA,OAAO,CAAC,EAAR,GAAa,UAAU,CAAC,EAAD,EAAK,KAAL,CAAvB;AACD,KAL6B;AAM9B,IAAA,KAAK,EAAE,MAAK;AACV,UAAI,OAAO,CAAC,EAAR,KAAe,SAAnB,EAA8B;AAC5B,QAAA,YAAY,CAAC,OAAO,CAAC,EAAT,CAAZ;AACA,QAAA,OAAO,CAAC,EAAR,GAAa,SAAb;AACD;AACF;AAX6B,GAAP,CAAT,CAAhB,CADwB,CAexB;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAM,OAAO,CAAC,KAA9B,EAAqC,CAAC,OAAD,CAArC;AAEA,SAAO,CAAC,OAAO,CAAC,GAAT,EAAc,OAAO,CAAC,KAAtB,CAAP;AACD;;AAnBD,OAAA,CAAA,UAAA,GAAA,UAAA","sourceRoot":""}

package/lib-commonjs/hooks/useUnmount.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook which synchronously executes a callback when the component is about to unmount.
+ *
+ * @param callback - Function to call during unmount.
+ */
+export declare const useUnmount: (callback: () => void) => void;

package/lib-commonjs/hooks/useUnmount.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUnmount = void 0;
+
+const React = /*#__PURE__*/require("react");
+/**
+ * Hook which synchronously executes a callback when the component is about to unmount.
+ *
+ * @param callback - Function to call during unmount.
+ */
+
+
+const useUnmount = callback => {
+  const unmountRef = React.useRef(callback);
+  unmountRef.current = callback;
+  React.useEffect(() => () => {
+    var _a;
+
+    (_a = unmountRef.current) === null || _a === void 0 ? void 0 : _a.call(unmountRef);
+  }, []);
+};
+
+exports.useUnmount = useUnmount;
+//# sourceMappingURL=useUnmount.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useUnmount.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,UAAU,GAAI,QAAD,IAAyB;AACjD,QAAM,UAAU,GAAG,KAAK,CAAC,MAAN,CAAa,QAAb,CAAnB;AACA,EAAA,UAAU,CAAC,OAAX,GAAqB,QAArB;AACA,EAAA,KAAK,CAAC,SAAN,CACE,MAAM,MAAK;;;AACT,KAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAA,IAAA,CAAlB,UAAkB,CAAlB;AACD,GAHH,EAIE,EAJF;AAMD,CATM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}

package/lib-commonjs/index.d.ts

@@ -1,3 +1,4 @@
 export * from './compose/index';
 export * from './hooks/index';
+export * from './ssr/index';
 export * from './utils/index';

package/lib-commonjs/index.js

@@ -1,7 +1,16 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./compose/index"), exports);
+
 tslib_1.__exportStar(require("./hooks/index"), exports);
+
+tslib_1.__exportStar(require("./ssr/index"), exports);
+
 tslib_1.__exportStar(require("./utils/index"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,0DAAgC;AAChC,wDAA8B;AAC9B,wDAA8B","sourcesContent":["export * from './compose/index';\nexport * from './hooks/index';\nexport * from './utils/index';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/ssr/SSRContext.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/**
+ * To support SSR, the auto incrementing id counter is stored in a context. This allows it to be reset on every request
+ * to ensure the client and server are consistent.
+ *
+ * @internal
+ */
+export declare type SSRContextValue = {
+    current: number;
+};
+/**
+ * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.
+ *
+ * @internal
+ */
+export declare const defaultSSRContextValue: SSRContextValue;
+export declare const SSRContext: React.Context<SSRContextValue>;
+/**
+ * @internal
+ */
+export declare function useSSRContext(): SSRContextValue;
+/**
+ * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids
+ * are consistent between the client and server.
+ *
+ * @public
+ */
+export declare const SSRProvider: React.FC;
+/**
+ * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay
+ * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.
+ */
+export declare function useIsSSR(): boolean;