@fluentui/react-overflow 9.6.6 → 9.7.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
+This log was last generated on Thu, 12 Feb 2026 10:42:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.7.0)
+
+Thu, 12 Feb 2026 10:42:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.6.7..@fluentui/react-overflow_v9.7.0)
+
+### Minor changes
+
+- feat: add support for pinned items ([PR #35712](https://github.com/microsoft/fluentui/pull/35712) by olfedias@microsoft.com)
+- Bump @fluentui/priority-overflow to v9.3.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+
+## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.6.7)
+
+Thu, 22 Jan 2026 17:06:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.6.6..@fluentui/react-overflow_v9.6.7)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+
 ## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.6.6)
 
-Wed, 17 Dec 2025 18:06:04 GMT 
+Wed, 17 Dec 2025 18:10:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.6.5..@fluentui/react-overflow_v9.6.6)
 
 ### Patches

package/dist/index.d.ts

@@ -78,15 +78,25 @@ export declare type OverflowItemProps = {
      * Assigns the item to a group, group visibility can be watched.
      */
     groupId?: string;
-    /**
-     * A higher priority means the item overflows later.
-     */
-    priority?: number;
     /**
      * The single child that has overflow item behavior attached.
      */
     children: React_2.ReactElement;
-};
+} & ({
+    /**
+     * If true, the item will never overflow and will always be visible.
+     * Mutually exclusive with `priority`.
+     */
+    pinned?: boolean;
+    priority?: never;
+} | {
+    pinned?: never;
+    /**
+     * A higher priority means the item overflows later.
+     * Mutually exclusive with `pinned`.
+     */
+    priority?: number;
+});
 
 /**
  * Overflow Props
@@ -156,9 +166,10 @@ export declare function useOverflowDivider<TElement extends HTMLElement>(groupId
  * @param id - unique identifier for the item used by the overflow manager
  * @param priority - higher priority means the item overflows later
  * @param groupId - assigns the item to a group, group visibility can be watched
+ * @param pinned - if true, the item will never overflow and will always be visible
  * @returns ref to assign to an intrinsic HTML element
  */
-export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string): React_2.RefObject<TElement | null>;
+export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string, pinned?: boolean): React_2.RefObject<TElement | null>;
 
 export declare function useOverflowMenu<TElement extends HTMLElement>(id?: string): {
     ref: React_2.MutableRefObject<TElement | null>;

package/lib/components/OverflowItem/OverflowItem.js

@@ -8,8 +8,8 @@ import { useOverflowItem } from '../../useOverflowItem';
  *
  * Behaves similarly to other `*Trigger` components in Fluent UI React.
  */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const { id, groupId, priority, children } = props;
-    const containerRef = useOverflowItem(id, priority, groupId);
+    const { id, groupId, priority, pinned, children } = props;
+    const containerRef = useOverflowItem(id, priority, groupId, pinned);
     const child = getTriggerChild(children);
     return applyTriggerPropsToChildren(children, {
         ref: useMergedRefs(containerRef, ref, getReactElementRef(child))

package/lib/components/OverflowItem/OverflowItem.js.map

@@ -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"}
+{"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"}

package/lib/components/OverflowItem/OverflowItem.types.js.map

@@ -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"}
+{"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"}

package/lib/useOverflowItem.js

@@ -8,24 +8,33 @@ import { useOverflowContext } from './overflowContext';
  * @param id - unique identifier for the item used by the overflow manager
  * @param priority - higher priority means the item overflows later
  * @param groupId - assigns the item to a group, group visibility can be watched
+ * @param pinned - if true, the item will never overflow and will always be visible
  * @returns ref to assign to an intrinsic HTML element
- */ export function useOverflowItem(id, priority, groupId) {
+ */ export function useOverflowItem(id, priority, groupId, pinned) {
     const ref = React.useRef(null);
     const registerItem = useOverflowContext((v)=>v.registerItem);
     useIsomorphicLayoutEffect(()=>{
+        if (process.env.NODE_ENV !== 'production') {
+            if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {
+                // eslint-disable-next-line no-console
+                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.`);
+            }
+        }
         if (ref.current) {
             return registerItem({
                 element: ref.current,
                 id,
                 priority: priority !== null && priority !== void 0 ? priority : 0,
-                groupId
+                groupId,
+                pinned
             });
         }
     }, [
         id,
         priority,
         registerItem,
-        groupId
+        groupId,
+        pinned
     ]);
     return ref;
 }

package/lib/useOverflowItem.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/OverflowItem/OverflowItem.js

@@ -14,8 +14,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _useOverflowItem = require("../../useOverflowItem");
 const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
-    const { id, groupId, priority, children } = props;
-    const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId);
+    const { id, groupId, priority, pinned, children } = props;
+    const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId, pinned);
     const child = (0, _reactutilities.getTriggerChild)(children);
     return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
         ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, (0, _reactutilities.getReactElementRef)(child))

package/lib-commonjs/components/OverflowItem/OverflowItem.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/useOverflowItem.js

@@ -13,23 +13,31 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _overflowContext = require("./overflowContext");
-function useOverflowItem(id, priority, groupId) {
+function useOverflowItem(id, priority, groupId, pinned) {
     const ref = _react.useRef(null);
     const registerItem = (0, _overflowContext.useOverflowContext)((v)=>v.registerItem);
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (process.env.NODE_ENV !== 'production') {
+            if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {
+                // eslint-disable-next-line no-console
+                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.`);
+            }
+        }
         if (ref.current) {
             return registerItem({
                 element: ref.current,
                 id,
                 priority: priority !== null && priority !== void 0 ? priority : 0,
-                groupId
+                groupId,
+                pinned
             });
         }
     }, [
         id,
         priority,
         registerItem,
-        groupId
+        groupId,
+        pinned
     ]);
     return ref;
 }

package/lib-commonjs/useOverflowItem.js.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "9.6.6",
+  "version": "9.7.0",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -11,18 +11,11 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/react-portal": "*",
-    "@fluentui/react-menu": "*",
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-cypress": "*"
-  },
   "dependencies": {
-    "@fluentui/priority-overflow": "^9.2.1",
-    "@fluentui/react-context-selector": "^9.2.13",
-    "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.26.0",
+    "@fluentui/priority-overflow": "^9.3.0",
+    "@fluentui/react-context-selector": "^9.2.14",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-utilities": "^9.26.1",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },