@tale-ui/utils 0.0.3

package/store/createSelector.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSelectorMemoized = exports.createSelector = void 0;
+var _reselect = require("reselect");
+/* eslint-disable no-underscore-dangle */ // __cacheKey__
+
+const reselectCreateSelector = (0, _reselect.createSelectorCreator)({
+  memoize: _reselect.lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+/**
+ * Creates a selector function that can be used to derive values from the store's state.
+ * The selector can take up to three additional arguments that can be used in the selector logic.
+ * This function accepts up to six functions and combines them into a single selector function.
+ * The last parameter is the combiner function that combines the results of the previous selectors.
+ *
+ * @example
+ * const selector = createSelector(
+ *  (state) => state.disabled
+ * );
+ *
+ * @example
+ * const selector = createSelector(
+ *   (state) => state.disabled,
+ *   (state) => state.open,
+ *   (disabled, open) => ({ disabled, open })
+ * );
+ *
+ */
+/* eslint-disable id-denylist */
+const createSelector = (a, b, c, d, e, f, ...other) => {
+  if (other.length > 0) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Unsupported number of selectors');
+  }
+  let selector;
+  if (a && b && c && d && e && f) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      const vd = d(state, a1, a2, a3);
+      const ve = e(state, a1, a2, a3);
+      return f(va, vb, vc, vd, ve, a1, a2, a3);
+    };
+  } else if (a && b && c && d && e) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      const vd = d(state, a1, a2, a3);
+      return e(va, vb, vc, vd, a1, a2, a3);
+    };
+  } else if (a && b && c && d) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      return d(va, vb, vc, a1, a2, a3);
+    };
+  } else if (a && b && c) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      return c(va, vb, a1, a2, a3);
+    };
+  } else if (a && b) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      return b(va, a1, a2, a3);
+    };
+  } else if (a) {
+    selector = a;
+  } else {
+    throw /* minify-error-disabled */new Error('Missing arguments');
+  }
+  return selector;
+};
+/* eslint-enable id-denylist */
+exports.createSelector = createSelector;
+const createSelectorMemoized = (...selectors) => {
+  const cache = new WeakMap();
+  let nextCacheId = 1;
+  const combiner = selectors[selectors.length - 1];
+  const nSelectors = selectors.length - 1 || 1;
+  // (s1, s2, ..., sN, a1, a2, a3) => { ... }
+  const argsLength = combiner.length - nSelectors;
+  if (argsLength > 3) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Unsupported number of arguments');
+  }
+  const selector = (state, a1, a2, a3) => {
+    let cacheKey = state.__cacheKey__;
+    if (!cacheKey) {
+      cacheKey = {
+        id: nextCacheId
+      };
+      state.__cacheKey__ = cacheKey;
+      nextCacheId += 1;
+    }
+    let fn = cache.get(cacheKey);
+    if (!fn) {
+      let reselectArgs = selectors;
+      const selectorArgs = [undefined, undefined, undefined];
+      switch (argsLength) {
+        case 0:
+          break;
+        case 1:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], combiner];
+            break;
+          }
+        case 2:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], () => selectorArgs[1], combiner];
+            break;
+          }
+        case 3:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], () => selectorArgs[1], () => selectorArgs[2], combiner];
+            break;
+          }
+        default:
+          throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Unsupported number of arguments');
+      }
+      fn = reselectCreateSelector(...reselectArgs);
+      fn.selectorArgs = selectorArgs;
+      cache.set(cacheKey, fn);
+    }
+    fn.selectorArgs[0] = a1;
+    fn.selectorArgs[1] = a2;
+    fn.selectorArgs[2] = a3;
+
+    // prettier-ignore
+    switch (argsLength) {
+      case 0:
+        return fn(state);
+      case 1:
+        return fn(state, a1);
+      case 2:
+        return fn(state, a1, a2);
+      case 3:
+        return fn(state, a1, a2, a3);
+      default:
+        throw /* minify-error-disabled */new Error('unreachable');
+    }
+  };
+  return selector;
+};
+exports.createSelectorMemoized = createSelectorMemoized;

package/store/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./createSelector.js";
+export * from "./useStore.js";
+export * from "./Store.js";
+export * from "./ReactStore.js";
+export * from "./StoreInspector.js";

package/store/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _createSelector = require("./createSelector");
+Object.keys(_createSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _createSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _createSelector[key];
+    }
+  });
+});
+var _useStore = require("./useStore");
+Object.keys(_useStore).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useStore[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useStore[key];
+    }
+  });
+});
+var _Store = require("./Store");
+Object.keys(_Store).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Store[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Store[key];
+    }
+  });
+});
+var _ReactStore = require("./ReactStore");
+Object.keys(_ReactStore).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ReactStore[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ReactStore[key];
+    }
+  });
+});
+var _StoreInspector = require("./StoreInspector");
+Object.keys(_StoreInspector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StoreInspector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StoreInspector[key];
+    }
+  });
+});

package/store/useStore.d.ts

@@ -0,0 +1,22 @@
+import { Instance } from "../fastHooks.js";
+import type { ReadonlyStore } from "./Store.js";
+export declare function useStore<State, Value>(store: ReadonlyStore<State>, selector: (state: State) => Value): Value;
+export declare function useStore<State, Value, A1>(store: ReadonlyStore<State>, selector: (state: State, a1: A1) => Value, a1: A1): Value;
+export declare function useStore<State, Value, A1, A2>(store: ReadonlyStore<State>, selector: (state: State, a1: A1, a2: A2) => Value, a1: A1, a2: A2): Value;
+export declare function useStore<State, Value, A1, A2, A3>(store: ReadonlyStore<State>, selector: (state: State, a1: A1, a2: A2, a3: A3) => Value, a1: A1, a2: A2, a3: A3): Value;
+export type StoreInstance = Instance & {
+  syncIndex: number;
+  syncTick: number;
+  syncHooks: {
+    store: any;
+    selector: Function;
+    a1: unknown;
+    a2: unknown;
+    a3: unknown;
+    value: unknown;
+    didChange: boolean;
+  }[];
+  didChangeStore: boolean;
+  subscribe: (onStoreChange: any) => () => void;
+  getSnapshot: () => unknown;
+};

package/store/useStore.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStore = useStore;
+var React = _interopRequireWildcard(require("react"));
+var _shim = require("use-sync-external-store/shim");
+var _withSelector = require("use-sync-external-store/shim/with-selector");
+var _reactVersion = require("../reactVersion");
+var _fastHooks = require("../fastHooks");
+/* We need to import the shim because React 17 does not support the `useSyncExternalStore` API.
+ * More info: https://github.com/mui/mui-x/issues/18303#issuecomment-2958392341 */
+
+/* Some tests fail in R18 with the raw useSyncExternalStore. It may be possible to make it work
+ * but for now we only enable it for R19+. */
+const canUseRawUseSyncExternalStore = (0, _reactVersion.isReactVersionAtLeast)(19);
+const useStoreImplementation = canUseRawUseSyncExternalStore ? useStoreFast : useStoreLegacy;
+function useStore(store, selector, a1, a2, a3) {
+  return useStoreImplementation(store, selector, a1, a2, a3);
+}
+function useStoreR19(store, selector, a1, a2, a3) {
+  const getSelection = React.useCallback(() => selector(store.getSnapshot(), a1, a2, a3), [store, selector, a1, a2, a3]);
+  return (0, _shim.useSyncExternalStore)(store.subscribe, getSelection, getSelection);
+}
+(0, _fastHooks.register)({
+  before(instance) {
+    instance.syncIndex = 0;
+    if (!instance.didInitialize) {
+      instance.syncTick = 1;
+      instance.syncHooks = [];
+      instance.didChangeStore = true;
+      instance.getSnapshot = () => {
+        let didChange = false;
+        for (let i = 0; i < instance.syncHooks.length; i += 1) {
+          const hook = instance.syncHooks[i];
+          const value = hook.selector(hook.store.state, hook.a1, hook.a2, hook.a3);
+          if (hook.didChange || !Object.is(hook.value, value)) {
+            didChange = true;
+            hook.value = value;
+            hook.didChange = false;
+          }
+        }
+        if (didChange) {
+          instance.syncTick += 1;
+        }
+        return instance.syncTick;
+      };
+    }
+  },
+  after(instance) {
+    if (instance.syncHooks.length > 0) {
+      if (instance.didChangeStore) {
+        instance.didChangeStore = false;
+        instance.subscribe = onStoreChange => {
+          const stores = new Set();
+          for (const hook of instance.syncHooks) {
+            stores.add(hook.store);
+          }
+          const unsubscribes = [];
+          for (const store of stores) {
+            unsubscribes.push(store.subscribe(onStoreChange));
+          }
+          return () => {
+            for (const unsubscribe of unsubscribes) {
+              unsubscribe();
+            }
+          };
+        };
+      }
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      (0, _shim.useSyncExternalStore)(instance.subscribe, instance.getSnapshot, instance.getSnapshot);
+    }
+  }
+});
+function useStoreFast(store, selector, a1, a2, a3) {
+  const instance = (0, _fastHooks.getInstance)();
+  if (!instance) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useStoreR19(store, selector, a1, a2, a3);
+  }
+  const index = instance.syncIndex;
+  instance.syncIndex += 1;
+  let hook;
+  if (!instance.didInitialize) {
+    hook = {
+      store,
+      selector,
+      a1,
+      a2,
+      a3,
+      value: selector(store.getSnapshot(), a1, a2, a3),
+      didChange: false
+    };
+    instance.syncHooks.push(hook);
+  } else {
+    hook = instance.syncHooks[index];
+    if (hook.store !== store || hook.selector !== selector || !Object.is(hook.a1, a1) || !Object.is(hook.a2, a2) || !Object.is(hook.a3, a3)) {
+      if (hook.store !== store) {
+        instance.didChangeStore = true;
+      }
+      hook.store = store;
+      hook.selector = selector;
+      hook.a1 = a1;
+      hook.a2 = a2;
+      hook.a3 = a3;
+      hook.didChange = true;
+    }
+  }
+  return hook.value;
+}
+function useStoreLegacy(store, selector, a1, a2, a3) {
+  return (0, _withSelector.useSyncExternalStoreWithSelector)(store.subscribe, store.getSnapshot, store.getSnapshot, state => selector(state, a1, a2, a3));
+}

package/testUtils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Whether the test runs in JSDOM environment
+ */
+export declare const isJSDOM: boolean;
+export type IfEquals<T, U, Y = unknown, N = never> = (<G>() => G extends T ? 1 : 2) extends (<G>() => G extends U ? 1 : 2) ? Y : N;
+/**
+ * Issues a type error if `Expected` is not identical to `Actual`.
+ *
+ * `Expected` should be declared when invoking `expectType`.
+ * `Actual` should almost always we be a `typeof value` statement.
+ *
+ * @example `expectType<number | string, typeof value>(value)`
+ * TypeScript issues a type error since `value is not assignable to never`.
+ * This means `typeof value` is not identical to `number | string`
+ * @param _actual
+ */
+export declare function expectType<Expected, Actual>(_actual: IfEquals<Actual, Expected, Actual>): void;

package/testUtils.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expectType = expectType;
+exports.isJSDOM = void 0;
+/**
+ * Whether the test runs in JSDOM environment
+ */
+const isJSDOM = exports.isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+// https://stackoverflow.com/questions/53807517/how-to-test-if-two-types-are-exactly-the-same
+
+/**
+ * Issues a type error if `Expected` is not identical to `Actual`.
+ *
+ * `Expected` should be declared when invoking `expectType`.
+ * `Actual` should almost always we be a `typeof value` statement.
+ *
+ * @example `expectType<number | string, typeof value>(value)`
+ * TypeScript issues a type error since `value is not assignable to never`.
+ * This means `typeof value` is not identical to `number | string`
+ * @param _actual
+ */
+function expectType(_actual) {}

package/useAnimationFrame.d.ts

@@ -0,0 +1,18 @@
+type AnimationFrameId = number;
+export declare class AnimationFrame {
+  static create(): AnimationFrame;
+  static request(fn: FrameRequestCallback): number;
+  static cancel(id: AnimationFrameId): void;
+  currentId: AnimationFrameId | null;
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  request(fn: Function): void;
+  cancel: () => void;
+  disposeEffect: () => () => void;
+}
+/**
+ * A `requestAnimationFrame` with automatic cleanup and guard.
+ */
+export declare function useAnimationFrame(): AnimationFrame;
+export {};

package/useAnimationFrame.js

@@ -0,0 +1,113 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimationFrame = void 0;
+exports.useAnimationFrame = useAnimationFrame;
+var _useRefWithInit = require("./useRefWithInit");
+var _useOnMount = require("./useOnMount");
+/** Unlike `setTimeout`, rAF doesn't guarantee a positive integer return value, so we can't have
+ * a monomorphic `uint` type with `0` meaning empty.
+ * See warning note at:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#return_value */
+const EMPTY = null;
+let LAST_RAF = globalThis.requestAnimationFrame;
+class Scheduler {
+  /* This implementation uses an array as a backing data-structure for frame callbacks.
+   * It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
+   * never calls the native `cancelAnimationFrame` if there are no frames left. This can
+   * be much more efficient if there is a call pattern that alterns as
+   * "request-cancel-request-cancel-…".
+   * But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
+   * frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
+
+  callbacks = [];
+  callbacksCount = 0;
+  nextId = 1;
+  startId = 1;
+  isScheduled = false;
+  tick = timestamp => {
+    this.isScheduled = false;
+    const currentCallbacks = this.callbacks;
+    const currentCallbacksCount = this.callbacksCount;
+
+    // Update these before iterating, callbacks could call `requestAnimationFrame` again.
+    this.callbacks = [];
+    this.callbacksCount = 0;
+    this.startId = this.nextId;
+    if (currentCallbacksCount > 0) {
+      for (let i = 0; i < currentCallbacks.length; i += 1) {
+        currentCallbacks[i]?.(timestamp);
+      }
+    }
+  };
+  request(fn) {
+    const id = this.nextId;
+    this.nextId += 1;
+    this.callbacks.push(fn);
+    this.callbacksCount += 1;
+
+    /* In a test environment with fake timers, a fake `requestAnimationFrame` can be called
+     * but there's no guarantee that the animation frame will actually run before the fake
+     * timers are teared, which leaves `isScheduled` set, but won't run our `tick()`. */
+    const didRAFChange = process.env.NODE_ENV !== 'production' && LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true);
+    if (!this.isScheduled || didRAFChange) {
+      requestAnimationFrame(this.tick);
+      this.isScheduled = true;
+    }
+    return id;
+  }
+  cancel(id) {
+    const index = id - this.startId;
+    if (index < 0 || index >= this.callbacks.length) {
+      return;
+    }
+    this.callbacks[index] = null;
+    this.callbacksCount -= 1;
+  }
+}
+const scheduler = new Scheduler();
+class AnimationFrame {
+  static create() {
+    return new AnimationFrame();
+  }
+  static request(fn) {
+    return scheduler.request(fn);
+  }
+  static cancel(id) {
+    return scheduler.cancel(id);
+  }
+  currentId = EMPTY;
+
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  request(fn) {
+    this.cancel();
+    this.currentId = scheduler.request(() => {
+      this.currentId = EMPTY;
+      fn();
+    });
+  }
+  cancel = () => {
+    if (this.currentId !== EMPTY) {
+      scheduler.cancel(this.currentId);
+      this.currentId = EMPTY;
+    }
+  };
+  disposeEffect = () => {
+    return this.cancel;
+  };
+}
+
+/**
+ * A `requestAnimationFrame` with automatic cleanup and guard.
+ */
+exports.AnimationFrame = AnimationFrame;
+function useAnimationFrame() {
+  const timeout = (0, _useRefWithInit.useRefWithInit)(AnimationFrame.create).current;
+  (0, _useOnMount.useOnMount)(timeout.disposeEffect);
+  return timeout;
+}

package/useControlled.d.ts

@@ -0,0 +1,24 @@
+export interface UseControlledProps<T = unknown> {
+  /**
+   * Holds the component value when it's controlled.
+   */
+  controlled: T | undefined;
+  /**
+   * The default value when uncontrolled.
+   */
+  default: T | undefined;
+  /**
+   * The component name displayed in warnings.
+   */
+  name: string;
+  /**
+   * The name of the state variable displayed in warnings.
+   */
+  state?: string | undefined;
+}
+export declare function useControlled<T = unknown>({
+  controlled,
+  default: defaultProp,
+  name,
+  state
+}: UseControlledProps<T>): [T, (newValue: T | ((prevValue: T) => T)) => void];

package/useControlled.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+
+// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- process.env never changes, dependency arrays are intentionally ignored
+/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useControlled = useControlled;
+var React = _interopRequireWildcard(require("react"));
+function useControlled({
+  controlled,
+  default: defaultProp,
+  name,
+  state = 'value'
+}) {
+  // isControlled is ignored in the hook dependency lists as it should never change.
+  const {
+    current: isControlled
+  } = React.useRef(controlled !== undefined);
+  const [valueState, setValue] = React.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      if (isControlled !== (controlled !== undefined)) {
+        console.error([`Tale UI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+      }
+    }, [state, name, controlled]);
+    const {
+      current: defaultValue
+    } = React.useRef(defaultProp);
+    React.useEffect(() => {
+      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is for more details.
+      if (!isControlled && JSON.stringify(defaultValue) !== JSON.stringify(defaultProp)) {
+        console.error([`Tale UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
+      }
+    }, [JSON.stringify(defaultProp)]);
+  }
+  const setValueIfUncontrolled = React.useCallback(newValue => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}

package/useEnhancedClickHandler.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type InteractionType = 'mouse' | 'touch' | 'pen' | 'keyboard' | '';
+/**
+ * Provides a cross-browser way to determine the type of the pointer used to click.
+ * Safari and Firefox do not provide the PointerEvent to the click handler (they use MouseEvent) yet.
+ * Additionally, this implementation detects if the click was triggered by the keyboard.
+ *
+ * @param handler The function to be called when the button is clicked. The first parameter is the original event and the second parameter is the pointer type.
+ */
+export declare function useEnhancedClickHandler(handler: (event: React.MouseEvent | React.PointerEvent, interactionType: InteractionType) => void): {
+  onClick: (event: React.MouseEvent | React.PointerEvent) => void;
+  onPointerDown: (event: React.PointerEvent) => void;
+};

package/useEnhancedClickHandler.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEnhancedClickHandler = useEnhancedClickHandler;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Provides a cross-browser way to determine the type of the pointer used to click.
+ * Safari and Firefox do not provide the PointerEvent to the click handler (they use MouseEvent) yet.
+ * Additionally, this implementation detects if the click was triggered by the keyboard.
+ *
+ * @param handler The function to be called when the button is clicked. The first parameter is the original event and the second parameter is the pointer type.
+ */
+function useEnhancedClickHandler(handler) {
+  const lastClickInteractionTypeRef = React.useRef('');
+  const handlePointerDown = React.useCallback(event => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    lastClickInteractionTypeRef.current = event.pointerType;
+    handler(event, event.pointerType);
+  }, [handler]);
+  const handleClick = React.useCallback(event => {
+    // event.detail has the number of clicks performed on the element. 0 means it was triggered by the keyboard.
+    if (event.detail === 0) {
+      handler(event, 'keyboard');
+      return;
+    }
+    if ('pointerType' in event) {
+      // Chrome and Edge correctly use PointerEvent
+      handler(event, event.pointerType);
+    } else {
+      handler(event, lastClickInteractionTypeRef.current);
+    }
+    lastClickInteractionTypeRef.current = '';
+  }, [handler]);
+  return {
+    onClick: handleClick,
+    onPointerDown: handlePointerDown
+  };
+}

package/useForcedRerendering.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns a function that forces a rerender.
+ */
+export declare function useForcedRerendering(): () => void;