@fluentui/react-overflow 9.1.8 → 9.1.10
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +23 -2
- package/lib/components/Overflow.js +1 -1
- package/lib/components/Overflow.js.map +1 -1
- package/lib/useOverflowContainer.js +5 -3
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +1 -1
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +5 -3
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 30 Jan 2024 23:12:35 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.10)
|
|
8
|
+
|
|
9
|
+
Tue, 30 Jan 2024 23:12:35 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.9..@fluentui/react-overflow_v9.1.10)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-context-selector to v9.1.51 ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.18.0 ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.9)
|
|
18
|
+
|
|
19
|
+
Tue, 23 Jan 2024 15:10:59 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.8..@fluentui/react-overflow_v9.1.9)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- fix: cleanup overflow manager on every unmount ([PR #30363](https://github.com/microsoft/fluentui/pull/30363) by marcosvmmoura@gmail.com)
|
|
25
|
+
- Bump @fluentui/react-context-selector to v9.1.50 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.17.0 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.8)
|
|
8
29
|
|
|
9
|
-
Thu, 18 Jan 2024 14:
|
|
30
|
+
Thu, 18 Jan 2024 14:25:03 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.7..@fluentui/react-overflow_v9.1.8)
|
|
11
32
|
|
|
12
33
|
### Patches
|
|
@@ -39,7 +39,7 @@ import { useOverflowStyles } from './useOverflowStyles.styles';
|
|
|
39
39
|
});
|
|
40
40
|
const clonedChild = applyTriggerPropsToChildren(children, {
|
|
41
41
|
ref: useMergedRefs(containerRef, ref),
|
|
42
|
-
className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)
|
|
42
|
+
className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
|
|
43
43
|
});
|
|
44
44
|
return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {
|
|
45
45
|
value: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AAEvF,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWR,MAAMS,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASL;IAEf,MAAM,EAAEM,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGnB,MAAMoB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QAEpDX,iBAAiB;YACf,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAG/B,qBAC5FkB,QACA;QACER;QACAD;QACAE;QACAH;QACAwB,wBAAwBjC;IAC1B;IAGF,MAAMkC,cAAcrC,4BAA4BW,UAAU;QACxDF,KAAKR,cAAc8B,cAActB;QACjC6B,WAAWvC,
|
|
1
|
+
{"version":3,"sources":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AAEvF,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWR,MAAMS,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASL;IAEf,MAAM,EAAEM,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGnB,MAAMoB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QAEpDX,iBAAiB;YACf,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAG/B,qBAC5FkB,QACA;QACER;QACAD;QACAE;QACAH;QACAwB,wBAAwBjC;IAC1B;IAGF,MAAMkC,cAAcrC,4BAA4BW,UAAU;QACxDF,KAAKR,cAAc8B,cAActB;QACjC6B,WAAWvC,aAAa,gBAAgBW,OAAO6B,YAAY,EAAE7B,OAAO8B,gBAAgB,EAAE7B,SAASH,KAAK,CAAC8B,SAAS;IAChH;IAEA,qBACE,oBAACpC,gBAAgBuC,QAAQ;QACvBC,OAAO;YACLtB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACF;OAECE;AAGP,GAAG"}
|
|
@@ -47,13 +47,15 @@ const noop = ()=>null;
|
|
|
47
47
|
const newOverflowManager = createOverflowManager();
|
|
48
48
|
newOverflowManager.observe(containerRef.current, overflowOptions);
|
|
49
49
|
setOverflowManager(newOverflowManager);
|
|
50
|
-
return ()=>{
|
|
51
|
-
newOverflowManager.disconnect();
|
|
52
|
-
};
|
|
53
50
|
}, [
|
|
54
51
|
overflowOptions,
|
|
55
52
|
firstMount
|
|
56
53
|
]);
|
|
54
|
+
/* Clean up overflow manager on unmount */ React.useEffect(()=>()=>{
|
|
55
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.disconnect();
|
|
56
|
+
}, [
|
|
57
|
+
overflowManager
|
|
58
|
+
]);
|
|
57
59
|
const registerItem = React.useCallback((item)=>{
|
|
58
60
|
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
|
59
61
|
item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\nconst noop = () => null;\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<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n } = options;\n\n const onUpdateOverflow = useEventCallback(update);\n\n const overflowOptions = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow,\n }),\n [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],\n );\n\n const firstMount = useFirstMount();\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n\n const [overflowManager, setOverflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(() => {\n if (firstMount && containerRef.current) {\n overflowManager?.observe(containerRef.current, overflowOptions);\n }\n }, [firstMount, overflowManager, overflowOptions]);\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n\n
|
|
1
|
+
{"version":3,"sources":["useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\nconst noop = () => null;\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<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n } = options;\n\n const onUpdateOverflow = useEventCallback(update);\n\n const overflowOptions = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow,\n }),\n [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],\n );\n\n const firstMount = useFirstMount();\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n\n const [overflowManager, setOverflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(() => {\n if (firstMount && containerRef.current) {\n overflowManager?.observe(containerRef.current, overflowOptions);\n }\n }, [firstMount, overflowManager, overflowOptions]);\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n }, [overflowOptions, firstMount]);\n\n /* Clean up overflow manager on unmount */\n React.useEffect(\n () => () => {\n overflowManager?.disconnect();\n },\n [overflowManager],\n );\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.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 overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const registerDivider = React.useCallback(\n (divider: OverflowDividerEntry) => {\n const el = divider.element;\n overflowManager?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n divider.groupId && overflowManager?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n },\n [overflowManager],\n );\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef,\n };\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","canUseDOM","useEventCallback","useFirstMount","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","noop","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
@@ -48,7 +48,7 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
48
48
|
});
|
|
49
49
|
const clonedChild = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
|
|
50
50
|
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref),
|
|
51
|
-
className: (0, _react1.mergeClasses)(styles.overflowMenu, styles.overflowingItems, children.props.className)
|
|
51
|
+
className: (0, _react1.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
|
|
52
52
|
});
|
|
53
53
|
return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
|
|
54
54
|
value: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const styles = useOverflowStyles();\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n const [overflowState, setOverflowState] = React.useState({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {}\n });\n // useOverflowContainer wraps this method in a useEventCallback.\n const update = (data)=>{\n const { visibleItems, invisibleItems, groupVisibility } = data;\n const itemVisibility = {};\n visibleItems.forEach((item)=>{\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach((x)=>itemVisibility[x.id] = false);\n setOverflowState(()=>{\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility\n };\n });\n };\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute\n });\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider\n }\n }, clonedChild);\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/D,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC;QACZ,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAC1D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC;YAClBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC9B;QACAH,eAAeC,OAAO,CAAC,CAACG,IAAIT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACnDX,iBAAiB;YACb,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0CAAoB,EAACd,QAAQ;QACvHR;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC7B,UAAU;QACtDH,KAAKiC,IAAAA,6BAAa,EAACV,cAAcvB;QACjCkC,WAAWC,IAAAA,oBAAY,
|
|
1
|
+
{"version":3,"sources":["Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const styles = useOverflowStyles();\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n const [overflowState, setOverflowState] = React.useState({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {}\n });\n // useOverflowContainer wraps this method in a useEventCallback.\n const update = (data)=>{\n const { visibleItems, invisibleItems, groupVisibility } = data;\n const itemVisibility = {};\n visibleItems.forEach((item)=>{\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach((x)=>itemVisibility[x.id] = false);\n setOverflowState(()=>{\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility\n };\n });\n };\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute\n });\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider\n }\n }, clonedChild);\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/D,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC;QACZ,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAC1D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC;YAClBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC9B;QACAH,eAAeC,OAAO,CAAC,CAACG,IAAIT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACnDX,iBAAiB;YACb,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0CAAoB,EAACd,QAAQ;QACvHR;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC7B,UAAU;QACtDH,KAAKiC,IAAAA,6BAAa,EAACV,cAAcvB;QACjCkC,WAAWC,IAAAA,oBAAY,EAAC,gBAAgBlC,OAAOmC,YAAY,EAAEnC,OAAOoC,gBAAgB,EAAElC,SAASJ,KAAK,CAACmC,SAAS;IAClH;IACA,OAAO,WAAW,GAAGrC,OAAMyC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAC/DC,OAAO;YACH7B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACJ;IACJ,GAAGI;AACP"}
|
|
@@ -61,13 +61,15 @@ const useOverflowContainer = (update, options)=>{
|
|
|
61
61
|
const newOverflowManager = (0, _priorityoverflow.createOverflowManager)();
|
|
62
62
|
newOverflowManager.observe(containerRef.current, overflowOptions);
|
|
63
63
|
setOverflowManager(newOverflowManager);
|
|
64
|
-
return ()=>{
|
|
65
|
-
newOverflowManager.disconnect();
|
|
66
|
-
};
|
|
67
64
|
}, [
|
|
68
65
|
overflowOptions,
|
|
69
66
|
firstMount
|
|
70
67
|
]);
|
|
68
|
+
/* Clean up overflow manager on unmount */ _react.useEffect(()=>()=>{
|
|
69
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.disconnect();
|
|
70
|
+
}, [
|
|
71
|
+
overflowManager
|
|
72
|
+
]);
|
|
71
73
|
const registerItem = _react.useCallback((item)=>{
|
|
72
74
|
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
|
73
75
|
item.element.setAttribute(_constants.DATA_OVERFLOW_ITEM, '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nconst noop = ()=>null;\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 */ export const useOverflowContainer = (update, options)=>{\n const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;\n const onUpdateOverflow = useEventCallback(update);\n const overflowOptions = React.useMemo(()=>({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow\n }), [\n minimumVisible,\n onUpdateItemVisibility,\n overflowAxis,\n overflowDirection,\n padding,\n onUpdateOverflow\n ]);\n const firstMount = useFirstMount();\n // DOM ref to the overflow container element\n const containerRef = React.useRef(null);\n const [overflowManager, setOverflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(()=>{\n if (firstMount && containerRef.current) {\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);\n }\n }, [\n firstMount,\n overflowManager,\n overflowOptions\n ]);\n useIsomorphicLayoutEffect(()=>{\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n
|
|
1
|
+
{"version":3,"sources":["useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nconst noop = ()=>null;\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 */ export const useOverflowContainer = (update, options)=>{\n const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;\n const onUpdateOverflow = useEventCallback(update);\n const overflowOptions = React.useMemo(()=>({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow\n }), [\n minimumVisible,\n onUpdateItemVisibility,\n overflowAxis,\n overflowDirection,\n padding,\n onUpdateOverflow\n ]);\n const firstMount = useFirstMount();\n // DOM ref to the overflow container element\n const containerRef = React.useRef(null);\n const [overflowManager, setOverflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(()=>{\n if (firstMount && containerRef.current) {\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);\n }\n }, [\n firstMount,\n overflowManager,\n overflowOptions\n ]);\n useIsomorphicLayoutEffect(()=>{\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n }, [\n overflowOptions,\n firstMount\n ]);\n /* Clean up overflow manager on unmount */ React.useEffect(()=>()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.disconnect();\n }, [\n overflowManager\n ]);\n const registerItem = React.useCallback((item)=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n return ()=>{\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);\n };\n }, [\n overflowManager\n ]);\n const registerDivider = React.useCallback((divider)=>{\n const el = divider.element;\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n return ()=>{\n divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, [\n overflowManager\n ]);\n const registerOverflowMenu = React.useCallback((el)=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n return ()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }, [\n overflowManager\n ]);\n const updateOverflow = React.useCallback(()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\n }, [\n overflowManager\n ]);\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef\n };\n};\nexport const updateVisibilityAttribute = ({ item, visible })=>{\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["useOverflowContainer","updateVisibilityAttribute","noop","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","useEventCallback","overflowOptions","React","useMemo","firstMount","useFirstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","registerDivider","divider","el","addDivider","DATA_OVERFLOW_DIVIDER","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","updateOverflow","visible"],"mappings":";;;;;;;;;;;IAUiBA,oBAAoB;eAApBA;;IA6FJC,yBAAyB;eAAzBA;;;;iEAvGU;kCACe;gCACgD;2BACU;AAChG,MAAMC,OAAO,IAAI;AAMN,MAAMF,uBAAuB,CAACG,QAAQC;IAC7C,MAAM,EAAEC,eAAe,YAAY,EAAEC,oBAAoB,KAAK,EAAEC,UAAU,EAAE,EAAEC,iBAAiB,CAAC,EAAEC,yBAAyBP,IAAI,EAAE,GAAGE;IACpI,MAAMM,mBAAmBC,IAAAA,gCAAgB,EAACR;IAC1C,MAAMS,kBAAkBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACnCT;YACAC;YACAC;YACAC;YACAC;YACAC;QACJ,CAAA,GAAI;QACJF;QACAC;QACAJ;QACAC;QACAC;QACAG;KACH;IACD,MAAMK,aAAaC,IAAAA,6BAAa;IAChC,4CAA4C;IAC5C,MAAMC,eAAeJ,OAAMK,MAAM,CAAC;IAClC,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGP,OAAMQ,QAAQ,CAAC,IAAIC,IAAAA,yBAAS,MAAKC,IAAAA,uCAAqB,MAAK;IACzG,8EAA8E;IAC9EC,IAAAA,yCAAyB,EAAC;QACtB,IAAIT,cAAcE,aAAaQ,OAAO,EAAE;YACpCN,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBO,OAAO,CAACT,aAAaQ,OAAO,EAAEb;QACpH;IACJ,GAAG;QACCG;QACAI;QACAP;KACH;IACDY,IAAAA,yCAAyB,EAAC;QACtB,IAAI,CAACP,aAAaQ,OAAO,IAAI,CAACH,IAAAA,yBAAS,OAAMP,YAAY;YACrD;QACJ;QACA,MAAMY,qBAAqBJ,IAAAA,uCAAqB;QAChDI,mBAAmBD,OAAO,CAACT,aAAaQ,OAAO,EAAEb;QACjDQ,mBAAmBO;IACvB,GAAG;QACCf;QACAG;KACH;IACD,wCAAwC,GAAGF,OAAMe,SAAS,CAAC,IAAI;YACvDT,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBU,UAAU;QAChG,GAAG;QACHV;KACH;IACD,MAAMW,eAAejB,OAAMkB,WAAW,CAAC,CAACC;QACpCb,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBc,OAAO,CAACD;QAC1FA,KAAKE,OAAO,CAACC,YAAY,CAACC,6BAAkB,EAAE;QAC9C,OAAO;YACHJ,KAAKE,OAAO,CAACG,eAAe,CAACC,2BAAgB;YAC7CN,KAAKE,OAAO,CAACG,eAAe,CAACD,6BAAkB;YAC/CjB,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBoB,UAAU,CAACP,KAAKQ,EAAE;QACxG;IACJ,GAAG;QACCrB;KACH;IACD,MAAMsB,kBAAkB5B,OAAMkB,WAAW,CAAC,CAACW;QACvC,MAAMC,KAAKD,QAAQR,OAAO;QAC1Bf,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgByB,UAAU,CAACF;QAC7FC,GAAGR,YAAY,CAACU,gCAAqB,EAAE;QACvC,OAAO;YACHH,QAAQI,OAAO,IAAK3B,CAAAA,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgB4B,aAAa,CAACL,QAAQI,OAAO,CAAA;YACnIH,GAAGN,eAAe,CAACQ,gCAAqB;QAC5C;IACJ,GAAG;QACC1B;KACH;IACD,MAAM6B,uBAAuBnC,OAAMkB,WAAW,CAAC,CAACY;QAC5CxB,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgB8B,eAAe,CAACN;QAClGA,GAAGR,YAAY,CAACe,6BAAkB,EAAE;QACpC,OAAO;YACH/B,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBgC,kBAAkB;YACpGR,GAAGN,eAAe,CAACa,6BAAkB;QACzC;IACJ,GAAG;QACC/B;KACH;IACD,MAAMiC,iBAAiBvC,OAAMkB,WAAW,CAAC;QACrCZ,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBhB,MAAM;IAC5F,GAAG;QACCgB;KACH;IACD,OAAO;QACHW;QACAW;QACAO;QACAI;QACAnC;IACJ;AACJ;AACO,MAAMhB,4BAA4B,CAAC,EAAE+B,IAAI,EAAEqB,OAAO,EAAE;IACvD,IAAIA,SAAS;QACTrB,KAAKE,OAAO,CAACG,eAAe,CAACC,2BAAgB;IACjD,OAAO;QACHN,KAAKE,OAAO,CAACC,YAAY,CAACG,2BAAgB,EAAE;IAChD;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.10",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@fluentui/priority-overflow": "^9.1.11",
|
|
38
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
38
|
+
"@fluentui/react-context-selector": "^9.1.51",
|
|
39
39
|
"@fluentui/react-theme": "^9.1.16",
|
|
40
|
-
"@fluentui/react-utilities": "^9.
|
|
40
|
+
"@fluentui/react-utilities": "^9.18.0",
|
|
41
41
|
"@griffel/react": "^1.5.14",
|
|
42
42
|
"@swc/helpers": "^0.5.1"
|
|
43
43
|
},
|