@fluentui/react-utilities 9.24.1 → 9.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -2
- package/dist/index.d.ts +28 -0
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useAnimationFrame.js +1 -0
- package/lib/hooks/useAnimationFrame.js.map +1 -1
- package/lib/hooks/useApplyScrollbarWidth.js +40 -0
- package/lib/hooks/useApplyScrollbarWidth.js.map +1 -0
- package/lib/hooks/useBrowserTimer.js +1 -0
- package/lib/hooks/useBrowserTimer.js.map +1 -1
- package/lib/hooks/useControllableState.js +1 -0
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib/hooks/useEventCallback.js +1 -0
- package/lib/hooks/useEventCallback.js.map +1 -1
- package/lib/hooks/useFirstMount.js +1 -0
- package/lib/hooks/useFirstMount.js.map +1 -1
- package/lib/hooks/useForceUpdate.js +1 -0
- package/lib/hooks/useForceUpdate.js.map +1 -1
- package/lib/hooks/useId.js +1 -0
- package/lib/hooks/useId.js.map +1 -1
- package/lib/hooks/useMergedRefs.js +1 -0
- package/lib/hooks/useMergedRefs.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +1 -0
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnScrollOutside.js +1 -0
- package/lib/hooks/useOnScrollOutside.js.map +1 -1
- package/lib/hooks/usePrevious.js +1 -0
- package/lib/hooks/usePrevious.js.map +1 -1
- package/lib/hooks/useScrollbarWidth.js +4 -8
- package/lib/hooks/useScrollbarWidth.js.map +1 -1
- package/lib/hooks/useTimeout.js +1 -0
- package/lib/hooks/useTimeout.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/selection/useSelection.js +1 -0
- package/lib/selection/useSelection.js.map +1 -1
- package/lib/ssr/SSRContext.js +1 -0
- package/lib/ssr/SSRContext.js.map +1 -1
- package/lib/ssr/canUseDOM.js +2 -1
- package/lib/ssr/canUseDOM.js.map +1 -1
- package/lib/utils/index.js +1 -0
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/measureScrollBarWidth.js +16 -0
- package/lib/utils/measureScrollBarWidth.js.map +1 -0
- package/lib-commonjs/hooks/index.js +4 -0
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useAnimationFrame.js +1 -0
- package/lib-commonjs/hooks/useAnimationFrame.js.map +1 -1
- package/lib-commonjs/hooks/useApplyScrollbarWidth.js +39 -0
- package/lib-commonjs/hooks/useApplyScrollbarWidth.js.map +1 -0
- package/lib-commonjs/hooks/useBrowserTimer.js +1 -0
- package/lib-commonjs/hooks/useBrowserTimer.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.js +1 -0
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/hooks/useEventCallback.js +1 -0
- package/lib-commonjs/hooks/useEventCallback.js.map +1 -1
- package/lib-commonjs/hooks/useFirstMount.js +1 -0
- package/lib-commonjs/hooks/useFirstMount.js.map +1 -1
- package/lib-commonjs/hooks/useForceUpdate.js +1 -0
- package/lib-commonjs/hooks/useForceUpdate.js.map +1 -1
- package/lib-commonjs/hooks/useId.js +1 -0
- package/lib-commonjs/hooks/useId.js.map +1 -1
- package/lib-commonjs/hooks/useMergedRefs.js +1 -0
- package/lib-commonjs/hooks/useMergedRefs.js.map +1 -1
- package/lib-commonjs/hooks/useOnClickOutside.js +1 -0
- package/lib-commonjs/hooks/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/hooks/useOnScrollOutside.js +1 -0
- package/lib-commonjs/hooks/useOnScrollOutside.js.map +1 -1
- package/lib-commonjs/hooks/usePrevious.js +1 -0
- package/lib-commonjs/hooks/usePrevious.js.map +1 -1
- package/lib-commonjs/hooks/useScrollbarWidth.js +3 -8
- package/lib-commonjs/hooks/useScrollbarWidth.js.map +1 -1
- package/lib-commonjs/hooks/useTimeout.js +1 -0
- package/lib-commonjs/hooks/useTimeout.js.map +1 -1
- package/lib-commonjs/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/selection/useSelection.js +1 -0
- package/lib-commonjs/selection/useSelection.js.map +1 -1
- package/lib-commonjs/ssr/SSRContext.js +1 -0
- package/lib-commonjs/ssr/SSRContext.js.map +1 -1
- package/lib-commonjs/ssr/canUseDOM.js +2 -1
- package/lib-commonjs/ssr/canUseDOM.js.map +1 -1
- package/lib-commonjs/utils/index.js +4 -0
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/measureScrollBarWidth.js +26 -0
- package/lib-commonjs/utils/measureScrollBarWidth.js.map +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-utilities
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 02 Oct 2025 15:06:58 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.25.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.25.0)
|
|
8
|
+
|
|
9
|
+
Thu, 02 Oct 2025 15:06:58 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.24.1..@fluentui/react-utilities_v9.25.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: add the useApplyScrollbarWidth hook for SSR-safe scrollbar width application ([PR #35191](https://github.com/microsoft/fluentui/pull/35191) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
|
|
16
|
+
|
|
17
|
+
### Patches
|
|
18
|
+
|
|
19
|
+
- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
|
|
20
|
+
|
|
7
21
|
## [9.24.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.24.1)
|
|
8
22
|
|
|
9
|
-
Mon, 08 Sep 2025 12:
|
|
23
|
+
Mon, 08 Sep 2025 12:50:53 GMT
|
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.24.0..@fluentui/react-utilities_v9.24.1)
|
|
11
25
|
|
|
12
26
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -989,6 +989,33 @@ export declare type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>,
|
|
|
989
989
|
*/
|
|
990
990
|
export declare function useAnimationFrame(): readonly [(fn: () => void, delay?: number) => number, () => void];
|
|
991
991
|
|
|
992
|
+
/**
|
|
993
|
+
* A React hook that provides a ref for applying the browser's scrollbar width as a CSS property.
|
|
994
|
+
*
|
|
995
|
+
* This hook is SSR-safe and caches measurements per document to avoid redundant calculations.
|
|
996
|
+
* When the ref is attached to an element, the hook automatically applies the measured scrollbar
|
|
997
|
+
* width to the specified CSS property (defaults to 'width').
|
|
998
|
+
*
|
|
999
|
+
* @example
|
|
1000
|
+
* ```tsx
|
|
1001
|
+
* const scrollbarRef = useApplyScrollbarWidth({ targetDocument: document });
|
|
1002
|
+
* return <div ref={scrollbarRef} />;
|
|
1003
|
+
* ```
|
|
1004
|
+
*/
|
|
1005
|
+
export declare function useApplyScrollbarWidth<T extends HTMLElement>(options?: UseApplyScrollbarWidthOptions): React_2.RefCallback<T>;
|
|
1006
|
+
|
|
1007
|
+
declare interface UseApplyScrollbarWidthOptions {
|
|
1008
|
+
/**
|
|
1009
|
+
* Does not use the cache and recalculates the scrollbar width
|
|
1010
|
+
*/
|
|
1011
|
+
force?: boolean;
|
|
1012
|
+
/**
|
|
1013
|
+
* CSS property to apply the scrollbar width to.
|
|
1014
|
+
* @default 'width'
|
|
1015
|
+
*/
|
|
1016
|
+
property?: string;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
992
1019
|
/**
|
|
993
1020
|
* @internal
|
|
994
1021
|
*
|
|
@@ -1146,6 +1173,7 @@ export declare const usePrevious: <ValueType = unknown>(value: ValueType) => Val
|
|
|
1146
1173
|
|
|
1147
1174
|
/**
|
|
1148
1175
|
* @returns The width in pixels of the scrollbar in the user agent
|
|
1176
|
+
* @remarks This hook is not SSR-safe. For SSR-safe scrollbar width application, use the `useApplyScrollbarWidth` from {@link file://./useApplyScrollbarWidth.ts} instead.
|
|
1149
1177
|
*/
|
|
1150
1178
|
export declare function useScrollbarWidth(options: UseScrollbarWidthOptions): number | undefined;
|
|
1151
1179
|
|
package/lib/hooks/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { useAnimationFrame } from './useAnimationFrame';
|
|
2
|
+
export { useApplyScrollbarWidth } from './useApplyScrollbarWidth';
|
|
2
3
|
export { useControllableState } from './useControllableState';
|
|
3
4
|
export { useEventCallback } from './useEventCallback';
|
|
4
5
|
export { useFirstMount } from './useFirstMount';
|
package/lib/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { useAnimationFrame } from './useAnimationFrame';\nexport type { UseControllableStateOptions } from './useControllableState';\nexport { useControllableState } from './useControllableState';\nexport { useEventCallback } from './useEventCallback';\nexport { useFirstMount } from './useFirstMount';\nexport { useForceUpdate } from './useForceUpdate';\nexport { IdPrefixProvider, resetIdsForTests, useId } from './useId';\nexport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\nexport type { RefObjectFunction } from './useMergedRefs';\nexport { useMergedRefs } from './useMergedRefs';\nexport type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside';\nexport { useOnClickOutside } from './useOnClickOutside';\nexport { useOnScrollOutside } from './useOnScrollOutside';\nexport { usePrevious } from './usePrevious';\nexport { useScrollbarWidth } from './useScrollbarWidth';\nexport { useTimeout } from './useTimeout';\n"],"names":["useAnimationFrame","useControllableState","useEventCallback","useFirstMount","useForceUpdate","IdPrefixProvider","resetIdsForTests","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;
|
|
1
|
+
{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { useAnimationFrame } from './useAnimationFrame';\nexport { useApplyScrollbarWidth } from './useApplyScrollbarWidth';\nexport type { UseControllableStateOptions } from './useControllableState';\nexport { useControllableState } from './useControllableState';\nexport { useEventCallback } from './useEventCallback';\nexport { useFirstMount } from './useFirstMount';\nexport { useForceUpdate } from './useForceUpdate';\nexport { IdPrefixProvider, resetIdsForTests, useId } from './useId';\nexport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\nexport type { RefObjectFunction } from './useMergedRefs';\nexport { useMergedRefs } from './useMergedRefs';\nexport type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside';\nexport { useOnClickOutside } from './useOnClickOutside';\nexport { useOnScrollOutside } from './useOnScrollOutside';\nexport { usePrevious } from './usePrevious';\nexport { useScrollbarWidth } from './useScrollbarWidth';\nexport { useTimeout } from './useTimeout';\n"],"names":["useAnimationFrame","useApplyScrollbarWidth","useControllableState","useEventCallback","useFirstMount","useForceUpdate","IdPrefixProvider","resetIdsForTests","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,UAAU;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,UAAU,QAAQ,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useAnimationFrame.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useAnimationFrame.ts"],"sourcesContent":["'use client';\n\nimport { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setAnimationFrameNoop = (callback: FrameRequestCallback) => {\n callback(0);\n return 0;\n};\nconst cancelAnimationFrameNoop = (handle: number) => handle;\n\n/**\n * @internal\n * Helper to manage a browser requestAnimationFrame.\n * Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.\n */\nexport function useAnimationFrame(): readonly [(fn: () => void, delay?: number) => number, () => void] {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const setAnimationFrame = win ? win.requestAnimationFrame : setAnimationFrameNoop;\n const clearAnimationFrame = win ? win.cancelAnimationFrame : cancelAnimationFrameNoop;\n\n return useBrowserTimer(setAnimationFrame, clearAnimationFrame);\n}\n"],"names":["useBrowserTimer","useFluent_unstable","useFluent","setAnimationFrameNoop","callback","cancelAnimationFrameNoop","handle","useAnimationFrame","targetDocument","win","defaultView","setAnimationFrame","requestAnimationFrame","clearAnimationFrame","cancelAnimationFrame"],"mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,oBAAoB;AACpD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,wBAAwB,CAACC;IAC7BA,SAAS;IACT,OAAO;AACT;AACA,MAAMC,2BAA2B,CAACC,SAAmBA;AAErD;;;;;;;CAOC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGN;IAC3B,MAAMO,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAMC,oBAAoBF,MAAMA,IAAIG,qBAAqB,GAAGT;IAC5D,MAAMU,sBAAsBJ,MAAMA,IAAIK,oBAAoB,GAAGT;IAE7D,OAAOL,gBAAgBW,mBAAmBE;AAC5C"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { measureScrollbarWidth } from '../utils/measureScrollBarWidth';
|
|
4
|
+
const cache = new WeakMap();
|
|
5
|
+
/**
|
|
6
|
+
* A React hook that provides a ref for applying the browser's scrollbar width as a CSS property.
|
|
7
|
+
*
|
|
8
|
+
* This hook is SSR-safe and caches measurements per document to avoid redundant calculations.
|
|
9
|
+
* When the ref is attached to an element, the hook automatically applies the measured scrollbar
|
|
10
|
+
* width to the specified CSS property (defaults to 'width').
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* const scrollbarRef = useApplyScrollbarWidth({ targetDocument: document });
|
|
15
|
+
* return <div ref={scrollbarRef} />;
|
|
16
|
+
* ```
|
|
17
|
+
*/ export function useApplyScrollbarWidth(options = {}) {
|
|
18
|
+
const { force, property = 'width' } = options;
|
|
19
|
+
const applyScrollbarWidth = React.useCallback((element)=>{
|
|
20
|
+
if (!element) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
// If we have a cached value, use it
|
|
24
|
+
if (!force && cache.has(element.ownerDocument)) {
|
|
25
|
+
const cachedWidth = cache.get(element.ownerDocument);
|
|
26
|
+
if (cachedWidth !== undefined) {
|
|
27
|
+
element.style.setProperty(property, `${cachedWidth}px`);
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
// Measure the scrollbar width and apply it to the element
|
|
32
|
+
const scrollbarWidth = measureScrollbarWidth(element.ownerDocument);
|
|
33
|
+
cache.set(element.ownerDocument, scrollbarWidth);
|
|
34
|
+
element.style.setProperty(property, `${scrollbarWidth}px`);
|
|
35
|
+
}, [
|
|
36
|
+
force,
|
|
37
|
+
property
|
|
38
|
+
]);
|
|
39
|
+
return applyScrollbarWidth;
|
|
40
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useApplyScrollbarWidth.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { measureScrollbarWidth } from '../utils/measureScrollBarWidth';\n\nconst cache = new WeakMap<Document, number>();\n\ninterface UseApplyScrollbarWidthOptions {\n /**\n * Does not use the cache and recalculates the scrollbar width\n */\n force?: boolean;\n\n /**\n * CSS property to apply the scrollbar width to.\n * @default 'width'\n */\n property?: string;\n}\n\n/**\n * A React hook that provides a ref for applying the browser's scrollbar width as a CSS property.\n *\n * This hook is SSR-safe and caches measurements per document to avoid redundant calculations.\n * When the ref is attached to an element, the hook automatically applies the measured scrollbar\n * width to the specified CSS property (defaults to 'width').\n *\n * @example\n * ```tsx\n * const scrollbarRef = useApplyScrollbarWidth({ targetDocument: document });\n * return <div ref={scrollbarRef} />;\n * ```\n */\nexport function useApplyScrollbarWidth<T extends HTMLElement>(\n options: UseApplyScrollbarWidthOptions = {},\n): React.RefCallback<T> {\n const { force, property = 'width' } = options;\n\n const applyScrollbarWidth = React.useCallback(\n (element: T | null) => {\n if (!element) {\n return;\n }\n\n // If we have a cached value, use it\n if (!force && cache.has(element.ownerDocument)) {\n const cachedWidth = cache.get(element.ownerDocument);\n if (cachedWidth !== undefined) {\n element.style.setProperty(property, `${cachedWidth}px`);\n return;\n }\n }\n\n // Measure the scrollbar width and apply it to the element\n const scrollbarWidth = measureScrollbarWidth(element.ownerDocument);\n cache.set(element.ownerDocument, scrollbarWidth);\n element.style.setProperty(property, `${scrollbarWidth}px`);\n },\n [force, property],\n );\n\n return applyScrollbarWidth;\n}\n"],"names":["React","measureScrollbarWidth","cache","WeakMap","useApplyScrollbarWidth","options","force","property","applyScrollbarWidth","useCallback","element","has","ownerDocument","cachedWidth","get","undefined","style","setProperty","scrollbarWidth","set"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iCAAiC;AAEvE,MAAMC,QAAQ,IAAIC;AAelB;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,KAAK,EAAEC,WAAW,OAAO,EAAE,GAAGF;IAEtC,MAAMG,sBAAsBR,MAAMS,WAAW,CAC3C,CAACC;QACC,IAAI,CAACA,SAAS;YACZ;QACF;QAEA,oCAAoC;QACpC,IAAI,CAACJ,SAASJ,MAAMS,GAAG,CAACD,QAAQE,aAAa,GAAG;YAC9C,MAAMC,cAAcX,MAAMY,GAAG,CAACJ,QAAQE,aAAa;YACnD,IAAIC,gBAAgBE,WAAW;gBAC7BL,QAAQM,KAAK,CAACC,WAAW,CAACV,UAAU,GAAGM,YAAY,EAAE,CAAC;gBACtD;YACF;QACF;QAEA,0DAA0D;QAC1D,MAAMK,iBAAiBjB,sBAAsBS,QAAQE,aAAa;QAClEV,MAAMiB,GAAG,CAACT,QAAQE,aAAa,EAAEM;QACjCR,QAAQM,KAAK,CAACC,WAAW,CAACV,UAAU,GAAGW,eAAe,EAAE,CAAC;IAC3D,GACA;QAACZ;QAAOC;KAAS;IAGnB,OAAOC;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useBrowserTimer.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useBrowserTimer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\ntype BrowserTimerSetter =\n | ((fn: () => void, duration?: number, ...args: Record<string, unknown>[]) => number)\n | ((fn: () => void) => number);\n\n/**\n * @internal\n * Helper to manage a browser timer.\n * Ensures that the timer isn't set multiple times at once,\n * and is cleaned up when the component is unloaded.\n *\n * @param setTimer - The timer setter function\n * @param cancelTimer - The timer cancel function\n * @returns A pair of [setTimer, cancelTimer] that are stable between renders.\n *\n * @example\n * const [setTimer, cancelTimer] = useBrowserTimer(setTimeout, cancelTimeout);\n *\n * setTimer(() => console.log('Hello world!'), 1000);\n * cancelTimer();\n */\nexport function useBrowserTimer(\n setTimer: BrowserTimerSetter,\n cancelTimer: (id: number) => void,\n): [(fn: () => void, delay?: number) => number, () => void] {\n const id = React.useRef<number | undefined>(undefined);\n\n const set = React.useCallback(\n (fn: () => void, delay?: number) => {\n if (id.current !== undefined) {\n cancelTimer(id.current);\n }\n\n id.current = setTimer(fn, delay);\n return id.current;\n },\n [cancelTimer, setTimer],\n );\n\n const cancel = React.useCallback(() => {\n if (id.current !== undefined) {\n cancelTimer(id.current);\n id.current = undefined;\n }\n }, [cancelTimer]);\n\n // Clean up the timeout when the component is unloaded\n React.useEffect(() => cancel, [cancel]);\n\n return [set, cancel] as const;\n}\n"],"names":["React","useBrowserTimer","setTimer","cancelTimer","id","useRef","undefined","set","useCallback","fn","delay","current","cancel","useEffect"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAM/B;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASC,gBACdC,QAA4B,EAC5BC,WAAiC;IAEjC,MAAMC,KAAKJ,MAAMK,MAAM,CAAqBC;IAE5C,MAAMC,MAAMP,MAAMQ,WAAW,CAC3B,CAACC,IAAgBC;QACf,IAAIN,GAAGO,OAAO,KAAKL,WAAW;YAC5BH,YAAYC,GAAGO,OAAO;QACxB;QAEAP,GAAGO,OAAO,GAAGT,SAASO,IAAIC;QAC1B,OAAON,GAAGO,OAAO;IACnB,GACA;QAACR;QAAaD;KAAS;IAGzB,MAAMU,SAASZ,MAAMQ,WAAW,CAAC;QAC/B,IAAIJ,GAAGO,OAAO,KAAKL,WAAW;YAC5BH,YAAYC,GAAGO,OAAO;YACtBP,GAAGO,OAAO,GAAGL;QACf;IACF,GAAG;QAACH;KAAY;IAEhB,sDAAsD;IACtDH,MAAMa,SAAS,CAAC,IAAMD,QAAQ;QAACA;KAAO;IAEtC,OAAO;QAACL;QAAKK;KAAO;AACtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n /**\n * User-provided default state or initializer, for uncontrolled usage.\n */\n defaultState?: State | (() => State);\n /**\n * User-provided controlled state. `undefined` means internal state will be used.\n */\n state: State | undefined;\n /**\n * Used as the initial state if `state` and `defaultState` are both `undefined`.\n * If `undefined` is the correct initial state, pass that here.\n */\n initialState: State;\n};\n\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n return typeof newState === 'function';\n}\n\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */\nexport const useControllableState = <State>(\n options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n 'use no memo';\n\n if (process.env.NODE_ENV !== 'production') {\n if (options.state !== undefined && options.defaultState !== undefined) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [useControllableState]:\n A component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).\n Decide between using a controlled or uncontrolled component and remove one of this props.\n More info: https://reactjs.org/link/controlled-components\n ${new Error().stack}\n `);\n }\n }\n const [internalState, setInternalState] = React.useState<State>(() => {\n if (options.defaultState === undefined) {\n return options.initialState;\n }\n return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n });\n\n // Heads up!\n // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n\n const stateValueRef = React.useRef<State | undefined>(options.state);\n\n React.useEffect(() => {\n stateValueRef.current = options.state;\n }, [options.state]);\n\n const setControlledState = React.useCallback((newState: React.SetStateAction<State>) => {\n if (isFactoryDispatch(newState)) {\n newState(stateValueRef.current as State);\n }\n }, []);\n\n return useIsControlled(options.state) ? [options.state, setControlledState] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n return typeof value === 'function';\n}\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = <V>(controlledValue: V | undefined): controlledValue is V => {\n 'use no memo';\n\n const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n if (process.env.NODE_ENV !== 'production') {\n // We don't want these warnings in production even though it is against native behaviour\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (isControlled !== (controlledValue !== undefined)) {\n const error = new Error();\n\n const controlWarning = isControlled\n ? 'a controlled value to be uncontrolled'\n : 'an uncontrolled value to be controlled';\n\n const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [useControllableState]:\n A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\n Decide between using a controlled or uncontrolled input element for the lifetime of the component.\n More info: https://reactjs.org/link/controlled-components\n ${error.stack}\n `);\n }\n }, [isControlled, controlledValue]);\n }\n\n return isControlled;\n};\n"],"names":["React","isFactoryDispatch","newState","useControllableState","options","process","env","NODE_ENV","state","undefined","defaultState","console","error","Error","stack","internalState","setInternalState","useState","initialState","isInitializer","stateValueRef","useRef","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","controlWarning","undefinedWarning"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAqB/B,SAASC,kBAAyBC,QAAqC;IACrE,OAAO,OAAOA,aAAa;AAC7B;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,uBAAuB,CAClCC;IAEA;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIH,QAAQI,KAAK,KAAKC,aAAaL,QAAQM,YAAY,KAAKD,WAAW;YACrE,sCAAsC;YACtCE,QAAQC,KAAK,CAAuB,CAAC;;;;AAKrC,EAAE,IAAIC,QAAQC,KAAK,EACpB;QACD;IACF;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGhB,MAAMiB,QAAQ,CAAQ;QAC9D,IAAIb,QAAQM,YAAY,KAAKD,WAAW;YACtC,OAAOL,QAAQc,YAAY;QAC7B;QACA,OAAOC,cAAcf,QAAQM,YAAY,IAAIN,QAAQM,YAAY,KAAKN,QAAQM,YAAY;IAC5F;IAEA,YAAY;IACZ,6FAA6F;IAE7F,MAAMU,gBAAgBpB,MAAMqB,MAAM,CAAoBjB,QAAQI,KAAK;IAEnER,MAAMsB,SAAS,CAAC;QACdF,cAAcG,OAAO,GAAGnB,QAAQI,KAAK;IACvC,GAAG;QAACJ,QAAQI,KAAK;KAAC;IAElB,MAAMgB,qBAAqBxB,MAAMyB,WAAW,CAAC,CAACvB;QAC5C,IAAID,kBAAkBC,WAAW;YAC/BA,SAASkB,cAAcG,OAAO;QAChC;IACF,GAAG,EAAE;IAEL,OAAOG,gBAAgBtB,QAAQI,KAAK,IAAI;QAACJ,QAAQI,KAAK;QAAEgB;KAAmB,GAAG;QAACT;QAAeC;KAAiB;AACjH,EAAE;AAEF,SAASG,cAAqBQ,KAA4B;IACxD,OAAO,OAAOA,UAAU;AAC1B;AAEA;;;;CAIC,GACD,MAAMD,kBAAkB,CAAIE;IAC1B;IAEA,MAAM,CAACC,aAAa,GAAG7B,MAAMiB,QAAQ,CAAU,IAAMW,oBAAoBnB;IAEzE,IAAIJ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDP,MAAMsB,SAAS,CAAC;YACd,IAAIO,iBAAkBD,CAAAA,oBAAoBnB,SAAQ,GAAI;gBACpD,MAAMG,QAAQ,IAAIC;gBAElB,MAAMiB,iBAAiBD,eACnB,0CACA;gBAEJ,MAAME,mBAAmBF,eAAe,4BAA4B;gBAEpE,sCAAsC;gBACtClB,QAAQC,KAAK,CAAuB,CAAC;wBAEX,EAAEkB,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEnB,MAAME,KAAK,EACd;YACH;QACF,GAAG;YAACe;YAAcD;SAAgB;IACpC;IAEA,OAAOC;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useEventCallback.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useEventCallback.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n/**\n * @internal\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 dependencies 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 re-renders\n *\n * @param fn - The callback function that will be used\n */\nexport const useEventCallback = <Args extends unknown[], Return>(\n fn: (...args: Args) => Return,\n): ((...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"],"names":["React","useIsomorphicLayoutEffect","useEventCallback","fn","callbackRef","useRef","Error","current","useCallback","args","callback"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC;IAEA,MAAMC,cAAcJ,MAAMK,MAAM,CAAY;QAC1C,MAAM,IAAIC,MAAM;IAClB;IAEAL,0BAA0B;QACxBG,YAAYG,OAAO,GAAGJ;IACxB,GAAG;QAACA;KAAG;IAEP,OAAOH,MAAMQ,WAAW,CACtB,CAAC,GAAGC;QACF,MAAMC,WAAWN,YAAYG,OAAO;QACpC,OAAOG,YAAYD;IACrB,GACA;QAACL;KAAY;AAEjB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFirstMount.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useFirstMount.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * @internal\n * Checks if components was mounted the first time.\n * Supports React concurrent/strict mode by using `useEffect`\n * to track the first mount instead of mutating refs during render.\n *\n * @example\n * const isFirstMount = useFirstMount();\n */\nexport function useFirstMount(): boolean {\n const isFirst = React.useRef(true);\n\n React.useEffect(() => {\n if (isFirst.current) {\n isFirst.current = false;\n }\n }, []);\n\n return isFirst.current;\n}\n"],"names":["React","useFirstMount","isFirst","useRef","useEffect","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B;;;;;;;;CAQC,GACD,OAAO,SAASC;IACd,MAAMC,UAAUF,MAAMG,MAAM,CAAC;IAE7BH,MAAMI,SAAS,CAAC;QACd,IAAIF,QAAQG,OAAO,EAAE;YACnBH,QAAQG,OAAO,GAAG;QACpB;IACF,GAAG,EAAE;IAEL,OAAOH,QAAQG,OAAO;AACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useForceUpdate.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useForceUpdate.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n/**\n * @internal\n * Forces a re-render, similar to `forceUpdate` in class components.\n */\nexport function useForceUpdate(): React.DispatchWithoutAction {\n return React.useReducer(x => x + 1, 0)[1];\n}\n"],"names":["React","useForceUpdate","useReducer","x"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B;;;CAGC,GACD,OAAO,SAASC;IACd,OAAOD,MAAME,UAAU,CAACC,CAAAA,IAAKA,IAAI,GAAG,EAAE,CAAC,EAAE;AAC3C"}
|
package/lib/hooks/useId.js
CHANGED
package/lib/hooks/useId.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useId.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useId.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { defaultSSRContextValue, useSSRContext } from '../ssr/index';\n\nconst IdPrefixContext = React.createContext<string | undefined>(undefined);\n\n/**\n * Allows to define a prefix that will be used for all IDs generated by useId() hook. It's useful to avoid collisions\n * between different bundles.\n */\nexport const IdPrefixProvider = IdPrefixContext.Provider;\n\nfunction useIdPrefix(): string {\n return React.useContext(IdPrefixContext) || '';\n}\n\n/**\n * Resets generated IDs, should be used only in tests.\n */\nexport function resetIdsForTests(): void {\n defaultSSRContextValue.current = 0;\n}\n\n/**\n * Hook to generate a unique ID.\n *\n * @param prefix - Optional prefix for the ID. Defaults to 'fui-'.\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 = 'fui-', providedId?: string): string {\n 'use no memo';\n\n const contextValue = useSSRContext();\n const idPrefix = useIdPrefix();\n\n // Checking if useId is available on React, if it is, we use it to generate the id. String concatenation is used to\n // prevent bundlers from complaining with older versions of React.\n const _useId = (React as never)['use' + 'Id'] as (() => string) | undefined;\n\n if (_useId) {\n const generatedId = _useId();\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const escapedId = React.useMemo(() => generatedId.replace(/:/g, ''), [generatedId]);\n\n return providedId || `${idPrefix}${prefix}${escapedId}`;\n }\n\n // Hooks appear to be running conditionally, but they will always run in the same order since it's based on\n // the version of React being used. This is safe to ignore.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return React.useMemo(() => {\n if (providedId) {\n return providedId;\n }\n\n return `${idPrefix}${prefix}${++contextValue.current}`;\n }, [idPrefix, prefix, providedId, contextValue]);\n}\n"],"names":["React","defaultSSRContextValue","useSSRContext","IdPrefixContext","createContext","undefined","IdPrefixProvider","Provider","useIdPrefix","useContext","resetIdsForTests","current","useId","prefix","providedId","contextValue","idPrefix","_useId","generatedId","escapedId","useMemo","replace"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,EAAEC,aAAa,QAAQ,eAAe;AAErE,MAAMC,kBAAkBH,MAAMI,aAAa,CAAqBC;AAEhE;;;CAGC,GACD,OAAO,MAAMC,mBAAmBH,gBAAgBI,QAAQ,CAAC;AAEzD,SAASC;IACP,OAAOR,MAAMS,UAAU,CAACN,oBAAoB;AAC9C;AAEA;;CAEC,GACD,OAAO,SAASO;IACdT,uBAAuBU,OAAO,GAAG;AACnC;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,MAAMC,SAAiB,MAAM,EAAEC,UAAmB;IAChE;IAEA,MAAMC,eAAeb;IACrB,MAAMc,WAAWR;IAEjB,mHAAmH;IACnH,kEAAkE;IAClE,MAAMS,SAAS,AAACjB,KAAe,CAAC,QAAQ,KAAK;IAE7C,IAAIiB,QAAQ;QACV,MAAMC,cAAcD;QAEpB,sDAAsD;QACtD,MAAME,YAAYnB,MAAMoB,OAAO,CAAC,IAAMF,YAAYG,OAAO,CAAC,MAAM,KAAK;YAACH;SAAY;QAElF,OAAOJ,cAAc,GAAGE,WAAWH,SAASM,WAAW;IACzD;IAEA,2GAA2G;IAC3G,2DAA2D;IAC3D,sDAAsD;IACtD,OAAOnB,MAAMoB,OAAO,CAAC;QACnB,IAAIN,YAAY;YACd,OAAOA;QACT;QAEA,OAAO,GAAGE,WAAWH,SAAS,EAAEE,aAAaJ,OAAO,EAAE;IACxD,GAAG;QAACK;QAAUH;QAAQC;QAAYC;KAAa;AACjD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useMergedRefs.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useMergedRefs.ts"],"sourcesContent":["'use client';\n\nimport * 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 | null> & ((value: T | null) => void);\n\n/** @internal */\ntype MutableRefObjectFunction<T> = React.MutableRefObject<T | null> & ((value: T | null) => 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 */\n// LegacyRef is actually not supported, but in React v18 types this is leaking directly from forwardRef component declaration\nexport function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObjectFunction<T> {\n 'use no memo';\n\n const mergedCallback = React.useCallback(\n (value: T | null) => {\n // Update the \"current\" prop hanging on the function.\n mergedCallback.current = value;\n\n for (const ref of refs) {\n if (typeof ref === 'string' && process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [useMergedRefs]:\n This hook does not support the usage of string refs. Please use React.useRef instead.\n\n For more info on 'React.useRef', see https://react.dev/reference/react/useRef.\n For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-string-refs.\n `);\n }\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 React.MutableRefObject<T | null>).current = value;\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive\n [...refs],\n ) as MutableRefObjectFunction<T>;\n\n return mergedCallback;\n}\n"],"names":["React","useMergedRefs","refs","mergedCallback","useCallback","value","current","ref","process","env","NODE_ENV","console","error"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAW/B;;;;;CAKC,GACD,6HAA6H;AAC7H,OAAO,SAASC,cAAiB,GAAGC,IAAkC;IACpE;IAEA,MAAMC,iBAAiBH,MAAMI,WAAW,CACtC,CAACC;QACC,qDAAqD;QACrDF,eAAeG,OAAO,GAAGD;QAEzB,KAAK,MAAME,OAAOL,KAAM;YACtB,IAAI,OAAOK,QAAQ,YAAYC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACpE,sCAAsC;gBACtCC,QAAQC,KAAK,CAAuB,CAAC;;;;+GAMrC,CAAC;YACH;YACA,IAAI,OAAOL,QAAQ,YAAY;gBAC7BA,IAAIF;YACN,OAAO,IAAIE,KAAK;gBACd,qDAAqD;gBACpDA,IAAyCD,OAAO,GAAGD;YACtD;QACF;IACF,GACA,6EAA6E;IAC7E;WAAIH;KAAK;IAGX,OAAOC;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useOnClickOutside.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n */\nexport type UseOnClickOrScrollOutsideOptions = {\n /**\n * The element to listen for the click event\n */\n element: Document | undefined;\n /**\n * Refs to elements that check if the click is outside\n */\n refs: React.MutableRefObject<HTMLElement | undefined | null>[];\n\n /**\n * By default uses element.contains, but custom contain function can be provided\n *\n * @param parent - provided parent element\n * @param child - event target element\n */\n contains?(parent: HTMLElement | null, child: HTMLElement): boolean;\n\n /**\n * Disables event listeners\n */\n disabled?: boolean;\n\n /**\n * Disables custom focus event listeners for iframes\n */\n disabledFocusOnIframe?: boolean;\n\n /**\n * Called if the click is outside the element refs\n */\n callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\nconst DEFAULT_CONTAINS: UseOnClickOrScrollOutsideOptions['contains'] = (parent, child) => !!parent?.contains(child);\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions): void => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n const { refs, callback, element, disabled, disabledFocusOnIframe, contains = DEFAULT_CONTAINS } = options;\n const timeoutId = React.useRef<number | undefined>(undefined);\n\n useIFrameFocus({ element, disabled: disabledFocusOnIframe || disabled, callback, refs, contains });\n\n const isMouseDownInsideRef = React.useRef(false);\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n if (isMouseDownInsideRef.current) {\n isMouseDownInsideRef.current = false;\n return;\n }\n\n const target = ev.composedPath()[0] as HTMLElement;\n const isOutside = refs.every(ref => !contains(ref.current || null, target));\n\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n const handleMouseDown = useEventCallback((ev: MouseEvent) => {\n // Selecting text from inside to outside will rigger click event.\n // In this case click event target is outside but mouse down event target is inside.\n // And this click event should be considered as inside click.\n isMouseDownInsideRef.current = refs.some(ref => contains(ref.current || null, ev.target as HTMLElement));\n });\n\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(win);\n\n const conditionalHandler = (event: MouseEvent | TouchEvent) => {\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n\n listener(event);\n };\n\n // use capture phase because React can update DOM before the event bubbles to the document\n element?.addEventListener('click', conditionalHandler, true);\n element?.addEventListener('touchstart', conditionalHandler, true);\n element?.addEventListener('contextmenu', conditionalHandler, true);\n element?.addEventListener('mousedown', handleMouseDown, true);\n\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = win?.setTimeout(() => {\n currentEvent = undefined;\n }, 1);\n\n return () => {\n element?.removeEventListener('click', conditionalHandler, true);\n element?.removeEventListener('touchstart', conditionalHandler, true);\n element?.removeEventListener('contextmenu', conditionalHandler, true);\n element?.removeEventListener('mousedown', handleMouseDown, true);\n\n win?.clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [listener, element, disabled, handleMouseDown, win]);\n};\n\nconst getWindowEvent = (target: Node | Window | null | undefined): Event | undefined => {\n if (target) {\n if (typeof (target as Window).window === 'object' && (target as Window).window === target) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return target.event;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return (target as Node).ownerDocument?.defaultView?.event ?? undefined;\n }\n\n return undefined;\n};\n\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n\ninterface UseIFrameFocusOptions\n extends Pick<UseOnClickOrScrollOutsideOptions, 'disabled' | 'element' | 'callback' | 'contains' | 'refs'> {\n /**\n * Millisecond duration to poll\n */\n pollDuration?: number;\n}\n\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n */\nconst useIFrameFocus = (options: UseIFrameFocusOptions) => {\n const {\n disabled,\n element: targetDocument,\n callback,\n contains = DEFAULT_CONTAINS,\n pollDuration = 100,\n refs,\n } = options;\n const timeoutRef = React.useRef<number>();\n\n const listener = useEventCallback((e: Event) => {\n const isOutside = refs.every(ref => !contains(ref.current || null, e.target as HTMLElement));\n\n if (isOutside && !disabled) {\n callback(e as MouseEvent);\n }\n });\n\n // Adds listener to the custom iframe focus event\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n targetDocument?.addEventListener(FUI_FRAME_EVENT, listener, true);\n\n return () => {\n targetDocument?.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [targetDocument, disabled, listener]);\n\n // Starts polling for the active element\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n timeoutRef.current = targetDocument?.defaultView?.setInterval(() => {\n const activeElement = targetDocument?.activeElement;\n\n if (activeElement?.tagName === 'IFRAME' || activeElement?.tagName === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, { bubbles: true });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n\n return () => {\n targetDocument?.defaultView?.clearTimeout(timeoutRef.current);\n };\n }, [targetDocument, disabled, pollDuration]);\n};\n"],"names":["React","useEventCallback","useFluent_unstable","useFluent","DEFAULT_CONTAINS","parent","child","contains","useOnClickOutside","options","targetDocument","win","defaultView","refs","callback","element","disabled","disabledFocusOnIframe","timeoutId","useRef","undefined","useIFrameFocus","isMouseDownInsideRef","listener","ev","current","target","composedPath","isOutside","every","ref","handleMouseDown","some","useEffect","currentEvent","getWindowEvent","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","window","ownerDocument","FUI_FRAME_EVENT","pollDuration","timeoutRef","e","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useOnClickOutside.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n */\nexport type UseOnClickOrScrollOutsideOptions = {\n /**\n * The element to listen for the click event\n */\n element: Document | undefined;\n /**\n * Refs to elements that check if the click is outside\n */\n refs: React.MutableRefObject<HTMLElement | undefined | null>[];\n\n /**\n * By default uses element.contains, but custom contain function can be provided\n *\n * @param parent - provided parent element\n * @param child - event target element\n */\n contains?(parent: HTMLElement | null, child: HTMLElement): boolean;\n\n /**\n * Disables event listeners\n */\n disabled?: boolean;\n\n /**\n * Disables custom focus event listeners for iframes\n */\n disabledFocusOnIframe?: boolean;\n\n /**\n * Called if the click is outside the element refs\n */\n callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\nconst DEFAULT_CONTAINS: UseOnClickOrScrollOutsideOptions['contains'] = (parent, child) => !!parent?.contains(child);\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions): void => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n const { refs, callback, element, disabled, disabledFocusOnIframe, contains = DEFAULT_CONTAINS } = options;\n const timeoutId = React.useRef<number | undefined>(undefined);\n\n useIFrameFocus({ element, disabled: disabledFocusOnIframe || disabled, callback, refs, contains });\n\n const isMouseDownInsideRef = React.useRef(false);\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n if (isMouseDownInsideRef.current) {\n isMouseDownInsideRef.current = false;\n return;\n }\n\n const target = ev.composedPath()[0] as HTMLElement;\n const isOutside = refs.every(ref => !contains(ref.current || null, target));\n\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n const handleMouseDown = useEventCallback((ev: MouseEvent) => {\n // Selecting text from inside to outside will rigger click event.\n // In this case click event target is outside but mouse down event target is inside.\n // And this click event should be considered as inside click.\n isMouseDownInsideRef.current = refs.some(ref => contains(ref.current || null, ev.target as HTMLElement));\n });\n\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(win);\n\n const conditionalHandler = (event: MouseEvent | TouchEvent) => {\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n\n listener(event);\n };\n\n // use capture phase because React can update DOM before the event bubbles to the document\n element?.addEventListener('click', conditionalHandler, true);\n element?.addEventListener('touchstart', conditionalHandler, true);\n element?.addEventListener('contextmenu', conditionalHandler, true);\n element?.addEventListener('mousedown', handleMouseDown, true);\n\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = win?.setTimeout(() => {\n currentEvent = undefined;\n }, 1);\n\n return () => {\n element?.removeEventListener('click', conditionalHandler, true);\n element?.removeEventListener('touchstart', conditionalHandler, true);\n element?.removeEventListener('contextmenu', conditionalHandler, true);\n element?.removeEventListener('mousedown', handleMouseDown, true);\n\n win?.clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [listener, element, disabled, handleMouseDown, win]);\n};\n\nconst getWindowEvent = (target: Node | Window | null | undefined): Event | undefined => {\n if (target) {\n if (typeof (target as Window).window === 'object' && (target as Window).window === target) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return target.event;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return (target as Node).ownerDocument?.defaultView?.event ?? undefined;\n }\n\n return undefined;\n};\n\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n\ninterface UseIFrameFocusOptions\n extends Pick<UseOnClickOrScrollOutsideOptions, 'disabled' | 'element' | 'callback' | 'contains' | 'refs'> {\n /**\n * Millisecond duration to poll\n */\n pollDuration?: number;\n}\n\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n */\nconst useIFrameFocus = (options: UseIFrameFocusOptions) => {\n const {\n disabled,\n element: targetDocument,\n callback,\n contains = DEFAULT_CONTAINS,\n pollDuration = 100,\n refs,\n } = options;\n const timeoutRef = React.useRef<number>();\n\n const listener = useEventCallback((e: Event) => {\n const isOutside = refs.every(ref => !contains(ref.current || null, e.target as HTMLElement));\n\n if (isOutside && !disabled) {\n callback(e as MouseEvent);\n }\n });\n\n // Adds listener to the custom iframe focus event\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n targetDocument?.addEventListener(FUI_FRAME_EVENT, listener, true);\n\n return () => {\n targetDocument?.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [targetDocument, disabled, listener]);\n\n // Starts polling for the active element\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n timeoutRef.current = targetDocument?.defaultView?.setInterval(() => {\n const activeElement = targetDocument?.activeElement;\n\n if (activeElement?.tagName === 'IFRAME' || activeElement?.tagName === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, { bubbles: true });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n\n return () => {\n targetDocument?.defaultView?.clearTimeout(timeoutRef.current);\n };\n }, [targetDocument, disabled, pollDuration]);\n};\n"],"names":["React","useEventCallback","useFluent_unstable","useFluent","DEFAULT_CONTAINS","parent","child","contains","useOnClickOutside","options","targetDocument","win","defaultView","refs","callback","element","disabled","disabledFocusOnIframe","timeoutId","useRef","undefined","useIFrameFocus","isMouseDownInsideRef","listener","ev","current","target","composedPath","isOutside","every","ref","handleMouseDown","some","useEffect","currentEvent","getWindowEvent","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","window","ownerDocument","FUI_FRAME_EVENT","pollDuration","timeoutRef","e","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useOnScrollOutside.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useOnScrollOutside.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\nimport type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside';\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions): void => {\n const { refs, callback, element, disabled, contains: containsProp } = options;\n\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n const contains: UseOnClickOrScrollOutsideOptions['contains'] =\n containsProp || ((parent, child) => !!parent?.contains(child));\n\n const target = ev.composedPath()[0] as HTMLElement;\n const isOutside = refs.every(ref => !contains(ref.current || null, target));\n\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n element?.addEventListener('wheel', listener);\n element?.addEventListener('touchmove', listener);\n\n return () => {\n element?.removeEventListener('wheel', listener);\n element?.removeEventListener('touchmove', listener);\n };\n }, [listener, element, disabled]);\n};\n"],"names":["React","useEventCallback","useOnScrollOutside","options","refs","callback","element","disabled","contains","containsProp","listener","ev","parent","child","target","composedPath","isOutside","every","ref","current","useEffect","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,qBAAqB;AAGtD;;;CAGC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,UAAUC,YAAY,EAAE,GAAGN;IAEtE,MAAMO,WAAWT,iBAAiB,CAACU;QACjC,MAAMH,WACJC,gBAAiB,CAAA,CAACG,QAAQC,QAAU,CAAC,EAACD,mBAAAA,6BAAAA,OAAQJ,QAAQ,CAACK,OAAK;QAE9D,MAAMC,SAASH,GAAGI,YAAY,EAAE,CAAC,EAAE;QACnC,MAAMC,YAAYZ,KAAKa,KAAK,CAACC,CAAAA,MAAO,CAACV,SAASU,IAAIC,OAAO,IAAI,MAAML;QAEnE,IAAIE,aAAa,CAACT,UAAU;YAC1BF,SAASM;QACX;IACF;IAEAX,MAAMoB,SAAS,CAAC;QACd,IAAIb,UAAU;YACZ;QACF;QAEAD,oBAAAA,8BAAAA,QAASe,gBAAgB,CAAC,SAASX;QACnCJ,oBAAAA,8BAAAA,QAASe,gBAAgB,CAAC,aAAaX;QAEvC,OAAO;YACLJ,oBAAAA,8BAAAA,QAASgB,mBAAmB,CAAC,SAASZ;YACtCJ,oBAAAA,8BAAAA,QAASgB,mBAAmB,CAAC,aAAaZ;QAC5C;IACF,GAAG;QAACA;QAAUJ;QAASC;KAAS;AAClC,EAAE"}
|
package/lib/hooks/usePrevious.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/usePrevious.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/usePrevious.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * @internal\n */\nexport const usePrevious = <ValueType = unknown>(value: ValueType): ValueType | null => {\n const ref = React.useRef<ValueType | null>(null);\n React.useEffect(() => {\n ref.current = value;\n }, [value]);\n return ref.current;\n};\n"],"names":["React","usePrevious","value","ref","useRef","useEffect","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAsBC;IAC/C,MAAMC,MAAMH,MAAMI,MAAM,CAAmB;IAC3CJ,MAAMK,SAAS,CAAC;QACdF,IAAIG,OAAO,GAAGJ;IAChB,GAAG;QAACA;KAAM;IACV,OAAOC,IAAIG,OAAO;AACpB,EAAE"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import * as React from 'react';
|
|
3
|
+
import { measureScrollbarWidth } from '../utils/measureScrollBarWidth';
|
|
2
4
|
const cache = new WeakMap();
|
|
3
5
|
/**
|
|
4
6
|
* @returns The width in pixels of the scrollbar in the user agent
|
|
7
|
+
* @remarks This hook is not SSR-safe. For SSR-safe scrollbar width application, use the `useApplyScrollbarWidth` from {@link file://./useApplyScrollbarWidth.ts} instead.
|
|
5
8
|
*/ export function useScrollbarWidth(options) {
|
|
6
9
|
const { targetDocument, force } = options;
|
|
7
10
|
return React.useMemo(()=>{
|
|
@@ -11,14 +14,7 @@ const cache = new WeakMap();
|
|
|
11
14
|
if (!force && cache.has(targetDocument)) {
|
|
12
15
|
return cache.get(targetDocument);
|
|
13
16
|
}
|
|
14
|
-
const
|
|
15
|
-
outer.style.visibility = 'hidden';
|
|
16
|
-
outer.style.overflow = 'scroll';
|
|
17
|
-
const inner = targetDocument.createElement('div');
|
|
18
|
-
outer.appendChild(inner);
|
|
19
|
-
targetDocument.body.appendChild(outer);
|
|
20
|
-
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
|
|
21
|
-
outer.remove();
|
|
17
|
+
const scrollbarWidth = measureScrollbarWidth(targetDocument);
|
|
22
18
|
cache.set(targetDocument, scrollbarWidth);
|
|
23
19
|
return scrollbarWidth;
|
|
24
20
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useScrollbarWidth.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useScrollbarWidth.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { measureScrollbarWidth } from '../utils/measureScrollBarWidth';\n\nconst cache = new WeakMap<Document, number>();\n\ninterface UseScrollbarWidthOptions {\n /**\n * Reference document to measure the scrollbar width\n */\n targetDocument: Document | null | undefined;\n\n /**\n * Does not use the cache and recalculates the scrollbar width\n */\n force?: boolean;\n}\n\n/**\n * @returns The width in pixels of the scrollbar in the user agent\n * @remarks This hook is not SSR-safe. For SSR-safe scrollbar width application, use the `useApplyScrollbarWidth` from {@link file://./useApplyScrollbarWidth.ts} instead.\n */\nexport function useScrollbarWidth(options: UseScrollbarWidthOptions): number | undefined {\n const { targetDocument, force } = options;\n\n return React.useMemo(() => {\n if (!targetDocument) {\n return 0;\n }\n\n if (!force && cache.has(targetDocument)) {\n return cache.get(targetDocument);\n }\n\n const scrollbarWidth = measureScrollbarWidth(targetDocument);\n cache.set(targetDocument, scrollbarWidth);\n\n return scrollbarWidth;\n }, [targetDocument, force]);\n}\n"],"names":["React","measureScrollbarWidth","cache","WeakMap","useScrollbarWidth","options","targetDocument","force","useMemo","has","get","scrollbarWidth","set"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iCAAiC;AAEvE,MAAMC,QAAQ,IAAIC;AAclB;;;CAGC,GACD,OAAO,SAASC,kBAAkBC,OAAiC;IACjE,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGF;IAElC,OAAOL,MAAMQ,OAAO,CAAC;QACnB,IAAI,CAACF,gBAAgB;YACnB,OAAO;QACT;QAEA,IAAI,CAACC,SAASL,MAAMO,GAAG,CAACH,iBAAiB;YACvC,OAAOJ,MAAMQ,GAAG,CAACJ;QACnB;QAEA,MAAMK,iBAAiBV,sBAAsBK;QAC7CJ,MAAMU,GAAG,CAACN,gBAAgBK;QAE1B,OAAOA;IACT,GAAG;QAACL;QAAgBC;KAAM;AAC5B"}
|
package/lib/hooks/useTimeout.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useTimeout.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useTimeout.ts"],"sourcesContent":["'use client';\n\nimport { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setTimeoutNoop = (_callback: Function) => -1;\nconst clearTimeoutNoop = (_handle: number) => undefined;\n\n/**\n * @internal\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */\nexport function useTimeout(): readonly [(fn: () => void, delay?: number) => number, () => void] {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const setTimerFn = win ? win.setTimeout : setTimeoutNoop;\n const clearTimerFn = win ? win.clearTimeout : clearTimeoutNoop;\n\n return useBrowserTimer(setTimerFn, clearTimerFn);\n}\n"],"names":["useBrowserTimer","useFluent_unstable","useFluent","setTimeoutNoop","_callback","clearTimeoutNoop","_handle","undefined","useTimeout","targetDocument","win","defaultView","setTimerFn","setTimeout","clearTimerFn","clearTimeout"],"mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,oBAAoB;AACpD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,iBAAiB,CAACC,YAAwB,CAAC;AACjD,MAAMC,mBAAmB,CAACC,UAAoBC;AAE9C;;;;;;;CAOC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGP;IAC3B,MAAMQ,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAMC,aAAaF,MAAMA,IAAIG,UAAU,GAAGV;IAC1C,MAAMW,eAAeJ,MAAMA,IAAIK,YAAY,GAAGV;IAE9C,OAAOL,gBAAgBY,YAAYE;AACrC"}
|
package/lib/index.js
CHANGED
|
@@ -2,7 +2,7 @@ export { slot, isSlot, // eslint-disable-next-line @typescript-eslint/no-depreca
|
|
|
2
2
|
getSlots, // eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
3
3
|
getSlotsNext, assertSlots, // eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
4
4
|
resolveShorthand, isResolvedShorthand, getIntrinsicElementProps, getSlotClassNameProp_unstable, SLOT_CLASS_NAME_PROP_SYMBOL, SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './compose/index';
|
|
5
|
-
export { IdPrefixProvider, resetIdsForTests, useAnimationFrame, useControllableState, useEventCallback, useFirstMount, useForceUpdate, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnClickOutside, useOnScrollOutside, usePrevious, useScrollbarWidth, useTimeout } from './hooks/index';
|
|
5
|
+
export { IdPrefixProvider, resetIdsForTests, useAnimationFrame, useApplyScrollbarWidth, useControllableState, useEventCallback, useFirstMount, useForceUpdate, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnClickOutside, useOnScrollOutside, usePrevious, useScrollbarWidth, useTimeout } from './hooks/index';
|
|
6
6
|
export { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';
|
|
7
7
|
export { clamp, // eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
8
8
|
getNativeElementProps, getPartitionedNativeProps, getReactElementRef, getRTLSafeKey, mergeCallbacks, isHTMLElement, isInteractiveHTMLElement, omit, createPriorityQueue } from './utils/index';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n slot,\n isSlot,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getSlots,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getSlotsNext,\n assertSlots,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n resolveShorthand,\n isResolvedShorthand,\n getIntrinsicElementProps,\n getSlotClassNameProp_unstable,\n SLOT_CLASS_NAME_PROP_SYMBOL,\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n} from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n RefAttributes,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ResolveShorthandFunction,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ResolveShorthandOptions,\n Slot,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n UnknownSlotProps,\n SlotComponentType,\n SlotOptions,\n InferredElementRefType,\n EventData,\n EventHandler,\n} from './compose/index';\n\nexport {\n IdPrefixProvider,\n resetIdsForTests,\n useAnimationFrame,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getNativeElementProps,\n getPartitionedNativeProps,\n getReactElementRef,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n omit,\n createPriorityQueue,\n} from './utils/index';\n\nexport type {\n DistributiveOmit,\n UnionToIntersection,\n JSXElement,\n JSXIntrinsicElement,\n JSXIntrinsicElementKeys,\n} from './utils/types';\n\nexport type { PriorityQueue } from './utils/priorityQueue';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n\n/**\n * Event utils\n */\nexport type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent, TouchOrMouseEvent } from './events/index';\nexport { isTouchEvent, isMouseEvent, getEventClientCoords } from './events/index';\n\nexport type {\n SelectionMode,\n OnSelectionChangeCallback,\n OnSelectionChangeData,\n SelectionItemId,\n SelectionHookParams,\n SelectionMethods,\n} from './selection/index';\nexport { useSelection } from './selection/index';\n\nexport { elementContains, setVirtualParent, getParent } from './virtualParent/index';\n"],"names":["slot","isSlot","getSlots","getSlotsNext","assertSlots","resolveShorthand","isResolvedShorthand","getIntrinsicElementProps","getSlotClassNameProp_unstable","SLOT_CLASS_NAME_PROP_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","IdPrefixProvider","resetIdsForTests","useAnimationFrame","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getReactElementRef","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","omit","createPriorityQueue","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger","isTouchEvent","isMouseEvent","getEventClientCoords","useSelection","elementContains","setVirtualParent","getParent"],"mappings":"AAAA,SACEA,IAAI,EACJC,MAAM,EACN,4DAA4D;AAC5DC,QAAQ,EACR,4DAA4D;AAC5DC,YAAY,EACZC,WAAW,EACX,4DAA4D;AAC5DC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,wBAAwB,EACxBC,2BAA2B,QACtB,kBAAkB;AA0BzB,SACEC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,iBAAiB,EACjBC,UAAU,QACL,gBAAgB;AAGvB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,cAAc;AAE/D,SACEC,KAAK,EACL,4DAA4D;AAC5DC,qBAAqB,EACrBC,yBAAyB,EACzBC,kBAAkB,EAClBC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,wBAAwB,EACxBC,IAAI,EACJC,mBAAmB,QACd,gBAAgB;AAYvB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,eAAe,QAAQ,kBAAkB;AAQhG,SAASC,YAAY,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,iBAAiB;AAUlF,SAASC,YAAY,QAAQ,oBAAoB;AAEjD,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,SAAS,QAAQ,wBAAwB"}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n slot,\n isSlot,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getSlots,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getSlotsNext,\n assertSlots,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n resolveShorthand,\n isResolvedShorthand,\n getIntrinsicElementProps,\n getSlotClassNameProp_unstable,\n SLOT_CLASS_NAME_PROP_SYMBOL,\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n} from './compose/index';\nexport type {\n ExtractSlotProps,\n ComponentProps,\n ComponentState,\n ForwardRefComponent,\n RefAttributes,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ResolveShorthandFunction,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ResolveShorthandOptions,\n Slot,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n Slots,\n SlotClassNames,\n SlotPropsRecord,\n SlotRenderFunction,\n SlotShorthandValue,\n UnknownSlotProps,\n SlotComponentType,\n SlotOptions,\n InferredElementRefType,\n EventData,\n EventHandler,\n} from './compose/index';\n\nexport {\n IdPrefixProvider,\n resetIdsForTests,\n useAnimationFrame,\n useApplyScrollbarWidth,\n useControllableState,\n useEventCallback,\n useFirstMount,\n useForceUpdate,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n useOnClickOutside,\n useOnScrollOutside,\n usePrevious,\n useScrollbarWidth,\n useTimeout,\n} from './hooks/index';\nexport type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';\n\nexport { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';\n\nexport {\n clamp,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getNativeElementProps,\n getPartitionedNativeProps,\n getReactElementRef,\n getRTLSafeKey,\n mergeCallbacks,\n isHTMLElement,\n isInteractiveHTMLElement,\n omit,\n createPriorityQueue,\n} from './utils/index';\n\nexport type {\n DistributiveOmit,\n UnionToIntersection,\n JSXElement,\n JSXIntrinsicElement,\n JSXIntrinsicElementKeys,\n} from './utils/types';\n\nexport type { PriorityQueue } from './utils/priorityQueue';\n\nexport { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';\n\nexport type { FluentTriggerComponent, TriggerProps } from './trigger/index';\n\n/**\n * Event utils\n */\nexport type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent, TouchOrMouseEvent } from './events/index';\nexport { isTouchEvent, isMouseEvent, getEventClientCoords } from './events/index';\n\nexport type {\n SelectionMode,\n OnSelectionChangeCallback,\n OnSelectionChangeData,\n SelectionItemId,\n SelectionHookParams,\n SelectionMethods,\n} from './selection/index';\nexport { useSelection } from './selection/index';\n\nexport { elementContains, setVirtualParent, getParent } from './virtualParent/index';\n"],"names":["slot","isSlot","getSlots","getSlotsNext","assertSlots","resolveShorthand","isResolvedShorthand","getIntrinsicElementProps","getSlotClassNameProp_unstable","SLOT_CLASS_NAME_PROP_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","IdPrefixProvider","resetIdsForTests","useAnimationFrame","useApplyScrollbarWidth","useControllableState","useEventCallback","useFirstMount","useForceUpdate","useId","useIsomorphicLayoutEffect","useMergedRefs","useOnClickOutside","useOnScrollOutside","usePrevious","useScrollbarWidth","useTimeout","canUseDOM","useIsSSR","SSRProvider","clamp","getNativeElementProps","getPartitionedNativeProps","getReactElementRef","getRTLSafeKey","mergeCallbacks","isHTMLElement","isInteractiveHTMLElement","omit","createPriorityQueue","applyTriggerPropsToChildren","getTriggerChild","isFluentTrigger","isTouchEvent","isMouseEvent","getEventClientCoords","useSelection","elementContains","setVirtualParent","getParent"],"mappings":"AAAA,SACEA,IAAI,EACJC,MAAM,EACN,4DAA4D;AAC5DC,QAAQ,EACR,4DAA4D;AAC5DC,YAAY,EACZC,WAAW,EACX,4DAA4D;AAC5DC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,wBAAwB,EACxBC,2BAA2B,QACtB,kBAAkB;AA0BzB,SACEC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,iBAAiB,EACjBC,UAAU,QACL,gBAAgB;AAGvB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,cAAc;AAE/D,SACEC,KAAK,EACL,4DAA4D;AAC5DC,qBAAqB,EACrBC,yBAAyB,EACzBC,kBAAkB,EAClBC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,wBAAwB,EACxBC,IAAI,EACJC,mBAAmB,QACd,gBAAgB;AAYvB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,eAAe,QAAQ,kBAAkB;AAQhG,SAASC,YAAY,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,iBAAiB;AAUlF,SAASC,YAAY,QAAQ,oBAAoB;AAEjD,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,SAAS,QAAQ,wBAAwB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/selection/useSelection.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/selection/useSelection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { SelectionHookParams, SelectionItemId, SelectionMethods } from './types';\nimport { useControllableState } from '../hooks/useControllableState';\nimport { createSetFromIterable } from '../utils/createSetFromIterable';\n\nfunction useSelectionState(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, setSelected] = useControllableState<Set<SelectionItemId>>({\n initialState: new Set(),\n defaultState: React.useMemo(\n () => params.defaultSelectedItems && createSetFromIterable(params.defaultSelectedItems),\n [params.defaultSelectedItems],\n ),\n state: React.useMemo(\n () => params.selectedItems && createSetFromIterable(params.selectedItems),\n [params.selectedItems],\n ),\n });\n const changeSelection = (event: React.SyntheticEvent, nextSelectedItems: Set<SelectionItemId>) => {\n params.onSelectionChange?.(event, { selectedItems: nextSelectedItems });\n setSelected(nextSelectedItems);\n };\n return [selected, changeSelection] as const;\n}\n\nfunction useSingleSelection(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, changeSelection] = useSelectionState(params);\n const methods: SelectionMethods = {\n deselectItem: event => changeSelection(event, new Set()),\n selectItem: (event, itemId) => changeSelection(event, new Set([itemId])),\n toggleAllItems: () => {\n if (process.env.NODE_ENV !== 'production') {\n throw new Error('[react-utilities]: `toggleAllItems` should not be used in single selection mode');\n }\n },\n toggleItem: (event, itemId) => changeSelection(event, new Set([itemId])),\n clearItems: event => changeSelection(event, new Set()),\n isSelected: itemId => selected.has(itemId) ?? false,\n };\n return [selected, methods] as const;\n}\n\nfunction useMultipleSelection(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, changeSelection] = useSelectionState(params);\n const methods: SelectionMethods = {\n toggleItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n if (selected.has(itemId)) {\n nextSelectedItems.delete(itemId);\n } else {\n nextSelectedItems.add(itemId);\n }\n changeSelection(event, nextSelectedItems);\n },\n selectItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n nextSelectedItems.add(itemId);\n changeSelection(event, nextSelectedItems);\n },\n deselectItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n nextSelectedItems.delete(itemId);\n changeSelection(event, nextSelectedItems);\n },\n clearItems: event => {\n changeSelection(event, new Set());\n },\n isSelected: itemId => selected.has(itemId),\n toggleAllItems: (event, itemIds) => {\n const allItemsSelected = itemIds.every(itemId => selected.has(itemId));\n const nextSelectedItems = new Set(selected);\n if (allItemsSelected) {\n nextSelectedItems.clear();\n } else {\n itemIds.forEach(itemId => nextSelectedItems.add(itemId));\n }\n changeSelection(event, nextSelectedItems);\n },\n };\n return [selected, methods] as const;\n}\n\nexport function useSelection(params: SelectionHookParams): readonly [Set<SelectionItemId>, SelectionMethods] {\n 'use no memo';\n\n if (params.selectionMode === 'multiselect') {\n // selectionMode is a static value, so we can safely ignore rules-of-hooks\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMultipleSelection(params);\n }\n // selectionMode is a static value, so we can safely ignore rules-of-hooks\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useSingleSelection(params);\n}\n"],"names":["React","useControllableState","createSetFromIterable","useSelectionState","params","selected","setSelected","initialState","Set","defaultState","useMemo","defaultSelectedItems","state","selectedItems","changeSelection","event","nextSelectedItems","onSelectionChange","useSingleSelection","methods","deselectItem","selectItem","itemId","toggleAllItems","process","env","NODE_ENV","Error","toggleItem","clearItems","isSelected","has","useMultipleSelection","delete","add","itemIds","allItemsSelected","every","clear","forEach","useSelection","selectionMode"],"mappings":"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"}
|
package/lib/ssr/SSRContext.js
CHANGED