@fluentui/react-overflow 0.0.0-nightly-20230831-0414.1 → 0.0.0-nightly-20230901-0414.1
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 +11 -11
- package/CHANGELOG.md +8 -8
- package/lib/components/Overflow.js +3 -3
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowDivider/OverflowDivider.js +1 -1
- package/lib/components/OverflowDivider/OverflowDivider.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js +1 -1
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib/overflowContext.js.map +1 -1
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useIsOverflowItemVisible.js.map +1 -1
- package/lib/useOverflowContainer.js +16 -9
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowCount.js.map +1 -1
- package/lib/useOverflowDivider.js.map +1 -1
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +13 -11
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.js +9 -7
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.js.map +1 -1
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js +2 -2
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +9 -7
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +2 -2
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/index.js +4 -2
- package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
- package/lib-commonjs/components/useOverflowStyles.styles.js +4 -2
- package/lib-commonjs/components/useOverflowStyles.styles.js.map +1 -1
- package/lib-commonjs/constants.js +12 -4
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/index.js +48 -18
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/overflowContext.js +9 -5
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js +2 -2
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js +3 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useIsOverflowItemVisible.js +3 -1
- package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +29 -18
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowCount.js +3 -1
- package/lib-commonjs/useOverflowCount.js.map +1 -1
- package/lib-commonjs/useOverflowDivider.js +7 -5
- package/lib-commonjs/useOverflowDivider.js.map +1 -1
- package/lib-commonjs/useOverflowItem.js +7 -5
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/lib-commonjs/useOverflowMenu.js +9 -7
- package/lib-commonjs/useOverflowMenu.js.map +1 -1
- package/package.json +10 -10
@@ -1 +1 @@
|
|
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]{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
|
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]{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;;;eAAAA;;;uBAFY;AAElB,MAAMA,oBAAoB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACrDC,cAAc;QACZC,SAAS;IACX;IACAC,kBAAkB;QAChBC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAiD;KAA8C;AACrG,IACA,oDAAoD"}
|
@@ -9,10 +9,18 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
DATA_OVERFLOWING: ()
|
13
|
-
|
14
|
-
|
15
|
-
|
12
|
+
DATA_OVERFLOWING: function() {
|
13
|
+
return DATA_OVERFLOWING;
|
14
|
+
},
|
15
|
+
DATA_OVERFLOW_ITEM: function() {
|
16
|
+
return DATA_OVERFLOW_ITEM;
|
17
|
+
},
|
18
|
+
DATA_OVERFLOW_MENU: function() {
|
19
|
+
return DATA_OVERFLOW_MENU;
|
20
|
+
},
|
21
|
+
DATA_OVERFLOW_DIVIDER: function() {
|
22
|
+
return DATA_OVERFLOW_DIVIDER;
|
23
|
+
}
|
16
24
|
});
|
17
25
|
const DATA_OVERFLOWING = 'data-overflowing';
|
18
26
|
const DATA_OVERFLOW_ITEM = 'data-overflow-item';
|
@@ -1 +1 @@
|
|
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';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER"],"mappings":";;;;;;;;;;;IAAaA,gBAAgB
|
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';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER"],"mappings":";;;;;;;;;;;IAAaA,gBAAgB;eAAhBA;;IACAC,kBAAkB;eAAlBA;;IACAC,kBAAkB;eAAlBA;;IACAC,qBAAqB;eAArBA;;;AAHN,MAAMH,mBAAmB;AACzB,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAC3B,MAAMC,wBAAwB"}
|
package/lib-commonjs/index.js
CHANGED
@@ -9,23 +9,53 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
Overflow: ()
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
12
|
+
Overflow: function() {
|
13
|
+
return _Overflow.Overflow;
|
14
|
+
},
|
15
|
+
DATA_OVERFLOWING: function() {
|
16
|
+
return _constants.DATA_OVERFLOWING;
|
17
|
+
},
|
18
|
+
DATA_OVERFLOW_ITEM: function() {
|
19
|
+
return _constants.DATA_OVERFLOW_ITEM;
|
20
|
+
},
|
21
|
+
DATA_OVERFLOW_MENU: function() {
|
22
|
+
return _constants.DATA_OVERFLOW_MENU;
|
23
|
+
},
|
24
|
+
DATA_OVERFLOW_DIVIDER: function() {
|
25
|
+
return _constants.DATA_OVERFLOW_DIVIDER;
|
26
|
+
},
|
27
|
+
useIsOverflowGroupVisible: function() {
|
28
|
+
return _useIsOverflowGroupVisible.useIsOverflowGroupVisible;
|
29
|
+
},
|
30
|
+
useIsOverflowItemVisible: function() {
|
31
|
+
return _useIsOverflowItemVisible.useIsOverflowItemVisible;
|
32
|
+
},
|
33
|
+
useOverflowContainer: function() {
|
34
|
+
return _useOverflowContainer.useOverflowContainer;
|
35
|
+
},
|
36
|
+
useOverflowCount: function() {
|
37
|
+
return _useOverflowCount.useOverflowCount;
|
38
|
+
},
|
39
|
+
useOverflowItem: function() {
|
40
|
+
return _useOverflowItem.useOverflowItem;
|
41
|
+
},
|
42
|
+
useOverflowMenu: function() {
|
43
|
+
return _useOverflowMenu.useOverflowMenu;
|
44
|
+
},
|
45
|
+
useOverflowDivider: function() {
|
46
|
+
return _useOverflowDivider.useOverflowDivider;
|
47
|
+
},
|
48
|
+
useOverflowContext: function() {
|
49
|
+
return _overflowContext.useOverflowContext;
|
50
|
+
},
|
51
|
+
OverflowItem: function() {
|
52
|
+
return _OverflowItem.OverflowItem;
|
53
|
+
},
|
54
|
+
OverflowDivider: function() {
|
55
|
+
return _OverflowDivider.OverflowDivider;
|
56
|
+
}
|
27
57
|
});
|
28
|
-
const
|
58
|
+
const _Overflow = require("./components/Overflow");
|
29
59
|
const _constants = require("./constants");
|
30
60
|
const _useIsOverflowGroupVisible = require("./useIsOverflowGroupVisible");
|
31
61
|
const _useIsOverflowItemVisible = require("./useIsOverflowItemVisible");
|
@@ -35,5 +65,5 @@ const _useOverflowItem = require("./useOverflowItem");
|
|
35
65
|
const _useOverflowMenu = require("./useOverflowMenu");
|
36
66
|
const _useOverflowDivider = require("./useOverflowDivider");
|
37
67
|
const _overflowContext = require("./overflowContext");
|
38
|
-
const
|
39
|
-
const
|
68
|
+
const _OverflowItem = require("./components/OverflowItem/OverflowItem");
|
69
|
+
const _OverflowDivider = require("./components/OverflowDivider/OverflowDivider");
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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 { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ,
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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 { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IACRC,gBAAgB;eAAhBA,2BAAgB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAC/EC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IACpBC,gBAAgB;eAAhBA,kCAAgB;;IAChBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IACfC,kBAAkB;eAAlBA,sCAAkB;;IAClBC,kBAAkB;eAAlBA,mCAAkB;;IAClBC,YAAY;eAAZA,0BAAY;;IACZC,eAAe;eAAfA,gCAAe;;;0BAXC;2BACuE;2CACtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;iCACA;8BACN;iCACG"}
|
@@ -9,11 +9,15 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
OverflowContext: ()
|
13
|
-
|
12
|
+
OverflowContext: function() {
|
13
|
+
return OverflowContext;
|
14
|
+
},
|
15
|
+
useOverflowContext: function() {
|
16
|
+
return useOverflowContext;
|
17
|
+
}
|
14
18
|
});
|
15
|
-
const
|
16
|
-
const OverflowContext = (0,
|
19
|
+
const _reactcontextselector = require("@fluentui/react-context-selector");
|
20
|
+
const OverflowContext = (0, _reactcontextselector.createContext)(undefined);
|
17
21
|
const overflowContextDefaultValue = {
|
18
22
|
itemVisibility: {},
|
19
23
|
groupVisibility: {},
|
@@ -23,4 +27,4 @@ const overflowContextDefaultValue = {
|
|
23
27
|
registerOverflowMenu: ()=>()=>null,
|
24
28
|
registerDivider: ()=>()=>null
|
25
29
|
};
|
26
|
-
const useOverflowContext = (selector)=>(0,
|
30
|
+
const useOverflowContext = (selector)=>(0, _reactcontextselector.useContextSelector)(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));
|
@@ -1 +1 @@
|
|
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 registerDivider: ()=>()=>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","registerDivider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,eAAe
|
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 registerDivider: ()=>()=>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","registerDivider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,eAAe;eAAfA;;IAYIC,kBAAkB;eAAlBA;;;sCAbiC;AAC3C,MAAMD,kBAAkBE,IAAAA,mCAAa,EAACC;AAC7C,MAAMC,8BAA8B;IAChCC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAI,IAAI;IACtBC,gBAAgB,IAAI;IACpBC,sBAAsB,IAAI,IAAI;IAC9BC,iBAAiB,IAAI,IAAI;AAC7B;AAGW,MAAMV,qBAAqB,CAACW,WAAWC,IAAAA,wCAAkB,EAACb,iBAAiB,CAACc,MAAMV,2BAA2B,GAAGQ,SAASE"}
|
package/lib-commonjs/types.js
CHANGED
@@ -2,5 +2,5 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
const _react = /*#__PURE__*/
|
5
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
6
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useIsOverflowGroupVisible", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useIsOverflowGroupVisible;
|
9
|
+
}
|
8
10
|
});
|
9
11
|
const _overflowContext = require("./overflowContext");
|
10
12
|
function useIsOverflowGroupVisible(id) {
|
@@ -1 +1 @@
|
|
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
|
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;;;eAAAA;;;iCAJe;AAIxB,SAASA,0BAA0BC,EAAE;IAC5C,OAAOC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,eAAe,CAACH,GAAG;AAC5D"}
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useIsOverflowItemVisible", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useIsOverflowItemVisible;
|
9
|
+
}
|
8
10
|
});
|
9
11
|
const _overflowContext = require("./overflowContext");
|
10
12
|
function useIsOverflowItemVisible(id) {
|
@@ -1 +1 @@
|
|
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
|
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;;;eAAAA;;;iCAJe;AAIxB,SAASA,yBAAyBC,EAAE;IAC3C,OAAO,CAAC,CAACC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,cAAc,CAACH,GAAG;AAC7D"}
|
@@ -9,21 +9,25 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
useOverflowContainer: ()
|
13
|
-
|
12
|
+
useOverflowContainer: function() {
|
13
|
+
return useOverflowContainer;
|
14
|
+
},
|
15
|
+
updateVisibilityAttribute: function() {
|
16
|
+
return updateVisibilityAttribute;
|
17
|
+
}
|
14
18
|
});
|
15
|
-
const
|
16
|
-
const _react = /*#__PURE__*/
|
17
|
-
const
|
18
|
-
const
|
19
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
20
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
21
|
+
const _priorityoverflow = require("@fluentui/priority-overflow");
|
22
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
19
23
|
const _constants = require("./constants");
|
20
24
|
const useOverflowContainer = (update, options)=>{
|
21
|
-
const { overflowAxis
|
25
|
+
const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;
|
22
26
|
// DOM ref to the overflow container element
|
23
27
|
const containerRef = _react.useRef(null);
|
24
|
-
const updateOverflowItems = (0,
|
25
|
-
const [overflowManager] = _react.useState(()=>(0,
|
26
|
-
(0,
|
28
|
+
const updateOverflowItems = (0, _reactutilities.useEventCallback)(update);
|
29
|
+
const [overflowManager] = _react.useState(()=>(0, _reactutilities.canUseDOM)() ? (0, _priorityoverflow.createOverflowManager)() : null);
|
30
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
27
31
|
if (!containerRef.current) {
|
28
32
|
return;
|
29
33
|
}
|
@@ -50,37 +54,44 @@ const useOverflowContainer = (update, options)=>{
|
|
50
54
|
onUpdateItemVisibility
|
51
55
|
]);
|
52
56
|
const registerItem = _react.useCallback((item)=>{
|
53
|
-
|
57
|
+
var _overflowManager;
|
58
|
+
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addItem(item);
|
54
59
|
item.element.setAttribute(_constants.DATA_OVERFLOW_ITEM, '');
|
55
60
|
return ()=>{
|
61
|
+
var _overflowManager;
|
56
62
|
item.element.removeAttribute(_constants.DATA_OVERFLOWING);
|
57
63
|
item.element.removeAttribute(_constants.DATA_OVERFLOW_ITEM);
|
58
|
-
overflowManager === null ||
|
64
|
+
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeItem(item.id);
|
59
65
|
};
|
60
66
|
}, [
|
61
67
|
overflowManager
|
62
68
|
]);
|
63
69
|
const registerDivider = _react.useCallback((divider)=>{
|
70
|
+
var _overflowManager;
|
64
71
|
const el = divider.element;
|
65
|
-
overflowManager === null ||
|
72
|
+
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addDivider(divider);
|
66
73
|
el && el.setAttribute(_constants.DATA_OVERFLOW_DIVIDER, '');
|
67
74
|
return ()=>{
|
68
|
-
|
75
|
+
var _overflowManager;
|
76
|
+
divider.groupId && ((_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeDivider(divider.groupId));
|
69
77
|
el.removeAttribute(_constants.DATA_OVERFLOW_DIVIDER);
|
70
78
|
};
|
71
79
|
}, [
|
72
80
|
overflowManager
|
73
81
|
]);
|
74
82
|
const updateOverflow = _react.useCallback(()=>{
|
75
|
-
|
83
|
+
var _overflowManager;
|
84
|
+
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.update();
|
76
85
|
}, [
|
77
86
|
overflowManager
|
78
87
|
]);
|
79
88
|
const registerOverflowMenu = _react.useCallback((el)=>{
|
80
|
-
|
89
|
+
var _overflowManager;
|
90
|
+
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addOverflowMenu(el);
|
81
91
|
el.setAttribute(_constants.DATA_OVERFLOW_MENU, '');
|
82
92
|
return ()=>{
|
83
|
-
|
93
|
+
var _overflowManager;
|
94
|
+
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeOverflowMenu();
|
84
95
|
el.removeAttribute(_constants.DATA_OVERFLOW_MENU);
|
85
96
|
};
|
86
97
|
}, [
|
@@ -94,7 +105,7 @@ const useOverflowContainer = (update, options)=>{
|
|
94
105
|
registerDivider
|
95
106
|
};
|
96
107
|
};
|
97
|
-
const updateVisibilityAttribute = ({ item
|
108
|
+
const updateVisibilityAttribute = ({ item, visible })=>{
|
98
109
|
if (visible) {
|
99
110
|
item.element.removeAttribute(_constants.DATA_OVERFLOWING);
|
100
111
|
} else {
|
@@ -1 +1 @@
|
|
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_DIVIDER, 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
|
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_DIVIDER, 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 var _overflowManager;\n (_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n return ()=>{\n var _overflowManager;\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n (_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeItem(item.id);\n };\n }, [\n overflowManager\n ]);\n const registerDivider = React.useCallback((divider)=>{\n var _overflowManager;\n const el = divider.element;\n (_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addDivider(divider);\n el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n return ()=>{\n var _overflowManager;\n divider.groupId && ((_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeDivider(divider.groupId));\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, [\n overflowManager\n ]);\n const updateOverflow = React.useCallback(()=>{\n var _overflowManager;\n (_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.update();\n }, [\n overflowManager\n ]);\n const registerOverflowMenu = React.useCallback((el)=>{\n var _overflowManager;\n (_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n return ()=>{\n var _overflowManager;\n (_overflowManager = 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 registerDivider\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","_overflowManager","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","registerDivider","divider","el","addDivider","DATA_OVERFLOW_DIVIDER","groupId","removeDivider","updateOverflow","registerOverflowMenu","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","visible"],"mappings":"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"}
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useOverflowCount", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useOverflowCount;
|
9
|
+
}
|
8
10
|
});
|
9
11
|
const _overflowContext = require("./overflowContext");
|
10
12
|
const useOverflowCount = ()=>(0, _overflowContext.useOverflowContext)((v)=>{
|
@@ -1 +1 @@
|
|
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
|
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;;;eAAAA;;;iCAHkB;AAGxB,MAAMA,mBAAmB,IAAIC,IAAAA,mCAAkB,EAAC,CAACC;QACpD,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAC9D,IAAI,CAACA,SAAS;gBACVF;YACJ;YACA,OAAOA;QACX,GAAG;IACP"}
|
@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useOverflowDivider", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useOverflowDivider;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
-
const
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
12
14
|
const _overflowContext = require("./overflowContext");
|
13
15
|
function useOverflowDivider(groupId) {
|
14
16
|
const ref = _react.useRef(null);
|
15
17
|
const registerDivider = (0, _overflowContext.useOverflowContext)((v)=>v.registerDivider);
|
16
|
-
(0,
|
18
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
17
19
|
if (ref.current && groupId) {
|
18
20
|
return registerDivider({
|
19
21
|
element: ref.current,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useOverflowDivider.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 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 useOverflowDivider(groupId) {\n const ref = React.useRef(null);\n const registerDivider = useOverflowContext((v)=>v.registerDivider);\n useIsomorphicLayoutEffect(()=>{\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId\n });\n }\n }, [\n registerDivider,\n groupId\n ]);\n return ref;\n}\n"],"names":["useOverflowDivider","groupId","ref","React","useRef","registerDivider","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAQoBA
|
1
|
+
{"version":3,"sources":["useOverflowDivider.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 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 useOverflowDivider(groupId) {\n const ref = React.useRef(null);\n const registerDivider = useOverflowContext((v)=>v.registerDivider);\n useIsomorphicLayoutEffect(()=>{\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId\n });\n }\n }, [\n registerDivider,\n groupId\n ]);\n return ref;\n}\n"],"names":["useOverflowDivider","groupId","ref","React","useRef","registerDivider","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACmB;iCACP;AAMxB,SAASA,mBAAmBC,OAAO;IAC1C,MAAMC,MAAMC,OAAMC,MAAM,CAAC;IACzB,MAAMC,kBAAkBC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,eAAe;IACjEG,IAAAA,yCAAyB,EAAC;QACtB,IAAIN,IAAIO,OAAO,IAAIR,SAAS;YACxB,OAAOI,gBAAgB;gBACnBK,SAASR,IAAIO,OAAO;gBACpBR;YACJ;QACJ;IACJ,GAAG;QACCI;QACAJ;KACH;IACD,OAAOC;AACX"}
|
@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useOverflowItem", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useOverflowItem;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
-
const
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
12
14
|
const _overflowContext = require("./overflowContext");
|
13
15
|
function useOverflowItem(id, priority, groupId) {
|
14
16
|
const ref = _react.useRef(null);
|
15
17
|
const registerItem = (0, _overflowContext.useOverflowContext)((v)=>v.registerItem);
|
16
|
-
(0,
|
18
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
17
19
|
if (ref.current) {
|
18
20
|
return registerItem({
|
19
21
|
element: ref.current,
|
@@ -1 +1 @@
|
|
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
|
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;;;eAAAA;;;;iEAVG;gCACmB;iCACP;AAQxB,SAASA,gBAAgBC,EAAE,EAAEC,QAAQ,EAAEC,OAAO;IACrD,MAAMC,MAAMC,OAAMC,MAAM,CAAC;IACzB,MAAMC,eAAeC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,YAAY;IAC3DG,IAAAA,yCAAyB,EAAC;QACtB,IAAIN,IAAIO,OAAO,EAAE;YACb,OAAOJ,aAAa;gBAChBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAa,QAAQA,aAAa,KAAK,IAAIA,WAAW;gBAChEC;YACJ;QACJ;IACJ,GAAG;QACCF;QACAC;QACAK;QACAJ;KACH;IACD,OAAOC;AACX"}
|
@@ -4,21 +4,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useOverflowMenu", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useOverflowMenu;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
-
const
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
12
14
|
const _overflowContext = require("./overflowContext");
|
13
15
|
const _useOverflowCount = require("./useOverflowCount");
|
14
16
|
function useOverflowMenu(id) {
|
15
|
-
const elementId = (0,
|
17
|
+
const elementId = (0, _reactutilities.useId)('overflow-menu', id);
|
16
18
|
const overflowCount = (0, _useOverflowCount.useOverflowCount)();
|
17
19
|
const registerOverflowMenu = (0, _overflowContext.useOverflowContext)((v)=>v.registerOverflowMenu);
|
18
20
|
const updateOverflow = (0, _overflowContext.useOverflowContext)((v)=>v.updateOverflow);
|
19
21
|
const ref = _react.useRef(null);
|
20
22
|
const isOverflowing = overflowCount > 0;
|
21
|
-
(0,
|
23
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
22
24
|
if (ref.current) {
|
23
25
|
return registerOverflowMenu(ref.current);
|
24
26
|
}
|
@@ -27,7 +29,7 @@ function useOverflowMenu(id) {
|
|
27
29
|
isOverflowing,
|
28
30
|
elementId
|
29
31
|
]);
|
30
|
-
(0,
|
32
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
31
33
|
if (isOverflowing) {
|
32
34
|
updateOverflow();
|
33
35
|
}
|
@@ -1 +1 @@
|
|
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
|
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;;;eAAAA;;;;iEAJO;gCAC0B;iCACd;kCACF;AAC1B,SAASA,gBAAgBC,EAAE;IAC9B,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;IACzB,MAAMC,gBAAgBT,gBAAgB;IACtCU,IAAAA,yCAAyB,EAAC;QACtB,IAAIJ,IAAIK,OAAO,EAAE;YACb,OAAOT,qBAAqBI,IAAIK,OAAO;QAC3C;IACJ,GAAG;QACCT;QACAO;QACAX;KACH;IACDY,IAAAA,yCAAyB,EAAC;QACtB,IAAID,eAAe;YACfJ;QACJ;IACJ,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": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20230901-0414.1",
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -34,18 +34,18 @@
|
|
34
34
|
"@fluentui/scripts-tasks": "*"
|
35
35
|
},
|
36
36
|
"dependencies": {
|
37
|
-
"@fluentui/priority-overflow": "0.0.0-nightly-
|
38
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
39
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
40
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
37
|
+
"@fluentui/priority-overflow": "0.0.0-nightly-20230901-0414.1",
|
38
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230901-0414.1",
|
39
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230901-0414.1",
|
40
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230901-0414.1",
|
41
41
|
"@griffel/react": "^1.5.14",
|
42
|
-
"@swc/helpers": "^0.
|
42
|
+
"@swc/helpers": "^0.5.1"
|
43
43
|
},
|
44
44
|
"peerDependencies": {
|
45
|
-
"@types/react": ">=16.
|
46
|
-
"@types/react-dom": ">=16.
|
47
|
-
"react": ">=16.
|
48
|
-
"react-dom": ">=16.
|
45
|
+
"@types/react": ">=16.14.0 <19.0.0",
|
46
|
+
"@types/react-dom": ">=16.14.0 <19.0.0",
|
47
|
+
"react": ">=16.14.0 <19.0.0",
|
48
|
+
"react-dom": ">=16.14.0 <19.0.0",
|
49
49
|
"scheduler": "^0.19.0 || ^0.20.0"
|
50
50
|
},
|
51
51
|
"beachball": {},
|