@fluentui/react-overflow 9.5.4 → 9.5.6
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 +28 -2
- package/dist/index.d.ts +6 -6
- package/lib/components/Overflow.js +3 -3
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js +2 -2
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib/overflowContext.js.map +1 -1
- package/lib/types.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 +2 -2
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.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 +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 08 Sep 2025 12:41:52 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.5.6)
|
|
8
|
+
|
|
9
|
+
Mon, 08 Sep 2025 12:41:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.5.5..@fluentui/react-overflow_v9.5.6)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
|
|
16
|
+
- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
|
|
17
|
+
- Bump @fluentui/priority-overflow to v9.1.16 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
|
|
18
|
+
- Bump @fluentui/react-context-selector to v9.2.7 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.5.5)
|
|
22
|
+
|
|
23
|
+
Thu, 21 Aug 2025 12:25:15 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.5.4..@fluentui/react-overflow_v9.5.5)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- fix: replace deprecated element.ref usages to support react 19 ([PR #35030](https://github.com/microsoft/fluentui/pull/35030) by dmytrokirpa@microsoft.com)
|
|
29
|
+
- indirect ts emit change with exactOptionalPropertyTypes ([PR #33498](https://github.com/microsoft/fluentui/pull/33498) by vgenaev@gmail.com)
|
|
30
|
+
- Bump @fluentui/react-context-selector to v9.2.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
|
|
32
|
+
|
|
7
33
|
## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.5.4)
|
|
8
34
|
|
|
9
|
-
Thu, 07 Aug 2025
|
|
35
|
+
Thu, 07 Aug 2025 10:03:33 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.5.3..@fluentui/react-overflow_v9.5.4)
|
|
11
37
|
|
|
12
38
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export declare interface OnOverflowChangeData extends OverflowState {
|
|
|
22
22
|
*/
|
|
23
23
|
export declare const Overflow: React_2.ForwardRefExoticComponent<Partial<Pick<ObserveOptions, "padding" | "overflowDirection" | "overflowAxis" | "minimumVisible">> & {
|
|
24
24
|
children: React_2.ReactElement;
|
|
25
|
-
onOverflowChange?: (
|
|
25
|
+
onOverflowChange?: (ev: null, data: OverflowState) => void;
|
|
26
26
|
} & React_2.RefAttributes<unknown>>;
|
|
27
27
|
|
|
28
28
|
/**
|
|
@@ -120,7 +120,7 @@ export declare function useIsOverflowItemVisible(id: string): boolean;
|
|
|
120
120
|
* @param options - Options to configure the overflow container
|
|
121
121
|
* @returns - ref to attach to an intrinsic HTML element and imperative functions
|
|
122
122
|
*/
|
|
123
|
-
export declare const useOverflowContainer: <TElement extends HTMLElement>(update: OnUpdateOverflow, options: Omit<ObserveOptions,
|
|
123
|
+
export declare const useOverflowContainer: <TElement extends HTMLElement>(update: OnUpdateOverflow, options: Omit<ObserveOptions, "onUpdateOverflow">) => UseOverflowContainerReturn<TElement>;
|
|
124
124
|
|
|
125
125
|
/**
|
|
126
126
|
* @internal
|
|
@@ -129,7 +129,7 @@ export declare interface UseOverflowContainerReturn<TElement extends HTMLElement
|
|
|
129
129
|
/**
|
|
130
130
|
* Ref to apply to the container that will overflow
|
|
131
131
|
*/
|
|
132
|
-
containerRef: React_2.RefObject<TElement>;
|
|
132
|
+
containerRef: React_2.RefObject<TElement | null>;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
/**
|
|
@@ -148,7 +148,7 @@ export declare const useOverflowCount: () => number;
|
|
|
148
148
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
|
149
149
|
* @returns ref to assign to an intrinsic HTML element
|
|
150
150
|
*/
|
|
151
|
-
export declare function useOverflowDivider<TElement extends HTMLElement>(groupId?: string): React_2.RefObject<TElement>;
|
|
151
|
+
export declare function useOverflowDivider<TElement extends HTMLElement>(groupId?: string): React_2.RefObject<TElement | null>;
|
|
152
152
|
|
|
153
153
|
/**
|
|
154
154
|
* @internal
|
|
@@ -158,10 +158,10 @@ export declare function useOverflowDivider<TElement extends HTMLElement>(groupId
|
|
|
158
158
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
|
159
159
|
* @returns ref to assign to an intrinsic HTML element
|
|
160
160
|
*/
|
|
161
|
-
export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string): React_2.RefObject<TElement>;
|
|
161
|
+
export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string): React_2.RefObject<TElement | null>;
|
|
162
162
|
|
|
163
163
|
export declare function useOverflowMenu<TElement extends HTMLElement>(id?: string): {
|
|
164
|
-
ref: React_2.
|
|
164
|
+
ref: React_2.MutableRefObject<TElement | null>;
|
|
165
165
|
overflowCount: number;
|
|
166
166
|
isOverflowing: boolean;
|
|
167
167
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { mergeClasses } from '@griffel/react';
|
|
3
|
-
import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
|
+
import { applyTriggerPropsToChildren, getTriggerChild, getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
4
|
import { OverflowContext } from '../overflowContext';
|
|
5
5
|
import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
|
|
6
6
|
import { useOverflowStyles } from './useOverflowStyles.styles';
|
|
@@ -41,8 +41,8 @@ import { useOverflowStyles } from './useOverflowStyles.styles';
|
|
|
41
41
|
});
|
|
42
42
|
const child = getTriggerChild(children);
|
|
43
43
|
const clonedChild = applyTriggerPropsToChildren(children, {
|
|
44
|
-
ref: useMergedRefs(containerRef, ref, child
|
|
45
|
-
className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems,
|
|
44
|
+
ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),
|
|
45
|
+
className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className)
|
|
46
46
|
});
|
|
47
47
|
return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {
|
|
48
48
|
value: {
|
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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 {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n useMergedRefs,\n} 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<HTMLElement>(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.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","getReactElementRef","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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SACEC,2BAA2B,EAC3BC,eAAe,EACfC,kBAAkB,EAClBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAuB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWV,MAAMW,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,GAAGtB,MAAMuB,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,QAAQxC,gBAA6BY;IAC3C,MAAM6B,cAAc1C,4BAA4Ba,UAAU;QACxDF,KAAKR,cAAcgC,cAAcxB,KAAKT,mBAAmBuC;QACzDE,WAAW5C,aAAa,gBAAgBa,OAAOgC,YAAY,EAAEhC,OAAOiC,gBAAgB,EAAEJ,kBAAAA,4BAAAA,MAAO/B,KAAK,CAACiC,SAAS;IAC9G;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,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
|
|
2
|
+
import { applyTriggerPropsToChildren, getReactElementRef, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useOverflowItem } from '../../useOverflowItem';
|
|
4
4
|
/**
|
|
5
5
|
* Attaches overflow item behavior to its child registered with the OverflowContext.
|
|
@@ -11,7 +11,7 @@ import { useOverflowItem } from '../../useOverflowItem';
|
|
|
11
11
|
const containerRef = useOverflowItem(id, priority, groupId);
|
|
12
12
|
const child = getTriggerChild(children);
|
|
13
13
|
return applyTriggerPropsToChildren(children, {
|
|
14
|
-
ref: useMergedRefs(containerRef, ref, child
|
|
14
|
+
ref: useMergedRefs(containerRef, ref, getReactElementRef(child))
|
|
15
15
|
});
|
|
16
16
|
});
|
|
17
17
|
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
|
@@ -1 +1 @@
|
|
|
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
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getReactElementRef,\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, getReactElementRef(child)),\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","getReactElementRef","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAC3BC,kBAAkB,EAElBC,eAAe,EACfC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeN,MAAMO,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,OAAOZ,4BAA4BY,UAAU;QAC3CJ,KAAKL,cAAcU,cAAcL,KAAKP,mBAAmBa;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FT,aAAwCU,wBAAwB,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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>(\n selector: ContextSelector<OverflowContextValue, SelectedValue>,\n): SelectedValue => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContext","selector","ctx"],"mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB,mCAAmC;AAe/G,OAAO,MAAMC,kBAAkBF,cAC7BG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAM,IAAM;IAC1BC,gBAAgB,IAAM;IACtBC,sBAAsB,IAAM,IAAM;IAClCC,iBAAiB,IAAM,IAAM;AAC/B;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,WACkBZ,mBAAmBC,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
|
package/lib/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"],"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 | null>;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
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"],"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 = (): number =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,mBAAmBE,CAAAA;QACjB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAChE,IAAI,CAACA,SAAS;gBACZF;YACF;YAEA,OAAOA;QACT,GAAG;IACL,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
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"],"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,
|
|
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): React.RefObject<TElement | null> {\n const ref = React.useRef<TElement | null>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowDivider","groupId","ref","useRef","registerDivider","v","current","element"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;CAKC,GACD,OAAO,SAASC,mBAAiDC,OAAgB;IAC/E,MAAMC,MAAML,MAAMM,MAAM,CAAkB;IAC1C,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":["../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
|
|
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>(\n id: string,\n priority?: number,\n groupId?: string,\n): React.RefObject<TElement | null> {\n const ref = React.useRef<TElement | null>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;CAOC,GACD,OAAO,SAASC,gBACdC,EAAU,EACVC,QAAiB,EACjBC,OAAgB;IAEhB,MAAMC,MAAMP,MAAMQ,MAAM,CAAkB;IAC1C,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":["../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"],"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,
|
|
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>(\n id?: string,\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\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>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC,gBACdC,EAAW;IAEX,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,CAAkB;IAC1C,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":["../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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;CAQC,GACD,OAAO,SAASC;
|
|
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 itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, import('@fluentui/priority-overflow').OverflowGroupState>;\n} {\n const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["React","useOverflowContext","useOverflowVisibility","itemVisibility","ctx","groupVisibility","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;CAQC,GACD,OAAO,SAASC;IAId,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"}
|
|
@@ -50,8 +50,8 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
50
50
|
});
|
|
51
51
|
const child = (0, _reactutilities.getTriggerChild)(children);
|
|
52
52
|
const clonedChild = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
|
|
53
|
-
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref,
|
|
54
|
-
className: (0, _react1.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems,
|
|
53
|
+
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, (0, _reactutilities.getReactElementRef)(child)),
|
|
54
|
+
className: (0, _react1.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className)
|
|
55
55
|
});
|
|
56
56
|
return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
|
|
57
57
|
value: {
|
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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 {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n useMergedRefs,\n} 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<HTMLElement>(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.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","getReactElementRef","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"],"mappings":";;;;+BAsCaU;;;;;;;iEAtCU,QAAQ;wBACF,iBAAiB;gCAOvC,4BAA4B;iCAEH,qBAAqB;sCACW,0BAA0B;yCACxD,6BAA6B;AA0BxD,iBAAMA,WAAAA,GAAWV,OAAMW,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,aAASL,0CAAAA;IAEf,MAAM,EAAEM,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAEC,gBAAgB,EAAE,GAAGR;IAEhH,MAAM,CAACS,eAAeC,iBAAiB,GAAGtB,OAAMuB,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,OAAGjC,0CAAAA,EAC5FmB,QACA;QACET;QACAD;QACAE;QACAH;QACA0B,wBAAwBnC,+CAAAA;IAC1B;IAGF,MAAMoC,YAAQxC,+BAAAA,EAA6BY;IAC3C,MAAM6B,kBAAc1C,2CAAAA,EAA4Ba,UAAU;QACxDF,SAAKR,6BAAAA,EAAcgC,cAAcxB,SAAKT,kCAAAA,EAAmBuC;QACzDE,eAAW5C,oBAAAA,EAAa,gBAAgBa,OAAOgC,YAAY,EAAEhC,OAAOiC,gBAAgB,EAAEJ,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAO/B,KAAK,CAACiC,SAAS;IAC9G;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACvC,gCAAAA,CAAgB0C,QAAQ,EAAA;QACvBC,OAAO;YACLxB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCc;YACAC;YACAC;YACAC;QACF;OAECG;AAGP,GAAG"}
|
|
@@ -17,7 +17,7 @@ const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
17
17
|
const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId);
|
|
18
18
|
const child = (0, _reactutilities.getTriggerChild)(children);
|
|
19
19
|
return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
|
|
20
|
-
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref,
|
|
20
|
+
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, (0, _reactutilities.getReactElementRef)(child))
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
23
|
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
|
@@ -1 +1 @@
|
|
|
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
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getReactElementRef,\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, getReactElementRef(child)),\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","getReactElementRef","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef","child","isFluentTriggerComponent"],"mappings":";;;;+BAiBaM;;;;;;;iEAjBU,QAAQ;gCAOxB,4BAA4B;iCACH,wBAAwB;AASjD,qBAAMA,WAAAA,GAAeN,OAAMO,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,mBAAeT,gCAAAA,EAAgBK,IAAIE,UAAUD;IACnD,MAAMI,YAAQZ,+BAAAA,EAAgBU;IAE9B,WAAOZ,2CAAAA,EAA4BY,UAAU;QAC3CJ,SAAKL,6BAAAA,EAAcU,cAAcL,SAAKP,kCAAAA,EAAmBa;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FT,aAAwCU,wBAAwB,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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>(\n selector: ContextSelector<OverflowContextValue, SelectedValue>,\n): SelectedValue => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContext","selector","ctx"],"mappings":";;;;;;;;;;;IAgBaE,eAAAA;;;sBAiBAU;;;;sCAhC+D,mCAAmC;AAexG,4BAAwBZ,mCAAAA,EAC7BG,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;AAKO,MAAMC,qBAAqB,CAChCC,eACkBZ,wCAAAA,EAAmBC,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
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"],"mappings":";;;;;iEAAuB,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 | null>;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
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"],"mappings":";;;;+BAKaC;;;;;;iCALsB,oBAAoB;AAKhD,yBAAyB,QAC9BD,mCAAAA,EAAmBE,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 = (): number =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":";;;;+BAKaC;;;;;;iCALsB,oBAAoB;AAKhD,yBAAyB,QAC9BD,mCAAAA,EAAmBE,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":["../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"],"mappings":";;;;+BAUgBG;;;;;;;iEAVO,QAAQ;gCACW,4BAA4B;iCACnC,oBAAoB;AAQhD,4BAA0DC,OAAgB;IAC/E,MAAMC,MAAML,OAAMM,MAAM,
|
|
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): React.RefObject<TElement | null> {\n const ref = React.useRef<TElement | null>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowDivider","groupId","ref","useRef","registerDivider","v","current","element"],"mappings":";;;;+BAUgBG;;;;;;;iEAVO,QAAQ;gCACW,4BAA4B;iCACnC,oBAAoB;AAQhD,4BAA0DC,OAAgB;IAC/E,MAAMC,MAAML,OAAMM,MAAM,CAAkB;IAC1C,MAAMC,sBAAkBL,mCAAAA,EAAmBM,CAAAA,IAAKA,EAAED,eAAe;QAEjEN,yCAAAA,EAA0B;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":["../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
|
|
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>(\n id: string,\n priority?: number,\n groupId?: string,\n): React.RefObject<TElement | null> {\n const ref = React.useRef<TElement | null>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"mappings":";;;;+BAYgBG;;;;;;;iEAZO,QAAQ;gCACW,4BAA4B;iCACnC,oBAAoB;AAUhD,yBACLC,EAAU,EACVC,QAAiB,EACjBC,OAAgB;IAEhB,MAAMC,MAAMP,OAAMQ,MAAM,CAAkB;IAC1C,MAAMC,mBAAeP,mCAAAA,EAAmBQ,CAAAA,IAAKA,EAAED,YAAY;QAE3DR,yCAAAA,EAA0B;QACxB,IAAIM,IAAII,OAAO,EAAE;YACf,OAAOF,aAAa;gBAClBG,SAASL,IAAII,OAAO;gBACpBP;gBACAC,UAAUA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAY;gBACtBC;YACF;QACF;IACF,GAAG;QAACF;QAAIC;QAAUI;QAAcH;KAAQ;IAExC,OAAOC;AACT"}
|
|
@@ -1 +1 @@
|
|
|
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"],"mappings":";;;;+BAKgBK;;;;;;;iEALO,QAAQ;gCACkB,4BAA4B;iCAC1C,oBAAoB;kCACtB,qBAAqB;AAE/C,
|
|
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>(\n id?: string,\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\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>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"mappings":";;;;+BAKgBK;;;;;;;iEALO,QAAQ;gCACkB,4BAA4B;iCAC1C,oBAAoB;kCACtB,qBAAqB;AAE/C,yBACLC,EAAW;IAEX,MAAMC,gBAAYN,qBAAAA,EAAM,iBAAiBK;IACzC,MAAME,oBAAgBJ,kCAAAA;IACtB,MAAMK,uBAAuBN,uCAAAA,EAAmBO,CAAAA,IAAKA,EAAED,oBAAoB;IAC3E,MAAME,qBAAiBR,mCAAAA,EAAmBO,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMZ,OAAMa,MAAM,CAAkB;IAC1C,MAAMC,gBAAgBN,gBAAgB;QAEtCN,yCAAAA,EAA0B;QACxB,IAAIU,IAAIG,OAAO,EAAE;YACf,OAAON,qBAAqBG,IAAIG,OAAO;QACzC;IACF,GAAG;QAACN;QAAsBK;QAAeP;KAAU;QAEnDL,yCAAAA,EAA0B;QACxB,IAAIY,eAAe;YACjBH;QACF;IACF,GAAG;QAACG;QAAeH;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKJ;QAAeM;IAAc;AAC7C"}
|
|
@@ -1 +1 @@
|
|
|
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"],"mappings":";;;;+BAYgBE;;;;;;;iEAZO,QAAQ;iCACI,oBAAoB;AAWhD;
|
|
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 itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, import('@fluentui/priority-overflow').OverflowGroupState>;\n} {\n const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["React","useOverflowContext","useOverflowVisibility","itemVisibility","ctx","groupVisibility","useMemo"],"mappings":";;;;+BAYgBE;;;;;;;iEAZO,QAAQ;iCACI,oBAAoB;AAWhD;IAIL,MAAMC,qBAAiBF,mCAAAA,EAAmBG,CAAAA,MAAOA,IAAID,cAAc;IACnE,MAAME,sBAAkBJ,mCAAAA,EAAmBG,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOL,OAAMM,OAAO,CAAC,IAAO,CAAA;YAAEH;YAAgBE;SAAgB,CAAA,EAAI;QAACF;QAAgBE;KAAgB;AACrG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "9.5.
|
|
3
|
+
"version": "9.5.6",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
"@fluentui/scripts-cypress": "*"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluentui/priority-overflow": "^9.1.
|
|
23
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
22
|
+
"@fluentui/priority-overflow": "^9.1.16",
|
|
23
|
+
"@fluentui/react-context-selector": "^9.2.7",
|
|
24
24
|
"@fluentui/react-theme": "^9.2.0",
|
|
25
|
-
"@fluentui/react-utilities": "^9.
|
|
25
|
+
"@fluentui/react-utilities": "^9.24.1",
|
|
26
26
|
"@griffel/react": "^1.5.22",
|
|
27
27
|
"@swc/helpers": "^0.5.1"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
-
"@types/react": ">=16.14.0 <
|
|
31
|
-
"@types/react-dom": ">=16.9.0 <
|
|
32
|
-
"react": ">=16.14.0 <
|
|
33
|
-
"react-dom": ">=16.14.0 <
|
|
30
|
+
"@types/react": ">=16.14.0 <20.0.0",
|
|
31
|
+
"@types/react-dom": ">=16.9.0 <20.0.0",
|
|
32
|
+
"react": ">=16.14.0 <20.0.0",
|
|
33
|
+
"react-dom": ">=16.14.0 <20.0.0"
|
|
34
34
|
},
|
|
35
35
|
"beachball": {
|
|
36
36
|
"disallowedChangeTypes": [
|