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