@fluentui-copilot/react-reference 0.13.9 → 0.13.10

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui-copilot/react-reference",
   "entries": [
     {
-      "date": "Fri, 07 Feb 2025 02:01:25 GMT",
+      "date": "Fri, 28 Feb 2025 00:26:29 GMT",
+      "tag": "@fluentui-copilot/react-reference_v0.13.10",
+      "version": "0.13.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "f62c9c504bcdb6e39ff00c1e95b0a93eb84b7e49",
+            "comment": "fix: overflow button now included in overflow calculation, preventing it from exceeding its parent container."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 07 Feb 2025 02:02:09 GMT",
       "tag": "@fluentui-copilot/react-reference_v0.13.9",
       "version": "0.13.9",
       "comments": {

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui-copilot/react-reference
 
-This log was last generated on Wed, 18 Dec 2024 08:55:42 GMT and should not be manually modified.
+This log was last generated on Fri, 28 Feb 2025 00:26:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.13.10](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.13.10)
+
+Fri, 28 Feb 2025 00:26:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.13.9..@fluentui-copilot/react-reference_v0.13.10)
+
+### Patches
+
+- fix: overflow button now included in overflow calculation, preventing it from exceeding its parent container. ([PR #2703](https://github.com/microsoft/fluentai/pull/2703) by tristan.watanabe@gmail.com)
+
 ## [0.13.8](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.13.8)
 
 Wed, 18 Dec 2024 08:55:42 GMT 

package/dist/index.d.ts

@@ -261,6 +261,7 @@ export declare type ReferenceOverflowButtonSlots = {
  * State used in rendering ReferenceOverflowButton
  */
 export declare type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {
+    id: string;
     shouldRenderOverflowButton: boolean;
 };
 

package/lib/components/reference-v2/ReferenceList/useReferenceList.js

@@ -46,11 +46,13 @@ export const useReferenceList_unstable = (props, ref) => {
     setAreReferencesExpanded(false);
   }, []);
   const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
+  // Since the overflow button is an OverflowItem that's always visible, we need to account for it.
+  const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;
   const state = {
     areReferencesExpanded,
     overflowButtonTriggeredViaKeyboard,
     maxVisibleReferences,
-    minVisibleReferences,
+    minVisibleReferences: minVisibleOverflowItems,
     referenceListRef,
     shouldUseOverflow,
     totalReferencesCount,

package/lib/components/reference-v2/ReferenceList/useReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const {\n    arrowableRegion,\n    children,\n    maxVisibleReferences,\n    minVisibleReferences,\n    showLessButton,\n    showMoreButton,\n    ...rest\n  } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    minVisibleItems: minVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow =\n    (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n    maxVisibleReferences !== undefined &&\n    !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    minVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      arrowableRegion: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    arrowableRegion: slot.always(arrowableRegion, {\n      defaultProps: { ...focusAttributes, children: resolvedChildren },\n      elementType: 'div',\n    }),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","arrowableRegion","children","maxVisibleReferences","minVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","resolvedChildren","additionalCondition","maxVisibleItems","minVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","state","components","root","always","elementType","defaultProps","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AACpC,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,aAAa,QAAQ,yCAAyC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EACJC,eAAe,EACfC,QAAQ,EACRC,oBAAoB,EACpBC,oBAAoB,EACpBC,cAAc,EACdC,cAAc,EACd,GAAGC,MACJ,GAAGR;IAEJ,MAAM,CAACS,uBAAuBC,yBAAyB,GAAGnB,MAAMoB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBrB,MAAMsB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBvB,MAAMwB,QAAQ,CAACC,KAAK,CAACb;IAClD,MAAMc,SAASnB;IACf,MAAMoB,mBAAmBrB,2BAA2B;QAClDsB,qBAAqB,CAACV;QACtBN;QACAiB,iBAAiBhB;QACjBiB,iBAAiBhB;QACjBiB,mBAAmBL,OAAOM,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqCjC,MAAMsB,MAAM,CAAC;IAExD,MAAMY,kBAAkB9B,wBAAwB;QAC9C+B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBtC,MAAMuC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,wBAAwBxC,MAAMuC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMsB,oBACJ,AAAC3B,CAAAA,yBAAyB4B,aAAa5B,uBAAuBS,oBAAmB,KACjFV,yBAAyB6B,aACzB,CAACxB;IAEH,MAAMyB,QAA4B;QAChCzB;QACAe;QACApB;QACAC;QACAO;QACAoB;QACAlB;QAEAqB,YAAY;YACVC,MAAM;YACNlC,iBAAiB;YACjBK,gBAAgB;YAChBD,gBAAgB;QAClB;QACA8B,MAAM1C,KAAK2C,MAAM,CACf7C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKW;YACxB,GAAGJ,IAAI;QACT,IACA;YAAE8B,aAAa;QAAM;QAEvBpC,iBAAiBR,KAAK2C,MAAM,CAACnC,iBAAiB;YAC5CqC,cAAc;gBAAE,GAAGd,eAAe;gBAAEtB,UAAUe;YAAiB;YAC/DoB,aAAa;QACf;QACA/B,gBAAgByB,oBAAoBtC,KAAK8C,QAAQ,CAACjC,gBAAgB;YAAE+B,aAAa;QAAO,KAAKL;QAC7F3B,gBAAgBG,wBAAwBf,KAAK8C,QAAQ,CAAClC,gBAAgB;YAAEgC,aAAa;QAAO,KAAKL;IACnG;IAEA,IAAIC,MAAM3B,cAAc,EAAE;QACxB2B,MAAM3B,cAAc,CAACkC,OAAO,GAAGhD,eAAeoC,uBAAuBK,MAAM3B,cAAc,CAACkC,OAAO;IACnG;IAEA,IAAIP,MAAM5B,cAAc,EAAE;QACxB4B,MAAM5B,cAAc,CAACmC,OAAO,GAAGhD,eAAesC,uBAAuBG,MAAM5B,cAAc,CAACmC,OAAO;IACnG;IAEA,OAAOP;AACT,EAAE"}
+{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const {\n    arrowableRegion,\n    children,\n    maxVisibleReferences,\n    minVisibleReferences,\n    showLessButton,\n    showMoreButton,\n    ...rest\n  } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    minVisibleItems: minVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow =\n    (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n    maxVisibleReferences !== undefined &&\n    !areReferencesExpanded;\n\n  // Since the overflow button is an OverflowItem that's always visible, we need to account for it.\n  const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    minVisibleReferences: minVisibleOverflowItems,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      arrowableRegion: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    arrowableRegion: slot.always(arrowableRegion, {\n      defaultProps: { ...focusAttributes, children: resolvedChildren },\n      elementType: 'div',\n    }),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","arrowableRegion","children","maxVisibleReferences","minVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","resolvedChildren","additionalCondition","maxVisibleItems","minVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","minVisibleOverflowItems","state","components","root","always","elementType","defaultProps","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AACpC,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,aAAa,QAAQ,yCAAyC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EACJC,eAAe,EACfC,QAAQ,EACRC,oBAAoB,EACpBC,oBAAoB,EACpBC,cAAc,EACdC,cAAc,EACd,GAAGC,MACJ,GAAGR;IAEJ,MAAM,CAACS,uBAAuBC,yBAAyB,GAAGnB,MAAMoB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBrB,MAAMsB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBvB,MAAMwB,QAAQ,CAACC,KAAK,CAACb;IAClD,MAAMc,SAASnB;IACf,MAAMoB,mBAAmBrB,2BAA2B;QAClDsB,qBAAqB,CAACV;QACtBN;QACAiB,iBAAiBhB;QACjBiB,iBAAiBhB;QACjBiB,mBAAmBL,OAAOM,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqCjC,MAAMsB,MAAM,CAAC;IAExD,MAAMY,kBAAkB9B,wBAAwB;QAC9C+B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBtC,MAAMuC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,wBAAwBxC,MAAMuC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMsB,oBACJ,AAAC3B,CAAAA,yBAAyB4B,aAAa5B,uBAAuBS,oBAAmB,KACjFV,yBAAyB6B,aACzB,CAACxB;IAEH,iGAAiG;IACjG,MAAMyB,0BAA0B7B,uBAAuBA,uBAAuB,IAAI;IAElF,MAAM8B,QAA4B;QAChC1B;QACAe;QACApB;QACAC,sBAAsB6B;QACtBtB;QACAoB;QACAlB;QAEAsB,YAAY;YACVC,MAAM;YACNnC,iBAAiB;YACjBK,gBAAgB;YAChBD,gBAAgB;QAClB;QACA+B,MAAM3C,KAAK4C,MAAM,CACf9C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKW;YACxB,GAAGJ,IAAI;QACT,IACA;YAAE+B,aAAa;QAAM;QAEvBrC,iBAAiBR,KAAK4C,MAAM,CAACpC,iBAAiB;YAC5CsC,cAAc;gBAAE,GAAGf,eAAe;gBAAEtB,UAAUe;YAAiB;YAC/DqB,aAAa;QACf;QACAhC,gBAAgByB,oBAAoBtC,KAAK+C,QAAQ,CAAClC,gBAAgB;YAAEgC,aAAa;QAAO,KAAKN;QAC7F3B,gBAAgBG,wBAAwBf,KAAK+C,QAAQ,CAACnC,gBAAgB;YAAEiC,aAAa;QAAO,KAAKN;IACnG;IAEA,IAAIE,MAAM5B,cAAc,EAAE;QACxB4B,MAAM5B,cAAc,CAACmC,OAAO,GAAGjD,eAAeoC,uBAAuBM,MAAM5B,cAAc,CAACmC,OAAO;IACnG;IAEA,IAAIP,MAAM7B,cAAc,EAAE;QACxB6B,MAAM7B,cAAc,CAACoC,OAAO,GAAGjD,eAAesC,uBAAuBI,MAAM7B,cAAc,CAACoC,OAAO;IACnG;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n  /** The root of the component that renders the overflow button. */\n  root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n  /**\n   * The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.\n   * If a string is passed, that is what is rendered verbatim.\n   * If a callback is passed, the callback is called with the number of items that are overflowing, and the result of the callback is rendered.\n   */\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {\n  shouldRenderOverflowButton: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAEE"}
+{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n  /** The root of the component that renders the overflow button. */\n  root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n  /**\n   * The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.\n   * If a string is passed, that is what is rendered verbatim.\n   * If a callback is passed, the callback is called with the number of items that are overflowing, and the result of the callback is rendered.\n   */\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {\n  id: string;\n  shouldRenderOverflowButton: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAGE"}

package/lib/components/reference-v2/ReferenceOverflowButton/renderReferenceOverflowButton.js

@@ -1,10 +1,18 @@
 import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-components';
+import { OverflowItem, assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of ReferenceOverflowButton
  */
 export const renderReferenceOverflowButton_unstable = state => {
   assertSlots(state);
-  return state.shouldRenderOverflowButton ? /*#__PURE__*/_jsx(state.root, {}) : null;
+  const {
+    id,
+    shouldRenderOverflowButton
+  } = state;
+  return shouldRenderOverflowButton ? /*#__PURE__*/_jsx(OverflowItem, {
+    id: id,
+    priority: 1,
+    children: /*#__PURE__*/_jsx(state.root, {})
+  }, id) : null;
 };
 //# sourceMappingURL=renderReferenceOverflowButton.js.map

package/lib/components/reference-v2/ReferenceOverflowButton/renderReferenceOverflowButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReferenceOverflowButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonState, ReferenceOverflowButtonSlots } from './ReferenceOverflowButton.types';\n\n/**\n * Render the final JSX of ReferenceOverflowButton\n */\nexport const renderReferenceOverflowButton_unstable = (state: ReferenceOverflowButtonState) => {\n  assertSlots<ReferenceOverflowButtonSlots>(state);\n\n  return state.shouldRenderOverflowButton ? <state.root /> : null;\n};\n"],"names":["assertSlots","renderReferenceOverflowButton_unstable","state","shouldRenderOverflowButton","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrDF,YAA0CE;IAE1C,OAAOA,MAAMC,0BAA0B,iBAAG,KAACD,MAAME,IAAI,QAAM;AAC7D,EAAE"}
+{"version":3,"sources":["renderReferenceOverflowButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonState, ReferenceOverflowButtonSlots } from './ReferenceOverflowButton.types';\n\n/**\n * Render the final JSX of ReferenceOverflowButton\n */\nexport const renderReferenceOverflowButton_unstable = (state: ReferenceOverflowButtonState) => {\n  assertSlots<ReferenceOverflowButtonSlots>(state);\n  const { id, shouldRenderOverflowButton } = state;\n\n  return shouldRenderOverflowButton ? (\n    <OverflowItem key={id} id={id} priority={1}>\n      <state.root />\n    </OverflowItem>\n  ) : null;\n};\n"],"names":["OverflowItem","assertSlots","renderReferenceOverflowButton_unstable","state","id","shouldRenderOverflowButton","priority","root"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,YAAY,EAAEC,WAAW,QAAQ,6BAA6B;AAGvE;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrDF,YAA0CE;IAC1C,MAAM,EAAEC,EAAE,EAAEC,0BAA0B,EAAE,GAAGF;IAE3C,OAAOE,2CACL,KAACL;QAAsBI,IAAIA;QAAIE,UAAU;kBACvC,cAAA,KAACH,MAAMI,IAAI;OADMH,MAGjB;AACN,EAAE"}

package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Enter, Space } from '@fluentui/keyboard-keys';
-import { getIntrinsicElementProps, mergeCallbacks, slot, useFocusFinders, useMergedRefs, useOverflowMenu } from '@fluentui/react-components';
+import { getIntrinsicElementProps, mergeCallbacks, slot, useFocusFinders, useId, useMergedRefs, useOverflowMenu } from '@fluentui/react-components';
 import { useTimeout } from '@fluentui/react-utilities';
 import { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';
 /**
@@ -17,10 +17,12 @@ export const useReferenceOverflowButton_unstable = (props, ref) => {
 
   const {
     children,
+    id,
     text
   } = props;
   const rootRef = React.useRef(null);
   const [setTimeout] = useTimeout();
+  const referenceOverflowButtonId = useId('reference-overflow-button-', id);
   const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);
   const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);
   const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);
@@ -67,6 +69,7 @@ export const useReferenceOverflowButton_unstable = (props, ref) => {
     }
   }, [areReferencesExpanded, findFirstFocusable, findNextFocusable, isOverflowing, maxVisibleReferences, overflowCount, referenceListRef, setTimeout, totalReferencesCount, triggeredViaKeyboard]);
   const state = {
+    id: referenceOverflowButtonId,
     shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
     components: {
       root: 'button'

package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n  const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n  const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n  const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n  const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n  const previousOverflow = React.useRef(0);\n\n  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(() => {\n    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n      let elementToFocus: HTMLElement | null | undefined;\n\n      // If the references are collapsed, we move focus to the overflow button.\n      if (!areReferencesExpanded) {\n        elementToFocus = rootRef.current;\n        previousOverflow.current = overflowCount;\n      }\n      // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n      // We do this by moving focus according to the following heuristics:\n      // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n      // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n      else if (rootRef.current && referenceListRef.current) {\n        const positionToFocus =\n          maxVisibleReferences < totalReferencesCount - previousOverflow.current\n            ? maxVisibleReferences\n            : totalReferencesCount - previousOverflow.current;\n\n        let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n        for (let i = 0; i < positionToFocus && currentElement; i++) {\n          currentElement = findNextFocusable(currentElement);\n        }\n\n        elementToFocus = currentElement;\n      }\n\n      // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n      setTimeout(() => {\n        elementToFocus?.focus();\n        triggeredViaKeyboard.current = false;\n      }, 0);\n    }\n  }, [\n    areReferencesExpanded,\n    findFirstFocusable,\n    findNextFocusable,\n    isOverflowing,\n    maxVisibleReferences,\n    overflowCount,\n    referenceListRef,\n    setTimeout,\n    totalReferencesCount,\n    triggeredViaKeyboard,\n  ]);\n\n  const state: ReferenceOverflowButtonState = {\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useReferenceOverflowButton_unstable","props","ref","children","text","rootRef","useRef","setTimeout","areReferencesExpanded","ctx","maxVisibleReferences","referenceListRef","totalReferencesCount","triggeredViaKeyboard","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","processedText","findFirstFocusable","findNextFocusable","onKeyDown","useCallback","ev","key","current","previousOverflow","useEffect","undefined","elementToFocus","positionToFocus","currentElement","i","focus","state","shouldRenderOverflowButton","components","root","always","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,eAAe,EACfC,aAAa,EACbC,eAAe,QACV,6BAA6B;AACpC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,gCAAgC,QAAQ,sDAAsD;AAGvG;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA;IAEA,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGH;IAE3B,MAAMI,UAAUhB,MAAMiB,MAAM,CAAoB;IAEhD,MAAM,CAACC,WAAW,GAAGT;IAErB,MAAMU,wBAAwBT,iCAAiCU,CAAAA,MAAOA,IAAID,qBAAqB;IAC/F,MAAME,uBAAuBX,iCAAiCU,CAAAA,MAAOA,IAAIC,oBAAoB;IAC7F,MAAMC,mBAAmBZ,iCAAiCU,CAAAA,MAAOA,IAAIE,gBAAgB;IACrF,MAAMC,uBAAuBb,iCAAiCU,CAAAA,MAAOA,IAAIG,oBAAoB;IAC7F,MAAMC,uBAAuBd,iCAAiCU,CAAAA,MAAOA,IAAIK,kCAAkC;IAE3G,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGnB;IAEzC,MAAMoB,gBAAgBd,qBAAAA,sBAAAA,WAAa,OAAOC,SAAS,aAAaA,KAAKY,iBAAiBZ;IAEtF,MAAM,EAAEc,kBAAkB,EAAEC,iBAAiB,EAAE,GAAGxB;IAClD,MAAMyB,YAAY/B,MAAMgC,WAAW,CACjCC,CAAAA;QACE,IAAIA,GAAGC,GAAG,KAAKjC,SAASgC,GAAGC,GAAG,KAAKhC,OAAO;YACxCsB,qBAAqBW,OAAO,GAAG;QACjC;IACF,GACA;QAACX;KAAqB;IAGxB,0IAA0I;IAC1I,MAAMY,mBAAmBpC,MAAMiB,MAAM,CAAC;IAEtC,gHAAgH;IAChHjB,MAAMqC,SAAS,CAAC;QACd,+GAA+G;QAC/G,IAAIhB,yBAAyBiB,aAAad,qBAAqBW,OAAO,EAAE;YACtE,IAAII;YAEJ,yEAAyE;YACzE,IAAI,CAACpB,uBAAuB;gBAC1BoB,iBAAiBvB,QAAQmB,OAAO;gBAChCC,iBAAiBD,OAAO,GAAGR;YAC7B,OAKK,IAAIX,QAAQmB,OAAO,IAAIb,iBAAiBa,OAAO,EAAE;gBACpD,MAAMK,kBACJnB,uBAAuBE,uBAAuBa,iBAAiBD,OAAO,GAClEd,uBACAE,uBAAuBa,iBAAiBD,OAAO;gBAErD,IAAIM,iBAAiDZ,mBAAmBP,iBAAiBa,OAAO;gBAChG,IAAK,IAAIO,IAAI,GAAGA,IAAIF,mBAAmBC,gBAAgBC,IAAK;oBAC1DD,iBAAiBX,kBAAkBW;gBACrC;gBAEAF,iBAAiBE;YACnB;YAEA,+IAA+I;YAC/IvB,WAAW;gBACTqB,2BAAAA,qCAAAA,eAAgBI,KAAK;gBACrBnB,qBAAqBW,OAAO,GAAG;YACjC,GAAG;QACL;IACF,GAAG;QACDhB;QACAU;QACAC;QACAJ;QACAL;QACAM;QACAL;QACAJ;QACAK;QACAC;KACD;IAED,MAAMoB,QAAsC;QAC1CC,4BAA4BnB,iBAAiBP;QAE7C2B,YAAY;YACVC,MAAM;QACR;QAEAA,MAAM1C,KAAK2C,MAAM,CACf7C,yBAAyB,UAAU;YACjCU,KAAKN,cAAcS,SAASH;YAC5B,GAAGD,KAAK;QACV,IACA;YACEqC,cAAc;gBACZnC,UAAUc;YACZ;YACAsB,aAAa;QACf;IAEJ;IAEAN,MAAMG,IAAI,CAAChB,SAAS,GAAG3B,eAAe2B,WAAWnB,MAAMmB,SAAS;IAEhE,OAAOa;AACT,EAAE"}
+{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useId,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, id, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const referenceOverflowButtonId = useId('reference-overflow-button-', id);\n\n  const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n  const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n  const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n  const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n  const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n  const previousOverflow = React.useRef(0);\n\n  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(() => {\n    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n      let elementToFocus: HTMLElement | null | undefined;\n\n      // If the references are collapsed, we move focus to the overflow button.\n      if (!areReferencesExpanded) {\n        elementToFocus = rootRef.current;\n        previousOverflow.current = overflowCount;\n      }\n      // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n      // We do this by moving focus according to the following heuristics:\n      // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n      // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n      else if (rootRef.current && referenceListRef.current) {\n        const positionToFocus =\n          maxVisibleReferences < totalReferencesCount - previousOverflow.current\n            ? maxVisibleReferences\n            : totalReferencesCount - previousOverflow.current;\n\n        let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n        for (let i = 0; i < positionToFocus && currentElement; i++) {\n          currentElement = findNextFocusable(currentElement);\n        }\n\n        elementToFocus = currentElement;\n      }\n\n      // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n      setTimeout(() => {\n        elementToFocus?.focus();\n        triggeredViaKeyboard.current = false;\n      }, 0);\n    }\n  }, [\n    areReferencesExpanded,\n    findFirstFocusable,\n    findNextFocusable,\n    isOverflowing,\n    maxVisibleReferences,\n    overflowCount,\n    referenceListRef,\n    setTimeout,\n    totalReferencesCount,\n    triggeredViaKeyboard,\n  ]);\n\n  const state: ReferenceOverflowButtonState = {\n    id: referenceOverflowButtonId,\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useId","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useReferenceOverflowButton_unstable","props","ref","children","id","text","rootRef","useRef","setTimeout","referenceOverflowButtonId","areReferencesExpanded","ctx","maxVisibleReferences","referenceListRef","totalReferencesCount","triggeredViaKeyboard","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","processedText","findFirstFocusable","findNextFocusable","onKeyDown","useCallback","ev","key","current","previousOverflow","useEffect","undefined","elementToFocus","positionToFocus","currentElement","i","focus","state","shouldRenderOverflowButton","components","root","always","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,eAAe,EACfC,KAAK,EACLC,aAAa,EACbC,eAAe,QACV,6BAA6B;AACpC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,gCAAgC,QAAQ,sDAAsD;AAGvG;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA;IAEA,MAAM,EAAEC,QAAQ,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGJ;IAE/B,MAAMK,UAAUlB,MAAMmB,MAAM,CAAoB;IAEhD,MAAM,CAACC,WAAW,GAAGV;IAErB,MAAMW,4BAA4Bd,MAAM,8BAA8BS;IAEtE,MAAMM,wBAAwBX,iCAAiCY,CAAAA,MAAOA,IAAID,qBAAqB;IAC/F,MAAME,uBAAuBb,iCAAiCY,CAAAA,MAAOA,IAAIC,oBAAoB;IAC7F,MAAMC,mBAAmBd,iCAAiCY,CAAAA,MAAOA,IAAIE,gBAAgB;IACrF,MAAMC,uBAAuBf,iCAAiCY,CAAAA,MAAOA,IAAIG,oBAAoB;IAC7F,MAAMC,uBAAuBhB,iCAAiCY,CAAAA,MAAOA,IAAIK,kCAAkC;IAE3G,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGrB;IAEzC,MAAMsB,gBAAgBhB,qBAAAA,sBAAAA,WAAa,OAAOE,SAAS,aAAaA,KAAKa,iBAAiBb;IAEtF,MAAM,EAAEe,kBAAkB,EAAEC,iBAAiB,EAAE,GAAG3B;IAClD,MAAM4B,YAAYlC,MAAMmC,WAAW,CACjCC,CAAAA;QACE,IAAIA,GAAGC,GAAG,KAAKpC,SAASmC,GAAGC,GAAG,KAAKnC,OAAO;YACxCyB,qBAAqBW,OAAO,GAAG;QACjC;IACF,GACA;QAACX;KAAqB;IAGxB,0IAA0I;IAC1I,MAAMY,mBAAmBvC,MAAMmB,MAAM,CAAC;IAEtC,gHAAgH;IAChHnB,MAAMwC,SAAS,CAAC;QACd,+GAA+G;QAC/G,IAAIhB,yBAAyBiB,aAAad,qBAAqBW,OAAO,EAAE;YACtE,IAAII;YAEJ,yEAAyE;YACzE,IAAI,CAACpB,uBAAuB;gBAC1BoB,iBAAiBxB,QAAQoB,OAAO;gBAChCC,iBAAiBD,OAAO,GAAGR;YAC7B,OAKK,IAAIZ,QAAQoB,OAAO,IAAIb,iBAAiBa,OAAO,EAAE;gBACpD,MAAMK,kBACJnB,uBAAuBE,uBAAuBa,iBAAiBD,OAAO,GAClEd,uBACAE,uBAAuBa,iBAAiBD,OAAO;gBAErD,IAAIM,iBAAiDZ,mBAAmBP,iBAAiBa,OAAO;gBAChG,IAAK,IAAIO,IAAI,GAAGA,IAAIF,mBAAmBC,gBAAgBC,IAAK;oBAC1DD,iBAAiBX,kBAAkBW;gBACrC;gBAEAF,iBAAiBE;YACnB;YAEA,+IAA+I;YAC/IxB,WAAW;gBACTsB,2BAAAA,qCAAAA,eAAgBI,KAAK;gBACrBnB,qBAAqBW,OAAO,GAAG;YACjC,GAAG;QACL;IACF,GAAG;QACDhB;QACAU;QACAC;QACAJ;QACAL;QACAM;QACAL;QACAL;QACAM;QACAC;KACD;IAED,MAAMoB,QAAsC;QAC1C/B,IAAIK;QACJ2B,4BAA4BnB,iBAAiBP;QAE7C2B,YAAY;YACVC,MAAM;QACR;QAEAA,MAAM7C,KAAK8C,MAAM,CACfhD,yBAAyB,UAAU;YACjCW,KAAKN,cAAcU,SAASJ;YAC5B,GAAGD,KAAK;QACV,IACA;YACEuC,cAAc;gBACZrC,UAAUgB;YACZ;YACAsB,aAAa;QACf;IAEJ;IAEAN,MAAMG,IAAI,CAAChB,SAAS,GAAG9B,eAAe8B,WAAWrB,MAAMqB,SAAS;IAEhE,OAAOa;AACT,EAAE"}

package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js

@@ -40,11 +40,13 @@ const useReferenceList_unstable = (props, ref)=>{
         setAreReferencesExpanded(false);
     }, []);
     const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
+    // Since the overflow button is an OverflowItem that's always visible, we need to account for it.
+    const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;
     const state = {
         areReferencesExpanded,
         overflowButtonTriggeredViaKeyboard,
         maxVisibleReferences,
-        minVisibleReferences,
+        minVisibleReferences: minVisibleOverflowItems,
         referenceListRef,
         shouldUseOverflow,
         totalReferencesCount,

package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const {\n    arrowableRegion,\n    children,\n    maxVisibleReferences,\n    minVisibleReferences,\n    showLessButton,\n    showMoreButton,\n    ...rest\n  } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    minVisibleItems: minVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow =\n    (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n    maxVisibleReferences !== undefined &&\n    !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    minVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      arrowableRegion: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    arrowableRegion: slot.always(arrowableRegion, {\n      defaultProps: { ...focusAttributes, children: resolvedChildren },\n      elementType: 'div',\n    }),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["arrowableRegion","maxVisibleReferences","referenceListRef","children","totalReferencesCount","useRootStyles","minVisibleReferences","resolvedChildren","additionalCondition","overflowClassName","styles","React","useState","useRef","Children","count","overflowButtonTriggeredViaKeyboard","focusAttributes","areReferencesExpanded","memorizeCurrent","minVisibleItems","onShowMoreButtonClick","useCallback","setAreReferencesExpanded","axis","circular","shouldUseOverflow","components","undefined","root","elementType","defaultProps","ref","showMoreButton","showLessButton","slot","optional","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BIA;;;eAAAA;;;;iEA1BmB;iCAOhB;gCACoC;0CACb;AAgB5B,MACEA,4BAEAC,CAAAA,OAAAA;UAOF,EACAD,eAAME,EAENC,QAAMC,EACNH,oBAAeI,EACfC,oBAAMC,gBACJC,gBACAL;UAGAM,CAAAA,uBAAmBC,yBAAe,GAAAC,OAAAC,QAAA,CAAA;UACpCV,mBAAAS,OAAAE,MAAA,CAAA;UAEAT,uBAAAO,OAAAG,QAAA,CAAAC,KAAA,CAAAZ;UACAO,SAAMM,IAAAA,uCAAAA;UAENT,mBAAMU,IAAAA,0CAA0C,EAAA;6BACxC,CAAAC;;yBAENC;QACFC,iBAAAd;QAEAG,mBAAMY,OAAAA,QAAwBV;;gGAEzB;UAELK,qCAAoCM,OAAWT,MAA6C,CAAA;UAC1FU,kBAAAA,IAAAA,wCAAyB,EAAA;QAC3BC,MAAK;QAELC,UAAMC;QAKNP,iBAAkC;;UAEhCH,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAf;;UAEAC,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAwB;;UAGAC,oBAAY,AAAArB,CAAAA,yBAAAsB,aAAAtB,uBAAAF,oBAAA,KAAAH,yBAAA2B,aAAA,CAAAV;kBACVW;;;;;;;;oBAUA;kBAAEC;6BAAmB;4BAEvB9B;4BACE+B;;0CAAoC5B,CAAAA,IAAAA,yCAAUI,EAAAA,OAAAA;mDAAiB,EAAAyB,KAAA9B;mBAC/D4B;YACF;yBACAG;;yBAA6FL,qBAAAA,CAAAA,MAAAA,CAAAA,iBAAAA;0BAC7FM;kCAAqF;gBAAO/B,UAAKyB;YACnG;YAEAE,aAAUG;;QAEVA,gBAAAP,oBAAAS,qBAAA,CAAAC,QAAA,CAAAH,gBAAA;YAEAH,aAAUI;aACRG;QACFH,gBAAAhB,wBAAAiB,qBAAA,CAAAC,QAAA,CAAAF,gBAAA;YAEAJ,aAAOO;QACP,KAAAT"}
+{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const {\n    arrowableRegion,\n    children,\n    maxVisibleReferences,\n    minVisibleReferences,\n    showLessButton,\n    showMoreButton,\n    ...rest\n  } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    minVisibleItems: minVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow =\n    (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n    maxVisibleReferences !== undefined &&\n    !areReferencesExpanded;\n\n  // Since the overflow button is an OverflowItem that's always visible, we need to account for it.\n  const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    minVisibleReferences: minVisibleOverflowItems,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      arrowableRegion: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    arrowableRegion: slot.always(arrowableRegion, {\n      defaultProps: { ...focusAttributes, children: resolvedChildren },\n      elementType: 'div',\n    }),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["arrowableRegion","maxVisibleReferences","referenceListRef","children","totalReferencesCount","useRootStyles","minVisibleReferences","resolvedChildren","additionalCondition","overflowClassName","styles","React","useState","useRef","Children","count","overflowButtonTriggeredViaKeyboard","focusAttributes","areReferencesExpanded","memorizeCurrent","minVisibleItems","onShowMoreButtonClick","useCallback","setAreReferencesExpanded","axis","circular","shouldUseOverflow","components","root","minVisibleOverflowItems","elementType","defaultProps","ref","showMoreButton","undefined","showLessButton","slot","optional","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BIA;;;eAAAA;;;;iEA1BmB;iCAOhB;gCACoC;0CACb;AAgB5B,MACEA,4BAEAC,CAAAA,OAAAA;UAOF,EACAD,eAAME,EAENC,QAAMC,EACNH,oBAAeI,EACfC,oBAAMC,gBACJC,gBACAL;UAGAM,CAAAA,uBAAmBC,yBAAe,GAAAC,OAAAC,QAAA,CAAA;UACpCV,mBAAAS,OAAAE,MAAA,CAAA;UAEAT,uBAAAO,OAAAG,QAAA,CAAAC,KAAA,CAAAZ;UACAO,SAAMM,IAAAA,uCAAAA;UAENT,mBAAMU,IAAAA,0CAA0C,EAAA;6BACxC,CAAAC;;yBAENC;QACFC,iBAAAd;QAEAG,mBAAMY,OAAAA,QAAwBV;;gGAEzB;UAELK,qCAAoCM,OAAWT,MAA6C,CAAA;UAC1FU,kBAAAA,IAAAA,wCAAyB,EAAA;QAC3BC,MAAK;QAELC,UAAMC;QAKNP,iBAAA;;UAGAE,wBAAkCV,OAAAW,WAAA,CAAA;iCAChCJ;;UAEAjB,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAK;;UAEAoB,oBAAAA,CAAAA,yBAAAA,aAAAA,uBAAAA,oBAAAA,KAAAA,yBAAAA,aAAAA,CAAAA;qGACAtB;UAEAuB,0BAAYrB,uBAAAA,uBAAA,IAAA;kBACVsB;;;;8BAIFC;;;;oBAME;kBAAEC;6BAAmB;4BAEvB9B;4BACE+B;;0CAAoC5B,CAAAA,IAAAA,yCAAUI,EAAAA,OAAAA;mDAAiB,EAAAyB,KAAA9B;mBAC/D4B;YACF;yBACAG;;yBAA6FC,qBAAAA,CAAAA,MAAAA,CAAAA,iBAAAA;0BAC7FC;kCAAqF;gBAAOhC,UAAK+B;YACnG;YAEAJ,aAAUG;;QAEVA,gBAAAP,oBAAAU,qBAAA,CAAAC,QAAA,CAAAJ,gBAAA;YAEAH,aAAUK;aACRG;QACFH,gBAAAjB,wBAAAkB,qBAAA,CAAAC,QAAA,CAAAF,gBAAA;YAEAL,aAAOQ;QACP,KAAAJ"}

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n  /** The root of the component that renders the overflow button. */\n  root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n  /**\n   * The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.\n   * If a string is passed, that is what is rendered verbatim.\n   * If a callback is passed, the callback is called with the number of items that are overflowing, and the result of the callback is rendered.\n   */\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {\n  shouldRenderOverflowButton: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}
+{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n  /** The root of the component that renders the overflow button. */\n  root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n  /**\n   * The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.\n   * If a string is passed, that is what is rendered verbatim.\n   * If a callback is passed, the callback is called with the number of items that are overflowing, and the result of the callback is rendered.\n   */\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {\n  id: string;\n  shouldRenderOverflowButton: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/renderReferenceOverflowButton.js

@@ -12,5 +12,10 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactcomponents = require("@fluentui/react-components");
 const renderReferenceOverflowButton_unstable = (state)=>{
     (0, _reactcomponents.assertSlots)(state);
-    return state.shouldRenderOverflowButton ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}) : null;
+    const { id, shouldRenderOverflowButton } = state;
+    return shouldRenderOverflowButton ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.OverflowItem, {
+        id: id,
+        priority: 1,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    }, id) : null;
 }; //# sourceMappingURL=renderReferenceOverflowButton.js.map

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/renderReferenceOverflowButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReferenceOverflowButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonState, ReferenceOverflowButtonSlots } from './ReferenceOverflowButton.types';\n\n/**\n * Render the final JSX of ReferenceOverflowButton\n */\nexport const renderReferenceOverflowButton_unstable = (state: ReferenceOverflowButtonState) => {\n  assertSlots<ReferenceOverflowButtonSlots>(state);\n\n  return state.shouldRenderOverflowButton ? <state.root /> : null;\n};\n"],"names":["assertSlots","state","shouldRenderOverflowButton","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BAVwB;iCAGE;AAO1BA,MAAAA,yCAA0CC,CAAAA;oCAEnCA,EAAAA;IACP,OAAAA,MAAAC,0BAAA,GAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAF,MAAAG,IAAA,EAAA,CAAA,KAAA"}
+{"version":3,"sources":["renderReferenceOverflowButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonState, ReferenceOverflowButtonSlots } from './ReferenceOverflowButton.types';\n\n/**\n * Render the final JSX of ReferenceOverflowButton\n */\nexport const renderReferenceOverflowButton_unstable = (state: ReferenceOverflowButtonState) => {\n  assertSlots<ReferenceOverflowButtonSlots>(state);\n  const { id, shouldRenderOverflowButton } = state;\n\n  return shouldRenderOverflowButton ? (\n    <OverflowItem key={id} id={id} priority={1}>\n      <state.root />\n    </OverflowItem>\n  ) : null;\n};\n"],"names":["assertSlots","state","id","_jsx","OverflowItem"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BAVwB;iCAGgB;AAOxCA,MAAAA,yCAA0CC,CAAAA;oCAClCC,EAAED;UAEV,gCAC2C;WAAtBC,6BAGjB,WAAA,GAAAC,IAAAA,eAAA,EAAAC,6BAAA,EAAA;QACJF,IAAAA"}

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js

@@ -16,9 +16,10 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _referenceListContext = require("../../../contexts/reference-v2/referenceListContext");
 const useReferenceOverflowButton_unstable = (props, ref)=>{
     'use no memo';
-    const { children, text } = props;
+    const { children, id, text } = props;
     const rootRef = _react.useRef(null);
     const [setTimeout] = (0, _reactutilities.useTimeout)();
+    const referenceOverflowButtonId = (0, _reactcomponents.useId)('reference-overflow-button-', id);
     const areReferencesExpanded = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.areReferencesExpanded);
     const maxVisibleReferences = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.maxVisibleReferences);
     const referenceListRef = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.referenceListRef);
@@ -72,6 +73,7 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
         triggeredViaKeyboard
     ]);
     const state = {
+        id: referenceOverflowButtonId,
         shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
         components: {
             root: 'button'

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n  const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n  const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n  const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n  const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n  const previousOverflow = React.useRef(0);\n\n  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(() => {\n    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n      let elementToFocus: HTMLElement | null | undefined;\n\n      // If the references are collapsed, we move focus to the overflow button.\n      if (!areReferencesExpanded) {\n        elementToFocus = rootRef.current;\n        previousOverflow.current = overflowCount;\n      }\n      // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n      // We do this by moving focus according to the following heuristics:\n      // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n      // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n      else if (rootRef.current && referenceListRef.current) {\n        const positionToFocus =\n          maxVisibleReferences < totalReferencesCount - previousOverflow.current\n            ? maxVisibleReferences\n            : totalReferencesCount - previousOverflow.current;\n\n        let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n        for (let i = 0; i < positionToFocus && currentElement; i++) {\n          currentElement = findNextFocusable(currentElement);\n        }\n\n        elementToFocus = currentElement;\n      }\n\n      // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n      setTimeout(() => {\n        elementToFocus?.focus();\n        triggeredViaKeyboard.current = false;\n      }, 0);\n    }\n  }, [\n    areReferencesExpanded,\n    findFirstFocusable,\n    findNextFocusable,\n    isOverflowing,\n    maxVisibleReferences,\n    overflowCount,\n    referenceListRef,\n    setTimeout,\n    totalReferencesCount,\n    triggeredViaKeyboard,\n  ]);\n\n  const state: ReferenceOverflowButtonState = {\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["useReferenceOverflowButton_unstable","props","ref","children","areReferencesExpanded","text","rootRef","totalReferencesCount","setTimeout","triggeredViaKeyboard","useReferenceListContext_unstable","overflowCount","useOverflowMenu","maxVisibleReferences","referenceListRef","findFirstFocusable","useFocusFinders","useCallback","ev","Enter","ctx","overflowButtonTriggeredViaKeyboard","processedText","previousOverflow","findNextFocusable","React","onKeyDown","key","undefined","elementToFocus","current","i","positionToFocus","currentElement","focus","isOverflowing","components","state","shouldRenderOverflowButton","root","getIntrinsicElementProps","useMergedRefs","slot","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BEA;;;eAAAA;;;;iEA3BqB;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAEAC,QAAMC,EACNC,IAAA,KACAJ;UACAK,UAAMC,OAAAA,MAAAA,CAAAA;UACN,CAAAC,WAAMC,GAAAA,IAAAA,0BAAuBC;UAE7BN,wBAAuBO,IAAAA,sDAAkBC,EAAAA,CAAAA,MAAAA,IAAAA,qBAAAA;UAEzCC,uBAAsBV,IAAAA,sDAAAA,EAAAA,CAAAA,MAAAA,IAAAA,oBAAoBE;UAE1CS,mBAAQC,IAAAA,sDAA0CC,EAAAA,CAAAA,MAAAA,IAAAA,gBAAAA;UAClDT,uBAAwBU,IAAAA,sDACtBC,EAAAA,CAAAA,MAAAA,IAAAA,oBAAAA;UACET,uBAAeU,IAAAA,sDAA2B,EAAAC,CAAAA,MAAAA,IAAAC,kCAAA;yBAE1C,EACFV,aACA,yCAACF;UAAqBa,gBAAAnB,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAE,SAAA,aAAAA,KAAAM,iBAAAN;UAGxB,EACAU,kBAAMQ,EAENC,iBAAA,KACAC,IAAAA,gCAAgB;UACdC,YAAAD,OAAAR,WAAA,CAAAC,CAAAA;YACAA,GAAAS,GAAId,KAAAA,mBAAAA,IAAAA,GAAAA,GAAAA,KAAyBe,mBAAAA,EAAAA;iCACvBC,OAAAA,GAAAA;;;;KAGCzB;8IAC6B;6BAChCmB,OAAiBO,MAAAA,CAAO;oHAM4B;oBACpD,CAAA;uHAKgG;qCAChFC,aAAIC,qBAAmBC,OAAqB,EAAA;;qFAE5D;wCAEiBA;iCACnB3B,QAAAwB,OAAA;iCAEAA,OAAA,GAAAnB;mBACAH,IAAAA,QAAWsB,OAAA,IAAAhB,iBAAAgB,OAAA,EAAA;wCACTD,uBAAAA,uBAAAA,iBAAgBK,OAAK,GAAArB,uBAAAN,uBAAAgB,iBAAAO,OAAA;qCACrBrB,mBAA+BK,iBAAAgB,OAAA;oBACjC,IAAGC,IAAA,GAAAA,IAAAC,mBAAAC,gBAAAF,IAAA;oBACLE,iBAAAT,kBAAAS;gBACC;gBACD7B,iBAAAA;;2JAEAoB;uBACAW;gBACAtB,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,KAAAA;gBACAF,qBAAAA,OAAAA,GAAAA;eACAG;;;;QAEAP;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;KAAAA;UACAE,QAAAA;oCACD0B,iBAAA/B;QAEDgC,YAAMC;kBACJC;;mCAGEC,CAAAA,MAAM,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBACRC,IAAAA,8BAAA,EAAAnC,SAAAJ;eAEAqC,KAAMG;;0BAGM;gBACVvC,UACAmB;;yBAEInB;;;UAGJoC,IAAA,CAAAb,SAAA,GAAAiB,IAAAA,+BAAA,EAAAjB,WAAAzB,MAAAyB,SAAA;WAEJW;yDAIOA"}
+{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useId,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, id, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const referenceOverflowButtonId = useId('reference-overflow-button-', id);\n\n  const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n  const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n  const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n  const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n  const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n  const previousOverflow = React.useRef(0);\n\n  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(() => {\n    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n      let elementToFocus: HTMLElement | null | undefined;\n\n      // If the references are collapsed, we move focus to the overflow button.\n      if (!areReferencesExpanded) {\n        elementToFocus = rootRef.current;\n        previousOverflow.current = overflowCount;\n      }\n      // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n      // We do this by moving focus according to the following heuristics:\n      // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n      // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n      else if (rootRef.current && referenceListRef.current) {\n        const positionToFocus =\n          maxVisibleReferences < totalReferencesCount - previousOverflow.current\n            ? maxVisibleReferences\n            : totalReferencesCount - previousOverflow.current;\n\n        let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n        for (let i = 0; i < positionToFocus && currentElement; i++) {\n          currentElement = findNextFocusable(currentElement);\n        }\n\n        elementToFocus = currentElement;\n      }\n\n      // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n      setTimeout(() => {\n        elementToFocus?.focus();\n        triggeredViaKeyboard.current = false;\n      }, 0);\n    }\n  }, [\n    areReferencesExpanded,\n    findFirstFocusable,\n    findNextFocusable,\n    isOverflowing,\n    maxVisibleReferences,\n    overflowCount,\n    referenceListRef,\n    setTimeout,\n    totalReferencesCount,\n    triggeredViaKeyboard,\n  ]);\n\n  const state: ReferenceOverflowButtonState = {\n    id: referenceOverflowButtonId,\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["useReferenceOverflowButton_unstable","props","ref","children","referenceOverflowButtonId","id","text","rootRef","totalReferencesCount","setTimeout","triggeredViaKeyboard","useReferenceListContext_unstable","overflowCount","useOverflowMenu","areReferencesExpanded","maxVisibleReferences","useFocusFinders","referenceListRef","React","ev","Enter","ctx","overflowButtonTriggeredViaKeyboard","isOverflowing","processedText","findFirstFocusable","onKeyDown","undefined","elementToFocus","current","currentElement","findNextFocusable","previousOverflow","i","positionToFocus","state","shouldRenderOverflowButton","components","slot","always","getIntrinsicElementProps","root","defaultProps","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BEA;;;eAAAA;;;;iEA5BqB;8BACM;iCAStB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAEAC,QAAMC,EAENC,EAAA,EACAC,IAAA,KACAL;UACAM,UAAMC,OAAAA,MAAAA,CAAAA;UACN,CAAAC,WAAMC,GAAAA,IAAAA,0BAAuBC;UAE7BP,4BAAuBQ,IAAAA,sBAAa,EAAE,8BAAGC;UAEzCC,wBAAsBX,IAAAA,sDAAAA,EAAAA,CAAAA,MAAAA,IAAAA,qBAA6B;UAEnDY,uBAA0BJ,IAAAA,sDAAwBK,EAAAA,CAAAA,MAAAA,IAAAA,oBAAAA;UAClDC,mBAAkBC,IAAAA,sDAChBC,EAAAA,CAAAA,MAAAA,IAAAA,gBAAAA;UACEX,uBAAeY,IAAAA,sDAA2B,EAAAC,CAAAA,MAAAA,IAAAb,oBAAA;iCACxCE,IAAAA,sDAA+B,EAAAW,CAAAA,MAAAA,IAAAC,kCAAA;UACjC,EACFC,aACA,eAACb,KAAqBG,IAAAA,gCAAA;UAGxBW,gBAAArB,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAG,SAAA,aAAAA,KAAAM,iBAAAN;UACA,EAEAmB,kBAAA,EACAP,iBAAgB,yCACd;UACAQ,YAAIX,OAAAA,WAAyBY,CAAAA,CAAAA;kBAC3B,KAAIC,mBAAAA,IAAAA,GAAAA,GAAAA,KAAAA,mBAAAA,EAAAA;iCAEJC,OAAA,GAAA;;;;KAEED;8IAC2BhB;6BAMpBL,OAAQsB,MAAO,CAAA;oHAGhBd;oBAGN,CAAA;uHAC4D;qCAC1De,aAAiBC,qBAAkBD,OAAAA,EAAAA;;qFAGpBA;wCACnB;iCAEAvB,QAAAsB,OAAA;iCACWA,OAAA,GAAAjB;uBACTgB,QAAAA,OAAAA,IAAAA,iBAAAA,OAAAA,EAAAA;wCACAlB,uBAA+BF,uBAAAwB,iBAAAH,OAAA,GAAAd,uBAAAP,uBAAAwB,iBAAAH,OAAA;oBACjCC,iBAAGL,mBAAAR,iBAAAY,OAAA;gBACL,IAAA,IAAAI,IAAA,GAAAA,IAAAC,mBAAAJ,gBAAAG,IAAA;oBACCH,iBAAAC,kBAAAD;gBACDhB;gBACAW,iBAAAA;;2JAEAF;uBACAR;gBACAH,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,KAAAA;gBACAK,qBAAAA,OAAAA,GAAAA;eACAR;;;;QAEAC;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;KAAAA;UACDyB,QAAA;QAED9B,IAAAD;oCACMA,iBAAAA;oBACJgC;kBAEAC;;cAEAC,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBAEAC,IAAAA,8BAAWF,EAAMhC,SACfiC;oBACEtC;;0BAGF;0BACEwC;;yBAEA;;;UAIND,IAAA,CAAAf,SAAA,GAAAiB,IAAAA,+BAAA,EAAAjB,WAAAzB,MAAAyB,SAAA;WAEAS;GAGF,sDAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-reference",
-  "version": "0.13.9",
+  "version": "0.13.10",
   "description": "Fluent AI controls for citations and references",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,7 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui-copilot/react-preview": "^0.5.8",
-    "@fluentui-copilot/react-provider": "^0.9.3",
+    "@fluentui-copilot/react-provider": "^0.9.4",
     "@fluentui-copilot/react-sensitivity-label": "^0.5.8",
     "@fluentui-copilot/react-utilities": "^0.0.5",
     "@swc/helpers": "^0.5.1"