@fluentui/react-overflow 9.7.1 → 9.7.2
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 +12 -2
- package/dist/index.d.ts +5 -3
- package/lib/components/OverflowDivider/OverflowDivider.js.map +1 -1
- package/lib/components/OverflowDivider/OverflowDivider.types.js +3 -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 +3 -1
- package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib/overflowContext.js.map +1 -1
- package/lib/types.js +3 -1
- package/lib/types.js.map +1 -1
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowDivider.js +2 -1
- package/lib/useOverflowDivider.js.map +1 -1
- package/lib/useOverflowItem.js +2 -1
- package/lib/useOverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.js.map +1 -1
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js +3 -3
- 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 +3 -3
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js +3 -3
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowDivider.js.map +1 -1
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 23 Apr 2026 11:59:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.7.2)
|
|
8
|
+
|
|
9
|
+
Thu, 23 Apr 2026 11:59:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.7.1..@fluentui/react-overflow_v9.7.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.7.1)
|
|
8
18
|
|
|
9
|
-
Wed, 25 Feb 2026 13:
|
|
19
|
+
Wed, 25 Feb 2026 13:32:24 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.7.0..@fluentui/react-overflow_v9.7.1)
|
|
11
21
|
|
|
12
22
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ContextSelector } from '@fluentui/react-context-selector';
|
|
1
|
+
import type { ContextSelector } from '@fluentui/react-context-selector';
|
|
2
2
|
import type { ObserveOptions } from '@fluentui/priority-overflow';
|
|
3
3
|
import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
|
|
4
4
|
import type { OverflowDividerEntry } from '@fluentui/priority-overflow';
|
|
@@ -153,16 +153,18 @@ export declare const useOverflowContext: <SelectedValue>(selector: ContextSelect
|
|
|
153
153
|
export declare const useOverflowCount: () => number;
|
|
154
154
|
|
|
155
155
|
/**
|
|
156
|
-
* @internal
|
|
157
156
|
* Registers an overflow item
|
|
157
|
+
*
|
|
158
|
+
* @internal
|
|
158
159
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
|
159
160
|
* @returns ref to assign to an intrinsic HTML element
|
|
160
161
|
*/
|
|
161
162
|
export declare function useOverflowDivider<TElement extends HTMLElement>(groupId?: string): React_2.RefObject<TElement | null>;
|
|
162
163
|
|
|
163
164
|
/**
|
|
164
|
-
* @internal
|
|
165
165
|
* Registers an overflow item
|
|
166
|
+
*
|
|
167
|
+
* @internal
|
|
166
168
|
* @param id - unique identifier for the item used by the overflow manager
|
|
167
169
|
* @param priority - higher priority means the item overflows later
|
|
168
170
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA;AAEA,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":["'use client';\n\nimport * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport type { OverflowDividerProps } from './OverflowDivider.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA;AAEA,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":["../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":[
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.types.ts"],"sourcesContent":["import type * 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":[],"mappings":"AAEA;;CAEC,GACD,WASE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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, pinned, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId, pinned);\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","pinned","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA;AAEA,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,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAEpD,MAAMO,eAAeV,gBAAgBK,IAAIE,UAAUD,SAASE;IAC5D,MAAMG,QAAQb,gBAAgBW;IAE9B,OAAOb,4BAA4Ba,UAAU;QAC3CL,KAAKL,cAAcW,cAAcN,KAAKP,mBAAmBc;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FV,aAAwCW,wBAAwB,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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 type { 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, pinned, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId, pinned);\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","pinned","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA;AAEA,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,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAEpD,MAAMO,eAAeV,gBAAgBK,IAAIE,UAAUD,SAASE;IAC5D,MAAMG,QAAQb,gBAAgBW;IAE9B,OAAOb,4BAA4Ba,UAAU;QAC3CL,KAAKL,cAAcW,cAAcN,KAAKP,mBAAmBc;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FV,aAAwCW,wBAAwB,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
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 * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n} & (\n | {\n /**\n * If true, the item will never overflow and will always be visible.\n * Mutually exclusive with `priority`.\n */\n pinned?: boolean;\n priority?: never;\n }\n | {\n pinned?: never;\n /**\n * A higher priority means the item overflows later.\n * Mutually exclusive with `pinned`.\n */\n priority?: number;\n }\n);\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.types.ts"],"sourcesContent":["import type * 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 * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n} & (\n | {\n /**\n * If true, the item will never overflow and will always be visible.\n * Mutually exclusive with `priority`.\n */\n pinned?: boolean;\n priority?: never;\n }\n | {\n pinned?: never;\n /**\n * A higher priority means the item overflows later.\n * Mutually exclusive with `pinned`.\n */\n priority?: number;\n }\n);\n"],"names":[],"mappings":"AAEA;;CAEC,GACD,WA8BE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector
|
|
1
|
+
{"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } from '@fluentui/priority-overflow';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport { createContext, useContextSelector } 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":"AAAA;AAIA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAerF,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
CHANGED
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 | null>;\n}\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { 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":[],"mappings":"AAGA;;CAEC,GACD,WAMC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["'use client';\n\nimport { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"mappings":"AAAA;AAGA,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":["'use client';\n\nimport type { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"mappings":"AAAA;AAGA,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":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * 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 hasHiddenItems = false,\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 hasHiddenItems,\n }),\n [\n minimumVisible,\n onUpdateItemVisibility,\n overflowAxis,\n overflowDirection,\n padding,\n onUpdateOverflow,\n hasHiddenItems,\n ],\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","hasHiddenItems","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * 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 type { 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 hasHiddenItems = false,\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 hasHiddenItems,\n }),\n [\n minimumVisible,\n onUpdateItemVisibility,\n overflowAxis,\n overflowDirection,\n padding,\n onUpdateOverflow,\n hasHiddenItems,\n ],\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","hasHiddenItems","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
@@ -3,8 +3,9 @@ import * as React from 'react';
|
|
|
3
3
|
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
4
4
|
import { useOverflowContext } from './overflowContext';
|
|
5
5
|
/**
|
|
6
|
-
* @internal
|
|
7
6
|
* Registers an overflow item
|
|
7
|
+
*
|
|
8
|
+
* @internal
|
|
8
9
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
|
9
10
|
* @returns ref to assign to an intrinsic HTML element
|
|
10
11
|
*/ export function useOverflowDivider(groupId) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Registers an overflow item\n *\n * @internal\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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;CAMC,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"}
|
package/lib/useOverflowItem.js
CHANGED
|
@@ -3,8 +3,9 @@ import * as React from 'react';
|
|
|
3
3
|
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
4
4
|
import { useOverflowContext } from './overflowContext';
|
|
5
5
|
/**
|
|
6
|
-
* @internal
|
|
7
6
|
* Registers an overflow item
|
|
7
|
+
*
|
|
8
|
+
* @internal
|
|
8
9
|
* @param id - unique identifier for the item used by the overflow manager
|
|
9
10
|
* @param priority - higher priority means the item overflows later
|
|
10
11
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Registers an overflow item\n *\n * @internal\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 * @param pinned - if true, the item will never overflow and will always be visible\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 pinned?: boolean,\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 (process.env.NODE_ENV !== 'production') {\n if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {\n // eslint-disable-next-line no-console\n console.error(\n `useOverflowItem: Overflow item with id \"${id}\" has pinned=true and priority<0. ` +\n `Pinned items are always visible and should not have defined priority.`,\n );\n }\n }\n\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n pinned,\n });\n }\n }, [id, priority, registerItem, groupId, pinned]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","pinned","ref","useRef","registerItem","v","process","env","NODE_ENV","console","error","current","element"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;;CASC,GACD,OAAO,SAASC,gBACdC,EAAU,EACVC,QAAiB,EACjBC,OAAgB,EAChBC,MAAgB;IAEhB,MAAMC,MAAMR,MAAMS,MAAM,CAAkB;IAC1C,MAAMC,eAAeR,mBAAmBS,CAAAA,IAAKA,EAAED,YAAY;IAE3DT,0BAA0B;QACxB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOP,WAAW,eAAe,OAAOF,aAAa,eAAeE,QAAQ;gBAC9E,sCAAsC;gBACtCQ,QAAQC,KAAK,CACX,CAAC,wCAAwC,EAAEZ,GAAG,kCAAkC,CAAC,GAC/E,CAAC,qEAAqE,CAAC;YAE7E;QACF;QAEA,IAAII,IAAIS,OAAO,EAAE;YACf,OAAOP,aAAa;gBAClBQ,SAASV,IAAIS,OAAO;gBACpBb;gBACAC,UAAUA,qBAAAA,sBAAAA,WAAY;gBACtBC;gBACAC;YACF;QACF;IACF,GAAG;QAACH;QAAIC;QAAUK;QAAcJ;QAASC;KAAO;IAEhD,OAAOC;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAC4B,4BAA4B;oCACpD,2BAA2B;AAOvD,MAAMI,kBAAAA,WAAAA,GAAkBJ,OAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,mBAAeP,sCAAAA,EAAmBK;IACxC,WAAOP,2CAAAA,EAA4BQ,UAAU;QAC3CF,SAAKL,6BAAAA,EAAcQ,cAAcH;IACnC;AACF,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport type { OverflowDividerProps } from './OverflowDivider.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAC4B,4BAA4B;oCACpD,2BAA2B;AAOvD,MAAMI,kBAAAA,WAAAA,GAAkBJ,OAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,mBAAeP,sCAAAA,EAAmBK;IACxC,WAAOP,2CAAAA,EAA4BQ,UAAU;QAC3CF,SAAKL,6BAAAA,EAAcQ,cAAcH;IACnC;AACF,GAAG"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* OverflowDividerProps
|
|
3
|
+
*/ "use strict";
|
|
2
4
|
Object.defineProperty(exports, "__esModule", {
|
|
3
5
|
value: true
|
|
4
6
|
});
|
|
5
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
6
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
@@ -1 +1 @@
|
|
|
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":[
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.types.ts"],"sourcesContent":["import type * 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":[],"mappings":"AAEA;;CAEC,GACD,WASE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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, pinned, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId, pinned);\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","pinned","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA;;;;;+BAmBaM;;;;;;;iEAjBU,QAAQ;gCAOxB,4BAA4B;iCACH,wBAAwB;AASjD,qBAAMA,WAAAA,GAAeN,OAAMO,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAEpD,MAAMO,mBAAeV,gCAAAA,EAAgBK,IAAIE,UAAUD,SAASE;IAC5D,MAAMG,YAAQb,+BAAAA,EAAgBW;IAE9B,WAAOb,2CAAAA,EAA4Ba,UAAU;QAC3CL,SAAKL,6BAAAA,EAAcW,cAAcN,SAAKP,kCAAAA,EAAmBc;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FV,aAAwCW,wBAAwB,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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 type { 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, pinned, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId, pinned);\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","pinned","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA;;;;;+BAmBaM;;;;;;;iEAjBU,QAAQ;gCAOxB,4BAA4B;iCACH,wBAAwB;AASjD,qBAAMA,WAAAA,GAAeN,OAAMO,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAEpD,MAAMO,mBAAeV,gCAAAA,EAAgBK,IAAIE,UAAUD,SAASE;IAC5D,MAAMG,YAAQb,+BAAAA,EAAgBW;IAE9B,WAAOb,2CAAAA,EAA4Ba,UAAU;QAC3CL,SAAKL,6BAAAA,EAAcW,cAAcN,SAAKP,kCAAAA,EAAmBc;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FV,aAAwCW,wBAAwB,GAAG"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* OverflowItemProps
|
|
3
|
+
*/ "use strict";
|
|
2
4
|
Object.defineProperty(exports, "__esModule", {
|
|
3
5
|
value: true
|
|
4
6
|
});
|
|
5
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
6
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
@@ -1 +1 @@
|
|
|
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 * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n} & (\n | {\n /**\n * If true, the item will never overflow and will always be visible.\n * Mutually exclusive with `priority`.\n */\n pinned?: boolean;\n priority?: never;\n }\n | {\n pinned?: never;\n /**\n * A higher priority means the item overflows later.\n * Mutually exclusive with `pinned`.\n */\n priority?: number;\n }\n);\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.types.ts"],"sourcesContent":["import type * 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 * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n} & (\n | {\n /**\n * If true, the item will never overflow and will always be visible.\n * Mutually exclusive with `priority`.\n */\n pinned?: boolean;\n priority?: never;\n }\n | {\n pinned?: never;\n /**\n * A higher priority means the item overflows later.\n * Mutually exclusive with `pinned`.\n */\n priority?: number;\n }\n);\n"],"names":[],"mappings":"AAEA;;CAEC,GACD,WA8BE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector
|
|
1
|
+
{"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } from '@fluentui/priority-overflow';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport { createContext, useContextSelector } 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":"AAAA;;;;;;;;;;;;mBAmBaE;;;sBAiBAU;;;;sCAhCqC,mCAAmC;AAe9E,MAAMV,sBAAkBF,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"}
|
package/lib-commonjs/types.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @internal
|
|
3
|
+
*/ "use strict";
|
|
2
4
|
Object.defineProperty(exports, "__esModule", {
|
|
3
5
|
value: true
|
|
4
6
|
});
|
|
5
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
6
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
@@ -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 | null>;\n}\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { 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":[],"mappings":"AAGA;;CAEC,GACD,WAMC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["'use client';\n\nimport { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;iCAGmC,oBAAoB;AAMhD,SAASC,0BAA0BC,EAAU;IAClD,WAAOF,mCAAAA,EAAmBG,CAAAA,MAAOA,IAAIC,eAAe,CAACF,GAAG;AAC1D"}
|
|
1
|
+
{"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;iCAGmC,oBAAoB;AAMhD,SAASC,0BAA0BC,EAAU;IAClD,WAAOF,mCAAAA,EAAmBG,CAAAA,MAAOA,IAAIC,eAAe,CAACF,GAAG;AAC1D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * 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 hasHiddenItems = false,\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 hasHiddenItems,\n }),\n [\n minimumVisible,\n onUpdateItemVisibility,\n overflowAxis,\n overflowDirection,\n padding,\n onUpdateOverflow,\n hasHiddenItems,\n ],\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","hasHiddenItems","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * 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 type { 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 hasHiddenItems = false,\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 hasHiddenItems,\n }),\n [\n minimumVisible,\n onUpdateItemVisibility,\n overflowAxis,\n overflowDirection,\n padding,\n onUpdateOverflow,\n hasHiddenItems,\n ],\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","hasHiddenItems","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","useEffect","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Registers an overflow item\n *\n * @internal\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;;;;;;;;;;;;iEAEuB,QAAQ;gCACW,4BAA4B;iCACnC,oBAAoB;AAShD,SAASG,mBAAiDC,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":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Registers an overflow item\n *\n * @internal\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 * @param pinned - if true, the item will never overflow and will always be visible\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 pinned?: boolean,\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 (process.env.NODE_ENV !== 'production') {\n if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {\n // eslint-disable-next-line no-console\n console.error(\n `useOverflowItem: Overflow item with id \"${id}\" has pinned=true and priority<0. ` +\n `Pinned items are always visible and should not have defined priority.`,\n );\n }\n }\n\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n pinned,\n });\n }\n }, [id, priority, registerItem, groupId, pinned]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","pinned","ref","useRef","registerItem","v","process","env","NODE_ENV","console","error","current","element"],"mappings":"AAAA;;;;;+BAgBgBG;;;;;;;iEAdO,QAAQ;gCACW,4BAA4B;iCACnC,oBAAoB;AAYhD,yBACLC,EAAU,EACVC,QAAiB,EACjBC,OAAgB,EAChBC,MAAgB;IAEhB,MAAMC,MAAMR,OAAMS,MAAM,CAAkB;IAC1C,MAAMC,mBAAeR,mCAAAA,EAAmBS,CAAAA,IAAKA,EAAED,YAAY;QAE3DT,yCAAAA,EAA0B;QACxB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOP,WAAW,eAAe,OAAOF,aAAa,eAAeE,QAAQ;gBAC9E,sCAAsC;gBACtCQ,QAAQC,KAAK,CACX,CAAC,wCAAwC,EAAEZ,GAAG,kCAAkC,CAAC,GAC/E,CAAC,qEAAqE,CAAC;YAE7E;QACF;QAEA,IAAII,IAAIS,OAAO,EAAE;YACf,OAAOP,aAAa;gBAClBQ,SAASV,IAAIS,OAAO;gBACpBb;gBACAC,UAAUA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAY;gBACtBC;gBACAC;YACF;QACF;IACF,GAAG;QAACH;QAAIC;QAAUK;QAAcJ;QAASC;KAAO;IAEhD,OAAOC;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "9.7.
|
|
3
|
+
"version": "9.7.2",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/priority-overflow": "^9.3.0",
|
|
16
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
16
|
+
"@fluentui/react-context-selector": "^9.2.16",
|
|
17
17
|
"@fluentui/react-theme": "^9.2.1",
|
|
18
|
-
"@fluentui/react-utilities": "^9.26.
|
|
18
|
+
"@fluentui/react-utilities": "^9.26.3",
|
|
19
19
|
"@griffel/react": "^1.5.32",
|
|
20
20
|
"@swc/helpers": "^0.5.1"
|
|
21
21
|
},
|