@fluentui/react-overflow 9.0.10 → 9.0.12

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.
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":"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","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"]}