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

package/lib/hooks/useOnClickOutside.js

@@ -1,25 +1,136 @@
 import * as React from 'react';
 import { useEventCallback } from './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
  */
-export var useOnClickOutside = function (options) {
-    var refs = options.refs, callback = options.callback, _a = options.element, element = _a === void 0 ? document : _a;
-    var listener = 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);
+
+export const useOnClickOutside = options => {
+  const {
+    refs,
+    callback,
+    element,
+    disabled,
+    contains: containsProp
+  } = options;
+  const timeoutId = React.useRef(undefined);
+  useIFrameFocus(!disabled, element, callback);
+  const listener = 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]);
+};
+
+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(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/hooks/useOnClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.js","sourceRoot":"../src/","sources":["hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAiBtD;;GAEG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,OAAiC;IACzD,IAAA,mBAAI,EAAE,2BAAQ,EAAE,oBAAkB,EAAlB,uCAAkB,CAAa;IACvD,IAAM,QAAQ,GAAG,gBAAgB,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/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/hooks/useOnScrollOutside.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useEventCallback } from './useEventCallback';
+/**
+ * Utility to perform checks where a click/touch event was made outside a component
+ */
+
+export const useOnScrollOutside = options => {
+  const {
+    refs,
+    callback,
+    element,
+    disabled,
+    contains: containsProp
+  } = options;
+  const listener = 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]);
+};
+//# sourceMappingURL=useOnScrollOutside.js.map

package/lib/hooks/useOnScrollOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useOnScrollOutside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA;;AAEG;;AACH,OAAO,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,gBAAgB,CAAE,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,GARgC,CAAjC;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","sourceRoot":""}

package/lib/hooks/usePrevious.d.ts

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

package/lib/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const usePrevious = value => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+//# sourceMappingURL=usePrevious.js.map

package/lib/hooks/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePrevious.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,OAAO,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","sourceRoot":""}

package/lib/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/hooks/useTimeout.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useConst } from './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.
+ */
+
+export function useTimeout() {
+  const timeout = 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];
+}
+//# sourceMappingURL=useTimeout.js.map

package/lib/hooks/useTimeout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AAEA;;;;;;AAMG;;AACH,OAAM,SAAU,UAAV,GAAoB;AACxB,QAAM,OAAO,GAAG,QAAQ,CAAC,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,CAAD,CAAxB,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","sourceRoot":""}

package/lib/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/hooks/useUnmount.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/**
+ * Hook which synchronously executes a callback when the component is about to unmount.
+ *
+ * @param callback - Function to call during unmount.
+ */
+
+export 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);
+  }, []);
+};
+//# sourceMappingURL=useUnmount.js.map

package/lib/hooks/useUnmount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useUnmount.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;;;AAIG;;AACH,OAAO,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","sourceRoot":""}

package/lib/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/index.js

@@ -1,4 +1,5 @@
 export * from './compose/index';
 export * from './hooks/index';
+export * from './ssr/index';
 export * from './utils/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC","sourcesContent":["export * from './compose/index';\nexport * from './hooks/index';\nexport * from './utils/index';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}

package/lib/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;

package/lib/ssr/SSRContext.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { canUseDOM } from './canUseDOM';
+/**
+ * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.
+ *
+ * @internal
+ */
+
+export const defaultSSRContextValue = {
+  current: 0
+};
+export const SSRContext = /*#__PURE__*/React.createContext(defaultSSRContextValue);
+/**
+ * @internal
+ */
+
+export function useSSRContext() {
+  return React.useContext(SSRContext);
+}
+/**
+ * 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 const SSRProvider = props => {
+  const [value] = React.useState(() => ({
+    current: 0
+  }));
+  return /*#__PURE__*/React.createElement(SSRContext.Provider, {
+    value: value
+  }, props.children);
+};
+/**
+ * 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 function useIsSSR() {
+  const isInSSRContext = useSSRContext() !== defaultSSRContextValue;
+  const [isSSR, setIsSSR] = React.useState(isInSSRContext); // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the
+  // developer to add one.
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!isInSSRContext && !canUseDOM()) {
+      // eslint-disable-next-line no-console
+      console.error('When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' + 'generated between the client and server.');
+    }
+  } // If on the client, and the component was initially server rendered, then schedule a layout effect to update the
+  // component after hydration.
+
+
+  if (canUseDOM() && isInSSRContext) {
+    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after
+    // mounting.
+    // eslint-disable-next-line
+    React.useLayoutEffect(() => {
+      setIsSSR(false);
+    }, []);
+  }
+
+  return isSSR;
+}
+//# sourceMappingURL=SSRContext.js.map

package/lib/ssr/SSRContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ssr/SSRContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,aAA1B;AAYA;;;;AAIG;;AACH,OAAO,MAAM,sBAAsB,GAAoB;AACrD,EAAA,OAAO,EAAE;AAD4C,CAAhD;AAIP,OAAO,MAAM,UAAU,gBAAG,KAAK,CAAC,aAAN,CAAqC,sBAArC,CAAnB;AAEP;;AAEG;;AACH,OAAM,SAAU,aAAV,GAAuB;AAC3B,SAAO,KAAK,CAAC,UAAN,CAAiB,UAAjB,CAAP;AACD;AAED;;;;;AAKG;;AACH,OAAO,MAAM,WAAW,GAAa,KAAK,IAAG;AAC3C,QAAM,CAAC,KAAD,IAAU,KAAK,CAAC,QAAN,CAAgC,OAAO;AAAE,IAAA,OAAO,EAAE;AAAX,GAAP,CAAhC,CAAhB;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,UAAU,CAAC,QAAZ,EAAoB;AAAC,IAAA,KAAK,EAAE;AAAR,GAApB,EAAoC,KAAK,CAAC,QAA1C,CAAP;AACD,CAJM;AAMP;;;AAGG;;AACH,OAAM,SAAU,QAAV,GAAkB;AACtB,QAAM,cAAc,GAAG,aAAa,OAAO,sBAA3C;AACA,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,KAAK,CAAC,QAAN,CAAe,cAAf,CAA1B,CAFsB,CAItB;AACA;;AACA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAI,CAAC,cAAD,IAAmB,CAAC,SAAS,EAAjC,EAAqC;AACnC;AACA,MAAA,OAAO,CAAC,KAAR,CACE,4GACE,0CAFJ;AAID;AACF,GAdqB,CAgBtB;AACA;;;AACA,MAAI,SAAS,MAAM,cAAnB,EAAmC;AACjC;AACA;AACA;AACA,IAAA,KAAK,CAAC,eAAN,CAAsB,MAAK;AACzB,MAAA,QAAQ,CAAC,KAAD,CAAR;AACD,KAFD,EAEG,EAFH;AAGD;;AAED,SAAO,KAAP;AACD","sourceRoot":""}

package/lib/ssr/canUseDOM.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Verifies if an application can use DOM.
+ */
+export declare function canUseDOM(): boolean;

package/lib/ssr/canUseDOM.js

@@ -0,0 +1,8 @@
+/**
+ * Verifies if an application can use DOM.
+ */
+export function canUseDOM() {
+  return typeof window !== 'undefined' && !!(window.document && // eslint-disable-next-line deprecation/deprecation
+  window.document.createElement);
+}
+//# sourceMappingURL=canUseDOM.js.map

package/lib/ssr/canUseDOM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ssr/canUseDOM.ts"],"names":[],"mappings":"AAAA;;AAEG;AACH,OAAM,SAAU,SAAV,GAAmB;AACvB,SACE,OAAO,MAAP,KAAkB,WAAlB,IACA,CAAC,EACC,MAAM,CAAC,QAAP,IACA;AACA,EAAA,MAAM,CAAC,QAAP,CAAgB,aAHjB,CAFH;AAQD","sourceRoot":""}

package/lib/ssr/index.d.ts

@@ -0,0 +1,2 @@
+export * from './canUseDOM';
+export * from './SSRContext';

package/lib/ssr/index.js

@@ -0,0 +1,3 @@
+export * from './canUseDOM';
+export * from './SSRContext';
+//# sourceMappingURL=index.js.map

package/lib/ssr/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ssr/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib/utils/applyTriggerPropsToChildren.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Apply the trigger props to the children, either by calling the render function, or cloning with the new props.
+ */
+export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | ((props: TTriggerProps) => React.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React.ReactNode;

package/lib/utils/applyTriggerPropsToChildren.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { onlyChild } from './onlyChild';
+/**
+ * Apply the trigger props to the children, either by calling the render function, or cloning with the new props.
+ */
+
+export const applyTriggerPropsToChildren = (children, triggerProps) => {
+  if (typeof children === 'function') {
+    return children(triggerProps);
+  } else if (children) {
+    return /*#__PURE__*/React.cloneElement(onlyChild(children), triggerProps);
+  }
+
+  return children;
+};
+//# sourceMappingURL=applyTriggerPropsToChildren.js.map

package/lib/utils/applyTriggerPropsToChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/applyTriggerPropsToChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,aAA1B;AAEA;;AAEG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,QADyC,EAEzC,YAFyC,KAGtB;AACnB,MAAI,OAAO,QAAP,KAAoB,UAAxB,EAAoC;AAClC,WAAO,QAAQ,CAAC,YAAD,CAAf;AACD,GAFD,MAEO,IAAI,QAAJ,EAAc;AACnB,wBAAO,KAAK,CAAC,YAAN,CAAmB,SAAS,CAAC,QAAD,CAA5B,EAAwC,YAAxC,CAAP;AACD;;AAED,SAAO,QAAP;AACD,CAXM","sourceRoot":""}

package/lib/utils/clamp.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Clamps `value` to a number between the min and max.
+ *
+ * @param value - the value to be clamped
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export declare const clamp: (value: number, min: number, max: number) => number;

package/lib/utils/clamp.js

@@ -0,0 +1,9 @@
+/**
+ * Clamps `value` to a number between the min and max.
+ *
+ * @param value - the value to be clamped
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export const clamp = (value, min, max) => Math.max(min, Math.min(max, value || 0));
+//# sourceMappingURL=clamp.js.map

package/lib/utils/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.js","sourceRoot":"","sources":["../../src/utils/clamp.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC"}

package/lib/utils/getNativeElementProps.d.ts

@@ -7,3 +7,25 @@ import * as React from 'react';
  * @param excludedPropNames - List of props to disallow
  */
 export declare function getNativeElementProps<TAttributes extends React.HTMLAttributes<any>>(tagName: string, props: {}, excludedPropNames?: string[]): TAttributes;
+/**
+ * Splits the native props into ones that go to the `root` slot, and ones that go to the primary slot.
+ *
+ * This function is only for use with components that have a primary slot other than `root`.
+ * Most components should use {@link getNativeElementProps} for their root slot if it is the primary slot.
+ *
+ * @returns An object containing the native props for the `root` and primary slots.
+ */
+export declare const getPartitionedNativeProps: ({ primarySlotTagName, props, excludedPropNames, }: {
+    /** The primary slot's element type (e.g. 'div') */
+    primarySlotTagName: keyof JSX.IntrinsicElements;
+    /** The component's props object */
+    props: Pick<React.HTMLAttributes<HTMLElement>, 'style' | 'className'>;
+    /** List of native props to exclude from the returned value */
+    excludedPropNames?: string[] | undefined;
+}) => {
+    root: {
+        style: React.CSSProperties | undefined;
+        className: string | undefined;
+    };
+    primary: React.HTMLAttributes<any>;
+};