@fluentui/react-overflow 9.0.10 → 9.0.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +67 -1
  3. package/CHANGELOG.md +26 -2
  4. package/lib/components/Overflow.js.map +1 -1
  5. package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
  6. package/lib/components/OverflowItem/OverflowItem.types.js +1 -1
  7. package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
  8. package/lib/components/OverflowItem/index.js.map +1 -1
  9. package/lib/constants.js.map +1 -1
  10. package/lib/index.js.map +1 -1
  11. package/lib/overflowContext.js.map +1 -1
  12. package/lib/types.js +1 -1
  13. package/lib/types.js.map +1 -1
  14. package/lib/useIsOverflowGroupVisible.js.map +1 -1
  15. package/lib/useIsOverflowItemVisible.js.map +1 -1
  16. package/lib/useOverflowContainer.js.map +1 -1
  17. package/lib/useOverflowCount.js.map +1 -1
  18. package/lib/useOverflowItem.js.map +1 -1
  19. package/lib/useOverflowMenu.js.map +1 -1
  20. package/lib-commonjs/components/Overflow.js +62 -70
  21. package/lib-commonjs/components/Overflow.js.map +1 -1
  22. package/lib-commonjs/components/OverflowItem/OverflowItem.js +16 -21
  23. package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
  24. package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +5 -2
  25. package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
  26. package/lib-commonjs/components/OverflowItem/index.js +6 -8
  27. package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
  28. package/lib-commonjs/constants.js +16 -6
  29. package/lib-commonjs/constants.js.map +1 -1
  30. package/lib-commonjs/index.js +34 -86
  31. package/lib-commonjs/index.js.map +1 -1
  32. package/lib-commonjs/overflowContext.js +21 -16
  33. package/lib-commonjs/overflowContext.js.map +1 -1
  34. package/lib-commonjs/types.js +5 -2
  35. package/lib-commonjs/types.js.map +1 -1
  36. package/lib-commonjs/useIsOverflowGroupVisible.js +9 -11
  37. package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
  38. package/lib-commonjs/useIsOverflowItemVisible.js +9 -11
  39. package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
  40. package/lib-commonjs/useOverflowContainer.js +87 -80
  41. package/lib-commonjs/useOverflowContainer.js.map +1 -1
  42. package/lib-commonjs/useOverflowCount.js +14 -15
  43. package/lib-commonjs/useOverflowCount.js.map +1 -1
  44. package/lib-commonjs/useOverflowItem.js +27 -27
  45. package/lib-commonjs/useOverflowItem.js.map +1 -1
  46. package/lib-commonjs/useOverflowMenu.js +41 -30
  47. package/lib-commonjs/useOverflowMenu.js.map +1 -1
  48. package/package.json +8 -7
  49. package/lib-amd/components/Overflow.js +0 -60
  50. package/lib-amd/components/Overflow.js.map +0 -1
  51. package/lib-amd/components/OverflowItem/OverflowItem.js +0 -17
  52. package/lib-amd/components/OverflowItem/OverflowItem.js.map +0 -1
  53. package/lib-amd/components/OverflowItem/OverflowItem.types.js +0 -5
  54. package/lib-amd/components/OverflowItem/OverflowItem.types.js.map +0 -1
  55. package/lib-amd/constants.js +0 -9
  56. package/lib-amd/constants.js.map +0 -1
  57. package/lib-amd/index.js +0 -18
  58. package/lib-amd/index.js.map +0 -1
  59. package/lib-amd/overflowContext.js +0 -25
  60. package/lib-amd/overflowContext.js.map +0 -1
  61. package/lib-amd/types.js +0 -5
  62. package/lib-amd/types.js.map +0 -1
  63. package/lib-amd/useIsOverflowGroupVisible.js +0 -14
  64. package/lib-amd/useIsOverflowGroupVisible.js.map +0 -1
  65. package/lib-amd/useIsOverflowItemVisible.js +0 -14
  66. package/lib-amd/useIsOverflowItemVisible.js.map +0 -1
  67. package/lib-amd/useOverflowContainer.js +0 -84
  68. package/lib-amd/useOverflowContainer.js.map +0 -1
  69. package/lib-amd/useOverflowCount.js +0 -21
  70. package/lib-amd/useOverflowCount.js.map +0 -1
  71. package/lib-amd/useOverflowItem.js +0 -30
  72. package/lib-amd/useOverflowItem.js.map +0 -1
  73. package/lib-amd/useOverflowMenu.js +0 -26
  74. package/lib-amd/useOverflowMenu.js.map +0 -1
@@ -1,20 +1,19 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- exports.useOverflowCount = void 0;
7
- const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
8
- /**
9
- * @returns Number of items that are overflowing
10
- */
11
- const useOverflowCount = () => overflowContext_1.useOverflowContext(v => {
12
- return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
13
- if (!visible) {
14
- acc++;
15
- }
16
- return acc;
17
- }, 0);
5
+ Object.defineProperty(exports, "useOverflowCount", {
6
+ enumerable: true,
7
+ get: ()=>useOverflowCount
18
8
  });
19
- exports.useOverflowCount = useOverflowCount;
9
+ const _overflowContext = require("./overflowContext");
10
+ const useOverflowCount = ()=>(0, _overflowContext.useOverflowContext)((v)=>{
11
+ return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{
12
+ if (!visible) {
13
+ acc++;
14
+ }
15
+ return acc;
16
+ }, 0);
17
+ }); //# sourceMappingURL=useOverflowCount.js.map
18
+
20
19
  //# sourceMappingURL=useOverflowCount.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["overflowContext_1","require","useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible","exports"],"sources":["../src/packages/react-components/react-overflow/src/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"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AAEA;;;AAGO,MAAMC,gBAAgB,GAAGA,CAAA,KAC9BF,iBAAA,CAAAG,kBAAkB,CAACC,CAAC,IAAG;EACrB,OAAOC,MAAM,CAACC,OAAO,CAACF,CAAC,CAACG,cAAc,CAAC,CAACC,MAAM,CAAC,CAACC,GAAG,EAAE,CAACC,EAAE,EAAEC,OAAO,CAAC,KAAI;IACpE,IAAI,CAACA,OAAO,EAAE;MACZF,GAAG,EAAE;;IAGP,OAAOA,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC;AACP,CAAC,CAAC;AATSG,OAAA,CAAAV,gBAAgB,GAAAA,gBAAA"}
1
+ {"version":3,"sources":["../lib/useOverflowCount.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @returns Number of items that are overflowing\n */\nexport 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//# sourceMappingURL=useOverflowCount.js.map"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":";;;;+BAIaA;;aAAAA;;iCAJsB;AAI5B,MAAMA,mBAAmB,IAAMC,IAAAA,mCAAkB,EAACC,CAAAA,IAAK;QAC5D,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAK;YACrE,IAAI,CAACA,SAAS;gBACZF;YACF,CAAC;YACD,OAAOA;QACT,GAAG;IACL,IACA,4CAA4C"}
@@ -1,34 +1,34 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useOverflowItem", {
6
+ enumerable: true,
7
+ get: ()=>useOverflowItem
5
8
  });
6
- exports.useOverflowItem = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
10
- /**
11
- * @internal
12
- * Registers an overflow item
13
- * @param id - unique identifier for the item used by the overflow manager
14
- * @param priority - higher priority means the item overflows later
15
- * @param groupId - assigns the item to a group, group visibility can be watched
16
- * @returns ref to assign to an intrinsic HTML element
17
- */
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const _overflowContext = require("./overflowContext");
18
13
  function useOverflowItem(id, priority, groupId) {
19
- const ref = React.useRef(null);
20
- const registerItem = overflowContext_1.useOverflowContext(v => v.registerItem);
21
- react_utilities_1.useIsomorphicLayoutEffect(() => {
22
- if (ref.current) {
23
- return registerItem({
24
- element: ref.current,
14
+ const ref = _react.useRef(null);
15
+ const registerItem = (0, _overflowContext.useOverflowContext)((v)=>v.registerItem);
16
+ (0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
17
+ if (ref.current) {
18
+ return registerItem({
19
+ element: ref.current,
20
+ id,
21
+ priority: priority !== null && priority !== void 0 ? priority : 0,
22
+ groupId
23
+ });
24
+ }
25
+ }, [
25
26
  id,
26
- priority: priority !== null && priority !== void 0 ? priority : 0,
27
+ priority,
28
+ registerItem,
27
29
  groupId
28
- });
29
- }
30
- }, [id, priority, registerItem, groupId]);
31
- return ref;
32
- }
33
- exports.useOverflowItem = useOverflowItem;
30
+ ]);
31
+ return ref;
32
+ } //# sourceMappingURL=useOverflowItem.js.map
33
+
34
34
  //# sourceMappingURL=useOverflowItem.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_utilities_1","overflowContext_1","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element","exports"],"sources":["../src/packages/react-components/react-overflow/src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AAEA;;;;;;;;AAQA,SAAgBG,eAAeA,CAA+BC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;EAC3G,MAAMC,GAAG,GAAGR,KAAK,CAACS,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,YAAY,GAAGP,iBAAA,CAAAQ,kBAAkB,CAACC,CAAC,IAAIA,CAAC,CAACF,YAAY,CAAC;EAE5DR,iBAAA,CAAAW,yBAAyB,CAAC,MAAK;IAC7B,IAAIL,GAAG,CAACM,OAAO,EAAE;MACf,OAAOJ,YAAY,CAAC;QAClBK,OAAO,EAAEP,GAAG,CAACM,OAAO;QACpBT,EAAE;QACFC,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,CAAC;QACvBC;OACD,CAAC;;EAEN,CAAC,EAAE,CAACF,EAAE,EAAEC,QAAQ,EAAEI,YAAY,EAAEH,OAAO,CAAC,CAAC;EAEzC,OAAOC,GAAG;AACZ;AAhBAQ,OAAA,CAAAZ,eAAA,GAAAA,eAAA"}
1
+ {"version":3,"sources":["../lib/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 */\nexport 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 }, [id, priority, registerItem, groupId]);\n return ref;\n}\n//# sourceMappingURL=useOverflowItem.js.map"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAWgBA;;aAAAA;;;6DAXO;gCACmB;iCACP;AAS5B,SAASA,gBAAgBC,EAAE,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IACrD,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,eAAeC,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEF,YAAY;IAC3DG,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIN,IAAIO,OAAO,EAAE;YACf,OAAOJ,aAAa;gBAClBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAIA,WAAW,CAAC;gBACjEC;YACF;QACF,CAAC;IACH,GAAG;QAACF;QAAIC;QAAUK;QAAcJ;KAAQ;IACxC,OAAOC;AACT,EACA,2CAA2C"}
@@ -1,35 +1,46 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useOverflowMenu", {
6
+ enumerable: true,
7
+ get: ()=>useOverflowMenu
5
8
  });
6
- exports.useOverflowMenu = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
10
- const useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const _overflowContext = require("./overflowContext");
13
+ const _useOverflowCount = require("./useOverflowCount");
11
14
  function useOverflowMenu(id) {
12
- const elementId = react_utilities_1.useId('overflow-menu', id);
13
- const overflowCount = useOverflowCount_1.useOverflowCount();
14
- const registerOverflowMenu = overflowContext_1.useOverflowContext(v => v.registerOverflowMenu);
15
- const updateOverflow = overflowContext_1.useOverflowContext(v => v.updateOverflow);
16
- const ref = React.useRef(null);
17
- const isOverflowing = overflowCount > 0;
18
- react_utilities_1.useIsomorphicLayoutEffect(() => {
19
- if (ref.current) {
20
- return registerOverflowMenu(ref.current);
21
- }
22
- }, [registerOverflowMenu, isOverflowing, elementId]);
23
- react_utilities_1.useIsomorphicLayoutEffect(() => {
24
- if (isOverflowing) {
25
- updateOverflow();
26
- }
27
- }, [isOverflowing, updateOverflow, ref]);
28
- return {
29
- ref,
30
- overflowCount,
31
- isOverflowing
32
- };
33
- }
34
- exports.useOverflowMenu = useOverflowMenu;
15
+ const elementId = (0, _reactUtilities.useId)('overflow-menu', id);
16
+ const overflowCount = (0, _useOverflowCount.useOverflowCount)();
17
+ const registerOverflowMenu = (0, _overflowContext.useOverflowContext)((v)=>v.registerOverflowMenu);
18
+ const updateOverflow = (0, _overflowContext.useOverflowContext)((v)=>v.updateOverflow);
19
+ const ref = _react.useRef(null);
20
+ const isOverflowing = overflowCount > 0;
21
+ (0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
22
+ if (ref.current) {
23
+ return registerOverflowMenu(ref.current);
24
+ }
25
+ }, [
26
+ registerOverflowMenu,
27
+ isOverflowing,
28
+ elementId
29
+ ]);
30
+ (0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
31
+ if (isOverflowing) {
32
+ updateOverflow();
33
+ }
34
+ }, [
35
+ isOverflowing,
36
+ updateOverflow,
37
+ ref
38
+ ]);
39
+ return {
40
+ ref,
41
+ overflowCount,
42
+ isOverflowing
43
+ };
44
+ } //# sourceMappingURL=useOverflowMenu.js.map
45
+
35
46
  //# sourceMappingURL=useOverflowMenu.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_utilities_1","overflowContext_1","useOverflowCount_1","useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","useRef","isOverflowing","useIsomorphicLayoutEffect","current","exports"],"sources":["../src/packages/react-components/react-overflow/src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,kBAAA,gBAAAH,OAAA;AAEA,SAAgBI,eAAeA,CAA+BC,EAAW;EACvE,MAAMC,SAAS,GAAGL,iBAAA,CAAAM,KAAK,CAAC,eAAe,EAAEF,EAAE,CAAC;EAC5C,MAAMG,aAAa,GAAGL,kBAAA,CAAAM,gBAAgB,EAAE;EACxC,MAAMC,oBAAoB,GAAGR,iBAAA,CAAAS,kBAAkB,CAACC,CAAC,IAAIA,CAAC,CAACF,oBAAoB,CAAC;EAC5E,MAAMG,cAAc,GAAGX,iBAAA,CAAAS,kBAAkB,CAACC,CAAC,IAAIA,CAAC,CAACC,cAAc,CAAC;EAChE,MAAMC,GAAG,GAAGf,KAAK,CAACgB,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,aAAa,GAAGR,aAAa,GAAG,CAAC;EAEvCP,iBAAA,CAAAgB,yBAAyB,CAAC,MAAK;IAC7B,IAAIH,GAAG,CAACI,OAAO,EAAE;MACf,OAAOR,oBAAoB,CAACI,GAAG,CAACI,OAAO,CAAC;;EAE5C,CAAC,EAAE,CAACR,oBAAoB,EAAEM,aAAa,EAAEV,SAAS,CAAC,CAAC;EAEpDL,iBAAA,CAAAgB,yBAAyB,CAAC,MAAK;IAC7B,IAAID,aAAa,EAAE;MACjBH,cAAc,EAAE;;EAEpB,CAAC,EAAE,CAACG,aAAa,EAAEH,cAAc,EAAEC,GAAG,CAAC,CAAC;EAExC,OAAO;IAAEA,GAAG;IAAEN,aAAa;IAAEQ;EAAa,CAAE;AAC9C;AArBAG,OAAA,CAAAf,eAAA,GAAAA,eAAA"}
1
+ {"version":3,"sources":["../lib/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 }, [registerOverflowMenu, isOverflowing, elementId]);\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n return {\n ref,\n overflowCount,\n isOverflowing\n };\n}\n//# sourceMappingURL=useOverflowMenu.js.map"],"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;IAClC,MAAMC,YAAYC,IAAAA,qBAAK,EAAC,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAgB;IACtC,MAAMC,uBAAuBC,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,gBAAgBT,gBAAgB;IACtCU,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIJ,IAAIK,OAAO,EAAE;YACf,OAAOT,qBAAqBI,IAAIK,OAAO;QACzC,CAAC;IACH,GAAG;QAACT;QAAsBO;QAAeX;KAAU;IACnDY,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAID,eAAe;YACjBJ;QACF,CAAC;IACH,GAAG;QAACI;QAAeJ;QAAgBC;KAAI;IACvC,OAAO;QACLA;QACAN;QACAS;IACF;AACF,EACA,2CAA2C"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-overflow",
3
- "version": "9.0.10",
3
+ "version": "9.0.12",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -24,7 +24,7 @@
24
24
  "test": "jest --passWithNoTests",
25
25
  "storybook": "start-storybook",
26
26
  "type-check": "tsc -b tsconfig.json",
27
- "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
27
+ "generate-api": "just-scripts generate-api"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@fluentui/eslint-plugin": "*",
@@ -33,12 +33,12 @@
33
33
  "@fluentui/scripts-tasks": "*"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/priority-overflow": "^9.0.1",
37
- "@fluentui/react-context-selector": "^9.1.13",
38
- "@fluentui/react-theme": "^9.1.6",
39
- "@fluentui/react-utilities": "^9.7.0",
36
+ "@fluentui/priority-overflow": "^9.0.2",
37
+ "@fluentui/react-context-selector": "^9.1.15",
38
+ "@fluentui/react-theme": "^9.1.7",
39
+ "@fluentui/react-utilities": "^9.7.2",
40
40
  "@griffel/react": "^1.5.2",
41
- "tslib": "^2.1.0"
41
+ "@swc/helpers": "^0.4.14"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "@types/react": ">=16.8.0 <19.0.0",
@@ -56,6 +56,7 @@
56
56
  "exports": {
57
57
  ".": {
58
58
  "types": "./dist/index.d.ts",
59
+ "node": "./lib-commonjs/index.js",
59
60
  "import": "./lib/index.js",
60
61
  "require": "./lib-commonjs/index.js"
61
62
  },
@@ -1,60 +0,0 @@
1
- define(["require", "exports", "react", "@griffel/react", "@fluentui/react-utilities", "../overflowContext", "../useOverflowContainer", "../constants"], function (require, exports, React, react_1, react_utilities_1, overflowContext_1, useOverflowContainer_1, constants_1) {
2
- "use strict";
3
- var _a, _b;
4
- Object.defineProperty(exports, "__esModule", { value: true });
5
- exports.Overflow = void 0;
6
- var useStyles = react_1.makeStyles({
7
- overflowMenu: (_a = {},
8
- _a["& [" + constants_1.DATA_OVERFLOW_MENU + "]"] = {
9
- flexShrink: 0,
10
- },
11
- _a),
12
- overflowingItems: (_b = {},
13
- _b["& > [" + constants_1.DATA_OVERFLOWING + "]"] = {
14
- display: 'none',
15
- },
16
- _b),
17
- });
18
- /**
19
- * Provides an OverflowContext for OverflowItem descendants.
20
- */
21
- exports.Overflow = React.forwardRef(function (props, ref) {
22
- var styles = useStyles();
23
- var children = props.children, minimumVisible = props.minimumVisible, _a = props.overflowAxis, overflowAxis = _a === void 0 ? 'horizontal' : _a, overflowDirection = props.overflowDirection, padding = props.padding;
24
- var _b = React.useState(false), hasOverflow = _b[0], setHasOverflow = _b[1];
25
- var _c = React.useState({}), itemVisibility = _c[0], setItemVisibility = _c[1];
26
- var _d = React.useState({}), groupVisibility = _d[0], setGroupVisibility = _d[1];
27
- // useOverflowContainer wraps this method in a useEventCallback.
28
- // TODO: Do we need a useEventCallback here too?
29
- var update = function (data) {
30
- setHasOverflow(function () { return data.invisibleItems.length > 0; });
31
- setItemVisibility(function () {
32
- var newState = {};
33
- data.visibleItems.forEach(function (x) { return (newState[x.id] = true); });
34
- data.invisibleItems.forEach(function (x) { return (newState[x.id] = false); });
35
- return newState;
36
- });
37
- setGroupVisibility(data.groupVisibility);
38
- };
39
- var _e = useOverflowContainer_1.useOverflowContainer(update, {
40
- overflowDirection: overflowDirection,
41
- overflowAxis: overflowAxis,
42
- padding: padding,
43
- minimumVisible: minimumVisible,
44
- onUpdateItemVisibility: useOverflowContainer_1.updateVisibilityAttribute,
45
- }), containerRef = _e.containerRef, registerItem = _e.registerItem, updateOverflow = _e.updateOverflow, registerOverflowMenu = _e.registerOverflowMenu;
46
- var clonedChild = react_utilities_1.applyTriggerPropsToChildren(children, {
47
- ref: react_utilities_1.useMergedRefs(containerRef, ref),
48
- className: react_1.mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),
49
- });
50
- return (React.createElement(overflowContext_1.OverflowContext.Provider, { value: {
51
- itemVisibility: itemVisibility,
52
- groupVisibility: groupVisibility,
53
- hasOverflow: hasOverflow,
54
- registerItem: registerItem,
55
- updateOverflow: updateOverflow,
56
- registerOverflowMenu: registerOverflowMenu,
57
- } }, clonedChild));
58
- });
59
- });
60
- //# sourceMappingURL=Overflow.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-overflow/src/components/Overflow.tsx"],"names":[],"mappings":";;;;;IASA,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,YAAY;YACV,GAAC,QAAM,8BAAkB,MAAG,IAAG;gBAC7B,UAAU,EAAE,CAAC;aACd;eACF;QAED,gBAAgB;YACd,GAAC,UAAQ,4BAAgB,MAAG,IAAG;gBAC7B,OAAO,EAAE,MAAM;aAChB;eACF;KACF,CAAC,CAAC;IAWH;;OAEG;IACU,QAAA,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAoB,EAAE,GAAG;QACjE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAEnB,IAAA,QAAQ,GAA8E,KAAK,SAAnF,EAAE,cAAc,GAA8D,KAAK,eAAnE,EAAE,KAA4D,KAAK,aAAtC,EAA3B,YAAY,mBAAG,YAAY,KAAA,EAAE,iBAAiB,GAAc,KAAK,kBAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;QAE9F,IAAA,KAAgC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAApD,WAAW,QAAA,EAAE,cAAc,QAAyB,CAAC;QACtD,IAAA,KAAsC,KAAK,CAAC,QAAQ,CAA0B,EAAE,CAAC,EAAhF,cAAc,QAAA,EAAE,iBAAiB,QAA+C,CAAC;QAClF,IAAA,KAAwC,KAAK,CAAC,QAAQ,CAAqC,EAAE,CAAC,EAA7F,eAAe,QAAA,EAAE,kBAAkB,QAA0D,CAAC;QAErG,gEAAgE;QAChE,gDAAgD;QAChD,IAAM,MAAM,GAAqB,UAAA,IAAI;YACnC,cAAc,CAAC,cAAM,OAAA,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAA9B,CAA8B,CAAC,CAAC;YACrD,iBAAiB,CAAC;gBAChB,IAAM,QAAQ,GAA4B,EAAE,CAAC;gBAC7C,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAvB,CAAuB,CAAC,CAAC;gBACxD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,EAAxB,CAAwB,CAAC,CAAC;gBAC3D,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEI,IAAA,KAAuE,2CAAoB,CAAC,MAAM,EAAE;YACxG,iBAAiB,mBAAA;YACjB,YAAY,cAAA;YACZ,OAAO,SAAA;YACP,cAAc,gBAAA;YACd,sBAAsB,EAAE,gDAAyB;SAClD,CAAC,EANM,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAE,cAAc,oBAAA,EAAE,oBAAoB,0BAMtE,CAAC;QAEH,IAAM,WAAW,GAAG,6CAA2B,CAAC,QAAQ,EAAE;YACxD,GAAG,EAAE,+BAAa,CAAC,YAAY,EAAE,GAAG,CAAC;YACrC,SAAS,EAAE,oBAAY,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC;SAChG,CAAC,CAAC;QAEH,OAAO,CACL,oBAAC,iCAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;gBACL,cAAc,gBAAA;gBACd,eAAe,iBAAA;gBACf,WAAW,aAAA;gBACX,YAAY,cAAA;gBACZ,cAAc,gBAAA;gBACd,oBAAoB,sBAAA;aACrB,IAEA,WAAW,CACa,CAC5B,CAAC;IACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeStyles, 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 { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& > [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\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 = useStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update: OnUpdateOverflow = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState: Record<string, boolean> = {};\n data.visibleItems.forEach(x => (newState[x.id] = true));\n data.invisibleItems.forEach(x => (newState[x.id] = false));\n return newState;\n });\n setGroupVisibility(data.groupVisibility);\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\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,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"]}
@@ -1,17 +0,0 @@
1
- define(["require", "exports", "react", "@fluentui/react-utilities", "../../useOverflowItem"], function (require, exports, React, react_utilities_1, useOverflowItem_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.OverflowItem = void 0;
5
- /**
6
- * Attaches overflow item behavior to its child registered with the OverflowContext.
7
- * It does not render an element of its own.
8
- */
9
- exports.OverflowItem = React.forwardRef(function (props, ref) {
10
- var id = props.id, groupId = props.groupId, priority = props.priority, children = props.children;
11
- var containerRef = useOverflowItem_1.useOverflowItem(id, priority, groupId);
12
- return react_utilities_1.applyTriggerPropsToChildren(children, {
13
- ref: react_utilities_1.useMergedRefs(containerRef, ref),
14
- });
15
- });
16
- });
17
- //# sourceMappingURL=OverflowItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"OverflowItem.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACU,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAwB,EAAE,GAAG;QACjE,IAAA,EAAE,GAAkC,KAAK,GAAvC,EAAE,OAAO,GAAyB,KAAK,QAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAElD,IAAM,YAAY,GAAG,iCAAe,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC5D,OAAO,6CAA2B,CAAC,QAAQ,EAAE;YAC3C,GAAG,EAAE,+BAAa,CAAC,YAAY,EAAE,GAAG,CAAC;SACtC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"]}
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=OverflowItem.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"OverflowItem.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n /**\n * The unique identifier for the item used by the overflow manager.\n */\n id: string;\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId?: string;\n /**\n * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"]}
@@ -1,9 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = void 0;
5
- exports.DATA_OVERFLOWING = 'data-overflowing';
6
- exports.DATA_OVERFLOW_ITEM = 'data-overflow-item';
7
- exports.DATA_OVERFLOW_MENU = 'data-overflow-menu';
8
- });
9
- //# sourceMappingURL=constants.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/constants.ts"],"names":[],"mappings":";;;;IAAa,QAAA,gBAAgB,GAAG,kBAAkB,CAAC;IACtC,QAAA,kBAAkB,GAAG,oBAAoB,CAAC;IAC1C,QAAA,kBAAkB,GAAG,oBAAoB,CAAC","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"]}
package/lib-amd/index.js DELETED
@@ -1,18 +0,0 @@
1
- define(["require", "exports", "./components/Overflow", "./constants", "./useIsOverflowGroupVisible", "./useIsOverflowItemVisible", "./useOverflowContainer", "./useOverflowCount", "./useOverflowItem", "./useOverflowMenu", "./overflowContext", "./components/OverflowItem/OverflowItem"], function (require, exports, Overflow_1, constants_1, useIsOverflowGroupVisible_1, useIsOverflowItemVisible_1, useOverflowContainer_1, useOverflowCount_1, useOverflowItem_1, useOverflowMenu_1, overflowContext_1, OverflowItem_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.OverflowItem = exports.useOverflowContext = exports.useOverflowMenu = exports.useOverflowItem = exports.useOverflowCount = exports.useOverflowContainer = exports.useIsOverflowItemVisible = exports.useIsOverflowGroupVisible = exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = exports.Overflow = void 0;
5
- Object.defineProperty(exports, "Overflow", { enumerable: true, get: function () { return Overflow_1.Overflow; } });
6
- Object.defineProperty(exports, "DATA_OVERFLOWING", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOWING; } });
7
- Object.defineProperty(exports, "DATA_OVERFLOW_ITEM", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOW_ITEM; } });
8
- Object.defineProperty(exports, "DATA_OVERFLOW_MENU", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOW_MENU; } });
9
- Object.defineProperty(exports, "useIsOverflowGroupVisible", { enumerable: true, get: function () { return useIsOverflowGroupVisible_1.useIsOverflowGroupVisible; } });
10
- Object.defineProperty(exports, "useIsOverflowItemVisible", { enumerable: true, get: function () { return useIsOverflowItemVisible_1.useIsOverflowItemVisible; } });
11
- Object.defineProperty(exports, "useOverflowContainer", { enumerable: true, get: function () { return useOverflowContainer_1.useOverflowContainer; } });
12
- Object.defineProperty(exports, "useOverflowCount", { enumerable: true, get: function () { return useOverflowCount_1.useOverflowCount; } });
13
- Object.defineProperty(exports, "useOverflowItem", { enumerable: true, get: function () { return useOverflowItem_1.useOverflowItem; } });
14
- Object.defineProperty(exports, "useOverflowMenu", { enumerable: true, get: function () { return useOverflowMenu_1.useOverflowMenu; } });
15
- Object.defineProperty(exports, "useOverflowContext", { enumerable: true, get: function () { return overflowContext_1.useOverflowContext; } });
16
- Object.defineProperty(exports, "OverflowItem", { enumerable: true, get: function () { return OverflowItem_1.OverflowItem; } });
17
- });
18
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/index.ts"],"names":[],"mappings":";;;;IAAS,oGAAA,QAAQ,OAAA;IAER,6GAAA,gBAAgB,OAAA;IAAE,+GAAA,kBAAkB,OAAA;IAAE,+GAAA,kBAAkB,OAAA;IAExD,sIAAA,yBAAyB,OAAA;IACzB,oIAAA,wBAAwB,OAAA;IACxB,4HAAA,oBAAoB,OAAA;IACpB,oHAAA,gBAAgB,OAAA;IAChB,kHAAA,eAAe,OAAA;IACf,kHAAA,eAAe,OAAA;IAEf,qHAAA,kBAAkB,OAAA;IAGlB,4GAAA,YAAY,OAAA","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"]}
@@ -1,25 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useOverflowContext = exports.OverflowContext = void 0;
5
- exports.OverflowContext = react_context_selector_1.createContext(undefined);
6
- var overflowContextDefaultValue = {
7
- itemVisibility: {},
8
- groupVisibility: {},
9
- hasOverflow: false,
10
- registerItem: function () { return function () { return null; }; },
11
- updateOverflow: function () { return null; },
12
- registerOverflowMenu: function () { return function () { return null; }; },
13
- };
14
- /**
15
- * @internal
16
- */
17
- var useOverflowContext = function (selector) {
18
- return react_context_selector_1.useContextSelector(exports.OverflowContext, function (ctx) {
19
- if (ctx === void 0) { ctx = overflowContextDefaultValue; }
20
- return selector(ctx);
21
- });
22
- };
23
- exports.useOverflowContext = useOverflowContext;
24
- });
25
- //# sourceMappingURL=overflowContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"overflowContext.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/overflowContext.ts"],"names":[],"mappings":";;;;IAea,QAAA,eAAe,GAAG,sCAAa,CAC1C,SAAS,CACuB,CAAC;IAEnC,IAAM,2BAA2B,GAAyB;QACxD,cAAc,EAAE,EAAE;QAClB,eAAe,EAAE,EAAE;QACnB,WAAW,EAAE,KAAK;QAClB,YAAY,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;QAC9B,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAC1B,oBAAoB,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;KACvC,CAAC;IAEF;;OAEG;IACI,IAAM,kBAAkB,GAAG,UAAgB,QAA8D;QAC9G,OAAA,2CAAkB,CAAC,uBAAe,EAAE,UAAC,GAAiC;YAAjC,oBAAA,EAAA,iCAAiC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAAzF,CAAyF,CAAC;IAD/E,QAAA,kBAAkB,sBAC6D","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\n/**\n * @internal\n */\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n registerOverflowMenu: (el: HTMLElement) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"]}
package/lib-amd/types.js DELETED
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"]}
@@ -1,14 +0,0 @@
1
- define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useIsOverflowGroupVisible = void 0;
5
- /**
6
- * @param id - unique identifier for a group of overflow items
7
- * @returns visibility state of the group
8
- */
9
- function useIsOverflowGroupVisible(id) {
10
- return overflowContext_1.useOverflowContext(function (ctx) { return ctx.groupVisibility[id]; });
11
- }
12
- exports.useIsOverflowGroupVisible = useIsOverflowGroupVisible;
13
- });
14
- //# sourceMappingURL=useIsOverflowGroupVisible.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useIsOverflowGroupVisible.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;IAGA;;;OAGG;IACH,SAAgB,yBAAyB,CAAC,EAAU;QAClD,OAAO,oCAAkB,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC,EAAvB,CAAuB,CAAC,CAAC;IAC5D,CAAC;IAFD,8DAEC","sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"]}
@@ -1,14 +0,0 @@
1
- define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useIsOverflowItemVisible = void 0;
5
- /**
6
- * @param id - unique identifier for the item used by the overflow manager
7
- * @returns visibility state of an overflow item
8
- */
9
- function useIsOverflowItemVisible(id) {
10
- return !!overflowContext_1.useOverflowContext(function (ctx) { return ctx.itemVisibility[id]; });
11
- }
12
- exports.useIsOverflowItemVisible = useIsOverflowItemVisible;
13
- });
14
- //# sourceMappingURL=useIsOverflowItemVisible.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useIsOverflowItemVisible.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;IAEA;;;OAGG;IACH,SAAgB,wBAAwB,CAAC,EAAU;QACjD,OAAO,CAAC,CAAC,oCAAkB,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,EAAtB,CAAsB,CAAC,CAAC;IAC7D,CAAC;IAFD,4DAEC","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"]}
@@ -1,84 +0,0 @@
1
- define(["require", "exports", "react", "@fluentui/priority-overflow", "@fluentui/react-utilities", "./constants"], function (require, exports, React, priority_overflow_1, react_utilities_1, constants_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.updateVisibilityAttribute = exports.useOverflowContainer = void 0;
5
- /**
6
- * @internal
7
- * @param update - Callback when overflow state changes
8
- * @param options - Options to configure the overflow container
9
- * @returns - ref to attach to an intrinsic HTML element and imperative functions
10
- */
11
- var useOverflowContainer = function (update, options) {
12
- var overflowAxis = options.overflowAxis, overflowDirection = options.overflowDirection, padding = options.padding, minimumVisible = options.minimumVisible, onUpdateItemVisibility = options.onUpdateItemVisibility;
13
- // DOM ref to the overflow container element
14
- var containerRef = React.useRef(null);
15
- var updateOverflowItems = react_utilities_1.useEventCallback(update);
16
- var overflowManager = React.useState(function () {
17
- return react_utilities_1.canUseDOM() ? priority_overflow_1.createOverflowManager() : null;
18
- })[0];
19
- react_utilities_1.useIsomorphicLayoutEffect(function () {
20
- if (!containerRef.current) {
21
- return;
22
- }
23
- if (overflowManager) {
24
- overflowManager.observe(containerRef.current, {
25
- overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
26
- overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
27
- padding: padding !== null && padding !== void 0 ? padding : 10,
28
- minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
29
- onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : (function () { return undefined; }),
30
- onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : (function () { return undefined; }),
31
- });
32
- return function () {
33
- overflowManager.disconnect();
34
- };
35
- }
36
- }, [
37
- updateOverflowItems,
38
- overflowManager,
39
- overflowDirection,
40
- overflowAxis,
41
- padding,
42
- minimumVisible,
43
- onUpdateItemVisibility,
44
- ]);
45
- var registerItem = React.useCallback(function (item) {
46
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
47
- item.element.setAttribute(constants_1.DATA_OVERFLOW_ITEM, '');
48
- return function () {
49
- item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
50
- item.element.removeAttribute(constants_1.DATA_OVERFLOW_ITEM);
51
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
52
- };
53
- }, [overflowManager]);
54
- var updateOverflow = React.useCallback(function () {
55
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
56
- }, [overflowManager]);
57
- var registerOverflowMenu = React.useCallback(function (el) {
58
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
59
- el.setAttribute(constants_1.DATA_OVERFLOW_MENU, '');
60
- return function () {
61
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
62
- el.removeAttribute(constants_1.DATA_OVERFLOW_MENU);
63
- };
64
- }, [overflowManager]);
65
- return {
66
- containerRef: containerRef,
67
- registerItem: registerItem,
68
- updateOverflow: updateOverflow,
69
- registerOverflowMenu: registerOverflowMenu,
70
- };
71
- };
72
- exports.useOverflowContainer = useOverflowContainer;
73
- var updateVisibilityAttribute = function (_a) {
74
- var item = _a.item, visible = _a.visible;
75
- if (visible) {
76
- item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
77
- }
78
- else {
79
- item.element.setAttribute(constants_1.DATA_OVERFLOWING, '');
80
- }
81
- };
82
- exports.updateVisibilityAttribute = updateVisibilityAttribute;
83
- });
84
- //# sourceMappingURL=useOverflowContainer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useOverflowContainer.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowContainer.ts"],"names":[],"mappings":";;;;IAiBA;;;;;OAKG;IACI,IAAM,oBAAoB,GAAG,UAClC,MAAwB,EACxB,OAAiD;QAEzC,IAAA,YAAY,GAAyE,OAAO,aAAhF,EAAE,iBAAiB,GAAsD,OAAO,kBAA7D,EAAE,OAAO,GAA6C,OAAO,QAApD,EAAE,cAAc,GAA6B,OAAO,eAApC,EAAE,sBAAsB,GAAK,OAAO,uBAAZ,CAAa;QAErG,4CAA4C;QAC5C,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QAClD,IAAM,mBAAmB,GAAG,kCAAgB,CAAC,MAAM,CAAC,CAAC;QAE9C,IAAA,eAAe,GAAI,KAAK,CAAC,QAAQ,CAAyB;YAC/D,OAAA,2BAAS,EAAE,CAAC,CAAC,CAAC,yCAAqB,EAAE,CAAC,CAAC,CAAC,IAAI;QAA5C,CAA4C,CAC7C,GAFqB,CAEpB;QAEF,2CAAyB,CAAC;YACxB,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;gBACzB,OAAO;aACR;YAED,IAAI,eAAe,EAAE;gBACnB,eAAe,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE;oBAC5C,iBAAiB,EAAE,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,KAAK;oBAC7C,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,YAAY;oBAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE;oBACtB,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC;oBACnC,sBAAsB,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,CAAC,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;oBACnE,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;iBAC3D,CAAC,CAAC;gBAEH,OAAO;oBACL,eAAe,CAAC,UAAU,EAAE,CAAC;gBAC/B,CAAC,CAAC;aACH;QACH,CAAC,EAAE;YACD,mBAAmB;YACnB,eAAe;YACf,iBAAiB;YACjB,YAAY;YACZ,OAAO;YACP,cAAc;YACd,sBAAsB;SACvB,CAAC,CAAC;QAEH,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,IAAuB;YACtB,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,8BAAkB,EAAE,EAAE,CAAC,CAAC;YAElD,OAAO;gBACL,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,4BAAgB,CAAC,CAAC;gBAC/C,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,8BAAkB,CAAC,CAAC;gBACjD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACvC,CAAC,CAAC;QACJ,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;QAEF,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC;YACvC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,EAAE,CAAC;QAC5B,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;QAEtB,IAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAC5C,UAAC,EAAe;YACd,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,eAAe,CAAC,EAAE,CAAC,CAAC;YACrC,EAAE,CAAC,YAAY,CAAC,8BAAkB,EAAE,EAAE,CAAC,CAAC;YAExC,OAAO;gBACL,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,kBAAkB,EAAE,CAAC;gBACtC,EAAE,CAAC,eAAe,CAAC,8BAAkB,CAAC,CAAC;YACzC,CAAC,CAAC;QACJ,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;QAEF,OAAO;YACL,YAAY,cAAA;YACZ,YAAY,cAAA;YACZ,cAAc,gBAAA;YACd,oBAAoB,sBAAA;SACrB,CAAC;IACJ,CAAC,CAAC;IAhFW,QAAA,oBAAoB,wBAgF/B;IAEK,IAAM,yBAAyB,GAA2B,UAAC,EAAiB;YAAf,IAAI,UAAA,EAAE,OAAO,aAAA;QAC/E,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,4BAAgB,CAAC,CAAC;SAChD;aAAM;YACL,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,4BAAgB,EAAE,EAAE,CAAC,CAAC;SACjD;IACH,CAAC,CAAC;IANW,QAAA,yBAAyB,6BAMpC","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"]}