@fluentui/react-overflow 9.0.17 → 9.0.19
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.json +64 -1
- package/CHANGELOG.md +23 -2
- package/lib/components/Overflow.js +42 -59
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js +6 -13
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.types.js +0 -1
- package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib/components/OverflowItem/index.js +0 -1
- package/lib/components/OverflowItem/index.js.map +1 -1
- package/lib/components/useOverflowStyles.styles.js.map +1 -1
- package/lib/constants.js +0 -1
- package/lib/constants.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/overflowContext.js +8 -10
- package/lib/overflowContext.js.map +1 -1
- package/lib/types.js +0 -1
- package/lib/types.js.map +1 -1
- package/lib/useIsOverflowGroupVisible.js +2 -4
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useIsOverflowItemVisible.js +2 -4
- package/lib/useIsOverflowItemVisible.js.map +1 -1
- package/lib/useOverflowContainer.js +69 -66
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowCount.js +8 -10
- package/lib/useOverflowCount.js.map +1 -1
- package/lib/useOverflowItem.js +17 -14
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js +29 -22
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +1 -3
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +1 -3
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +0 -3
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/index.js +0 -3
- package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
- package/lib-commonjs/components/useOverflowStyles.styles.js +0 -2
- package/lib-commonjs/components/useOverflowStyles.styles.js.map +1 -1
- package/lib-commonjs/constants.js +1 -3
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/overflowContext.js +2 -4
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js +0 -3
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js +1 -3
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useIsOverflowItemVisible.js +1 -3
- package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +1 -3
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowCount.js +1 -3
- package/lib-commonjs/useOverflowCount.js.map +1 -1
- package/lib-commonjs/useOverflowItem.js +1 -3
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/lib-commonjs/useOverflowMenu.js +1 -3
- package/lib-commonjs/useOverflowMenu.js.map +1 -1
- package/package.json +5 -5
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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 OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, 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<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\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 updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\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 return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\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","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","containerRef","useRef","updateOverflowItems","overflowManager","useState","current","observe","undefined","onUpdateOverflow","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","updateOverflow","registerOverflowMenu","el","addOverflowMenu","removeOverflowMenu","updateVisibilityAttribute","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,8BAA8B;AAYpE,SAASC,SAAS,EAAEC,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AAEnG,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,cAAc;AAEvF;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,QACAC,UACyC;IACzC,MAAM,EAAEC,aAAY,EAAEC,kBAAiB,EAAEC,QAAO,EAAEC,eAAc,EAAEC,uBAAsB,EAAE,GAAGL;IAE7F,4CAA4C;IAC5C,MAAMM,eAAehB,MAAMiB,MAAM,CAAW,IAAI;IAChD,MAAMC,sBAAsBf,iBAAiBM;IAE7C,MAAM,CAACU,gBAAgB,GAAGnB,MAAMoB,QAAQ,CAAyB,IAC/DlB,cAAcD,0BAA0B,IAAI;IAG9CG,0BAA0B,IAAM;QAC9B,IAAI,CAACY,aAAaK,OAAO,EAAE;YACzB;QACF,CAAC;QAED,IAAIF,iBAAiB;YACnBA,gBAAgBG,OAAO,CAACN,aAAaK,OAAO,EAAE;gBAC5CT,mBAAmBA,8BAAAA,+BAAAA,oBAAqB,KAAK;gBAC7CD,cAAcA,yBAAAA,0BAAAA,eAAgB,YAAY;gBAC1CE,SAASA,oBAAAA,qBAAAA,UAAW,EAAE;gBACtBC,gBAAgBA,2BAAAA,4BAAAA,iBAAkB,CAAC;gBACnCC,wBAAwBA,mCAAAA,oCAAAA,yBAA2B,IAAMQ,SAAU;gBACnEC,kBAAkBN,gCAAAA,iCAAAA,sBAAwB,IAAMK,SAAU;YAC5D;YAEA,OAAO,IAAM;gBACXJ,gBAAgBM,UAAU;YAC5B;QACF,CAAC;IACH,GAAG;QACDP;QACAC;QACAP;QACAD;QACAE;QACAC;QACAC;KACD;IAED,MAAMW,eAAe1B,MAAM2B,WAAW,CACpC,CAACC,OAA4B;QAC3BT,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBU,OAAO,CAACD;QACzBA,KAAKE,OAAO,CAACC,YAAY,CAACzB,oBAAoB;QAE9C,OAAO,IAAM;YACXsB,KAAKE,OAAO,CAACE,eAAe,CAAC3B;YAC7BuB,KAAKE,OAAO,CAACE,eAAe,CAAC1B;YAC7Ba,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBc,UAAU,CAACL,KAAKM,EAAE;QACrC;IACF,GACA;QAACf;KAAgB;IAGnB,MAAMgB,iBAAiBnC,MAAM2B,WAAW,CAAC,IAAM;QAC7CR,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBV,MAAM;IACzB,GAAG;QAACU;KAAgB;IAEpB,MAAMiB,uBAAuBpC,MAAM2B,WAAW,CAC5C,CAACU,KAAoB;QACnBlB,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBmB,eAAe,CAACD;QACjCA,GAAGN,YAAY,CAACxB,oBAAoB;QAEpC,OAAO,IAAM;YACXY,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBoB,kBAAkB;YACnCF,GAAGL,eAAe,CAACzB;QACrB;IACF,GACA;QAACY;KAAgB;IAGnB,OAAO;QACLH;QACAU;QACAS;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMI,4BAAoD,CAAC,EAAEZ,KAAI,EAAEa,QAAO,EAAE,GAAK;IACtF,IAAIA,SAAS;QACXb,KAAKE,OAAO,CAACE,eAAe,CAAC3B;IAC/B,OAAO;QACLuB,KAAKE,OAAO,CAACC,YAAY,CAAC1B,kBAAkB;IAC9C,CAAC;AACH,EAAE"}
|
package/lib/useOverflowCount.js
CHANGED
@@ -1,13 +1,11 @@
|
|
1
1
|
import { useOverflowContext } from './overflowContext';
|
2
2
|
/**
|
3
3
|
* @returns Number of items that are overflowing
|
4
|
-
*/
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
});
|
13
|
-
//# sourceMappingURL=useOverflowCount.js.map
|
4
|
+
*/ export const useOverflowCount = ()=>useOverflowContext((v)=>{
|
5
|
+
return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{
|
6
|
+
if (!visible) {
|
7
|
+
acc++;
|
8
|
+
}
|
9
|
+
return acc;
|
10
|
+
}, 0);
|
11
|
+
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["useOverflowCount.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,mBAAmBE,CAAAA,IAAK;QACtB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAK;YACrE,IAAI,CAACA,SAAS;gBACZF;YACF,CAAC;YAED,OAAOA;QACT,GAAG;IACL,GAAG"}
|
package/lib/useOverflowItem.js
CHANGED
@@ -8,20 +8,23 @@ import { useOverflowContext } from './overflowContext';
|
|
8
8
|
* @param priority - higher priority means the item overflows later
|
9
9
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
10
10
|
* @returns ref to assign to an intrinsic HTML element
|
11
|
-
*/
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
11
|
+
*/ export function useOverflowItem(id, priority, groupId) {
|
12
|
+
const ref = React.useRef(null);
|
13
|
+
const registerItem = useOverflowContext((v)=>v.registerItem);
|
14
|
+
useIsomorphicLayoutEffect(()=>{
|
15
|
+
if (ref.current) {
|
16
|
+
return registerItem({
|
17
|
+
element: ref.current,
|
18
|
+
id,
|
19
|
+
priority: priority !== null && priority !== void 0 ? priority : 0,
|
20
|
+
groupId
|
21
|
+
});
|
22
|
+
}
|
23
|
+
}, [
|
19
24
|
id,
|
20
|
-
priority
|
25
|
+
priority,
|
26
|
+
registerItem,
|
21
27
|
groupId
|
22
|
-
|
23
|
-
|
24
|
-
}, [id, priority, registerItem, groupId]);
|
25
|
-
return ref;
|
28
|
+
]);
|
29
|
+
return ref;
|
26
30
|
}
|
27
|
-
//# sourceMappingURL=useOverflowItem.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["useOverflowItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;CAOC,GACD,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB,EAAE;IAC7G,MAAMC,MAAMP,MAAMQ,MAAM,CAAW,IAAI;IACvC,MAAMC,eAAeP,mBAAmBQ,CAAAA,IAAKA,EAAED,YAAY;IAE3DR,0BAA0B,IAAM;QAC9B,IAAIM,IAAII,OAAO,EAAE;YACf,OAAOF,aAAa;gBAClBG,SAASL,IAAII,OAAO;gBACpBP;gBACAC,UAAUA,qBAAAA,sBAAAA,WAAY,CAAC;gBACvBC;YACF;QACF,CAAC;IACH,GAAG;QAACF;QAAIC;QAAUI;QAAcH;KAAQ;IAExC,OAAOC;AACT,CAAC"}
|
package/lib/useOverflowMenu.js
CHANGED
@@ -3,26 +3,33 @@ import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
3
3
|
import { useOverflowContext } from './overflowContext';
|
4
4
|
import { useOverflowCount } from './useOverflowCount';
|
5
5
|
export function useOverflowMenu(id) {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
6
|
+
const elementId = useId('overflow-menu', id);
|
7
|
+
const overflowCount = useOverflowCount();
|
8
|
+
const registerOverflowMenu = useOverflowContext((v)=>v.registerOverflowMenu);
|
9
|
+
const updateOverflow = useOverflowContext((v)=>v.updateOverflow);
|
10
|
+
const ref = React.useRef(null);
|
11
|
+
const isOverflowing = overflowCount > 0;
|
12
|
+
useIsomorphicLayoutEffect(()=>{
|
13
|
+
if (ref.current) {
|
14
|
+
return registerOverflowMenu(ref.current);
|
15
|
+
}
|
16
|
+
}, [
|
17
|
+
registerOverflowMenu,
|
18
|
+
isOverflowing,
|
19
|
+
elementId
|
20
|
+
]);
|
21
|
+
useIsomorphicLayoutEffect(()=>{
|
22
|
+
if (isOverflowing) {
|
23
|
+
updateOverflow();
|
24
|
+
}
|
25
|
+
}, [
|
26
|
+
isOverflowing,
|
27
|
+
updateOverflow,
|
28
|
+
ref
|
29
|
+
]);
|
30
|
+
return {
|
31
|
+
ref,
|
32
|
+
overflowCount,
|
33
|
+
isOverflowing
|
34
|
+
};
|
27
35
|
}
|
28
|
-
//# sourceMappingURL=useOverflowMenu.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["useOverflowMenu.ts"],"sourcesContent":["import * 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>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(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 useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC,gBAA8CC,EAAW,EAAE;IACzE,MAAMC,YAAYN,MAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ;IACtB,MAAMK,uBAAuBN,mBAAmBO,CAAAA,IAAKA,EAAED,oBAAoB;IAC3E,MAAME,iBAAiBR,mBAAmBO,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMZ,MAAMa,MAAM,CAAW,IAAI;IACvC,MAAMC,gBAAgBN,gBAAgB;IAEtCN,0BAA0B,IAAM;QAC9B,IAAIU,IAAIG,OAAO,EAAE;YACf,OAAON,qBAAqBG,IAAIG,OAAO;QACzC,CAAC;IACH,GAAG;QAACN;QAAsBK;QAAeP;KAAU;IAEnDL,0BAA0B,IAAM;QAC9B,IAAIY,eAAe;YACjBH;QACF,CAAC;IACH,GAAG;QAACG;QAAeH;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKJ;QAAeM;IAAc;AAC7C,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
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((x)=>itemVisibility[x.id] = true);\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 } = 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 }\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","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;aAAAA;;;6DARM;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACrE,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,SAAQ,EAAGC,eAAc,EAAGC,cAAc,aAAY,EAAGC,kBAAiB,EAAGC,QAAO,EAAG,GAAGR;IAClG,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC,OAAO;QACnB,MAAM,EAAEC,aAAY,EAAGC,eAAc,EAAGJ,gBAAe,EAAG,GAAGE;QAC7D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC,IAAIP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,IAAI;QACrDH,eAAeC,OAAO,CAAC,CAACC,IAAIP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,KAAK;QACxDX,iBAAiB,IAAI;YACjB,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACI,MAAM,GAAG;gBAC1CT;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAES,aAAY,EAAGC,aAAY,EAAGC,eAAc,EAAGC,qBAAoB,EAAG,GAAGC,IAAAA,0CAAoB,EAACZ,QAAQ;QAC1GR;QACAD;QACAE;QACAH;QACAuB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC3B,UAAU;QACtDH,KAAK+B,IAAAA,6BAAa,EAACT,cAActB;QACjCgC,WAAWC,IAAAA,oBAAY,EAAChC,OAAOiC,YAAY,EAAEjC,OAAOkC,gBAAgB,EAAEhC,SAASJ,KAAK,CAACiC,SAAS;IAClG;IACA,OAAO,WAAW,GAAGnC,OAAMuC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAC/DC,OAAO;YACH3B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCY;YACAC;YACAC;QACJ;IACJ,GAAGI;AACP"}
|
@@ -16,6 +16,4 @@ const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
16
|
return (0, _reactUtilities.applyTriggerPropsToChildren)(children, {
|
17
17
|
ref: (0, _reactUtilities.useMergedRefs)(containerRef, ref)
|
18
18
|
});
|
19
|
-
});
|
20
|
-
|
21
|
-
//# sourceMappingURL=OverflowItem.js.map
|
19
|
+
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const { id , groupId , priority , children } = props;\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref)\n });\n});\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","applyTriggerPropsToChildren","useMergedRefs"],"mappings":";;;;+BAMiBA;;aAAAA;;;6DANM;gCACoC;iCAC3B;AAIrB,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACzE,MAAM,EAAEC,GAAE,EAAGC,QAAO,EAAGC,SAAQ,EAAGC,SAAQ,EAAG,GAAGL;IAChD,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,OAAOK,IAAAA,2CAA2B,EAACH,UAAU;QACzCJ,KAAKQ,IAAAA,6BAAa,EAACH,cAAcL;IACrC;AACJ"}
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
6
6
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
7
|
-
//# sourceMappingURL=OverflowItem.types.js.map
|
8
|
-
|
9
|
-
//# sourceMappingURL=OverflowItem.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["OverflowItem.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":";;;;+BAASA;;aAAAA,0BAAY;;8BAAQ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["useOverflowStyles.styles.js"],"sourcesContent":["import { __styles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = /*#__PURE__*/__styles({\n overflowMenu: {\n Brvla84: \"fyfkpbf\"\n },\n overflowingItems: {\n zb22lx: \"f10570jf\"\n }\n}, {\n d: [\".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f10570jf [data-overflowing]{display:none;}\"]\n});\n//# sourceMappingURL=useOverflowStyles.styles.js.map"],"names":["useOverflowStyles","__styles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"mappings":";;;;+BAEaA;;aAAAA;;uBAFY;AAElB,MAAMA,oBAAoB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACrDC,cAAc;QACZC,SAAS;IACX;IACAC,kBAAkB;QAChBC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA2F;KAA8C;AAC/I,IACA,oDAAoD"}
|
@@ -15,6 +15,4 @@ _export(exports, {
|
|
15
15
|
});
|
16
16
|
const DATA_OVERFLOWING = 'data-overflowing';
|
17
17
|
const DATA_OVERFLOW_ITEM = 'data-overflow-item';
|
18
|
-
const DATA_OVERFLOW_MENU = 'data-overflow-menu';
|
19
|
-
|
20
|
-
//# sourceMappingURL=constants.js.map
|
18
|
+
const DATA_OVERFLOW_MENU = 'data-overflow-menu';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["constants.js"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"mappings":";;;;;;;;;;;IAAaA,gBAAgB,MAAhBA;IACAC,kBAAkB,MAAlBA;IACAC,kBAAkB,MAAlBA;;AAFN,MAAMF,mBAAmB;AACzB,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB"}
|
package/lib-commonjs/index.js
CHANGED
@@ -32,6 +32,3 @@ const _useOverflowItem = require("./useOverflowItem");
|
|
32
32
|
const _useOverflowMenu = require("./useOverflowMenu");
|
33
33
|
const _overflowContext = require("./overflowContext");
|
34
34
|
const _overflowItem = require("./components/OverflowItem/OverflowItem");
|
35
|
-
//# sourceMappingURL=index.js.map
|
36
|
-
|
37
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowContext","OverflowItem"],"mappings":";;;;;;;;;;;IAASA,QAAQ,MAARA,kBAAQ;IACRC,gBAAgB,MAAhBA,2BAAgB;IAAEC,kBAAkB,MAAlBA,6BAAkB;IAAEC,kBAAkB,MAAlBA,6BAAkB;IACxDC,yBAAyB,MAAzBA,oDAAyB;IACzBC,wBAAwB,MAAxBA,kDAAwB;IACxBC,oBAAoB,MAApBA,0CAAoB;IACpBC,gBAAgB,MAAhBA,kCAAgB;IAChBC,eAAe,MAAfA,gCAAe;IACfC,eAAe,MAAfA,gCAAe;IACfC,kBAAkB,MAAlBA,mCAAkB;IAClBC,YAAY,MAAZA,0BAAY;;0BATI;2BACgD;2CAC/B;0CACD;sCACJ;kCACJ;iCACD;iCACA;iCACG;8BACN"}
|
@@ -13,7 +13,7 @@ _export(exports, {
|
|
13
13
|
useOverflowContext: ()=>useOverflowContext
|
14
14
|
});
|
15
15
|
const _reactContextSelector = require("@fluentui/react-context-selector");
|
16
|
-
const OverflowContext =
|
16
|
+
const OverflowContext = (0, _reactContextSelector.createContext)(undefined);
|
17
17
|
const overflowContextDefaultValue = {
|
18
18
|
itemVisibility: {},
|
19
19
|
groupVisibility: {},
|
@@ -22,6 +22,4 @@ const overflowContextDefaultValue = {
|
|
22
22
|
updateOverflow: ()=>null,
|
23
23
|
registerOverflowMenu: ()=>()=>null
|
24
24
|
};
|
25
|
-
const useOverflowContext = (selector)=>(0, _reactContextSelector.useContextSelector)(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));
|
26
|
-
|
27
|
-
//# sourceMappingURL=overflowContext.js.map
|
25
|
+
const useOverflowContext = (selector)=>(0, _reactContextSelector.useContextSelector)(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["overflowContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nexport const OverflowContext = createContext(undefined);\nconst overflowContextDefaultValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: ()=>()=>null,\n updateOverflow: ()=>null,\n registerOverflowMenu: ()=>()=>null\n};\n/**\n * @internal\n */ export const useOverflowContext = (selector)=>useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));\n"],"names":["OverflowContext","useOverflowContext","createContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,eAAe,MAAfA;IAWIC,kBAAkB,MAAlBA;;sCAZiC;AAC3C,MAAMD,kBAAkBE,IAAAA,mCAAa,EAACC;AAC7C,MAAMC,8BAA8B;IAChCC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa,KAAK;IAClBC,cAAc,IAAI,IAAI,IAAI;IAC1BC,gBAAgB,IAAI,IAAI;IACxBC,sBAAsB,IAAI,IAAI,IAAI;AACtC;AAGW,MAAMT,qBAAqB,CAACU,WAAWC,IAAAA,wCAAkB,EAACZ,iBAAiB,CAACa,MAAMT,2BAA2B,GAAGO,SAASE"}
|
package/lib-commonjs/types.js
CHANGED
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
6
6
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
7
|
-
//# sourceMappingURL=types.js.map
|
8
|
-
|
9
|
-
//# sourceMappingURL=types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}
|
@@ -9,6 +9,4 @@ Object.defineProperty(exports, "useIsOverflowGroupVisible", {
|
|
9
9
|
const _overflowContext = require("./overflowContext");
|
10
10
|
function useIsOverflowGroupVisible(id) {
|
11
11
|
return (0, _overflowContext.useOverflowContext)((ctx)=>ctx.groupVisibility[id]);
|
12
|
-
}
|
13
|
-
|
14
|
-
//# sourceMappingURL=useIsOverflowGroupVisible.js.map
|
12
|
+
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["useIsOverflowGroupVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */ export function useIsOverflowGroupVisible(id) {\n return useOverflowContext((ctx)=>ctx.groupVisibility[id]);\n}\n"],"names":["useIsOverflowGroupVisible","id","useOverflowContext","ctx","groupVisibility"],"mappings":";;;;+BAIoBA;;aAAAA;;iCAJe;AAIxB,SAASA,0BAA0BC,EAAE,EAAE;IAC9C,OAAOC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,eAAe,CAACH,GAAG;AAC5D"}
|
@@ -9,6 +9,4 @@ Object.defineProperty(exports, "useIsOverflowItemVisible", {
|
|
9
9
|
const _overflowContext = require("./overflowContext");
|
10
10
|
function useIsOverflowItemVisible(id) {
|
11
11
|
return !!(0, _overflowContext.useOverflowContext)((ctx)=>ctx.itemVisibility[id]);
|
12
|
-
}
|
13
|
-
|
14
|
-
//# sourceMappingURL=useIsOverflowItemVisible.js.map
|
12
|
+
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["useIsOverflowItemVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */ export function useIsOverflowItemVisible(id) {\n return !!useOverflowContext((ctx)=>ctx.itemVisibility[id]);\n}\n"],"names":["useIsOverflowItemVisible","id","useOverflowContext","ctx","itemVisibility"],"mappings":";;;;+BAIoBA;;aAAAA;;iCAJe;AAIxB,SAASA,yBAAyBC,EAAE,EAAE;IAC7C,OAAO,CAAC,CAACC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,cAAc,CAACH,GAAG;AAC7D"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\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 , overflowDirection , padding , minimumVisible , onUpdateItemVisibility } = options;\n // DOM ref to the overflow container element\n const containerRef = React.useRef(null);\n const updateOverflowItems = useEventCallback(update);\n const [overflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);\n useIsomorphicLayoutEffect(()=>{\n if (!containerRef.current) {\n return;\n }\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',\n overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',\n padding: padding !== null && padding !== void 0 ? padding : 10,\n minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,\n onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,\n onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined\n });\n return ()=>{\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility\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 updateOverflow = React.useCallback(()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\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 return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu\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","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","containerRef","React","useRef","updateOverflowItems","useEventCallback","overflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","undefined","onUpdateOverflow","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","updateOverflow","registerOverflowMenu","el","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","visible"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["useOverflowCount.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @returns Number of items that are overflowing\n */ export const useOverflowCount = ()=>useOverflowContext((v)=>{\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{\n if (!visible) {\n acc++;\n }\n return acc;\n }, 0);\n });\n"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":";;;;+BAGiBA;;aAAAA;;iCAHkB;AAGxB,MAAMA,mBAAmB,IAAIC,IAAAA,mCAAkB,EAAC,CAACC,IAAI;QACxD,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAG;YACjE,IAAI,CAACA,SAAS;gBACVF;YACJ,CAAC;YACD,OAAOA;QACX,GAAG;IACP"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["useOverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */ export function useOverflowItem(id, priority, groupId) {\n const ref = React.useRef(null);\n const registerItem = useOverflowContext((v)=>v.registerItem);\n useIsomorphicLayoutEffect(()=>{\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority !== null && priority !== void 0 ? priority : 0,\n groupId\n });\n }\n }, [\n id,\n priority,\n registerItem,\n groupId\n ]);\n return ref;\n}\n"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAUoBA;;aAAAA;;;6DAVG;gCACmB;iCACP;AAQxB,SAASA,gBAAgBC,EAAE,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IACvD,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,eAAeC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,YAAY;IAC3DG,IAAAA,yCAAyB,EAAC,IAAI;QAC1B,IAAIN,IAAIO,OAAO,EAAE;YACb,OAAOJ,aAAa;gBAChBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAIA,WAAW,CAAC;gBACjEC;YACJ;QACJ,CAAC;IACL,GAAG;QACCF;QACAC;QACAK;QACAJ;KACH;IACD,OAAOC;AACX"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["useOverflowMenu.js"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nexport function useOverflowMenu(id) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext((v)=>v.registerOverflowMenu);\n const updateOverflow = useOverflowContext((v)=>v.updateOverflow);\n const ref = React.useRef(null);\n const isOverflowing = overflowCount > 0;\n useIsomorphicLayoutEffect(()=>{\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [\n registerOverflowMenu,\n isOverflowing,\n elementId\n ]);\n useIsomorphicLayoutEffect(()=>{\n if (isOverflowing) {\n updateOverflow();\n }\n }, [\n isOverflowing,\n updateOverflow,\n ref\n ]);\n return {\n ref,\n overflowCount,\n isOverflowing\n };\n}\n"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"mappings":";;;;+BAIgBA;;aAAAA;;;6DAJO;gCAC0B;iCACd;kCACF;AAC1B,SAASA,gBAAgBC,EAAE,EAAE;IAChC,MAAMC,YAAYC,IAAAA,qBAAK,EAAC,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAgB;IACtC,MAAMC,uBAAuBC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,gBAAgBT,gBAAgB;IACtCU,IAAAA,yCAAyB,EAAC,IAAI;QAC1B,IAAIJ,IAAIK,OAAO,EAAE;YACb,OAAOT,qBAAqBI,IAAIK,OAAO;QAC3C,CAAC;IACL,GAAG;QACCT;QACAO;QACAX;KACH;IACDY,IAAAA,yCAAyB,EAAC,IAAI;QAC1B,IAAID,eAAe;YACfJ;QACJ,CAAC;IACL,GAAG;QACCI;QACAJ;QACAC;KACH;IACD,OAAO;QACHA;QACAN;QACAS;IACJ;AACJ"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-overflow",
|
3
|
-
"version": "9.0.
|
3
|
+
"version": "9.0.19",
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -25,7 +25,7 @@
|
|
25
25
|
"storybook": "start-storybook",
|
26
26
|
"type-check": "tsc -b tsconfig.json",
|
27
27
|
"generate-api": "just-scripts generate-api",
|
28
|
-
"test-ssr": "test-ssr ./stories/**/*.stories.tsx"
|
28
|
+
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
|
29
29
|
},
|
30
30
|
"devDependencies": {
|
31
31
|
"@fluentui/eslint-plugin": "*",
|
@@ -35,10 +35,10 @@
|
|
35
35
|
},
|
36
36
|
"dependencies": {
|
37
37
|
"@fluentui/priority-overflow": "^9.0.3",
|
38
|
-
"@fluentui/react-context-selector": "^9.1.
|
38
|
+
"@fluentui/react-context-selector": "^9.1.22",
|
39
39
|
"@fluentui/react-theme": "^9.1.8",
|
40
|
-
"@fluentui/react-utilities": "^9.9.
|
41
|
-
"@griffel/react": "^1.5.
|
40
|
+
"@fluentui/react-utilities": "^9.9.2",
|
41
|
+
"@griffel/react": "^1.5.7",
|
42
42
|
"@swc/helpers": "^0.4.14"
|
43
43
|
},
|
44
44
|
"peerDependencies": {
|