@fluentui/react-overflow 9.1.32 → 9.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. package/CHANGELOG.md +19 -2
  2. package/dist/index.d.ts +11 -0
  3. package/lib/components/Overflow.js +9 -7
  4. package/lib/components/Overflow.js.map +1 -1
  5. package/lib/components/OverflowDivider/OverflowDivider.js.map +1 -1
  6. package/lib/components/OverflowDivider/OverflowDivider.types.js.map +1 -1
  7. package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
  8. package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
  9. package/lib/components/OverflowItem/index.js.map +1 -1
  10. package/lib/components/useOverflowStyles.styles.js +1 -2
  11. package/lib/constants.js.map +1 -1
  12. package/lib/index.js.map +1 -1
  13. package/lib/overflowContext.js.map +1 -1
  14. package/lib/types.js.map +1 -1
  15. package/lib/useIsOverflowGroupVisible.js.map +1 -1
  16. package/lib/useIsOverflowItemVisible.js.map +1 -1
  17. package/lib/useOverflowContainer.js.map +1 -1
  18. package/lib/useOverflowCount.js.map +1 -1
  19. package/lib/useOverflowDivider.js.map +1 -1
  20. package/lib/useOverflowItem.js.map +1 -1
  21. package/lib/useOverflowMenu.js.map +1 -1
  22. package/lib/useOverflowVisibility.js.map +1 -1
  23. package/lib-commonjs/components/Overflow.js +9 -7
  24. package/lib-commonjs/components/Overflow.js.map +1 -1
  25. package/lib-commonjs/components/OverflowDivider/OverflowDivider.js.map +1 -1
  26. package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js.map +1 -1
  27. package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
  28. package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
  29. package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
  30. package/lib-commonjs/components/useOverflowStyles.styles.js +1 -1
  31. package/lib-commonjs/constants.js.map +1 -1
  32. package/lib-commonjs/index.js.map +1 -1
  33. package/lib-commonjs/overflowContext.js.map +1 -1
  34. package/lib-commonjs/types.js.map +1 -1
  35. package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
  36. package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
  37. package/lib-commonjs/useOverflowContainer.js.map +1 -1
  38. package/lib-commonjs/useOverflowCount.js.map +1 -1
  39. package/lib-commonjs/useOverflowDivider.js.map +1 -1
  40. package/lib-commonjs/useOverflowItem.js.map +1 -1
  41. package/lib-commonjs/useOverflowMenu.js.map +1 -1
  42. package/lib-commonjs/useOverflowVisibility.js.map +1 -1
  43. package/package.json +6 -22
package/CHANGELOG.md CHANGED
@@ -1,12 +1,29 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Tue, 15 Oct 2024 17:13:32 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 11 Nov 2024 09:55:13 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.2.0)
8
+
9
+ Mon, 11 Nov 2024 09:55:13 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.32..@fluentui/react-overflow_v9.2.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: add `onOverflowChange` callback ([PR #33106](https://github.com/microsoft/fluentui/pull/33106) by lingfangao@hotmail.com)
15
+ - Bump @fluentui/priority-overflow to v9.1.14 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
16
+ - Bump @fluentui/react-context-selector to v9.1.69 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
17
+ - Bump @fluentui/react-theme to v9.1.22 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.18.17 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
19
+
20
+ ### Patches
21
+
22
+ - chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
23
+
7
24
  ## [9.1.32](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.32)
8
25
 
9
- Tue, 15 Oct 2024 17:13:32 GMT
26
+ Tue, 15 Oct 2024 17:17:53 GMT
10
27
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.30..@fluentui/react-overflow_v9.1.32)
11
28
 
12
29
  ### Patches
package/dist/index.d.ts CHANGED
@@ -14,11 +14,15 @@ export declare const DATA_OVERFLOW_MENU = "data-overflow-menu";
14
14
 
15
15
  export declare const DATA_OVERFLOWING = "data-overflowing";
16
16
 
17
+ export declare interface OnOverflowChangeData extends OverflowState {
18
+ }
19
+
17
20
  /**
18
21
  * Provides an OverflowContext for OverflowItem descendants.
19
22
  */
20
23
  export declare const Overflow: React_2.ForwardRefExoticComponent<Partial<Pick<ObserveOptions, "padding" | "overflowDirection" | "overflowAxis" | "minimumVisible">> & {
21
24
  children: React_2.ReactElement;
25
+ onOverflowChange?: ((ev: null, data: OverflowState) => void) | undefined;
22
26
  } & React_2.RefAttributes<unknown>>;
23
27
 
24
28
  /**
@@ -89,8 +93,15 @@ export declare type OverflowItemProps = {
89
93
  */
90
94
  export declare type OverflowProps = Partial<Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>> & {
91
95
  children: React_2.ReactElement;
96
+ onOverflowChange?: (ev: null, data: OverflowState) => void;
92
97
  };
93
98
 
99
+ declare interface OverflowState {
100
+ hasOverflow: boolean;
101
+ itemVisibility: Record<string, boolean>;
102
+ groupVisibility: Record<string, OverflowGroupState>;
103
+ }
104
+
94
105
  /**
95
106
  * @param id - unique identifier for a group of overflow items
96
107
  * @returns visibility state of the group
@@ -8,7 +8,7 @@ import { useOverflowStyles } from './useOverflowStyles.styles';
8
8
  * Provides an OverflowContext for OverflowItem descendants.
9
9
  */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
10
10
  const styles = useOverflowStyles();
11
- const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;
11
+ const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding, onOverflowChange } = props;
12
12
  const [overflowState, setOverflowState] = React.useState({
13
13
  hasOverflow: false,
14
14
  itemVisibility: {},
@@ -22,13 +22,15 @@ import { useOverflowStyles } from './useOverflowStyles.styles';
22
22
  itemVisibility[item.id] = true;
23
23
  });
24
24
  invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
25
- setOverflowState(()=>{
26
- return {
27
- hasOverflow: data.invisibleItems.length > 0,
28
- itemVisibility,
29
- groupVisibility
30
- };
25
+ const newState = {
26
+ hasOverflow: data.invisibleItems.length > 0,
27
+ itemVisibility,
28
+ groupVisibility
29
+ };
30
+ onOverflowChange === null || onOverflowChange === void 0 ? void 0 : onOverflowChange(null, {
31
+ ...newState
31
32
  });
33
+ setOverflowState(newState);
32
34
  };
33
35
  const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {
34
36
  overflowDirection,
@@ -1 +1 @@
1
- {"version":3,"sources":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const child = getTriggerChild(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,aAAa,QAAQ,4BAA4B;AAExG,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWT,MAAMU,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASL;IAEf,MAAM,EAAEM,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGpB,MAAMqB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QAEpDX,iBAAiB;YACf,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAG/B,qBAC5FkB,QACA;QACER;QACAD;QACAE;QACAH;QACAwB,wBAAwBjC;IAC1B;IAGF,MAAMkC,QAAQrC,gBAAgBW;IAC9B,MAAM2B,cAAcvC,4BAA4BY,UAAU;QACxDF,KAAKR,cAAc8B,cAActB,KAAK4B,kBAAAA,4BAAAA,MAAO5B,GAAG;QAChD8B,WAAWzC,aAAa,gBAAgBY,OAAO8B,YAAY,EAAE9B,OAAO+B,gBAAgB,EAAE9B,SAASH,KAAK,CAAC+B,SAAS;IAChH;IAEA,qBACE,oBAACrC,gBAAgBwC,QAAQ;QACvBC,OAAO;YACLvB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACF;OAECG;AAGP,GAAG"}
1
+ {"version":3,"sources":["../src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\nexport interface OnOverflowChangeData extends OverflowState {}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n\n // overflow is not caused by DOM event\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onOverflowChange?: (ev: null, data: OverflowState) => void;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding, onOverflowChange } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n const newState = {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n onOverflowChange?.(null, { ...newState });\n\n setOverflowState(newState);\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const child = getTriggerChild(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","onOverflowChange","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","newState","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,aAAa,QAAQ,4BAA4B;AAExG,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAuB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWT,MAAMU,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASL;IAEf,MAAM,EAAEM,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAEC,gBAAgB,EAAE,GAAGR;IAEhH,MAAM,CAACS,eAAeC,iBAAiB,GAAGrB,MAAMsB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACpD,MAAME,WAAW;YACfX,aAAaI,KAAKE,cAAc,CAACM,MAAM,GAAG;YAC1CX;YACAC;QACF;QACAN,6BAAAA,uCAAAA,iBAAmB,MAAM;YAAE,GAAGe,QAAQ;QAAC;QAEvCb,iBAAiBa;IACnB;IAEA,MAAM,EAAEE,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGjC,qBAC5FmB,QACA;QACET;QACAD;QACAE;QACAH;QACA0B,wBAAwBnC;IAC1B;IAGF,MAAMoC,QAAQvC,gBAAgBW;IAC9B,MAAM6B,cAAczC,4BAA4BY,UAAU;QACxDF,KAAKR,cAAcgC,cAAcxB,KAAK8B,kBAAAA,4BAAAA,MAAO9B,GAAG;QAChDgC,WAAW3C,aAAa,gBAAgBY,OAAOgC,YAAY,EAAEhC,OAAOiC,gBAAgB,EAAEhC,SAASH,KAAK,CAACiC,SAAS;IAChH;IAEA,qBACE,oBAACvC,gBAAgB0C,QAAQ;QACvBC,OAAO;YACLxB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCc;YACAC;YACAC;YACAC;QACF;OAECG;AAGP,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OverflowDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.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 OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;CAGC,GACD,OAAO,MAAMC,gCAAkBJ,MAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeP,mBAAmBK;IACxC,OAAOP,4BAA4BQ,UAAU;QAC3CF,KAAKL,cAAcQ,cAAcH;IACnC;AACF,GAAG"}
1
+ {"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.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 OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;CAGC,GACD,OAAO,MAAMC,gCAAkBJ,MAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeP,mBAAmBK;IACxC,OAAOP,4BAA4BQ,UAAU;QAC3CF,KAAKL,cAAcQ,cAAcH;IACnC;AACF,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OverflowDivider.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowDividerProps\n */\nexport type OverflowDividerProps = {\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId: string;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowDividerProps\n */\nexport type OverflowDividerProps = {\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId: string;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n type FluentTriggerComponent,\n getTriggerChild,\n useMergedRefs,\n} 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 *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\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 const child = getTriggerChild(children);\n\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef","child","isFluentTriggerComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAE3BC,eAAe,EACfC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeL,MAAMM,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeT,gBAAgBK,IAAIE,UAAUD;IACnD,MAAMI,QAAQZ,gBAAgBU;IAE9B,OAAOX,4BAA4BW,UAAU;QAC3CJ,KAAKL,cAAcU,cAAcL,KAAKM,kBAAAA,4BAAAA,MAAON,GAAG;IAClD;AACF,GAAG;AAEH,6FAA6F;AAC5FH,aAAwCU,wBAAwB,GAAG"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n type FluentTriggerComponent,\n getTriggerChild,\n useMergedRefs,\n} 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 *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\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 const child = getTriggerChild(children);\n\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef","child","isFluentTriggerComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAE3BC,eAAe,EACfC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeL,MAAMM,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeT,gBAAgBK,IAAIE,UAAUD;IACnD,MAAMI,QAAQZ,gBAAgBU;IAE9B,OAAOX,4BAA4BW,UAAU;QAC3CJ,KAAKL,cAAcU,cAAcL,KAAKM,kBAAAA,4BAAAA,MAAON,GAAG;IAClD;AACF,GAAG;AAEH,6FAA6F;AAC5FH,aAAwCU,wBAAwB,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OverflowItem.types.ts"],"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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/OverflowItem.types.ts"],"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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"rangeMappings":"","mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"rangeMappings":"","mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB"}
@@ -9,5 +9,4 @@ export const useOverflowStyles = /*#__PURE__*/__styles({
9
9
  }
10
10
  }, {
11
11
  d: [".fyfkpbf [data-overflow-menu]{flex-shrink:0;}", ".f10570jf [data-overflowing]{display:none;}"]
12
- });
13
- //# sourceMappingURL=useOverflowStyles.styles.js.map
12
+ });
@@ -1 +1 @@
1
- {"version":3,"sources":["constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER"],"rangeMappings":";;;","mappings":"AAAA,OAAO,MAAMA,mBAAmB,mBAAmB;AACnD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,wBAAwB,wBAAwB"}
1
+ {"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER"],"rangeMappings":";;;","mappings":"AAAA,OAAO,MAAMA,mBAAmB,mBAAmB;AACnD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,wBAAwB,wBAAwB"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,qBAAqB,QAAQ,0BAA0B;AAEhE,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps, OnOverflowChangeData } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,qBAAqB,QAAQ,0BAA0B;AAEhE,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } 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 registerDivider: (divider: OverflowDividerEntry) => () => 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 registerDivider: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContext","selector","ctx"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB,mCAAmC;AAe/G,OAAO,MAAMC,kBAAkBF,cAC7BG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAM,IAAM;IAC1BC,gBAAgB,IAAM;IACtBC,sBAAsB,IAAM,IAAM;IAClCC,iBAAiB,IAAM,IAAM;AAC/B;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAgBC,WAChDZ,mBAAmBC,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
1
+ {"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } 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 registerDivider: (divider: OverflowDividerEntry) => () => 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 registerDivider: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContext","selector","ctx"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB,mCAAmC;AAe/G,OAAO,MAAMC,kBAAkBF,cAC7BG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAM,IAAM;IAC1BC,gBAAgB,IAAM;IACtBC,sBAAsB,IAAM,IAAM;IAClCC,iBAAiB,IAAM,IAAM;AAC/B;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAgBC,WAChDZ,mBAAmBC,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
package/lib/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["types.ts"],"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' | 'registerDivider'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../src/types.ts"],"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' | 'registerDivider'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useIsOverflowGroupVisible.ts"],"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"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"rangeMappings":";;;;;;","mappings":"AACA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;;CAGC,GACD,OAAO,SAASC,0BAA0BC,EAAU;IAClD,OAAOF,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe,CAACF,GAAG;AAC1D"}
1
+ {"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"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"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"rangeMappings":";;;;;;","mappings":"AACA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;;CAGC,GACD,OAAO,SAASC,0BAA0BC,EAAU;IAClD,OAAOF,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe,CAACF,GAAG;AAC1D"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useIsOverflowItemVisible.ts"],"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"],"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;;CAGC,GACD,OAAO,SAASC,yBAAyBC,EAAU;IACjD,OAAO,CAAC,CAACF,mBAAmBG,CAAAA,MAAOA,IAAIC,cAAc,CAACF,GAAG;AAC3D"}
1
+ {"version":3,"sources":["../src/useIsOverflowItemVisible.ts"],"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"],"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;;CAGC,GACD,OAAO,SAASC,yBAAyBC,EAAU;IACjD,OAAO,CAAC,CAACF,mBAAmBG,CAAAA,MAAOA,IAAIC,cAAc,CAACF,GAAG;AAC3D"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\nconst noop = () => null;\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n 'use no memo';\n\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n } = options;\n\n const onUpdateOverflow = useEventCallback(update);\n\n const overflowOptions = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow,\n }),\n [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],\n );\n\n const firstMount = useFirstMount();\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n\n const [overflowManager, setOverflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(() => {\n if (firstMount && containerRef.current) {\n overflowManager?.observe(containerRef.current, overflowOptions);\n }\n }, [firstMount, overflowManager, overflowOptions]);\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n // We don't want to re-create the overflow manager when the first mount flag changes from true to false\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [overflowOptions]);\n\n /* Clean up overflow manager on unmount */\n React.useEffect(\n () => () => {\n overflowManager?.disconnect();\n },\n [overflowManager],\n );\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const registerDivider = React.useCallback(\n (divider: OverflowDividerEntry) => {\n const el = divider.element;\n overflowManager?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n divider.groupId && overflowManager?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n },\n [overflowManager],\n );\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["React","createOverflowManager","canUseDOM","useEventCallback","useFirstMount","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","noop","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\nconst noop = () => null;\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n 'use no memo';\n\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n } = options;\n\n const onUpdateOverflow = useEventCallback(update);\n\n const overflowOptions = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow,\n }),\n [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],\n );\n\n const firstMount = useFirstMount();\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n\n const [overflowManager, setOverflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(() => {\n if (firstMount && containerRef.current) {\n overflowManager?.observe(containerRef.current, overflowOptions);\n }\n }, [firstMount, overflowManager, overflowOptions]);\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n // We don't want to re-create the overflow manager when the first mount flag changes from true to false\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [overflowOptions]);\n\n /* Clean up overflow manager on unmount */\n React.useEffect(\n () => () => {\n overflowManager?.disconnect();\n },\n [overflowManager],\n );\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const registerDivider = React.useCallback(\n (divider: OverflowDividerEntry) => {\n const el = divider.element;\n overflowManager?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n divider.groupId && overflowManager?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n },\n [overflowManager],\n );\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["React","createOverflowManager","canUseDOM","useEventCallback","useFirstMount","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","noop","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,8BAA8B;AAapE,SAASC,SAAS,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,yBAAyB,QAAQ,4BAA4B;AAElH,SAASC,gBAAgB,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,cAAc;AAE9G,MAAMC,OAAO,IAAM;AAEnB;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,QACAC;IAEA;IAEA,MAAM,EACJC,eAAe,YAAY,EAC3BC,oBAAoB,KAAK,EACzBC,UAAU,EAAE,EACZC,iBAAiB,CAAC,EAClBC,yBAAyBR,IAAI,EAC9B,GAAGG;IAEJ,MAAMM,mBAAmBhB,iBAAiBS;IAE1C,MAAMQ,kBAAkBpB,MAAMqB,OAAO,CACnC,IAAO,CAAA;YACLP;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACF;QAAgBC;QAAwBJ;QAAcC;QAAmBC;QAASG;KAAiB;IAGtG,MAAMG,aAAalB;IAEnB,4CAA4C;IAC5C,MAAMmB,eAAevB,MAAMwB,MAAM,CAAW;IAE5C,MAAM,CAACC,iBAAiBC,mBAAmB,GAAG1B,MAAM2B,QAAQ,CAAyB,IACnFzB,cAAcD,0BAA0B;IAG1C,8EAA8E;IAC9EI,0BAA0B;QACxB,IAAIiB,cAAcC,aAAaK,OAAO,EAAE;YACtCH,4BAAAA,sCAAAA,gBAAiBI,OAAO,CAACN,aAAaK,OAAO,EAAER;QACjD;IACF,GAAG;QAACE;QAAYG;QAAiBL;KAAgB;IAEjDf,0BAA0B;QACxB,IAAI,CAACkB,aAAaK,OAAO,IAAI,CAAC1B,eAAeoB,YAAY;YACvD;QACF;QAEA,MAAMQ,qBAAqB7B;QAC3B6B,mBAAmBD,OAAO,CAACN,aAAaK,OAAO,EAAER;QACjDM,mBAAmBI;IACnB,uGAAuG;IACvG,uDAAuD;IACzD,GAAG;QAACV;KAAgB;IAEpB,wCAAwC,GACxCpB,MAAM+B,SAAS,CACb,IAAM;YACJN,4BAAAA,sCAAAA,gBAAiBO,UAAU;QAC7B,GACA;QAACP;KAAgB;IAGnB,MAAMQ,eAAejC,MAAMkC,WAAW,CACpC,CAACC;QACCV,4BAAAA,sCAAAA,gBAAiBW,OAAO,CAACD;QACzBA,KAAKE,OAAO,CAACC,YAAY,CAAC9B,oBAAoB;QAE9C,OAAO;YACL2B,KAAKE,OAAO,CAACE,eAAe,CAACjC;YAC7B6B,KAAKE,OAAO,CAACE,eAAe,CAAC/B;YAC7BiB,4BAAAA,sCAAAA,gBAAiBe,UAAU,CAACL,KAAKM,EAAE;QACrC;IACF,GACA;QAAChB;KAAgB;IAGnB,MAAMiB,kBAAkB1C,MAAMkC,WAAW,CACvC,CAACS;QACC,MAAMC,KAAKD,QAAQN,OAAO;QAC1BZ,4BAAAA,sCAAAA,gBAAiBoB,UAAU,CAACF;QAC5BC,GAAGN,YAAY,CAAC/B,uBAAuB;QAEvC,OAAO;YACLoC,QAAQG,OAAO,KAAIrB,4BAAAA,sCAAAA,gBAAiBsB,aAAa,CAACJ,QAAQG,OAAO;YACjEF,GAAGL,eAAe,CAAChC;QACrB;IACF,GACA;QAACkB;KAAgB;IAGnB,MAAMuB,uBAAuBhD,MAAMkC,WAAW,CAC5C,CAACU;QACCnB,4BAAAA,sCAAAA,gBAAiBwB,eAAe,CAACL;QACjCA,GAAGN,YAAY,CAAC7B,oBAAoB;QAEpC,OAAO;YACLgB,4BAAAA,sCAAAA,gBAAiByB,kBAAkB;YACnCN,GAAGL,eAAe,CAAC9B;QACrB;IACF,GACA;QAACgB;KAAgB;IAGnB,MAAM0B,iBAAiBnD,MAAMkC,WAAW,CAAC;QACvCT,4BAAAA,sCAAAA,gBAAiBb,MAAM;IACzB,GAAG;QAACa;KAAgB;IAEpB,OAAO;QACLQ;QACAS;QACAM;QACAG;QACA5B;IACF;AACF,EAAE;AAEF,OAAO,MAAM6B,4BAAoD,CAAC,EAAEjB,IAAI,EAAEkB,OAAO,EAAE;IACjF,IAAIA,SAAS;QACXlB,KAAKE,OAAO,CAACE,eAAe,CAACjC;IAC/B,OAAO;QACL6B,KAAKE,OAAO,CAACC,YAAY,CAAChC,kBAAkB;IAC9C;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowCount.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,mBAAmBE,CAAAA;QACjB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAChE,IAAI,CAACA,SAAS;gBACZF;YACF;YAEA,OAAOA;QACT,GAAG;IACL,GAAG"}
1
+ {"version":3,"sources":["../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"],"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,mBAAmBE,CAAAA;QACjB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAChE,IAAI,CAACA,SAAS;gBACZF;YACF;YAEA,OAAOA;QACT,GAAG;IACL,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowDivider.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 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 useOverflowDivider<TElement extends HTMLElement>(groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowDivider","groupId","ref","useRef","registerDivider","v","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;CAKC,GACD,OAAO,SAASC,mBAAiDC,OAAgB;IAC/E,MAAMC,MAAML,MAAMM,MAAM,CAAW;IACnC,MAAMC,kBAAkBL,mBAAmBM,CAAAA,IAAKA,EAAED,eAAe;IAEjEN,0BAA0B;QACxB,IAAII,IAAII,OAAO,IAAIL,SAAS;YAC1B,OAAOG,gBAAgB;gBACrBG,SAASL,IAAII,OAAO;gBACpBL;YACF;QACF;IACF,GAAG;QAACG;QAAiBH;KAAQ;IAE7B,OAAOC;AACT"}
1
+ {"version":3,"sources":["../src/useOverflowDivider.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 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 useOverflowDivider<TElement extends HTMLElement>(groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowDivider","groupId","ref","useRef","registerDivider","v","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;CAKC,GACD,OAAO,SAASC,mBAAiDC,OAAgB;IAC/E,MAAMC,MAAML,MAAMM,MAAM,CAAW;IACnC,MAAMC,kBAAkBL,mBAAmBM,CAAAA,IAAKA,EAAED,eAAe;IAEjEN,0BAA0B;QACxB,IAAII,IAAII,OAAO,IAAIL,SAAS;YAC1B,OAAOG,gBAAgB;gBACrBG,SAASL,IAAII,OAAO;gBACpBL;YACF;QACF;IACF,GAAG;QAACG;QAAiBH;KAAQ;IAE7B,OAAOC;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;CAOC,GACD,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;IAC3G,MAAMC,MAAMP,MAAMQ,MAAM,CAAW;IACnC,MAAMC,eAAeP,mBAAmBQ,CAAAA,IAAKA,EAAED,YAAY;IAE3DR,0BAA0B;QACxB,IAAIM,IAAII,OAAO,EAAE;YACf,OAAOF,aAAa;gBAClBG,SAASL,IAAII,OAAO;gBACpBP;gBACAC,UAAUA,qBAAAA,sBAAAA,WAAY;gBACtBC;YACF;QACF;IACF,GAAG;QAACF;QAAIC;QAAUI;QAAcH;KAAQ;IAExC,OAAOC;AACT"}
1
+ {"version":3,"sources":["../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"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;CAOC,GACD,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;IAC3G,MAAMC,MAAMP,MAAMQ,MAAM,CAAW;IACnC,MAAMC,eAAeP,mBAAmBQ,CAAAA,IAAKA,EAAED,YAAY;IAE3DR,0BAA0B;QACxB,IAAIM,IAAII,OAAO,EAAE;YACf,OAAOF,aAAa;gBAClBG,SAASL,IAAII,OAAO;gBACpBP;gBACAC,UAAUA,qBAAAA,sBAAAA,WAAY;gBACtBC;YACF;QACF;IACF,GAAG;QAACF;QAAIC;QAAUI;QAAcH;KAAQ;IAExC,OAAOC;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowMenu.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC,gBAA8CC,EAAW;IACvE,MAAMC,YAAYN,MAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ;IACtB,MAAMK,uBAAuBN,mBAAmBO,CAAAA,IAAKA,EAAED,oBAAoB;IAC3E,MAAME,iBAAiBR,mBAAmBO,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMZ,MAAMa,MAAM,CAAW;IACnC,MAAMC,gBAAgBN,gBAAgB;IAEtCN,0BAA0B;QACxB,IAAIU,IAAIG,OAAO,EAAE;YACf,OAAON,qBAAqBG,IAAIG,OAAO;QACzC;IACF,GAAG;QAACN;QAAsBK;QAAeP;KAAU;IAEnDL,0BAA0B;QACxB,IAAIY,eAAe;YACjBH;QACF;IACF,GAAG;QAACG;QAAeH;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKJ;QAAeM;IAAc;AAC7C"}
1
+ {"version":3,"sources":["../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"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC,gBAA8CC,EAAW;IACvE,MAAMC,YAAYN,MAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ;IACtB,MAAMK,uBAAuBN,mBAAmBO,CAAAA,IAAKA,EAAED,oBAAoB;IAC3E,MAAME,iBAAiBR,mBAAmBO,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMZ,MAAMa,MAAM,CAAW;IACnC,MAAMC,gBAAgBN,gBAAgB;IAEtCN,0BAA0B;QACxB,IAAIU,IAAIG,OAAO,EAAE;YACf,OAAON,qBAAqBG,IAAIG,OAAO;QACzC;IACF,GAAG;QAACN;QAAsBK;QAAeP;KAAU;IAEnDL,0BAA0B;QACxB,IAAIY,eAAe;YACjBH;QACF;IACF,GAAG;QAACG;QAAeH;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKJ;QAAeM;IAAc;AAC7C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility() {\n const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["React","useOverflowContext","useOverflowVisibility","itemVisibility","ctx","groupVisibility","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;CAQC,GACD,OAAO,SAASC;IACd,MAAMC,iBAAiBF,mBAAmBG,CAAAA,MAAOA,IAAID,cAAc;IACnE,MAAME,kBAAkBJ,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOL,MAAMM,OAAO,CAAC,IAAO,CAAA;YAAEH;YAAgBE;QAAgB,CAAA,GAAI;QAACF;QAAgBE;KAAgB;AACrG"}
1
+ {"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility() {\n const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["React","useOverflowContext","useOverflowVisibility","itemVisibility","ctx","groupVisibility","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;CAQC,GACD,OAAO,SAASC;IACd,MAAMC,iBAAiBF,mBAAmBG,CAAAA,MAAOA,IAAID,cAAc;IACnE,MAAME,kBAAkBJ,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOL,MAAMM,OAAO,CAAC,IAAO,CAAA;YAAEH;YAAgBE;QAAgB,CAAA,GAAI;QAACF;QAAgBE;KAAgB;AACrG"}
@@ -17,7 +17,7 @@ const _useOverflowContainer = require("../useOverflowContainer");
17
17
  const _useOverflowStylesstyles = require("./useOverflowStyles.styles");
18
18
  const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
19
19
  const styles = (0, _useOverflowStylesstyles.useOverflowStyles)();
20
- const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;
20
+ const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding, onOverflowChange } = props;
21
21
  const [overflowState, setOverflowState] = _react.useState({
22
22
  hasOverflow: false,
23
23
  itemVisibility: {},
@@ -31,13 +31,15 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
31
31
  itemVisibility[item.id] = true;
32
32
  });
33
33
  invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
34
- setOverflowState(()=>{
35
- return {
36
- hasOverflow: data.invisibleItems.length > 0,
37
- itemVisibility,
38
- groupVisibility
39
- };
34
+ const newState = {
35
+ hasOverflow: data.invisibleItems.length > 0,
36
+ itemVisibility,
37
+ groupVisibility
38
+ };
39
+ onOverflowChange === null || onOverflowChange === void 0 ? void 0 : onOverflowChange(null, {
40
+ ...newState
40
41
  });
42
+ setOverflowState(newState);
41
43
  };
42
44
  const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = (0, _useOverflowContainer.useOverflowContainer)(update, {
43
45
  overflowDirection,
@@ -1 +1 @@
1
- {"version":3,"sources":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const child = getTriggerChild(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","child","getTriggerChild","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BaA;;;eAAAA;;;;iEA3BU;wBACM;gCAE+C;iCAE5C;sCACgC;yCAC9B;AAoB3B,MAAMA,WAAAA,WAAAA,GAAWC,OAAMC,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASC,IAAAA,0CAAAA;IAEf,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGR;IAE9F,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QAEpDX,iBAAiB;YACf,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0CAAAA,EAC5Fd,QACA;QACER;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAAA;IAC1B;IAGF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAgB7B;IAC9B,MAAM8B,cAAcC,IAAAA,2CAAAA,EAA4B/B,UAAU;QACxDH,KAAKmC,IAAAA,6BAAAA,EAAcZ,cAAcvB,KAAK+B,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAO/B,GAAG;QAChDoC,WAAWC,IAAAA,oBAAAA,EAAa,gBAAgBpC,OAAOqC,YAAY,EAAErC,OAAOsC,gBAAgB,EAAEpC,SAASJ,KAAK,CAACqC,SAAS;IAChH;IAEA,OAAA,WAAA,GACEvC,OAAA2C,aAAA,CAACC,gCAAAA,CAAgBC,QAAQ,EAAA;QACvBC,OAAO;YACL/B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACF;OAECM;AAGP"}
1
+ {"version":3,"sources":["../src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\nexport interface OnOverflowChangeData extends OverflowState {}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n\n // overflow is not caused by DOM event\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onOverflowChange?: (ev: null, data: OverflowState) => void;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding, onOverflowChange } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n const newState = {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n onOverflowChange?.(null, { ...newState });\n\n setOverflowState(newState);\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const child = getTriggerChild(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","onOverflowChange","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","newState","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","child","getTriggerChild","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiCaA;;;eAAAA;;;;iEAjCU;wBACM;gCAE+C;iCAE5C;sCACgC;yCAC9B;AA0B3B,MAAMA,WAAAA,WAAAA,GAAWC,OAAMC,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASC,IAAAA,0CAAAA;IAEf,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAEC,gBAAgB,EAAE,GAAGT;IAEhH,MAAM,CAACU,eAAeC,iBAAiB,GAAGb,OAAMc,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACpD,MAAME,WAAW;YACfX,aAAaI,KAAKE,cAAc,CAACM,MAAM,GAAG;YAC1CX;YACAC;QACF;QACAN,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAmB,MAAM;YAAE,GAAGe,QAAQ;QAAC;QAEvCb,iBAAiBa;IACnB;IAEA,MAAM,EAAEE,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0CAAAA,EAC5Ff,QACA;QACET;QACAD;QACAE;QACAH;QACA2B,wBAAwBC,+CAAAA;IAC1B;IAGF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAgB/B;IAC9B,MAAMgC,cAAcC,IAAAA,2CAAAA,EAA4BjC,UAAU;QACxDH,KAAKqC,IAAAA,6BAAAA,EAAcZ,cAAczB,KAAKiC,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOjC,GAAG;QAChDsC,WAAWC,IAAAA,oBAAAA,EAAa,gBAAgBtC,OAAOuC,YAAY,EAAEvC,OAAOwC,gBAAgB,EAAEtC,SAASJ,KAAK,CAACuC,SAAS;IAChH;IAEA,OAAA,WAAA,GACEzC,OAAA6C,aAAA,CAACC,gCAAAA,CAAgBC,QAAQ,EAAA;QACvBC,OAAO;YACLhC,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCc;YACAC;YACAC;YACAC;QACF;OAECM;AAGP"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OverflowDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.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 OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["OverflowDivider","React","forwardRef","props","ref","groupId","children","containerRef","useOverflowDivider","applyTriggerPropsToChildren","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACoC;oCACxB;AAO5B,MAAMA,kBAAAA,WAAAA,GAAkBC,OAAMC,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeC,IAAAA,sCAAAA,EAAmBH;IACxC,OAAOI,IAAAA,2CAAAA,EAA4BH,UAAU;QAC3CF,KAAKM,IAAAA,6BAAAA,EAAcH,cAAcH;IACnC;AACF"}
1
+ {"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.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 OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["OverflowDivider","React","forwardRef","props","ref","groupId","children","containerRef","useOverflowDivider","applyTriggerPropsToChildren","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACoC;oCACxB;AAO5B,MAAMA,kBAAAA,WAAAA,GAAkBC,OAAMC,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeC,IAAAA,sCAAAA,EAAmBH;IACxC,OAAOI,IAAAA,2CAAAA,EAA4BH,UAAU;QAC3CF,KAAKM,IAAAA,6BAAAA,EAAcH,cAAcH;IACnC;AACF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OverflowDivider.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowDividerProps\n */\nexport type OverflowDividerProps = {\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId: string;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
1
+ {"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowDividerProps\n */\nexport type OverflowDividerProps = {\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId: string;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n type FluentTriggerComponent,\n getTriggerChild,\n useMergedRefs,\n} 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 *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\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 const child = getTriggerChild(children);\n\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","child","getTriggerChild","applyTriggerPropsToChildren","useMergedRefs","isFluentTriggerComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCAMhB;iCACyB;AASzB,MAAMA,eAAAA,WAAAA,GAAeC,OAAMC,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeC,IAAAA,gCAAAA,EAAgBL,IAAIE,UAAUD;IACnD,MAAMK,QAAQC,IAAAA,+BAAAA,EAAgBJ;IAE9B,OAAOK,IAAAA,2CAAAA,EAA4BL,UAAU;QAC3CJ,KAAKU,IAAAA,6BAAAA,EAAcL,cAAcL,KAAKO,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOP,GAAG;IAClD;AACF;AAEA,6FAA6F;AAC5FJ,aAAwCe,wBAAwB,GAAG"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n type FluentTriggerComponent,\n getTriggerChild,\n useMergedRefs,\n} 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 *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\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 const child = getTriggerChild(children);\n\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","child","getTriggerChild","applyTriggerPropsToChildren","useMergedRefs","isFluentTriggerComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCAMhB;iCACyB;AASzB,MAAMA,eAAAA,WAAAA,GAAeC,OAAMC,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeC,IAAAA,gCAAAA,EAAgBL,IAAIE,UAAUD;IACnD,MAAMK,QAAQC,IAAAA,+BAAAA,EAAgBJ;IAE9B,OAAOK,IAAAA,2CAAAA,EAA4BL,UAAU;QAC3CJ,KAAKU,IAAAA,6BAAAA,EAAcL,cAAcL,KAAKO,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOP,GAAG;IAClD;AACF;AAEA,6FAA6F;AAC5FJ,aAAwCe,wBAAwB,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OverflowItem.types.ts"],"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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/OverflowItem.types.ts"],"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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BACSA;;;eAAAA,0BAAY;;;8BAAQ"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BACSA;;;eAAAA,0BAAY;;;8BAAQ"}
@@ -21,4 +21,4 @@ const useOverflowStyles = /*#__PURE__*/ (0, _react.__styles)({
21
21
  ".fyfkpbf [data-overflow-menu]{flex-shrink:0;}",
22
22
  ".f10570jf [data-overflowing]{display:none;}"
23
23
  ]
24
- }); //# sourceMappingURL=useOverflowStyles.styles.js.map
24
+ });
@@ -1 +1 @@
1
- {"version":3,"sources":["constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAAaA,gBAAAA;eAAAA;;IAGAC,qBAAAA;eAAAA;;IAFAC,kBAAAA;eAAAA;;IACAC,kBAAAA;eAAAA;;;AAFN,MAAMH,mBAAmB;AACzB,MAAME,qBAAqB;AAC3B,MAAMC,qBAAqB;AAC3B,MAAMF,wBAAwB"}
1
+ {"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAAaA,gBAAAA;eAAAA;;IAGAC,qBAAAA;eAAAA;;IAFAC,kBAAAA;eAAAA;;IACAC,kBAAAA;eAAAA;;;AAFN,MAAMH,mBAAmB;AACzB,MAAME,qBAAqB;AAC3B,MAAMC,qBAAqB;AAC3B,MAAMF,wBAAwB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","Overflow","OverflowDivider","OverflowItem","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowContext","useOverflowCount","useOverflowDivider","useOverflowItem","useOverflowMenu","useOverflowVisibility"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAESA,gBAAgB;eAAhBA,2BAAgB;;IAA0CC,qBAAqB;eAArBA,gCAAqB;;IAA7DC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAFxDC,QAAQ;eAARA,kBAAQ;;IAiBRC,eAAe;eAAfA,gCAAe;;IADfC,YAAY;eAAZA,0BAAY;;IAZZC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IAOpBC,kBAAkB;eAAlBA,mCAAkB;;IANlBC,gBAAgB;eAAhBA,kCAAgB;;IAGhBC,kBAAkB;eAAlBA,sCAAkB;;IAFlBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IAEfC,qBAAqB;eAArBA,4CAAqB;;;0BAXL;2BAEuE;2CAEtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;uCACG;iCAEH;8BAGN;iCACG"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps, OnOverflowChangeData } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","Overflow","OverflowDivider","OverflowItem","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowContext","useOverflowCount","useOverflowDivider","useOverflowItem","useOverflowMenu","useOverflowVisibility"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAESA,gBAAgB;eAAhBA,2BAAgB;;IAA0CC,qBAAqB;eAArBA,gCAAqB;;IAA7DC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAFxDC,QAAQ;eAARA,kBAAQ;;IAiBRC,eAAe;eAAfA,gCAAe;;IADfC,YAAY;eAAZA,0BAAY;;IAZZC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IAOpBC,kBAAkB;eAAlBA,mCAAkB;;IANlBC,gBAAgB;eAAhBA,kCAAgB;;IAGhBC,kBAAkB;eAAlBA,sCAAkB;;IAFlBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IAEfC,qBAAqB;eAArBA,4CAAqB;;;0BAXL;2BAEuE;2CAEtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;uCACG;iCAEH;8BAGN;iCACG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } 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 registerDivider: (divider: OverflowDividerEntry) => () => 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 registerDivider: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["OverflowContext","useOverflowContext","createContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAgBaA,eAAAA;eAAAA;;IAiBAC,kBAAAA;eAAAA;;;sCAhC+D;AAerE,MAAMD,kBAAkBE,IAAAA,mCAAAA,EAC7BC;AAGF,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAM,IAAM;IAC1BC,gBAAgB,IAAM;IACtBC,sBAAsB,IAAM,IAAM;IAClCC,iBAAiB,IAAM,IAAM;AAC/B;AAKO,MAAMV,qBAAqB,CAAgBW,WAChDC,IAAAA,wCAAAA,EAAmBb,iBAAiB,CAACc,MAAMV,2BAA2B,GAAKQ,SAASE"}
1
+ {"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } 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 registerDivider: (divider: OverflowDividerEntry) => () => 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 registerDivider: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["OverflowContext","useOverflowContext","createContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAgBaA,eAAAA;eAAAA;;IAiBAC,kBAAAA;eAAAA;;;sCAhC+D;AAerE,MAAMD,kBAAkBE,IAAAA,mCAAAA,EAC7BC;AAGF,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAM,IAAM;IAC1BC,gBAAgB,IAAM;IACtBC,sBAAsB,IAAM,IAAM;IAClCC,iBAAiB,IAAM,IAAM;AAC/B;AAKO,MAAMV,qBAAqB,CAAgBW,WAChDC,IAAAA,wCAAAA,EAAmBb,iBAAiB,CAACc,MAAMV,2BAA2B,GAAKQ,SAASE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["types.ts"],"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' | 'registerDivider'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
1
+ {"version":3,"sources":["../src/types.ts"],"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' | 'registerDivider'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useIsOverflowGroupVisible.ts"],"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"],"names":["useIsOverflowGroupVisible","id","useOverflowContext","ctx","groupVisibility"],"rangeMappings":";;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;iCANmB;AAM5B,SAASA,0BAA0BC,EAAU;IAClD,OAAOC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,eAAe,CAACH,GAAG;AAC1D"}
1
+ {"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"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"],"names":["useIsOverflowGroupVisible","id","useOverflowContext","ctx","groupVisibility"],"rangeMappings":";;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;iCANmB;AAM5B,SAASA,0BAA0BC,EAAU;IAClD,OAAOC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,eAAe,CAACH,GAAG;AAC1D"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useIsOverflowItemVisible.ts"],"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"],"names":["useIsOverflowItemVisible","id","useOverflowContext","ctx","itemVisibility"],"rangeMappings":";;;;;;;;;;;;;","mappings":";;;;+BAMgBA;;;eAAAA;;;iCANmB;AAM5B,SAASA,yBAAyBC,EAAU;IACjD,OAAO,CAAC,CAACC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,cAAc,CAACH,GAAG;AAC3D"}
1
+ {"version":3,"sources":["../src/useIsOverflowItemVisible.ts"],"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"],"names":["useIsOverflowItemVisible","id","useOverflowContext","ctx","itemVisibility"],"rangeMappings":";;;;;;;;;;;;;","mappings":";;;;+BAMgBA;;;eAAAA;;;iCANmB;AAM5B,SAASA,yBAAyBC,EAAU;IACjD,OAAO,CAAC,CAACC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,cAAc,CAACH,GAAG;AAC3D"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\nconst noop = () => null;\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n 'use no memo';\n\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n } = options;\n\n const onUpdateOverflow = useEventCallback(update);\n\n const overflowOptions = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow,\n }),\n [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],\n );\n\n const firstMount = useFirstMount();\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n\n const [overflowManager, setOverflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(() => {\n if (firstMount && containerRef.current) {\n overflowManager?.observe(containerRef.current, overflowOptions);\n }\n }, [firstMount, overflowManager, overflowOptions]);\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n // We don't want to re-create the overflow manager when the first mount flag changes from true to false\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [overflowOptions]);\n\n /* Clean up overflow manager on unmount */\n React.useEffect(\n () => () => {\n overflowManager?.disconnect();\n },\n [overflowManager],\n );\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const registerDivider = React.useCallback(\n (divider: OverflowDividerEntry) => {\n const el = divider.element;\n overflowManager?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n divider.groupId && overflowManager?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n },\n [overflowManager],\n );\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["updateVisibilityAttribute","useOverflowContainer","noop","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","useEventCallback","overflowOptions","React","useMemo","firstMount","useFirstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","registerDivider","divider","el","addDivider","DATA_OVERFLOW_DIVIDER","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","updateOverflow","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\nconst noop = () => null;\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n 'use no memo';\n\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n } = options;\n\n const onUpdateOverflow = useEventCallback(update);\n\n const overflowOptions = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow,\n }),\n [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],\n );\n\n const firstMount = useFirstMount();\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n\n const [overflowManager, setOverflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(() => {\n if (firstMount && containerRef.current) {\n overflowManager?.observe(containerRef.current, overflowOptions);\n }\n }, [firstMount, overflowManager, overflowOptions]);\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n // We don't want to re-create the overflow manager when the first mount flag changes from true to false\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [overflowOptions]);\n\n /* Clean up overflow manager on unmount */\n React.useEffect(\n () => () => {\n overflowManager?.disconnect();\n },\n [overflowManager],\n );\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const registerDivider = React.useCallback(\n (divider: OverflowDividerEntry) => {\n const el = divider.element;\n overflowManager?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n divider.groupId && overflowManager?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n },\n [overflowManager],\n );\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["updateVisibilityAttribute","useOverflowContainer","noop","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","useEventCallback","overflowOptions","React","useMemo","firstMount","useFirstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","registerDivider","divider","el","addDivider","DATA_OVERFLOW_DIVIDER","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","updateOverflow","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowCount.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;iCALsB;AAK5B,MAAMA,mBAAmB,IAC9BC,IAAAA,mCAAAA,EAAmBC,CAAAA;QACjB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAChE,IAAI,CAACA,SAAS;gBACZF;YACF;YAEA,OAAOA;QACT,GAAG;IACL"}
1
+ {"version":3,"sources":["../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"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;iCALsB;AAK5B,MAAMA,mBAAmB,IAC9BC,IAAAA,mCAAAA,EAAmBC,CAAAA;QACjB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAChE,IAAI,CAACA,SAAS;gBACZF;YACF;YAEA,OAAOA;QACT,GAAG;IACL"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowDivider.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 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 useOverflowDivider<TElement extends HTMLElement>(groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["useOverflowDivider","groupId","ref","React","useRef","registerDivider","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;gCACmB;iCACP;AAQ5B,SAASA,mBAAiDC,OAAgB;IAC/E,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,kBAAkBC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,eAAe;IAEjEG,IAAAA,yCAAAA,EAA0B;QACxB,IAAIN,IAAIO,OAAO,IAAIR,SAAS;YAC1B,OAAOI,gBAAgB;gBACrBK,SAASR,IAAIO,OAAO;gBACpBR;YACF;QACF;IACF,GAAG;QAACI;QAAiBJ;KAAQ;IAE7B,OAAOC;AACT"}
1
+ {"version":3,"sources":["../src/useOverflowDivider.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 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 useOverflowDivider<TElement extends HTMLElement>(groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["useOverflowDivider","groupId","ref","React","useRef","registerDivider","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;gCACmB;iCACP;AAQ5B,SAASA,mBAAiDC,OAAgB;IAC/E,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,kBAAkBC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,eAAe;IAEjEG,IAAAA,yCAAAA,EAA0B;QACxB,IAAIN,IAAIO,OAAO,IAAIR,SAAS;YAC1B,OAAOI,gBAAgB;gBACrBK,SAASR,IAAIO,OAAO;gBACpBR;YACF;QACF;IACF,GAAG;QAACI;QAAiBJ;KAAQ;IAE7B,OAAOC;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;iEAZO;gCACmB;iCACP;AAU5B,SAASA,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;IAC3G,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,eAAeC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,YAAY;IAE3DG,IAAAA,yCAAAA,EAA0B;QACxB,IAAIN,IAAIO,OAAO,EAAE;YACf,OAAOJ,aAAa;gBAClBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAY;gBACtBC;YACF;QACF;IACF,GAAG;QAACF;QAAIC;QAAUK;QAAcJ;KAAQ;IAExC,OAAOC;AACT"}
1
+ {"version":3,"sources":["../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"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;iEAZO;gCACmB;iCACP;AAU5B,SAASA,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;IAC3G,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,eAAeC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,YAAY;IAE3DG,IAAAA,yCAAAA,EAA0B;QACxB,IAAIN,IAAIO,OAAO,EAAE;YACf,OAAOJ,aAAa;gBAClBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAY;gBACtBC;YACF;QACF;IACF,GAAG;QAACF;QAAIC;QAAUK;QAAcJ;KAAQ;IAExC,OAAOC;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowMenu.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;gCAC0B;iCACd;kCACF;AAE1B,SAASA,gBAA8CC,EAAW;IACvE,MAAMC,YAAYC,IAAAA,qBAAAA,EAAM,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAAA;IACtB,MAAMC,uBAAuBC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,gBAAgBT,gBAAgB;IAEtCU,IAAAA,yCAAAA,EAA0B;QACxB,IAAIJ,IAAIK,OAAO,EAAE;YACf,OAAOT,qBAAqBI,IAAIK,OAAO;QACzC;IACF,GAAG;QAACT;QAAsBO;QAAeX;KAAU;IAEnDY,IAAAA,yCAAAA,EAA0B;QACxB,IAAID,eAAe;YACjBJ;QACF;IACF,GAAG;QAACI;QAAeJ;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKN;QAAeS;IAAc;AAC7C"}
1
+ {"version":3,"sources":["../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"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;gCAC0B;iCACd;kCACF;AAE1B,SAASA,gBAA8CC,EAAW;IACvE,MAAMC,YAAYC,IAAAA,qBAAAA,EAAM,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAAA;IACtB,MAAMC,uBAAuBC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,gBAAgBT,gBAAgB;IAEtCU,IAAAA,yCAAAA,EAA0B;QACxB,IAAIJ,IAAIK,OAAO,EAAE;YACf,OAAOT,qBAAqBI,IAAIK,OAAO;QACzC;IACF,GAAG;QAACT;QAAsBO;QAAeX;KAAU;IAEnDY,IAAAA,yCAAAA,EAA0B;QACxB,IAAID,eAAe;YACjBJ;QACF;IACF,GAAG;QAACI;QAAeJ;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKN;QAAeS;IAAc;AAC7C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility() {\n const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["useOverflowVisibility","itemVisibility","useOverflowContext","ctx","groupVisibility","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;iEAZO;iCACY;AAW5B,SAASA;IACd,MAAMC,iBAAiBC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,cAAc;IACnE,MAAMG,kBAAkBF,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAAEL;YAAgBG;QAAgB,CAAA,GAAI;QAACH;QAAgBG;KAAgB;AACrG"}
1
+ {"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility() {\n const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["useOverflowVisibility","itemVisibility","useOverflowContext","ctx","groupVisibility","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;iEAZO;iCACY;AAW5B,SAASA;IACd,MAAMC,iBAAiBC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,cAAc;IACnE,MAAMG,kBAAkBF,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAAEL;YAAgBG;QAAgB,CAAA,GAAI;QAACH;QAAgBG;KAAgB;AACrG"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-overflow",
3
- "version": "9.1.32",
3
+ "version": "9.2.0",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -11,34 +11,18 @@
11
11
  "url": "https://github.com/microsoft/fluentui"
12
12
  },
13
13
  "license": "MIT",
14
- "scripts": {
15
- "build": "just-scripts build",
16
- "bundle-size": "monosize measure",
17
- "clean": "just-scripts clean",
18
- "code-style": "just-scripts code-style",
19
- "e2e": "cypress run --component",
20
- "e2e:local": "cypress open --component",
21
- "just": "just-scripts",
22
- "lint": "just-scripts lint",
23
- "start": "yarn storybook",
24
- "test": "jest --passWithNoTests",
25
- "storybook": "yarn --cwd ../stories storybook",
26
- "type-check": "just-scripts type-check",
27
- "generate-api": "just-scripts generate-api"
28
- },
29
14
  "devDependencies": {
30
15
  "@fluentui/react-portal": "*",
31
16
  "@fluentui/react-menu": "*",
32
17
  "@fluentui/eslint-plugin": "*",
33
18
  "@fluentui/scripts-api-extractor": "*",
34
- "@fluentui/scripts-cypress": "*",
35
- "@fluentui/scripts-tasks": "*"
19
+ "@fluentui/scripts-cypress": "*"
36
20
  },
37
21
  "dependencies": {
38
- "@fluentui/priority-overflow": "^9.1.13",
39
- "@fluentui/react-context-selector": "^9.1.68",
40
- "@fluentui/react-theme": "^9.1.21",
41
- "@fluentui/react-utilities": "^9.18.16",
22
+ "@fluentui/priority-overflow": "^9.1.14",
23
+ "@fluentui/react-context-selector": "^9.1.69",
24
+ "@fluentui/react-theme": "^9.1.22",
25
+ "@fluentui/react-utilities": "^9.18.17",
42
26
  "@griffel/react": "^1.5.22",
43
27
  "@swc/helpers": "^0.5.1"
44
28
  },