@fluentui/react-overflow 9.6.7 → 9.7.1

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 CHANGED
@@ -1,12 +1,33 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Thu, 22 Jan 2026 17:01:17 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 25 Feb 2026 13:28:19 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.7.1)
8
+
9
+ Wed, 25 Feb 2026 13:28:19 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.7.0..@fluentui/react-overflow_v9.7.1)
11
+
12
+ ### Patches
13
+
14
+ - fix: add missing "use client" directive to client components and styles ([PR #35719](https://github.com/microsoft/fluentui/pull/35719) by dmytrokirpa@microsoft.com)
15
+ - Bump @fluentui/react-context-selector to v9.2.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
17
+
18
+ ## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.7.0)
19
+
20
+ Thu, 12 Feb 2026 10:46:10 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.6.7..@fluentui/react-overflow_v9.7.0)
22
+
23
+ ### Minor changes
24
+
25
+ - feat: add support for pinned items ([PR #35712](https://github.com/microsoft/fluentui/pull/35712) by olfedias@microsoft.com)
26
+ - Bump @fluentui/priority-overflow to v9.3.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
27
+
7
28
  ## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.6.7)
8
29
 
9
- Thu, 22 Jan 2026 17:01:17 GMT
30
+ Thu, 22 Jan 2026 17:06:33 GMT
10
31
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.6.6..@fluentui/react-overflow_v9.6.7)
11
32
 
12
33
  ### Patches
package/dist/index.d.ts CHANGED
@@ -78,15 +78,25 @@ export declare type OverflowItemProps = {
78
78
  * Assigns the item to a group, group visibility can be watched.
79
79
  */
80
80
  groupId?: string;
81
- /**
82
- * A higher priority means the item overflows later.
83
- */
84
- priority?: number;
85
81
  /**
86
82
  * The single child that has overflow item behavior attached.
87
83
  */
88
84
  children: React_2.ReactElement;
89
- };
85
+ } & ({
86
+ /**
87
+ * If true, the item will never overflow and will always be visible.
88
+ * Mutually exclusive with `priority`.
89
+ */
90
+ pinned?: boolean;
91
+ priority?: never;
92
+ } | {
93
+ pinned?: never;
94
+ /**
95
+ * A higher priority means the item overflows later.
96
+ * Mutually exclusive with `pinned`.
97
+ */
98
+ priority?: number;
99
+ });
90
100
 
91
101
  /**
92
102
  * Overflow Props
@@ -156,9 +166,10 @@ export declare function useOverflowDivider<TElement extends HTMLElement>(groupId
156
166
  * @param id - unique identifier for the item used by the overflow manager
157
167
  * @param priority - higher priority means the item overflows later
158
168
  * @param groupId - assigns the item to a group, group visibility can be watched
169
+ * @param pinned - if true, the item will never overflow and will always be visible
159
170
  * @returns ref to assign to an intrinsic HTML element
160
171
  */
161
- export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string): React_2.RefObject<TElement | null>;
172
+ export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string, pinned?: boolean): React_2.RefObject<TElement | null>;
162
173
 
163
174
  export declare function useOverflowMenu<TElement extends HTMLElement>(id?: string): {
164
175
  ref: React_2.MutableRefObject<TElement | null>;
@@ -8,8 +8,8 @@ import { useOverflowItem } from '../../useOverflowItem';
8
8
  *
9
9
  * Behaves similarly to other `*Trigger` components in Fluent UI React.
10
10
  */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
11
- const { id, groupId, priority, children } = props;
12
- const containerRef = useOverflowItem(id, priority, groupId);
11
+ const { id, groupId, priority, pinned, children } = props;
12
+ const containerRef = useOverflowItem(id, priority, groupId, pinned);
13
13
  const child = getTriggerChild(children);
14
14
  return applyTriggerPropsToChildren(children, {
15
15
  ref: useMergedRefs(containerRef, ref, getReactElementRef(child))
@@ -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, 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;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,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
+ {"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 +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 * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../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":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import { __styles } from '@griffel/react';
2
4
  import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
3
5
  export const useOverflowStyles = /*#__PURE__*/__styles({
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"sources":["useOverflowStyles.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,cAAc;AACnE,OAAO,MAAMC,iBAAiB,gBAAGH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWhC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"sources":["useOverflowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,cAAc;AACnE,OAAO,MAAMC,iBAAiB,gBAAGH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWhC,CAAC","ignoreList":[]}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import { makeStyles } from '@griffel/react';
2
3
  import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
3
4
  export const useOverflowStyles = makeStyles({
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n"],"names":["makeStyles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","flexShrink","overflowingItems","display"],"mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,eAAe;AAEpE,OAAO,MAAMC,oBAAoBH,WAAW;IAC1CI,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,mBAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,iBAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG"}
1
+ {"version":3,"sources":["../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n"],"names":["makeStyles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","flexShrink","overflowingItems","display"],"mappings":"AAAA;AAEA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,eAAe;AAEpE,OAAO,MAAMC,oBAAoBH,WAAW;IAC1CI,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,mBAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,iBAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG"}
@@ -8,24 +8,33 @@ import { useOverflowContext } from './overflowContext';
8
8
  * @param id - unique identifier for the item used by the overflow manager
9
9
  * @param priority - higher priority means the item overflows later
10
10
  * @param groupId - assigns the item to a group, group visibility can be watched
11
+ * @param pinned - if true, the item will never overflow and will always be visible
11
12
  * @returns ref to assign to an intrinsic HTML element
12
- */ export function useOverflowItem(id, priority, groupId) {
13
+ */ export function useOverflowItem(id, priority, groupId, pinned) {
13
14
  const ref = React.useRef(null);
14
15
  const registerItem = useOverflowContext((v)=>v.registerItem);
15
16
  useIsomorphicLayoutEffect(()=>{
17
+ if (process.env.NODE_ENV !== 'production') {
18
+ if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {
19
+ // eslint-disable-next-line no-console
20
+ console.error(`useOverflowItem: Overflow item with id "${id}" has pinned=true and priority<0. ` + `Pinned items are always visible and should not have defined priority.`);
21
+ }
22
+ }
16
23
  if (ref.current) {
17
24
  return registerItem({
18
25
  element: ref.current,
19
26
  id,
20
27
  priority: priority !== null && priority !== void 0 ? priority : 0,
21
- groupId
28
+ groupId,
29
+ pinned
22
30
  });
23
31
  }
24
32
  }, [
25
33
  id,
26
34
  priority,
27
35
  registerItem,
28
- groupId
36
+ groupId,
37
+ pinned
29
38
  ]);
30
39
  return ref;
31
40
  }
@@ -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 * @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;AAEA,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
+ {"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 * @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 * @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;;;;;;;;CAQC,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"}
@@ -14,8 +14,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
14
  const _reactutilities = require("@fluentui/react-utilities");
15
15
  const _useOverflowItem = require("../../useOverflowItem");
16
16
  const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
17
- const { id, groupId, priority, children } = props;
18
- const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId);
17
+ const { id, groupId, priority, pinned, children } = props;
18
+ const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId, pinned);
19
19
  const child = (0, _reactutilities.getTriggerChild)(children);
20
20
  return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
21
21
  ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, (0, _reactutilities.getReactElementRef)(child))
@@ -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, 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;;;;;+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,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
+ {"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 +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 * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/OverflowItem.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n /**\n * The unique identifier for the item used by the overflow manager.\n */\n id: string;\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId?: string;\n /**\n * 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":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowStyles.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\n"],"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"mappings":";;;;;;;;;;uBAA2B,gBAAgB;AAEpC,MAAMG,iBAAiB,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAWhC,CAAC"}
1
+ {"version":3,"sources":["useOverflowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\n"],"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBACe,gBAAgB;AAEpC,MAAMG,iBAAiB,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAWhC,CAAC"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n"],"names":["makeStyles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","flexShrink","overflowingItems","display"],"mappings":";;;;+BAGaG;;;;;;uBAHc,iBAAiB;2BACS,eAAe;AAE7D,8BAA0BH,iBAAAA,EAAW;IAC1CI,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,6BAAAA,CAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,2BAAAA,CAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG"}
1
+ {"version":3,"sources":["../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n"],"names":["makeStyles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","flexShrink","overflowingItems","display"],"mappings":"AAAA;;;;;;;;;;;uBAE2B,iBAAiB;2BACS,eAAe;AAE7D,MAAMG,wBAAoBH,iBAAAA,EAAW;IAC1CI,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,6BAAAA,CAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,2BAAAA,CAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG"}
@@ -13,23 +13,31 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
13
13
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
14
  const _reactutilities = require("@fluentui/react-utilities");
15
15
  const _overflowContext = require("./overflowContext");
16
- function useOverflowItem(id, priority, groupId) {
16
+ function useOverflowItem(id, priority, groupId, pinned) {
17
17
  const ref = _react.useRef(null);
18
18
  const registerItem = (0, _overflowContext.useOverflowContext)((v)=>v.registerItem);
19
19
  (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
20
+ if (process.env.NODE_ENV !== 'production') {
21
+ if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {
22
+ // eslint-disable-next-line no-console
23
+ console.error(`useOverflowItem: Overflow item with id "${id}" has pinned=true and priority<0. ` + `Pinned items are always visible and should not have defined priority.`);
24
+ }
25
+ }
20
26
  if (ref.current) {
21
27
  return registerItem({
22
28
  element: ref.current,
23
29
  id,
24
30
  priority: priority !== null && priority !== void 0 ? priority : 0,
25
- groupId
31
+ groupId,
32
+ pinned
26
33
  });
27
34
  }
28
35
  }, [
29
36
  id,
30
37
  priority,
31
38
  registerItem,
32
- groupId
39
+ groupId,
40
+ pinned
33
41
  ]);
34
42
  return ref;
35
43
  }
@@ -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 * @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;;;;;+BAcgBG;;;;;;;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
+ {"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 * @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 * @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;;;;;+BAegBG;;;;;;;iEAbO,QAAQ;gCACW,4BAA4B;iCACnC,oBAAoB;AAWhD,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.6.7",
3
+ "version": "9.7.1",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,10 +12,10 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui/priority-overflow": "^9.2.1",
16
- "@fluentui/react-context-selector": "^9.2.14",
15
+ "@fluentui/priority-overflow": "^9.3.0",
16
+ "@fluentui/react-context-selector": "^9.2.15",
17
17
  "@fluentui/react-theme": "^9.2.1",
18
- "@fluentui/react-utilities": "^9.26.1",
18
+ "@fluentui/react-utilities": "^9.26.2",
19
19
  "@griffel/react": "^1.5.32",
20
20
  "@swc/helpers": "^0.5.1"
21
21
  },