@fluentui/react-overflow 9.1.22 → 9.1.24

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. package/CHANGELOG.md +23 -2
  2. package/lib/components/Overflow.js.map +1 -1
  3. package/lib/components/OverflowDivider/OverflowDivider.js.map +1 -1
  4. package/lib/components/OverflowDivider/OverflowDivider.types.js.map +1 -1
  5. package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
  6. package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
  7. package/lib/components/OverflowItem/index.js.map +1 -1
  8. package/lib/constants.js.map +1 -1
  9. package/lib/index.js.map +1 -1
  10. package/lib/overflowContext.js.map +1 -1
  11. package/lib/types.js.map +1 -1
  12. package/lib/useIsOverflowGroupVisible.js.map +1 -1
  13. package/lib/useIsOverflowItemVisible.js.map +1 -1
  14. package/lib/useOverflowContainer.js.map +1 -1
  15. package/lib/useOverflowCount.js.map +1 -1
  16. package/lib/useOverflowDivider.js.map +1 -1
  17. package/lib/useOverflowItem.js.map +1 -1
  18. package/lib/useOverflowMenu.js.map +1 -1
  19. package/lib/useOverflowVisibility.js.map +1 -1
  20. package/lib-commonjs/components/Overflow.js.map +1 -1
  21. package/lib-commonjs/components/OverflowDivider/OverflowDivider.js.map +1 -1
  22. package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js.map +1 -1
  23. package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
  24. package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
  25. package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
  26. package/lib-commonjs/components/useOverflowStyles.styles.js.map +1 -1
  27. package/lib-commonjs/constants.js +3 -3
  28. package/lib-commonjs/constants.js.map +1 -1
  29. package/lib-commonjs/index.js +17 -17
  30. package/lib-commonjs/index.js.map +1 -1
  31. package/lib-commonjs/overflowContext.js.map +1 -1
  32. package/lib-commonjs/types.js.map +1 -1
  33. package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
  34. package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
  35. package/lib-commonjs/useOverflowContainer.js +3 -3
  36. package/lib-commonjs/useOverflowContainer.js.map +1 -1
  37. package/lib-commonjs/useOverflowCount.js.map +1 -1
  38. package/lib-commonjs/useOverflowDivider.js.map +1 -1
  39. package/lib-commonjs/useOverflowItem.js.map +1 -1
  40. package/lib-commonjs/useOverflowMenu.js.map +1 -1
  41. package/lib-commonjs/useOverflowVisibility.js.map +1 -1
  42. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,33 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Mon, 17 Jun 2024 07:31:08 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 15 Jul 2024 17:20:22 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.24)
8
+
9
+ Mon, 15 Jul 2024 17:20:22 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.23..@fluentui/react-overflow_v9.1.24)
11
+
12
+ ### Patches
13
+
14
+ - fix: revert incorectly set npm versions in all packages ([PR #31937](https://github.com/microsoft/fluentui/pull/31937) by martinhochel@microsoft.com)
15
+ - Bump @fluentui/react-context-selector to v9.1.64 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.18.12 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
17
+
18
+ ## [9.1.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.23)
19
+
20
+ Mon, 01 Jul 2024 20:30:54 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.22..@fluentui/react-overflow_v9.1.23)
22
+
23
+ ### Patches
24
+
25
+ - Bump @fluentui/react-context-selector to v9.1.63 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
26
+ - Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
27
+
7
28
  ## [9.1.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.22)
8
29
 
9
- Mon, 17 Jun 2024 07:31:08 GMT
30
+ Mon, 17 Jun 2024 07:34:17 GMT
10
31
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.21..@fluentui/react-overflow_v9.1.22)
11
32
 
12
33
  ### Patches
@@ -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"],"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":["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 +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"],"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":["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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
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 +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"],"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":["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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
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 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB"}
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 +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"],"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":["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"],"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":["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 +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"],"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":["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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
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 +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"],"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":["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"],"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":["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 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 }, [overflowOptions, firstMount]);\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"],"mappings":"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"}
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 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 }, [overflowOptions, firstMount]);\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 +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"],"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":["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"],"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":["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"],"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":["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"],"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":["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"],"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":["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 +1 @@
1
- {"version":3,"sources":["Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const styles = useOverflowStyles();\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n const [overflowState, setOverflowState] = React.useState({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {}\n });\n // useOverflowContainer wraps this method in a useEventCallback.\n const update = (data)=>{\n const { visibleItems, invisibleItems, groupVisibility } = data;\n const itemVisibility = {};\n visibleItems.forEach((item)=>{\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach((x)=>itemVisibility[x.id] = false);\n setOverflowState(()=>{\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility\n };\n });\n };\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute\n });\n const child = getTriggerChild(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider\n }\n }, clonedChild);\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","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"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;wBACM;gCAC+C;iCAC5C;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/D,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC;QACZ,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAC1D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC;YAClBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC9B;QACAH,eAAeC,OAAO,CAAC,CAACG,IAAIT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACnDX,iBAAiB;YACb,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0CAAoB,EAACd,QAAQ;QACvHR;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,QAAQC,IAAAA,+BAAe,EAAC7B;IAC9B,MAAM8B,cAAcC,IAAAA,2CAA2B,EAAC/B,UAAU;QACtDH,KAAKmC,IAAAA,6BAAa,EAACZ,cAAcvB,KAAK+B,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAM/B,GAAG;QAC7FoC,WAAWC,IAAAA,oBAAY,EAAC,gBAAgBpC,OAAOqC,YAAY,EAAErC,OAAOsC,gBAAgB,EAAEpC,SAASJ,KAAK,CAACqC,SAAS;IAClH;IACA,OAAO,WAAW,GAAGvC,OAAM2C,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAC/DC,OAAO;YACH/B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACJ;IACJ,GAAGM;AACP"}
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 +1 @@
1
- {"version":3,"sources":["OverflowDivider.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */ export const OverflowDivider = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const { groupId, children } = props;\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"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;gCACoC;oCACxB;AAIxB,MAAMA,kBAAkB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACtE,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAC9B,MAAMI,eAAeC,IAAAA,sCAAkB,EAACH;IACxC,OAAOI,IAAAA,2CAA2B,EAACH,UAAU;QACzCF,KAAKM,IAAAA,6BAAa,EAACH,cAAcH;IACrC;AACJ"}
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 +1 @@
1
- {"version":3,"sources":["OverflowDivider.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}
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 +1 @@
1
- {"version":3,"sources":["OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\n */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const { id, groupId, priority, children } = props;\n const containerRef = useOverflowItem(id, priority, groupId);\n const child = getTriggerChild(children);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref)\n });\n});\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\nOverflowItem.isFluentTriggerComponent = true;\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","child","getTriggerChild","applyTriggerPropsToChildren","useMergedRefs","isFluentTriggerComponent"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;gCACqD;iCAC5C;AAMrB,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAC5C,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,MAAMK,QAAQC,IAAAA,+BAAe,EAACJ;IAC9B,OAAOK,IAAAA,2CAA2B,EAACL,UAAU;QACzCJ,KAAKU,IAAAA,6BAAa,EAACL,cAAcL,KAAKO,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMP,GAAG;IACjG;AACJ;AACA,6FAA6F;AAC7FJ,aAAae,wBAAwB,GAAG"}
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 +1 @@
1
- {"version":3,"sources":["OverflowItem.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}
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 +1 @@
1
- {"version":3,"sources":["index.js"],"sourcesContent":["export { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":";;;;+BAASA;;;eAAAA,0BAAY;;;8BAAQ"}
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 +1 @@
1
- {"version":3,"sources":["useOverflowStyles.styles.js"],"sourcesContent":["import { __styles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = /*#__PURE__*/__styles({\n overflowMenu: {\n Brvla84: \"fyfkpbf\"\n },\n overflowingItems: {\n zb22lx: \"f10570jf\"\n }\n}, {\n d: [\".fyfkpbf [data-overflow-menu]{flex-shrink:0;}\", \".f10570jf [data-overflowing]{display:none;}\"]\n});\n//# sourceMappingURL=useOverflowStyles.styles.js.map"],"names":["useOverflowStyles","__styles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"mappings":";;;;+BAEaA;;;eAAAA;;;uBAFY;AAElB,MAAMA,oBAAoB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACrDC,cAAc;QACZC,SAAS;IACX;IACAC,kBAAkB;QAChBC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAiD;KAA8C;AACrG,IACA,oDAAoD"}
1
+ {"version":3,"sources":["useOverflowStyles.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\n"],"names":["useOverflowStyles","__styles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;uBAFc;AAEpB,MAAMA,oBAAiB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,cAAA;QAAAC,SAAA;IAAA;IAAAC,kBAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA"}
@@ -12,14 +12,14 @@ _export(exports, {
12
12
  DATA_OVERFLOWING: function() {
13
13
  return DATA_OVERFLOWING;
14
14
  },
15
+ DATA_OVERFLOW_DIVIDER: function() {
16
+ return DATA_OVERFLOW_DIVIDER;
17
+ },
15
18
  DATA_OVERFLOW_ITEM: function() {
16
19
  return DATA_OVERFLOW_ITEM;
17
20
  },
18
21
  DATA_OVERFLOW_MENU: function() {
19
22
  return DATA_OVERFLOW_MENU;
20
- },
21
- DATA_OVERFLOW_DIVIDER: function() {
22
- return DATA_OVERFLOW_DIVIDER;
23
23
  }
24
24
  });
25
25
  const DATA_OVERFLOWING = 'data-overflowing';
@@ -1 +1 @@
1
- {"version":3,"sources":["constants.js"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER"],"mappings":";;;;;;;;;;;IAAaA,gBAAgB;eAAhBA;;IACAC,kBAAkB;eAAlBA;;IACAC,kBAAkB;eAAlBA;;IACAC,qBAAqB;eAArBA;;;AAHN,MAAMH,mBAAmB;AACzB,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAC3B,MAAMC,wBAAwB"}
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"}
@@ -9,20 +9,26 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
- Overflow: function() {
13
- return _Overflow.Overflow;
14
- },
15
12
  DATA_OVERFLOWING: function() {
16
13
  return _constants.DATA_OVERFLOWING;
17
14
  },
15
+ DATA_OVERFLOW_DIVIDER: function() {
16
+ return _constants.DATA_OVERFLOW_DIVIDER;
17
+ },
18
18
  DATA_OVERFLOW_ITEM: function() {
19
19
  return _constants.DATA_OVERFLOW_ITEM;
20
20
  },
21
21
  DATA_OVERFLOW_MENU: function() {
22
22
  return _constants.DATA_OVERFLOW_MENU;
23
23
  },
24
- DATA_OVERFLOW_DIVIDER: function() {
25
- return _constants.DATA_OVERFLOW_DIVIDER;
24
+ Overflow: function() {
25
+ return _Overflow.Overflow;
26
+ },
27
+ OverflowDivider: function() {
28
+ return _OverflowDivider.OverflowDivider;
29
+ },
30
+ OverflowItem: function() {
31
+ return _OverflowItem.OverflowItem;
26
32
  },
27
33
  useIsOverflowGroupVisible: function() {
28
34
  return _useIsOverflowGroupVisible.useIsOverflowGroupVisible;
@@ -33,29 +39,23 @@ _export(exports, {
33
39
  useOverflowContainer: function() {
34
40
  return _useOverflowContainer.useOverflowContainer;
35
41
  },
42
+ useOverflowContext: function() {
43
+ return _overflowContext.useOverflowContext;
44
+ },
36
45
  useOverflowCount: function() {
37
46
  return _useOverflowCount.useOverflowCount;
38
47
  },
48
+ useOverflowDivider: function() {
49
+ return _useOverflowDivider.useOverflowDivider;
50
+ },
39
51
  useOverflowItem: function() {
40
52
  return _useOverflowItem.useOverflowItem;
41
53
  },
42
54
  useOverflowMenu: function() {
43
55
  return _useOverflowMenu.useOverflowMenu;
44
56
  },
45
- useOverflowDivider: function() {
46
- return _useOverflowDivider.useOverflowDivider;
47
- },
48
57
  useOverflowVisibility: function() {
49
58
  return _useOverflowVisibility.useOverflowVisibility;
50
- },
51
- useOverflowContext: function() {
52
- return _overflowContext.useOverflowContext;
53
- },
54
- OverflowItem: function() {
55
- return _OverflowItem.OverflowItem;
56
- },
57
- OverflowDivider: function() {
58
- return _OverflowDivider.OverflowDivider;
59
59
  }
60
60
  });
61
61
  const _Overflow = require("./components/Overflow");
@@ -1 +1 @@
1
- {"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IACRC,gBAAgB;eAAhBA,2BAAgB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAC/EC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IACpBC,gBAAgB;eAAhBA,kCAAgB;;IAChBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IACfC,kBAAkB;eAAlBA,sCAAkB;;IAClBC,qBAAqB;eAArBA,4CAAqB;;IACrBC,kBAAkB;eAAlBA,mCAAkB;;IAClBC,YAAY;eAAZA,0BAAY;;IACZC,eAAe;eAAfA,gCAAe;;;0BAZC;2BACuE;2CACtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;uCACG;iCACH;8BACN;iCACG"}
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 +1 @@
1
- {"version":3,"sources":["overflowContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nexport const OverflowContext = createContext(undefined);\nconst overflowContextDefaultValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: ()=>()=>null,\n updateOverflow: ()=>null,\n registerOverflowMenu: ()=>()=>null,\n registerDivider: ()=>()=>null\n};\n/**\n * @internal\n */ export const useOverflowContext = (selector)=>useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));\n"],"names":["OverflowContext","useOverflowContext","createContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,eAAe;eAAfA;;IAYIC,kBAAkB;eAAlBA;;;sCAbiC;AAC3C,MAAMD,kBAAkBE,IAAAA,mCAAa,EAACC;AAC7C,MAAMC,8BAA8B;IAChCC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAI,IAAI;IACtBC,gBAAgB,IAAI;IACpBC,sBAAsB,IAAI,IAAI;IAC9BC,iBAAiB,IAAI,IAAI;AAC7B;AAGW,MAAMV,qBAAqB,CAACW,WAAWC,IAAAA,wCAAkB,EAACb,iBAAiB,CAACc,MAAMV,2BAA2B,GAAGQ,SAASE"}
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 +1 @@
1
- {"version":3,"sources":["types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}
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 +1 @@
1
- {"version":3,"sources":["useIsOverflowGroupVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */ export function useIsOverflowGroupVisible(id) {\n return useOverflowContext((ctx)=>ctx.groupVisibility[id]);\n}\n"],"names":["useIsOverflowGroupVisible","id","useOverflowContext","ctx","groupVisibility"],"mappings":";;;;+BAIoBA;;;eAAAA;;;iCAJe;AAIxB,SAASA,0BAA0BC,EAAE;IAC5C,OAAOC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,eAAe,CAACH,GAAG;AAC5D"}
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 +1 @@
1
- {"version":3,"sources":["useIsOverflowItemVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */ export function useIsOverflowItemVisible(id) {\n return !!useOverflowContext((ctx)=>ctx.itemVisibility[id]);\n}\n"],"names":["useIsOverflowItemVisible","id","useOverflowContext","ctx","itemVisibility"],"mappings":";;;;+BAIoBA;;;eAAAA;;;iCAJe;AAIxB,SAASA,yBAAyBC,EAAE;IAC3C,OAAO,CAAC,CAACC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,cAAc,CAACH,GAAG;AAC7D"}
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"}
@@ -9,11 +9,11 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
- useOverflowContainer: function() {
13
- return useOverflowContainer;
14
- },
15
12
  updateVisibilityAttribute: function() {
16
13
  return updateVisibilityAttribute;
14
+ },
15
+ useOverflowContainer: function() {
16
+ return useOverflowContainer;
17
17
  }
18
18
  });
19
19
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nconst noop = ()=>null;\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */ export const useOverflowContainer = (update, options)=>{\n const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;\n const onUpdateOverflow = useEventCallback(update);\n const overflowOptions = React.useMemo(()=>({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow\n }), [\n minimumVisible,\n onUpdateItemVisibility,\n overflowAxis,\n overflowDirection,\n padding,\n onUpdateOverflow\n ]);\n const firstMount = useFirstMount();\n // DOM ref to the overflow container element\n const containerRef = React.useRef(null);\n const [overflowManager, setOverflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);\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 === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);\n }\n }, [\n firstMount,\n overflowManager,\n overflowOptions\n ]);\n useIsomorphicLayoutEffect(()=>{\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n }, [\n overflowOptions,\n firstMount\n ]);\n /* Clean up overflow manager on unmount */ React.useEffect(()=>()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.disconnect();\n }, [\n overflowManager\n ]);\n const registerItem = React.useCallback((item)=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n return ()=>{\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);\n };\n }, [\n overflowManager\n ]);\n const registerDivider = React.useCallback((divider)=>{\n const el = divider.element;\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n return ()=>{\n divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, [\n overflowManager\n ]);\n const registerOverflowMenu = React.useCallback((el)=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n return ()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }, [\n overflowManager\n ]);\n const updateOverflow = React.useCallback(()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\n }, [\n overflowManager\n ]);\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef\n };\n};\nexport const updateVisibilityAttribute = ({ item, visible })=>{\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["useOverflowContainer","updateVisibilityAttribute","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"],"mappings":";;;;;;;;;;;IAUiBA,oBAAoB;eAApBA;;IA6FJC,yBAAyB;eAAzBA;;;;iEAvGU;kCACe;gCACgD;2BACU;AAChG,MAAMC,OAAO,IAAI;AAMN,MAAMF,uBAAuB,CAACG,QAAQC;IAC7C,MAAM,EAAEC,eAAe,YAAY,EAAEC,oBAAoB,KAAK,EAAEC,UAAU,EAAE,EAAEC,iBAAiB,CAAC,EAAEC,yBAAyBP,IAAI,EAAE,GAAGE;IACpI,MAAMM,mBAAmBC,IAAAA,gCAAgB,EAACR;IAC1C,MAAMS,kBAAkBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACnCT;YACAC;YACAC;YACAC;YACAC;YACAC;QACJ,CAAA,GAAI;QACJF;QACAC;QACAJ;QACAC;QACAC;QACAG;KACH;IACD,MAAMK,aAAaC,IAAAA,6BAAa;IAChC,4CAA4C;IAC5C,MAAMC,eAAeJ,OAAMK,MAAM,CAAC;IAClC,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGP,OAAMQ,QAAQ,CAAC,IAAIC,IAAAA,yBAAS,MAAKC,IAAAA,uCAAqB,MAAK;IACzG,8EAA8E;IAC9EC,IAAAA,yCAAyB,EAAC;QACtB,IAAIT,cAAcE,aAAaQ,OAAO,EAAE;YACpCN,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBO,OAAO,CAACT,aAAaQ,OAAO,EAAEb;QACpH;IACJ,GAAG;QACCG;QACAI;QACAP;KACH;IACDY,IAAAA,yCAAyB,EAAC;QACtB,IAAI,CAACP,aAAaQ,OAAO,IAAI,CAACH,IAAAA,yBAAS,OAAMP,YAAY;YACrD;QACJ;QACA,MAAMY,qBAAqBJ,IAAAA,uCAAqB;QAChDI,mBAAmBD,OAAO,CAACT,aAAaQ,OAAO,EAAEb;QACjDQ,mBAAmBO;IACvB,GAAG;QACCf;QACAG;KACH;IACD,wCAAwC,GAAGF,OAAMe,SAAS,CAAC,IAAI;YACvDT,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBU,UAAU;QAChG,GAAG;QACHV;KACH;IACD,MAAMW,eAAejB,OAAMkB,WAAW,CAAC,CAACC;QACpCb,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBc,OAAO,CAACD;QAC1FA,KAAKE,OAAO,CAACC,YAAY,CAACC,6BAAkB,EAAE;QAC9C,OAAO;YACHJ,KAAKE,OAAO,CAACG,eAAe,CAACC,2BAAgB;YAC7CN,KAAKE,OAAO,CAACG,eAAe,CAACD,6BAAkB;YAC/CjB,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBoB,UAAU,CAACP,KAAKQ,EAAE;QACxG;IACJ,GAAG;QACCrB;KACH;IACD,MAAMsB,kBAAkB5B,OAAMkB,WAAW,CAAC,CAACW;QACvC,MAAMC,KAAKD,QAAQR,OAAO;QAC1Bf,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgByB,UAAU,CAACF;QAC7FC,GAAGR,YAAY,CAACU,gCAAqB,EAAE;QACvC,OAAO;YACHH,QAAQI,OAAO,IAAK3B,CAAAA,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgB4B,aAAa,CAACL,QAAQI,OAAO,CAAA;YACnIH,GAAGN,eAAe,CAACQ,gCAAqB;QAC5C;IACJ,GAAG;QACC1B;KACH;IACD,MAAM6B,uBAAuBnC,OAAMkB,WAAW,CAAC,CAACY;QAC5CxB,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgB8B,eAAe,CAACN;QAClGA,GAAGR,YAAY,CAACe,6BAAkB,EAAE;QACpC,OAAO;YACH/B,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBgC,kBAAkB;YACpGR,GAAGN,eAAe,CAACa,6BAAkB;QACzC;IACJ,GAAG;QACC/B;KACH;IACD,MAAMiC,iBAAiBvC,OAAMkB,WAAW,CAAC;QACrCZ,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBhB,MAAM;IAC5F,GAAG;QACCgB;KACH;IACD,OAAO;QACHW;QACAW;QACAO;QACAI;QACAnC;IACJ;AACJ;AACO,MAAMhB,4BAA4B,CAAC,EAAE+B,IAAI,EAAEqB,OAAO,EAAE;IACvD,IAAIA,SAAS;QACTrB,KAAKE,OAAO,CAACG,eAAe,CAACC,2BAAgB;IACjD,OAAO;QACHN,KAAKE,OAAO,CAACC,YAAY,CAACG,2BAAgB,EAAE;IAChD;AACJ"}
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 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 }, [overflowOptions, firstMount]);\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.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @returns Number of items that are overflowing\n */ export const useOverflowCount = ()=>useOverflowContext((v)=>{\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{\n if (!visible) {\n acc++;\n }\n return acc;\n }, 0);\n });\n"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":";;;;+BAGiBA;;;eAAAA;;;iCAHkB;AAGxB,MAAMA,mBAAmB,IAAIC,IAAAA,mCAAkB,EAAC,CAACC;QACpD,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAC9D,IAAI,CAACA,SAAS;gBACVF;YACJ;YACA,OAAOA;QACX,GAAG;IACP"}
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 +1 @@
1
- {"version":3,"sources":["useOverflowDivider.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n/**\n * @internal\n * Registers an overflow item\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */ export function useOverflowDivider(groupId) {\n const ref = React.useRef(null);\n const registerDivider = useOverflowContext((v)=>v.registerDivider);\n useIsomorphicLayoutEffect(()=>{\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId\n });\n }\n }, [\n registerDivider,\n groupId\n ]);\n return ref;\n}\n"],"names":["useOverflowDivider","groupId","ref","React","useRef","registerDivider","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACmB;iCACP;AAMxB,SAASA,mBAAmBC,OAAO;IAC1C,MAAMC,MAAMC,OAAMC,MAAM,CAAC;IACzB,MAAMC,kBAAkBC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,eAAe;IACjEG,IAAAA,yCAAyB,EAAC;QACtB,IAAIN,IAAIO,OAAO,IAAIR,SAAS;YACxB,OAAOI,gBAAgB;gBACnBK,SAASR,IAAIO,OAAO;gBACpBR;YACJ;QACJ;IACJ,GAAG;QACCI;QACAJ;KACH;IACD,OAAOC;AACX"}
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 +1 @@
1
- {"version":3,"sources":["useOverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */ export function useOverflowItem(id, priority, groupId) {\n const ref = React.useRef(null);\n const registerItem = useOverflowContext((v)=>v.registerItem);\n useIsomorphicLayoutEffect(()=>{\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority !== null && priority !== void 0 ? priority : 0,\n groupId\n });\n }\n }, [\n id,\n priority,\n registerItem,\n groupId\n ]);\n return ref;\n}\n"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAUoBA;;;eAAAA;;;;iEAVG;gCACmB;iCACP;AAQxB,SAASA,gBAAgBC,EAAE,EAAEC,QAAQ,EAAEC,OAAO;IACrD,MAAMC,MAAMC,OAAMC,MAAM,CAAC;IACzB,MAAMC,eAAeC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,YAAY;IAC3DG,IAAAA,yCAAyB,EAAC;QACtB,IAAIN,IAAIO,OAAO,EAAE;YACb,OAAOJ,aAAa;gBAChBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAa,QAAQA,aAAa,KAAK,IAAIA,WAAW;gBAChEC;YACJ;QACJ;IACJ,GAAG;QACCF;QACAC;QACAK;QACAJ;KACH;IACD,OAAOC;AACX"}
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 +1 @@
1
- {"version":3,"sources":["useOverflowMenu.js"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nexport function useOverflowMenu(id) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext((v)=>v.registerOverflowMenu);\n const updateOverflow = useOverflowContext((v)=>v.updateOverflow);\n const ref = React.useRef(null);\n const isOverflowing = overflowCount > 0;\n useIsomorphicLayoutEffect(()=>{\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [\n registerOverflowMenu,\n isOverflowing,\n elementId\n ]);\n useIsomorphicLayoutEffect(()=>{\n if (isOverflowing) {\n updateOverflow();\n }\n }, [\n isOverflowing,\n updateOverflow,\n ref\n ]);\n return {\n ref,\n overflowCount,\n isOverflowing\n };\n}\n"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;gCAC0B;iCACd;kCACF;AAC1B,SAASA,gBAAgBC,EAAE;IAC9B,MAAMC,YAAYC,IAAAA,qBAAK,EAAC,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAgB;IACtC,MAAMC,uBAAuBC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAC;IACzB,MAAMC,gBAAgBT,gBAAgB;IACtCU,IAAAA,yCAAyB,EAAC;QACtB,IAAIJ,IAAIK,OAAO,EAAE;YACb,OAAOT,qBAAqBI,IAAIK,OAAO;QAC3C;IACJ,GAAG;QACCT;QACAO;QACAX;KACH;IACDY,IAAAA,yCAAyB,EAAC;QACtB,IAAID,eAAe;YACfJ;QACJ;IACJ,GAAG;QACCI;QACAJ;QACAC;KACH;IACD,OAAO;QACHA;QACAN;QACAS;IACJ;AACJ"}
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 +1 @@
1
- {"version":3,"sources":["useOverflowVisibility.js"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\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 */ export function useOverflowVisibility() {\n const itemVisibility = useOverflowContext((ctx)=>ctx.itemVisibility);\n const groupVisibility = useOverflowContext((ctx)=>ctx.groupVisibility);\n return React.useMemo(()=>({\n itemVisibility,\n groupVisibility\n }), [\n itemVisibility,\n groupVisibility\n ]);\n}\n"],"names":["useOverflowVisibility","itemVisibility","useOverflowContext","ctx","groupVisibility","React","useMemo"],"mappings":";;;;+BAUoBA;;;eAAAA;;;;iEAVG;iCACY;AASxB,SAASA;IAChB,MAAMC,iBAAiBC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIF,cAAc;IACnE,MAAMG,kBAAkBF,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,eAAe;IACrE,OAAOC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClBL;YACAG;QACJ,CAAA,GAAI;QACJH;QACAG;KACH;AACL"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-overflow",
3
- "version": "9.1.22",
3
+ "version": "9.1.24",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -36,9 +36,9 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@fluentui/priority-overflow": "^9.1.13",
39
- "@fluentui/react-context-selector": "^9.1.62",
39
+ "@fluentui/react-context-selector": "^9.1.64",
40
40
  "@fluentui/react-theme": "^9.1.19",
41
- "@fluentui/react-utilities": "^9.18.10",
41
+ "@fluentui/react-utilities": "^9.18.12",
42
42
  "@griffel/react": "^1.5.22",
43
43
  "@swc/helpers": "^0.5.1"
44
44
  },