@fluentui/react-overflow 0.0.0-nightly-20240513-0408.1 → 0.0.0-nightly-20240515-0405.1

package/CHANGELOG.md

@@ -1,21 +1,21 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Mon, 13 May 2024 04:24:10 GMT and should not be manually modified.
+This log was last generated on Wed, 15 May 2024 04:20:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240513-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20240513-0408.1)
+## [0.0.0-nightly-20240515-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20240515-0405.1)
 
-Mon, 13 May 2024 04:24:10 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.18..@fluentui/react-overflow_v0.0.0-nightly-20240513-0408.1)
+Wed, 15 May 2024 04:20:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.18..@fluentui/react-overflow_v0.0.0-nightly-20240515-0405.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/priority-overflow to v0.0.0-nightly-20240513-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/c47321fd1fb69c5b9d8b5b5a14454708dae1541f) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240513-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/c47321fd1fb69c5b9d8b5b5a14454708dae1541f) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20240513-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/c47321fd1fb69c5b9d8b5b5a14454708dae1541f) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20240513-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/c47321fd1fb69c5b9d8b5b5a14454708dae1541f) by beachball)
+- Bump @fluentui/priority-overflow to v0.0.0-nightly-20240515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/dbb856a22fab6021463d58dd45839c80032d8bf8) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/dbb856a22fab6021463d58dd45839c80032d8bf8) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20240515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/dbb856a22fab6021463d58dd45839c80032d8bf8) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/dbb856a22fab6021463d58dd45839c80032d8bf8) by beachball)
 
 ## [9.1.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.18)
 

package/dist/index.d.ts

@@ -57,6 +57,8 @@ declare type OverflowDividerProps = {
 /**
  * Attaches overflow item behavior to its child registered with the OverflowContext.
  * It does not render an element of its own.
+ *
+ * Behaves similarly to other `*Trigger` components in Fluent UI React.
  */
 export declare const OverflowItem: React_2.ForwardRefExoticComponent<OverflowItemProps & React_2.RefAttributes<unknown>>;
 

package/lib/components/Overflow.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { mergeClasses } from '@griffel/react';
-import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
+import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
 import { OverflowContext } from '../overflowContext';
 import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
 import { useOverflowStyles } from './useOverflowStyles.styles';
@@ -37,8 +37,9 @@ import { useOverflowStyles } from './useOverflowStyles.styles';
         minimumVisible,
         onUpdateItemVisibility: updateVisibilityAttribute
     });
+    const child = getTriggerChild(children);
     const clonedChild = applyTriggerPropsToChildren(children, {
-        ref: useMergedRefs(containerRef, ref),
+        ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),
         className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
     });
     return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {

package/lib/components/Overflow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n  hasOverflow: boolean;\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n  children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useOverflowStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [overflowState, setOverflowState] = React.useState<OverflowState>({\n    hasOverflow: false,\n    itemVisibility: {},\n    groupVisibility: {},\n  });\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  const update: OnUpdateOverflow = data => {\n    const { visibleItems, invisibleItems, groupVisibility } = data;\n\n    const itemVisibility: Record<string, boolean> = {};\n    visibleItems.forEach(item => {\n      itemVisibility[item.id] = true;\n    });\n    invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n    setOverflowState(() => {\n      return {\n        hasOverflow: data.invisibleItems.length > 0,\n        itemVisibility,\n        groupVisibility,\n      };\n    });\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n    update,\n    {\n      overflowDirection,\n      overflowAxis,\n      padding,\n      minimumVisible,\n      onUpdateItemVisibility: updateVisibilityAttribute,\n    },\n  );\n\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n    className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility: overflowState.itemVisibility,\n        groupVisibility: overflowState.groupVisibility,\n        hasOverflow: overflowState.hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n        registerDivider,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AAEvF,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWR,MAAMS,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASL;IAEf,MAAM,EAAEM,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGnB,MAAMoB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QAEpDX,iBAAiB;YACf,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAG/B,qBAC5FkB,QACA;QACER;QACAD;QACAE;QACAH;QACAwB,wBAAwBjC;IAC1B;IAGF,MAAMkC,cAAcrC,4BAA4BW,UAAU;QACxDF,KAAKR,cAAc8B,cAActB;QACjC6B,WAAWvC,aAAa,gBAAgBW,OAAO6B,YAAY,EAAE7B,OAAO8B,gBAAgB,EAAE7B,SAASH,KAAK,CAAC8B,SAAS;IAChH;IAEA,qBACE,oBAACpC,gBAAgBuC,QAAQ;QACvBC,OAAO;YACLtB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACF;OAECE;AAGP,GAAG"}
+{"version":3,"sources":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n  hasOverflow: boolean;\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n  children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useOverflowStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [overflowState, setOverflowState] = React.useState<OverflowState>({\n    hasOverflow: false,\n    itemVisibility: {},\n    groupVisibility: {},\n  });\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  const update: OnUpdateOverflow = data => {\n    const { visibleItems, invisibleItems, groupVisibility } = data;\n\n    const itemVisibility: Record<string, boolean> = {};\n    visibleItems.forEach(item => {\n      itemVisibility[item.id] = true;\n    });\n    invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n    setOverflowState(() => {\n      return {\n        hasOverflow: data.invisibleItems.length > 0,\n        itemVisibility,\n        groupVisibility,\n      };\n    });\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n    update,\n    {\n      overflowDirection,\n      overflowAxis,\n      padding,\n      minimumVisible,\n      onUpdateItemVisibility: updateVisibilityAttribute,\n    },\n  );\n\n  const child = getTriggerChild(children);\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref, child?.ref),\n    className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility: overflowState.itemVisibility,\n        groupVisibility: overflowState.groupVisibility,\n        hasOverflow: overflowState.hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n        registerDivider,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,aAAa,QAAQ,4BAA4B;AAExG,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWT,MAAMU,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASL;IAEf,MAAM,EAAEM,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGpB,MAAMqB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QAEpDX,iBAAiB;YACf,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAG/B,qBAC5FkB,QACA;QACER;QACAD;QACAE;QACAH;QACAwB,wBAAwBjC;IAC1B;IAGF,MAAMkC,QAAQrC,gBAAgBW;IAC9B,MAAM2B,cAAcvC,4BAA4BY,UAAU;QACxDF,KAAKR,cAAc8B,cAActB,KAAK4B,kBAAAA,4BAAAA,MAAO5B,GAAG;QAChD8B,WAAWzC,aAAa,gBAAgBY,OAAO8B,YAAY,EAAE9B,OAAO+B,gBAAgB,EAAE9B,SAASH,KAAK,CAAC+B,SAAS;IAChH;IAEA,qBACE,oBAACrC,gBAAgBwC,QAAQ;QACvBC,OAAO;YACLvB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACF;OAECG;AAGP,GAAG"}

package/lib/components/OverflowItem/OverflowItem.js

@@ -1,13 +1,18 @@
 import * as React from 'react';
-import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
+import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
 import { useOverflowItem } from '../../useOverflowItem';
 /**
  * Attaches overflow item behavior to its child registered with the OverflowContext.
  * It does not render an element of its own.
+ *
+ * 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 child = getTriggerChild(children);
     return applyTriggerPropsToChildren(children, {
-        ref: useMergedRefs(containerRef, ref)
+        ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref)
     });
 });
+// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
+OverflowItem.isFluentTriggerComponent = true;

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

@@ -1 +1 @@
-{"version":3,"sources":["OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } 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 */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n  const { id, groupId, priority, children } = props;\n\n  const containerRef = useOverflowItem(id, priority, groupId);\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n  });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;CAGC,GACD,OAAO,MAAMC,6BAAeJ,MAAMK,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeT,gBAAgBK,IAAIE,UAAUD;IACnD,OAAOR,4BAA4BU,UAAU;QAC3CJ,KAAKL,cAAcU,cAAcL;IACnC;AACF,GAAG"}
+{"version":3,"sources":["OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  applyTriggerPropsToChildren,\n  type FluentTriggerComponent,\n  getTriggerChild,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n  const { id, groupId, priority, children } = props;\n\n  const containerRef = useOverflowItem(id, priority, groupId);\n  const child = getTriggerChild(children);\n\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref, child?.ref),\n  });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAE3BC,eAAe,EACfC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeL,MAAMM,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeT,gBAAgBK,IAAIE,UAAUD;IACnD,MAAMI,QAAQZ,gBAAgBU;IAE9B,OAAOX,4BAA4BW,UAAU;QAC3CJ,KAAKL,cAAcU,cAAcL,KAAKM,kBAAAA,4BAAAA,MAAON,GAAG;IAClD;AACF,GAAG;AAEH,6FAA6F;AAC5FH,aAAwCU,wBAAwB,GAAG"}

package/lib/components/useOverflowStyles.styles.js.map

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

package/lib-commonjs/components/Overflow.js

@@ -46,8 +46,9 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
         minimumVisible,
         onUpdateItemVisibility: _useOverflowContainer.updateVisibilityAttribute
     });
+    const child = (0, _reactutilities.getTriggerChild)(children);
     const clonedChild = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
-        ref: (0, _reactutilities.useMergedRefs)(containerRef, ref),
+        ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),
         className: (0, _react1.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
     });
     return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {

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

@@ -1 +1 @@
-{"version":3,"sources":["Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const styles = useOverflowStyles();\n    const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n    const [overflowState, setOverflowState] = React.useState({\n        hasOverflow: false,\n        itemVisibility: {},\n        groupVisibility: {}\n    });\n    // useOverflowContainer wraps this method in a useEventCallback.\n    const update = (data)=>{\n        const { visibleItems, invisibleItems, groupVisibility } = data;\n        const itemVisibility = {};\n        visibleItems.forEach((item)=>{\n            itemVisibility[item.id] = true;\n        });\n        invisibleItems.forEach((x)=>itemVisibility[x.id] = false);\n        setOverflowState(()=>{\n            return {\n                hasOverflow: data.invisibleItems.length > 0,\n                itemVisibility,\n                groupVisibility\n            };\n        });\n    };\n    const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {\n        overflowDirection,\n        overflowAxis,\n        padding,\n        minimumVisible,\n        onUpdateItemVisibility: updateVisibilityAttribute\n    });\n    const clonedChild = applyTriggerPropsToChildren(children, {\n        ref: useMergedRefs(containerRef, ref),\n        className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)\n    });\n    return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {\n        value: {\n            itemVisibility: overflowState.itemVisibility,\n            groupVisibility: overflowState.groupVisibility,\n            hasOverflow: overflowState.hasOverflow,\n            registerItem,\n            updateOverflow,\n            registerOverflowMenu,\n            registerDivider\n        }\n    }, clonedChild);\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/D,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC;QACZ,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAC1D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC;YAClBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC9B;QACAH,eAAeC,OAAO,CAAC,CAACG,IAAIT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACnDX,iBAAiB;YACb,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0CAAoB,EAACd,QAAQ;QACvHR;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC7B,UAAU;QACtDH,KAAKiC,IAAAA,6BAAa,EAACV,cAAcvB;QACjCkC,WAAWC,IAAAA,oBAAY,EAAC,gBAAgBlC,OAAOmC,YAAY,EAAEnC,OAAOoC,gBAAgB,EAAElC,SAASJ,KAAK,CAACmC,SAAS;IAClH;IACA,OAAO,WAAW,GAAGrC,OAAMyC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAC/DC,OAAO;YACH7B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACJ;IACJ,GAAGI;AACP"}
+{"version":3,"sources":["Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const styles = useOverflowStyles();\n    const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n    const [overflowState, setOverflowState] = React.useState({\n        hasOverflow: false,\n        itemVisibility: {},\n        groupVisibility: {}\n    });\n    // useOverflowContainer wraps this method in a useEventCallback.\n    const update = (data)=>{\n        const { visibleItems, invisibleItems, groupVisibility } = data;\n        const itemVisibility = {};\n        visibleItems.forEach((item)=>{\n            itemVisibility[item.id] = true;\n        });\n        invisibleItems.forEach((x)=>itemVisibility[x.id] = false);\n        setOverflowState(()=>{\n            return {\n                hasOverflow: data.invisibleItems.length > 0,\n                itemVisibility,\n                groupVisibility\n            };\n        });\n    };\n    const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {\n        overflowDirection,\n        overflowAxis,\n        padding,\n        minimumVisible,\n        onUpdateItemVisibility: updateVisibilityAttribute\n    });\n    const child = getTriggerChild(children);\n    const clonedChild = applyTriggerPropsToChildren(children, {\n        ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),\n        className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)\n    });\n    return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {\n        value: {\n            itemVisibility: overflowState.itemVisibility,\n            groupVisibility: overflowState.groupVisibility,\n            hasOverflow: overflowState.hasOverflow,\n            registerItem,\n            updateOverflow,\n            registerOverflowMenu,\n            registerDivider\n        }\n    }, clonedChild);\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","child","getTriggerChild","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;wBACM;gCAC+C;iCAC5C;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/D,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC;QACZ,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAC1D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC;YAClBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC9B;QACAH,eAAeC,OAAO,CAAC,CAACG,IAAIT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACnDX,iBAAiB;YACb,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0CAAoB,EAACd,QAAQ;QACvHR;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,QAAQC,IAAAA,+BAAe,EAAC7B;IAC9B,MAAM8B,cAAcC,IAAAA,2CAA2B,EAAC/B,UAAU;QACtDH,KAAKmC,IAAAA,6BAAa,EAACZ,cAAcvB,KAAK+B,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAM/B,GAAG;QAC7FoC,WAAWC,IAAAA,oBAAY,EAAC,gBAAgBpC,OAAOqC,YAAY,EAAErC,OAAOsC,gBAAgB,EAAEpC,SAASJ,KAAK,CAACqC,SAAS;IAClH;IACA,OAAO,WAAW,GAAGvC,OAAM2C,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAC/DC,OAAO;YACH/B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACJ;IACJ,GAAGM;AACP"}

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

@@ -15,7 +15,10 @@ 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 child = (0, _reactutilities.getTriggerChild)(children);
     return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
-        ref: (0, _reactutilities.useMergedRefs)(containerRef, ref)
+        ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref)
     });
 });
+// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
+OverflowItem.isFluentTriggerComponent = true;

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

@@ -1 +1 @@
-{"version":3,"sources":["OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const { id, groupId, priority, children } = props;\n    const containerRef = useOverflowItem(id, priority, groupId);\n    return applyTriggerPropsToChildren(children, {\n        ref: useMergedRefs(containerRef, ref)\n    });\n});\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","applyTriggerPropsToChildren","useMergedRefs"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;gCACoC;iCAC3B;AAIrB,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAC5C,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,OAAOK,IAAAA,2CAA2B,EAACH,UAAU;QACzCJ,KAAKQ,IAAAA,6BAAa,EAACH,cAAcL;IACrC;AACJ"}
+{"version":3,"sources":["OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\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 */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const { id, groupId, priority, children } = props;\n    const containerRef = useOverflowItem(id, priority, groupId);\n    const child = getTriggerChild(children);\n    return applyTriggerPropsToChildren(children, {\n        ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref)\n    });\n});\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\nOverflowItem.isFluentTriggerComponent = true;\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","child","getTriggerChild","applyTriggerPropsToChildren","useMergedRefs","isFluentTriggerComponent"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;gCACqD;iCAC5C;AAMrB,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAC5C,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,MAAMK,QAAQC,IAAAA,+BAAe,EAACJ;IAC9B,OAAOK,IAAAA,2CAA2B,EAACL,UAAU;QACzCJ,KAAKU,IAAAA,6BAAa,EAACL,cAAcL,KAAKO,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMP,GAAG;IACjG;AACJ;AACA,6FAA6F;AAC7FJ,aAAae,wBAAwB,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "0.0.0-nightly-20240513-0408.1",
+  "version": "0.0.0-nightly-20240515-0405.1",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,10 +34,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/priority-overflow": "0.0.0-nightly-20240513-0408.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20240513-0408.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240513-0408.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240513-0408.1",
+    "@fluentui/priority-overflow": "0.0.0-nightly-20240515-0405.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20240515-0405.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240515-0405.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240515-0405.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },