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

package/lib/hooks/useControllableValue.js

@@ -1,60 +1,57 @@
 import * as React from 'react';
 import { useConst } from './useConst';
 export function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
-    var _a = React.useState(defaultUncontrolledValue), value = _a[0], setValue = _a[1];
-    var isControlled = useIsControlled(controlledValue);
-    var currentValue = isControlled ? controlledValue : value;
-    // Duplicate the current value and onChange in refs so they're accessible from
-    // setValueOrCallOnChange without creating a new callback every time
-    var valueRef = React.useRef(currentValue);
-    var onChangeRef = React.useRef(onChange);
-    React.useEffect(function () {
-        valueRef.current = currentValue;
-        onChangeRef.current = onChange;
-    });
-    // To match the behavior of the setter returned by React.useState, this callback's identity
-    // should never change. This means it MUST NOT directly reference variables that can change.
-    var setValueOrCallOnChange = useConst(function () { return function (update, ev) {
-        // Assuming here that TValue is not a function, because a controllable value will typically
-        // be something a user can enter as input
-        var newValue = typeof update === 'function' ? update(valueRef.current) : update;
-        if (onChangeRef.current) {
-            onChangeRef.current(ev, newValue);
-        }
-        if (!isControlled) {
-            setValue(newValue);
-        }
-    }; });
-    return [currentValue, setValueOrCallOnChange];
+  const [value, setValue] = React.useState(defaultUncontrolledValue);
+  const isControlled = useIsControlled(controlledValue);
+  const currentValue = isControlled ? controlledValue : value; // Duplicate the current value and onChange in refs so they're accessible from
+  // setValueOrCallOnChange without creating a new callback every time
+
+  const valueRef = React.useRef(currentValue);
+  const onChangeRef = React.useRef(onChange);
+  React.useEffect(() => {
+    valueRef.current = currentValue;
+    onChangeRef.current = onChange;
+  }); // To match the behavior of the setter returned by React.useState, this callback's identity
+  // should never change. This means it MUST NOT directly reference variables that can change.
+
+  const setValueOrCallOnChange = useConst(() => (update, ev) => {
+    // Assuming here that TValue is not a function, because a controllable value will typically
+    // be something a user can enter as input
+    const newValue = typeof update === 'function' ? update(valueRef.current) : update;
+
+    if (onChangeRef.current) {
+      onChangeRef.current(ev, newValue);
+    }
+
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  });
+  return [currentValue, setValueOrCallOnChange];
 }
 /**
  * Helper hook to handle previous comparison of controlled/uncontrolled
  * Prints an error when isControlled value switches between subsequent renders
  */
-var useIsControlled = function (controlledValue) {
-    var isControlled = useConst(controlledValue !== undefined);
-    if (process.env.NODE_ENV !== 'production') {
-        // We don't want these warnings in production even though it is against native behaviour
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        React.useEffect(function () {
-            if (isControlled !== (controlledValue !== undefined)) {
-                var error = new Error();
-                var controlWarning = isControlled
-                    ? 'a controlled value to be uncontrolled'
-                    : 'an uncontrolled value to be controlled';
-                var undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
-                // eslint-disable-next-line no-console
-                console.error([
-                    // Default react error
-                    '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',
-                    error.stack,
-                ].join(' '));
-            }
-        }, [isControlled, controlledValue]);
-    }
-    return isControlled;
+
+const useIsControlled = controlledValue => {
+  const isControlled = useConst(controlledValue !== undefined);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // We don't want these warnings in production even though it is against native behaviour
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (isControlled !== (controlledValue !== undefined)) {
+        const error = new Error();
+        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([// Default react error
+        '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', error.stack].join(' '));
+      }
+    }, [isControlled, controlledValue]);
+  }
+
+  return isControlled;
 };
 //# sourceMappingURL=useControllableValue.js.map

package/lib/hooks/useControllableValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableValue.js","sourceRoot":"../src/","sources":["hooks/useControllableValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAqCtC,MAAM,UAAU,oBAAoB,CAKlC,eAAuB,EACvB,wBAA8C,EAC9C,QAAmD;IAE7C,IAAA,6CAAgF,EAA/E,aAAK,EAAE,gBAAwE,CAAC;IACvF,IAAM,YAAY,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;IACtD,IAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC;IAE5D,8EAA8E;IAC9E,oEAAoE;IACpE,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAC5C,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,KAAK,CAAC,SAAS,CAAC;QACd,QAAQ,CAAC,OAAO,GAAG,YAAY,CAAC;QAChC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,2FAA2F;IAC3F,4FAA4F;IAC5F,IAAM,sBAAsB,GAAG,QAAQ,CAAC,cAAM,OAAA,UAAC,MAAgD,EAAE,EAAW;QAC1G,2FAA2F;QAC3F,yCAAyC;QACzC,IAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAE,MAAmB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAEhG,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,WAAW,CAAC,OAAO,CAAC,EAAG,EAAE,QAAQ,CAAC,CAAC;SACpC;QAED,IAAI,CAAC,YAAY,EAAE;YACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;IACH,CAAC,EAZ6C,CAY7C,CAAC,CAAC;IAEH,OAAO,CAAC,YAAY,EAAE,sBAAsB,CAAU,CAAC;AACzD,CAAC;AAED;;;GAGG;AACH,IAAM,eAAe,GAAG,UAAS,eAAuB;IACtD,IAAM,YAAY,GAAG,QAAQ,CAAU,eAAe,KAAK,SAAS,CAAC,CAAC;IAEtE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;QACzC,wFAAwF;QACxF,sDAAsD;QACtD,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,YAAY,KAAK,CAAC,eAAe,KAAK,SAAS,CAAC,EAAE;gBACpD,IAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;gBAE1B,IAAM,cAAc,GAAG,YAAY;oBACjC,CAAC,CAAC,uCAAuC;oBACzC,CAAC,CAAC,wCAAwC,CAAC;gBAE7C,IAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,wBAAwB,CAAC;gBAE7F,sCAAsC;gBACtC,OAAO,CAAC,KAAK,CACX;oBACE,sBAAsB;oBACtB,0BAA0B,GAAG,cAAc,GAAG,sCAAsC;oBACpF,gBAAgB,GAAG,gBAAgB,GAAG,kCAAkC;oBACxE,oGAAoG;oBACpG,2DAA2D;oBAC3D,KAAK,CAAC,KAAK;iBACZ,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;aACH;QACH,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;KACrC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useConst } from './useConst';\n\nexport type ChangeCallback<\n  TElement extends HTMLElement,\n  TValue,\n  TEvent extends React.SyntheticEvent<TElement> | undefined\n> = (ev: TEvent, newValue: TValue | undefined) => void;\n\n/**\n * Default value can be a value or an initializer\n */\ntype DefaultValue<TValue> = TValue | (() => TValue);\n\n/**\n * Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or\n * text box string.\n * @param controlledValue - The controlled value passed in the props. This value will always be used if provided,\n * and the internal state will be updated to reflect it.\n * @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.\n * @returns An array of the current value and an updater callback. Like `React.useState`, the updater\n * callback always has the same identity, and it can take either a new value, or a function which\n * is passed the previous value and returns the new value.\n * @see https://reactjs.org/docs/uncontrolled-components.html\n */\nexport function useControllableValue<TValue, TElement extends HTMLElement>(\n  controlledValue: TValue,\n  defaultUncontrolledValue: DefaultValue<TValue>,\n): Readonly<[TValue, (update: React.SetStateAction<TValue>) => void]>;\nexport function useControllableValue<\n  TValue,\n  TElement extends HTMLElement,\n  TEvent extends React.SyntheticEvent<TElement> | undefined\n>(\n  controlledValue: TValue,\n  defaultUncontrolledValue: DefaultValue<TValue>,\n  onChange: ChangeCallback<TElement, TValue, TEvent>,\n): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;\nexport function useControllableValue<\n  TValue,\n  TElement extends HTMLElement,\n  TEvent extends React.SyntheticEvent<TElement> | undefined\n>(\n  controlledValue: TValue,\n  defaultUncontrolledValue: DefaultValue<TValue>,\n  onChange?: ChangeCallback<TElement, TValue, TEvent>,\n) {\n  const [value, setValue] = React.useState<TValue | undefined>(defaultUncontrolledValue);\n  const isControlled = useIsControlled(controlledValue);\n  const currentValue = isControlled ? controlledValue : value;\n\n  // Duplicate the current value and onChange in refs so they're accessible from\n  // setValueOrCallOnChange without creating a new callback every time\n  const valueRef = React.useRef(currentValue);\n  const onChangeRef = React.useRef(onChange);\n  React.useEffect(() => {\n    valueRef.current = currentValue;\n    onChangeRef.current = onChange;\n  });\n\n  // To match the behavior of the setter returned by React.useState, this callback's identity\n  // should never change. This means it MUST NOT directly reference variables that can change.\n  const setValueOrCallOnChange = useConst(() => (update: React.SetStateAction<TValue | undefined>, ev?: TEvent) => {\n    // Assuming here that TValue is not a function, because a controllable value will typically\n    // be something a user can enter as input\n    const newValue = typeof update === 'function' ? (update as Function)(valueRef.current) : update;\n\n    if (onChangeRef.current) {\n      onChangeRef.current(ev!, newValue);\n    }\n\n    if (!isControlled) {\n      setValue(newValue);\n    }\n  });\n\n  return [currentValue, setValueOrCallOnChange] as const;\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 */\nconst useIsControlled = <TValue>(controlledValue: TValue) => {\n  const isControlled = useConst<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(\n          [\n            // Default react error\n            'A component is changing ' + controlWarning + '. This is likely caused by the value',\n            '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          ].join(' '),\n        );\n      }\n    }, [isControlled, controlledValue]);\n  }\n\n  return isControlled;\n};\n"]}
+{"version":3,"sources":["../../src/hooks/useControllableValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AAqCA,OAAM,SAAU,oBAAV,CAKJ,eALI,EAMJ,wBANI,EAOJ,QAPI,EAO+C;AAEnD,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,KAAK,CAAC,QAAN,CAAmC,wBAAnC,CAA1B;AACA,QAAM,YAAY,GAAG,eAAe,CAAC,eAAD,CAApC;AACA,QAAM,YAAY,GAAG,YAAY,GAAG,eAAH,GAAqB,KAAtD,CAJmD,CAMnD;AACA;;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,YAAb,CAAjB;AACA,QAAM,WAAW,GAAG,KAAK,CAAC,MAAN,CAAa,QAAb,CAApB;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,OAAT,GAAmB,YAAnB;AACA,IAAA,WAAW,CAAC,OAAZ,GAAsB,QAAtB;AACD,GAHD,EAVmD,CAenD;AACA;;AACA,QAAM,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAD,EAAmD,EAAnD,KAAkE;AAC9G;AACA;AACA,UAAM,QAAQ,GAAG,OAAO,MAAP,KAAkB,UAAlB,GAAgC,MAAmB,CAAC,QAAQ,CAAC,OAAV,CAAnD,GAAwE,MAAzF;;AAEA,QAAI,WAAW,CAAC,OAAhB,EAAyB;AACvB,MAAA,WAAW,CAAC,OAAZ,CAAoB,EAApB,EAAyB,QAAzB;AACD;;AAED,QAAI,CAAC,YAAL,EAAmB;AACjB,MAAA,QAAQ,CAAC,QAAD,CAAR;AACD;AACF,GAZsC,CAAvC;AAcA,SAAO,CAAC,YAAD,EAAe,sBAAf,CAAP;AACD;AAED;;;AAGG;;AACH,MAAM,eAAe,GAAY,eAAT,IAAoC;AAC1D,QAAM,YAAY,GAAG,QAAQ,CAAU,eAAe,KAAK,SAA9B,CAA7B;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA;AACA,IAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,UAAI,YAAY,MAAM,eAAe,KAAK,SAA1B,CAAhB,EAAsD;AACpD,cAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;AAEA,cAAM,cAAc,GAAG,YAAY,GAC/B,uCAD+B,GAE/B,wCAFJ;AAIA,cAAM,gBAAgB,GAAG,YAAY,GAAG,yBAAH,GAA+B,wBAApE,CAPoD,CASpD;;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE;AACA,qCAA6B,cAA7B,GAA8C,sCAFhD,EAGE,mBAAmB,gBAAnB,GAAsC,kCAHxC,EAIE,oGAJF,EAKE,2DALF,EAME,KAAK,CAAC,KANR,EAOE,IAPF,CAOO,GAPP,CADF;AAUD;AACF,KAtBD,EAsBG,CAAC,YAAD,EAAe,eAAf,CAtBH;AAuBD;;AAED,SAAO,YAAP;AACD,CAhCD","sourceRoot":""}

package/lib/hooks/useEventCallback.d.ts

@@ -2,11 +2,11 @@
  * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
  *
  * Modified `useCallback` that can be used when dependencies change too frequently. Can occur when
- * e.g. user props are depedencies which could change on every render
+ * e.g. user props are dependencies which could change on every render
  * e.g. volatile values (i.e. useState/useDispatch) are dependencies which could change frequently
  *
  * This should not be used often, but can be a useful re-render optimization since the callback is a ref and
- * will not be invalidated between rerenders
+ * will not be invalidated between re-renders
  *
  * @param fn - The callback function that will be used
  */

package/lib/hooks/useEventCallback.js

@@ -4,28 +4,25 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
  * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
  *
  * Modified `useCallback` that can be used when dependencies change too frequently. Can occur when
- * e.g. user props are depedencies which could change on every render
+ * e.g. user props are dependencies which could change on every render
  * e.g. volatile values (i.e. useState/useDispatch) are dependencies which could change frequently
  *
  * This should not be used often, but can be a useful re-render optimization since the callback is a ref and
- * will not be invalidated between rerenders
+ * will not be invalidated between re-renders
  *
  * @param fn - The callback function that will be used
  */
-export var useEventCallback = function (fn) {
-    var callbackRef = React.useRef(function () {
-        throw new Error('Cannot call an event handler while rendering');
-    });
-    useIsomorphicLayoutEffect(function () {
-        callbackRef.current = fn;
-    }, [fn]);
-    return React.useCallback(function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var callback = callbackRef.current;
-        return callback.apply(void 0, args);
-    }, [callbackRef]);
+
+export const useEventCallback = fn => {
+  const callbackRef = React.useRef(() => {
+    throw new Error('Cannot call an event handler while rendering');
+  });
+  useIsomorphicLayoutEffect(() => {
+    callbackRef.current = fn;
+  }, [fn]);
+  return React.useCallback((...args) => {
+    const callback = callbackRef.current;
+    return callback(...args);
+  }, [callbackRef]);
 };
 //# sourceMappingURL=useEventCallback.js.map

package/lib/hooks/useEventCallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventCallback.js","sourceRoot":"../src/","sources":["hooks/useEventCallback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAExE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAiC,EAA6B;IAC5F,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAY;QAC1C,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,yBAAyB,CAAC;QACxB,WAAW,CAAC,OAAO,GAAG,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAET,OAAO,KAAK,CAAC,WAAW,CACtB;QAAC,cAAa;aAAb,UAAa,EAAb,qBAAa,EAAb,IAAa;YAAb,yBAAa;;QACZ,IAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC;QACrC,OAAO,QAAQ,eAAI,IAAI,EAAE;IAC3B,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n/**\n * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n *\n * Modified `useCallback` that can be used when dependencies change too frequently. Can occur when\n * e.g. user props are depedencies which could change on every render\n * e.g. volatile values (i.e. useState/useDispatch) are dependencies which could change frequently\n *\n * This should not be used often, but can be a useful re-render optimization since the callback is a ref and\n * will not be invalidated between rerenders\n *\n * @param fn - The callback function that will be used\n */\nexport const useEventCallback = <Args extends unknown[], Return>(fn: (...args: Args) => Return) => {\n  const callbackRef = React.useRef<typeof fn>(() => {\n    throw new Error('Cannot call an event handler while rendering');\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    callbackRef.current = fn;\n  }, [fn]);\n\n  return React.useCallback(\n    (...args: Args) => {\n      const callback = callbackRef.current;\n      return callback(...args);\n    },\n    [callbackRef],\n  );\n};\n"]}
+{"version":3,"sources":["../../src/hooks/useEventCallback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,6BAA1C;AAEA;;;;;;;;;;;AAWG;;AACH,OAAO,MAAM,gBAAgB,GAAoC,EAAjC,IAAkE;AAChG,QAAM,WAAW,GAAG,KAAK,CAAC,MAAN,CAAwB,MAAK;AAC/C,UAAM,IAAI,KAAJ,CAAU,8CAAV,CAAN;AACD,GAFmB,CAApB;AAIA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,IAAA,WAAW,CAAC,OAAZ,GAAsB,EAAtB;AACD,GAFwB,EAEtB,CAAC,EAAD,CAFsB,CAAzB;AAIA,SAAO,KAAK,CAAC,WAAN,CACL,CAAC,GAAG,IAAJ,KAAkB;AAChB,UAAM,QAAQ,GAAG,WAAW,CAAC,OAA7B;AACA,WAAO,QAAQ,CAAC,GAAG,IAAJ,CAAf;AACD,GAJI,EAKL,CAAC,WAAD,CALK,CAAP;AAOD,CAhBM","sourceRoot":""}

package/lib/hooks/useFirstMount.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Checks if components was mounted the first time.
+ * Since concurrent mode will be released in the future this needs to be verified
+ * Currently (React 17) will always render the initial mount once
+ * https://codesandbox.io/s/heuristic-brook-s4w0q?file=/src/App.jsx
+ * https://codesandbox.io/s/holy-grass-8nieu?file=/src/App.jsx
+ *
+ * @example
+ * const isFirstMount = useFirstMount();
+ */
+export declare function useFirstMount(): boolean;

package/lib/hooks/useFirstMount.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/**
+ * Checks if components was mounted the first time.
+ * Since concurrent mode will be released in the future this needs to be verified
+ * Currently (React 17) will always render the initial mount once
+ * https://codesandbox.io/s/heuristic-brook-s4w0q?file=/src/App.jsx
+ * https://codesandbox.io/s/holy-grass-8nieu?file=/src/App.jsx
+ *
+ * @example
+ * const isFirstMount = useFirstMount();
+ */
+
+export function useFirstMount() {
+  const isFirst = React.useRef(true);
+
+  if (isFirst.current) {
+    isFirst.current = false;
+    return true;
+  }
+
+  return isFirst.current;
+}
+//# sourceMappingURL=useFirstMount.js.map

package/lib/hooks/useFirstMount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useFirstMount.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;;;;;;;;AASG;;AACH,OAAM,SAAU,aAAV,GAAuB;AAC3B,QAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAhB;;AAEA,MAAI,OAAO,CAAC,OAAZ,EAAqB;AACnB,IAAA,OAAO,CAAC,OAAR,GAAkB,KAAlB;AACA,WAAO,IAAP;AACD;;AAED,SAAO,OAAO,CAAC,OAAf;AACD","sourceRoot":""}

package/lib/hooks/useForceUpdate.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Forces a re-render, similar to `forceUpdate` in class components.
+ */
+export declare function useForceUpdate(): import("react").DispatchWithoutAction;

package/lib/hooks/useForceUpdate.js

@@ -0,0 +1,9 @@
+import { useReducer } from 'react';
+/**
+ * Forces a re-render, similar to `forceUpdate` in class components.
+ */
+
+export function useForceUpdate() {
+  return useReducer(x => x + 1, 0)[1];
+}
+//# sourceMappingURL=useForceUpdate.js.map

package/lib/hooks/useForceUpdate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useForceUpdate.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,OAA3B;AAEA;;AAEG;;AACH,OAAM,SAAU,cAAV,GAAwB;AAC5B,SAAO,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAV,EAAa,CAAb,CAAV,CAA0B,CAA1B,CAAP;AACD","sourceRoot":""}

package/lib/hooks/useId.d.ts

@@ -1,7 +1,11 @@
-export declare function getId(prefix?: string): string;
-export declare function resetIds(): void;
 /**
- * Hook to generate a unique ID in the global scope (spanning across duplicate copies of the same library).
+ * Resets generated IDs, should be used only in tests.
+ *
+ * @private
+ */
+export declare function resetIdsForTests(): void;
+/**
+ * Hook to generate a unique ID.
  *
  * @param prefix - Optional prefix for the ID
  * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,

package/lib/hooks/useId.js

@@ -1,29 +1,25 @@
 import * as React from 'react';
-// TODO
-// getId() is a temporary approach, useId() should be reimplemented to properly support SSR & scenarios with
-// different globals (document, window)
-var id = 0;
-export function getId(prefix) {
-    return (prefix || '') + id++;
-}
-export function resetIds() {
-    id = 0;
+import { defaultSSRContextValue, useSSRContext } from '../ssr/index';
+/**
+ * Resets generated IDs, should be used only in tests.
+ *
+ * @private
+ */
+
+export function resetIdsForTests() {
+  defaultSSRContextValue.current = 0;
 }
 /**
- * Hook to generate a unique ID in the global scope (spanning across duplicate copies of the same library).
+ * Hook to generate a unique ID.
  *
  * @param prefix - Optional prefix for the ID
  * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,
  *  without conditioning the hook call
  * @returns The ID
  */
+
 export function useId(prefix, providedId) {
-    // getId should only be called once since it updates the global constant for the next ID value.
-    // (While an extra update isn't likely to cause problems in practice, it's better to avoid it.)
-    var ref = React.useRef(providedId);
-    if (!ref.current) {
-        ref.current = getId(prefix);
-    }
-    return ref.current;
+  const contextValue = useSSRContext();
+  return React.useMemo(() => providedId || `${prefix}${++contextValue.current}`, [prefix, providedId, contextValue]);
 }
 //# sourceMappingURL=useId.js.map

package/lib/hooks/useId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useId.js","sourceRoot":"../src/","sources":["hooks/useId.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO;AACP,4GAA4G;AAC5G,uCAAuC;AACvC,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX,MAAM,UAAU,KAAK,CAAC,MAAe;IACnC,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,EAAE,GAAG,CAAC,CAAC;AACT,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,MAAe,EAAE,UAAmB;IACxD,+FAA+F;IAC/F,+FAA+F;IAC/F,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAqB,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;QAChB,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B;IACD,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC","sourcesContent":["import * as React from 'react';\n// TODO\n// getId() is a temporary approach, useId() should be reimplemented to properly support SSR & scenarios with\n// different globals (document, window)\nlet id = 0;\n\nexport function getId(prefix?: string): string {\n  return (prefix || '') + id++;\n}\n\nexport function resetIds(): void {\n  id = 0;\n}\n\n/**\n * Hook to generate a unique ID in the global scope (spanning across duplicate copies of the same library).\n *\n * @param prefix - Optional prefix for the ID\n * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,\n *  without conditioning the hook call\n * @returns The ID\n */\nexport function useId(prefix?: string, providedId?: string): string {\n  // getId should only be called once since it updates the global constant for the next ID value.\n  // (While an extra update isn't likely to cause problems in practice, it's better to avoid it.)\n  const ref = React.useRef<string | undefined>(providedId);\n  if (!ref.current) {\n    ref.current = getId(prefix);\n  }\n  return ref.current;\n}\n"]}
+{"version":3,"sources":["../../src/hooks/useId.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,EAAiC,aAAjC,QAAsD,cAAtD;AAEA;;;;AAIG;;AACH,OAAM,SAAU,gBAAV,GAA0B;AAC9B,EAAA,sBAAsB,CAAC,OAAvB,GAAiC,CAAjC;AACD;AAED;;;;;;;AAOG;;AACH,OAAM,SAAU,KAAV,CAAgB,MAAhB,EAAiC,UAAjC,EAAoD;AACxD,QAAM,YAAY,GAAG,aAAa,EAAlC;AAEA,SAAO,KAAK,CAAC,OAAN,CAAc,MAAM,UAAU,IAAI,GAAG,MAAM,GAAG,EAAE,YAAY,CAAC,OAAO,EAApE,EAAwE,CAAC,MAAD,EAAS,UAAT,EAAqB,YAArB,CAAxE,CAAP;AACD","sourceRoot":""}

package/lib/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +1,11 @@
 import * as React from 'react';
+/**
+ * React currently throws a warning when using useLayoutEffect on the server. To get around it, we can conditionally
+ * useEffect on the server (no-op) and useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also need affected components to render on
+ * the server.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ */
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;

package/lib/hooks/useIsomorphicLayoutEffect.js

@@ -1,6 +1,15 @@
 import * as React from 'react';
-var isSSR = typeof window === 'undefined' || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
-// useLayoutEffect() produces a warning with SSR rendering
-// https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
-export var useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+import { canUseDOM } from '../ssr/index';
+/**
+ * React currently throws a warning when using useLayoutEffect on the server. To get around it, we can conditionally
+ * useEffect on the server (no-op) and useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also need affected components to render on
+ * the server.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ */
+// eslint-disable-next-line no-restricted-properties
+
+export const useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React.useLayoutEffect : React.useEffect;
 //# sourceMappingURL=useIsomorphicLayoutEffect.js.map

package/lib/hooks/useIsomorphicLayoutEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsomorphicLayoutEffect.js","sourceRoot":"../src/","sources":["hooks/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,IAAM,KAAK,GACT,OAAO,MAAM,KAAK,WAAW,IAAI,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;AAE9G,0DAA0D;AAC1D,2EAA2E;AAC3E,MAAM,CAAC,IAAM,yBAAyB,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nconst isSSR =\n  typeof window === 'undefined' || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);\n\n// useLayoutEffect() produces a warning with SSR rendering\n// https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a\nexport const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;\n"]}
+{"version":3,"sources":["../../src/hooks/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,cAA1B;AAEA;;;;;;;;AAQG;AACH;;AACA,OAAO,MAAM,yBAAyB,GAA2B,aAAA,SAAS,KAAK,KAAK,CAAC,eAAX,GAA6B,KAAK,CAAC,SAAtG","sourceRoot":""}

package/lib/hooks/useMergedRefs.js

@@ -1,4 +1,3 @@
-import { __spreadArrays } from "tslib";
 import * as React from 'react';
 /**
  * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
@@ -6,25 +5,22 @@ import * as React from 'react';
  * @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.
  */
-export function useMergedRefs() {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
+
+export 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;
-            }
-        }
-    }, __spreadArrays(refs));
-    return mergedCallback;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive
+  [...refs]);
+  return mergedCallback;
 }
 //# sourceMappingURL=useMergedRefs.js.map

package/lib/hooks/useMergedRefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergedRefs.js","sourceRoot":"../src/","sources":["hooks/useMergedRefs.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;;;GAKG;AACH,MAAM,UAAU,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,iBAEG,IAAI,EAC2B,CAAC;IAEtC,OAAO,cAAc,CAAC;AACxB,CAAC","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,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAQA;;;;;AAKG;;AACH,OAAM,SAAU,aAAV,CAA2B,GAAG,IAA9B,EAAgE;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","sourceRoot":""}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/**
+ * Hook which asynchronously executes a callback once the component has been mounted.
+ *
+ * @param callback - Function to call before mount.
+ */
+
+export 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);
+  }, []);
+};
+//# sourceMappingURL=useMount.js.map

package/lib/hooks/useMount.js.map

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

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