@fluentui/react-overflow 9.9.2 → 9.9.3
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 +12 -2
- package/lib/useOverflowContainer.js +1 -1
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowMenu.js +2 -10
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib/useOverflowVisibility.js +5 -4
- package/lib/useOverflowVisibility.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.cjs +1 -1
- package/lib-commonjs/useOverflowContainer.cjs.map +1 -1
- package/lib-commonjs/useOverflowMenu.cjs +2 -10
- package/lib-commonjs/useOverflowMenu.cjs.map +1 -1
- package/lib-commonjs/useOverflowVisibility.cjs +5 -4
- package/lib-commonjs/useOverflowVisibility.cjs.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Mon, 24 Aug 2026 08:15:11 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.9.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.9.3)
|
|
8
|
+
|
|
9
|
+
Mon, 24 Aug 2026 08:15:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.9.2..@fluentui/react-overflow_v9.9.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: avoid redundant overflow work during menu teardown and unchanged visibility updates ([PR #36588](https://github.com/microsoft/fluentui/pull/36588) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- Bump @fluentui/priority-overflow to v9.4.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.9.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.9.2)
|
|
8
18
|
|
|
9
|
-
Tue, 11 Aug 2026 17:
|
|
19
|
+
Tue, 11 Aug 2026 17:20:14 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.9.1..@fluentui/react-overflow_v9.9.2)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
@@ -76,8 +76,8 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERF
|
|
|
76
76
|
}, []);
|
|
77
77
|
const registerOverflowMenu = React.useCallback((el)=>{
|
|
78
78
|
var _managerRef_current;
|
|
79
|
-
(_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.addOverflowMenu(el);
|
|
80
79
|
el.setAttribute(DATA_OVERFLOW_MENU, '');
|
|
80
|
+
(_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.addOverflowMenu(el);
|
|
81
81
|
return ()=>{
|
|
82
82
|
var _managerRef_current;
|
|
83
83
|
(_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.removeOverflowMenu();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createOverflowManager, EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n OverflowOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<OverflowOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n hasHiddenItems = false,\n } = options;\n\n const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);\n\n const observeOptions: Required<OverflowOptions> = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility: onUpdateItemVisibilityCallback,\n onUpdateOverflow: update,\n hasHiddenItems,\n }),\n [minimumVisible, onUpdateItemVisibilityCallback, overflowAxis, overflowDirection, padding, update, hasHiddenItems],\n );\n\n const containerRef = React.useRef<TElement>(null);\n\n const managerRef = React.useRef<OverflowManager | null>(null);\n\n if (managerRef.current === null) {\n managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;\n }\n\n useIsomorphicLayoutEffect(() => {\n if (managerRef.current && containerRef.current) {\n // forceUpdate resolves overflow synchronously for a correct first paint; the manager guards it\n // on the container being measured.\n managerRef.current.observe(containerRef.current, { forceUpdate: true });\n return () => managerRef.current?.disconnect();\n }\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n managerRef.current?.setOptions(observeOptions);\n }, [observeOptions]);\n\n const registerItem = React.useCallback((item: OverflowItemEntry) => {\n managerRef.current?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n managerRef.current?.removeItem(item.id);\n };\n }, []);\n\n const registerDivider = React.useCallback((divider: OverflowDividerEntry) => {\n const el = divider.element;\n managerRef.current?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n managerRef.current?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, []);\n\n const registerOverflowMenu = React.useCallback((el: HTMLElement) => {\n
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createOverflowManager, EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n OverflowOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<OverflowOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n hasHiddenItems = false,\n } = options;\n\n const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);\n\n const observeOptions: Required<OverflowOptions> = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility: onUpdateItemVisibilityCallback,\n onUpdateOverflow: update,\n hasHiddenItems,\n }),\n [minimumVisible, onUpdateItemVisibilityCallback, overflowAxis, overflowDirection, padding, update, hasHiddenItems],\n );\n\n const containerRef = React.useRef<TElement>(null);\n\n const managerRef = React.useRef<OverflowManager | null>(null);\n\n if (managerRef.current === null) {\n managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;\n }\n\n useIsomorphicLayoutEffect(() => {\n if (managerRef.current && containerRef.current) {\n // forceUpdate resolves overflow synchronously for a correct first paint; the manager guards it\n // on the container being measured.\n managerRef.current.observe(containerRef.current, { forceUpdate: true });\n return () => managerRef.current?.disconnect();\n }\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n managerRef.current?.setOptions(observeOptions);\n }, [observeOptions]);\n\n const registerItem = React.useCallback((item: OverflowItemEntry) => {\n managerRef.current?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n managerRef.current?.removeItem(item.id);\n };\n }, []);\n\n const registerDivider = React.useCallback((divider: OverflowDividerEntry) => {\n const el = divider.element;\n managerRef.current?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n managerRef.current?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, []);\n\n const registerOverflowMenu = React.useCallback((el: HTMLElement) => {\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n managerRef.current?.addOverflowMenu(el);\n\n return () => {\n managerRef.current?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }, []);\n\n const updateOverflow = React.useCallback(() => {\n managerRef.current?.update();\n }, []);\n\n const getSnapshot = React.useCallback<OverflowManager['getSnapshot']>(\n () => managerRef.current?.getSnapshot() ?? EMPTY_SNAPSHOT,\n [],\n );\n\n const subscribe = React.useCallback<OverflowManager['subscribe']>(\n listener => managerRef.current?.subscribe(listener) ?? noop,\n [],\n );\n\n const forceUpdateOverflow = React.useCallback(() => {\n managerRef.current?.forceUpdate();\n }, []);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n forceUpdateOverflow,\n containerRef,\n getSnapshot,\n subscribe,\n };\n};\n\nconst noop = () => {\n /* noop */\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["React","createOverflowManager","EMPTY_SNAPSHOT","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","noop","hasHiddenItems","onUpdateItemVisibilityCallback","observeOptions","useMemo","onUpdateOverflow","containerRef","useRef","managerRef","current","observe","forceUpdate","disconnect","setOptions","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","removeDivider","groupId","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","getSnapshot","subscribe","listener","forceUpdateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
package/lib/useOverflowMenu.js
CHANGED
|
@@ -6,23 +6,15 @@ import { useOverflowCount } from "./useOverflowCount.js";
|
|
|
6
6
|
export function useOverflowMenu(id) {
|
|
7
7
|
const elementId = useId('overflow-menu', id);
|
|
8
8
|
const overflowCount = useOverflowCount();
|
|
9
|
-
const { registerOverflowMenu
|
|
9
|
+
const { registerOverflowMenu } = useOverflowContext();
|
|
10
10
|
const ref = React.useRef(null);
|
|
11
11
|
const isOverflowing = overflowCount > 0;
|
|
12
12
|
useIsomorphicLayoutEffect(()=>{
|
|
13
13
|
if (ref.current) {
|
|
14
|
-
|
|
15
|
-
if (isOverflowing) {
|
|
16
|
-
forceUpdateOverflow();
|
|
17
|
-
}
|
|
18
|
-
return ()=>{
|
|
19
|
-
unregister();
|
|
20
|
-
forceUpdateOverflow();
|
|
21
|
-
};
|
|
14
|
+
return registerOverflowMenu(ref.current);
|
|
22
15
|
}
|
|
23
16
|
}, [
|
|
24
17
|
registerOverflowMenu,
|
|
25
|
-
forceUpdateOverflow,
|
|
26
18
|
isOverflowing,
|
|
27
19
|
elementId
|
|
28
20
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n id?: string,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const { registerOverflowMenu
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n id?: string,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const { registerOverflowMenu } = useOverflowContext();\n const ref = React.useRef<TElement | null>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","ref","useRef","isOverflowing","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,uBAAoB;AACvD,SAASC,gBAAgB,QAAQ,wBAAqB;AAEtD,OAAO,SAASC,gBACdC,EAAW;IAGX,MAAMC,YAAYN,MAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ;IACtB,MAAM,EAAEK,oBAAoB,EAAE,GAAGN;IACjC,MAAMO,MAAMV,MAAMW,MAAM,CAAkB;IAC1C,MAAMC,gBAAgBJ,gBAAgB;IAEtCN,0BAA0B;QACxB,IAAIQ,IAAIG,OAAO,EAAE;YACf,OAAOJ,qBAAqBC,IAAIG,OAAO;QACzC;IACF,GAAG;QAACJ;QAAsBG;QAAeL;KAAU;IAEnD,OAAO;QAAEG;QAAKF;QAAeI;IAAc;AAC7C"}
|
|
@@ -9,9 +9,10 @@ import { useOverflowSnapshot } from "./useOverflowSnapshot.js";
|
|
|
9
9
|
* visible - use with caution
|
|
10
10
|
* @returns visibility status of all items and groups
|
|
11
11
|
*/ export function useOverflowVisibility() {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const selectVisibility = (snapshot)=>({
|
|
12
|
+
const snapshot = useOverflowSnapshot(selectSnapshot);
|
|
13
|
+
return {
|
|
15
14
|
itemVisibility: snapshot.itemVisibility,
|
|
16
15
|
groupVisibility: snapshot.groupVisibility
|
|
17
|
-
}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
const selectSnapshot = (snapshot)=>snapshot;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility(): {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n} {\n
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility(): {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n} {\n const snapshot = useOverflowSnapshot(selectSnapshot);\n\n return {\n itemVisibility: snapshot.itemVisibility,\n groupVisibility: snapshot.groupVisibility,\n };\n}\n\nconst selectSnapshot = (snapshot: OverflowSnapshot): OverflowSnapshot => snapshot;\n"],"names":["useOverflowSnapshot","useOverflowVisibility","snapshot","selectSnapshot","itemVisibility","groupVisibility"],"mappings":"AAAA;AAGA,SAASA,mBAAmB,QAAQ,2BAAwB;AAE5D;;;;;;;;CAQC,GACD,OAAO,SAASC;IAId,MAAMC,WAAWF,oBAAoBG;IAErC,OAAO;QACLC,gBAAgBF,SAASE,cAAc;QACvCC,iBAAiBH,SAASG,eAAe;IAC3C;AACF;AAEA,MAAMF,iBAAiB,CAACD,WAAiDA"}
|
|
@@ -90,8 +90,8 @@ const useOverflowContainer = (update, options)=>{
|
|
|
90
90
|
}, []);
|
|
91
91
|
const registerOverflowMenu = _react.useCallback((el)=>{
|
|
92
92
|
var _managerRef_current;
|
|
93
|
-
(_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.addOverflowMenu(el);
|
|
94
93
|
el.setAttribute(_constants.DATA_OVERFLOW_MENU, '');
|
|
94
|
+
(_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.addOverflowMenu(el);
|
|
95
95
|
return ()=>{
|
|
96
96
|
var _managerRef_current;
|
|
97
97
|
(_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.removeOverflowMenu();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createOverflowManager, EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n OverflowOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<OverflowOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n hasHiddenItems = false,\n } = options;\n\n const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);\n\n const observeOptions: Required<OverflowOptions> = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility: onUpdateItemVisibilityCallback,\n onUpdateOverflow: update,\n hasHiddenItems,\n }),\n [minimumVisible, onUpdateItemVisibilityCallback, overflowAxis, overflowDirection, padding, update, hasHiddenItems],\n );\n\n const containerRef = React.useRef<TElement>(null);\n\n const managerRef = React.useRef<OverflowManager | null>(null);\n\n if (managerRef.current === null) {\n managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;\n }\n\n useIsomorphicLayoutEffect(() => {\n if (managerRef.current && containerRef.current) {\n // forceUpdate resolves overflow synchronously for a correct first paint; the manager guards it\n // on the container being measured.\n managerRef.current.observe(containerRef.current, { forceUpdate: true });\n return () => managerRef.current?.disconnect();\n }\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n managerRef.current?.setOptions(observeOptions);\n }, [observeOptions]);\n\n const registerItem = React.useCallback((item: OverflowItemEntry) => {\n managerRef.current?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n managerRef.current?.removeItem(item.id);\n };\n }, []);\n\n const registerDivider = React.useCallback((divider: OverflowDividerEntry) => {\n const el = divider.element;\n managerRef.current?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n managerRef.current?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, []);\n\n const registerOverflowMenu = React.useCallback((el: HTMLElement) => {\n
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createOverflowManager, EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n OverflowOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<OverflowOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n hasHiddenItems = false,\n } = options;\n\n const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);\n\n const observeOptions: Required<OverflowOptions> = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility: onUpdateItemVisibilityCallback,\n onUpdateOverflow: update,\n hasHiddenItems,\n }),\n [minimumVisible, onUpdateItemVisibilityCallback, overflowAxis, overflowDirection, padding, update, hasHiddenItems],\n );\n\n const containerRef = React.useRef<TElement>(null);\n\n const managerRef = React.useRef<OverflowManager | null>(null);\n\n if (managerRef.current === null) {\n managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;\n }\n\n useIsomorphicLayoutEffect(() => {\n if (managerRef.current && containerRef.current) {\n // forceUpdate resolves overflow synchronously for a correct first paint; the manager guards it\n // on the container being measured.\n managerRef.current.observe(containerRef.current, { forceUpdate: true });\n return () => managerRef.current?.disconnect();\n }\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n managerRef.current?.setOptions(observeOptions);\n }, [observeOptions]);\n\n const registerItem = React.useCallback((item: OverflowItemEntry) => {\n managerRef.current?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n managerRef.current?.removeItem(item.id);\n };\n }, []);\n\n const registerDivider = React.useCallback((divider: OverflowDividerEntry) => {\n const el = divider.element;\n managerRef.current?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n managerRef.current?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, []);\n\n const registerOverflowMenu = React.useCallback((el: HTMLElement) => {\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n managerRef.current?.addOverflowMenu(el);\n\n return () => {\n managerRef.current?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }, []);\n\n const updateOverflow = React.useCallback(() => {\n managerRef.current?.update();\n }, []);\n\n const getSnapshot = React.useCallback<OverflowManager['getSnapshot']>(\n () => managerRef.current?.getSnapshot() ?? EMPTY_SNAPSHOT,\n [],\n );\n\n const subscribe = React.useCallback<OverflowManager['subscribe']>(\n listener => managerRef.current?.subscribe(listener) ?? noop,\n [],\n );\n\n const forceUpdateOverflow = React.useCallback(() => {\n managerRef.current?.forceUpdate();\n }, []);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n forceUpdateOverflow,\n containerRef,\n getSnapshot,\n subscribe,\n };\n};\n\nconst noop = () => {\n /* noop */\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["React","createOverflowManager","EMPTY_SNAPSHOT","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","noop","hasHiddenItems","onUpdateItemVisibilityCallback","observeOptions","useMemo","onUpdateOverflow","containerRef","useRef","managerRef","current","observe","forceUpdate","disconnect","setOptions","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","removeDivider","groupId","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","getSnapshot","subscribe","listener","forceUpdateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
@@ -17,23 +17,15 @@ const _useOverflowCount = require("./useOverflowCount.cjs");
|
|
|
17
17
|
function useOverflowMenu(id) {
|
|
18
18
|
const elementId = (0, _reactutilities.useId)('overflow-menu', id);
|
|
19
19
|
const overflowCount = (0, _useOverflowCount.useOverflowCount)();
|
|
20
|
-
const { registerOverflowMenu
|
|
20
|
+
const { registerOverflowMenu } = (0, _overflowContext.useOverflowContext)();
|
|
21
21
|
const ref = _react.useRef(null);
|
|
22
22
|
const isOverflowing = overflowCount > 0;
|
|
23
23
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
24
24
|
if (ref.current) {
|
|
25
|
-
|
|
26
|
-
if (isOverflowing) {
|
|
27
|
-
forceUpdateOverflow();
|
|
28
|
-
}
|
|
29
|
-
return ()=>{
|
|
30
|
-
unregister();
|
|
31
|
-
forceUpdateOverflow();
|
|
32
|
-
};
|
|
25
|
+
return registerOverflowMenu(ref.current);
|
|
33
26
|
}
|
|
34
27
|
}, [
|
|
35
28
|
registerOverflowMenu,
|
|
36
|
-
forceUpdateOverflow,
|
|
37
29
|
isOverflowing,
|
|
38
30
|
elementId
|
|
39
31
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n id?: string,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const { registerOverflowMenu
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n id?: string,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const { registerOverflowMenu } = useOverflowContext();\n const ref = React.useRef<TElement | null>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","ref","useRef","isOverflowing","current"],"mappings":"AAAA;;;;;+BAOgBK;;;;;;;iEALO,QAAQ;gCACkB,4BAA4B;iCAC1C,uBAAoB;kCACtB,wBAAqB;AAE/C,yBACLC,EAAW;IAGX,MAAMC,gBAAYN,qBAAAA,EAAM,iBAAiBK;IACzC,MAAME,oBAAgBJ,kCAAAA;IACtB,MAAM,EAAEK,oBAAoB,EAAE,OAAGN,mCAAAA;IACjC,MAAMO,MAAMV,OAAMW,MAAM,CAAkB;IAC1C,MAAMC,gBAAgBJ,gBAAgB;QAEtCN,yCAAAA,EAA0B;QACxB,IAAIQ,IAAIG,OAAO,EAAE;YACf,OAAOJ,qBAAqBC,IAAIG,OAAO;QACzC;IACF,GAAG;QAACJ;QAAsBG;QAAeL;KAAU;IAEnD,OAAO;QAAEG;QAAKF;QAAeI;IAAc;AAC7C"}
|
|
@@ -11,9 +11,10 @@ Object.defineProperty(exports, "useOverflowVisibility", {
|
|
|
11
11
|
});
|
|
12
12
|
const _useOverflowSnapshot = require("./useOverflowSnapshot.cjs");
|
|
13
13
|
function useOverflowVisibility() {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const selectVisibility = (snapshot)=>({
|
|
14
|
+
const snapshot = (0, _useOverflowSnapshot.useOverflowSnapshot)(selectSnapshot);
|
|
15
|
+
return {
|
|
17
16
|
itemVisibility: snapshot.itemVisibility,
|
|
18
17
|
groupVisibility: snapshot.groupVisibility
|
|
19
|
-
}
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
const selectSnapshot = (snapshot)=>snapshot;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility(): {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n} {\n
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility(): {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n} {\n const snapshot = useOverflowSnapshot(selectSnapshot);\n\n return {\n itemVisibility: snapshot.itemVisibility,\n groupVisibility: snapshot.groupVisibility,\n };\n}\n\nconst selectSnapshot = (snapshot: OverflowSnapshot): OverflowSnapshot => snapshot;\n"],"names":["useOverflowSnapshot","useOverflowVisibility","snapshot","selectSnapshot","itemVisibility","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,2BAAwB;AAWrD,SAASC;IAId,MAAMC,eAAWF,wCAAAA,EAAoBG;IAErC,OAAO;QACLC,gBAAgBF,SAASE,cAAc;QACvCC,iBAAiBH,SAASG,eAAe;IAC3C;AACF;AAEA,MAAMF,iBAAiB,CAACD,WAAiDA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "9.9.
|
|
3
|
+
"version": "9.9.3",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.cjs",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/priority-overflow": "^9.4.
|
|
15
|
+
"@fluentui/priority-overflow": "^9.4.3",
|
|
16
16
|
"@fluentui/react-shared-contexts": "^9.26.3",
|
|
17
17
|
"@fluentui/react-theme": "^9.2.2",
|
|
18
18
|
"@fluentui/react-utilities": "^9.26.6",
|