@fluentui-copilot/react-reference 0.0.0-nightly-20240530-0404-c2e14c44.1 → 0.0.0-nightly-20240531-0407-49d6b52e.1

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  mergeClasses,\n  slot,\n  useArrowNavigationGroup,\n} from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';\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 { appearance = 'lighter', children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n\n  const referenceInOverflowClassName = useReferenceStyles().overflow;\n  const resolvedChildren = React.useMemo(() => {\n    if (maxVisibleReferences !== undefined && !areReferencesExpanded) {\n      const results = [];\n      const childrenArray = React.Children.toArray(children);\n      for (let index = 0; index < childrenArray.length; index++) {\n        const child = childrenArray[index] as React.ReactElement;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        if (index >= maxVisibleReferences && React.isValidElement<any>(child)) {\n          results.push(\n            React.cloneElement(child, {\n              ...child.props,\n              className: mergeClasses(child.props.className, referenceInOverflowClassName),\n            }),\n          );\n        } else {\n          results.push(child);\n        }\n      }\n      return results;\n    }\n\n    return children;\n  }, [areReferencesExpanded, children, maxVisibleReferences, referenceInOverflowClassName]);\n\n  // We keep track of the previous overflow count to determine element to move focus to when expanding the references via keyboard.\n  const previousOverflowCount = React.useRef(0);\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 = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\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":["appearance","children","maxVisibleReferences","referenceInOverflowClassName","resolvedChildren","results","childrenArray","setAreReferencesExpanded","React","useState","isValidElement","cloneElement","props","areReferencesExpanded","className","Children","toArray","index","length","child","push","previousOverflowCount","useArrowNavigationGroup","circular","useRef","memorizeCurrent","axis","onShowMoreButtonClick","onShowLessButtonClick","useCallback","overflowButtonTriggeredViaKeyboard","showLessButton","always","ref","rest","getIntrinsicElementProps","focusAttributes","elementType","showMoreButton","optional","undefined","slot","state","onClick","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBUA;;;eAAAA;;;;iEAxBa;iCAOhB;0CAE6C;AAelD,MAAQA,4BAAwBC,CAAAA,OAAUC;UAE1C,EAEAF,aAAMG,SAAAA,EACNF,QAAMG,sBACAF,gBACIG,gBACAC;kCAGJC,yBAAA,GAAAC,OAAAC,QAAA,CAAA;yCACaP,IAAAA,uCAAwBM,IAAME,QAAAA;6BACzCL,OACEG,OAAMG,CAAAA;qCACKC,aAAK,CAAAC,uBAAA;8BACdC;kCACFN,OAAAO,QAAA,CAAAC,OAAA,CAAAf;4BAEG,GAAAgB,QAAAX,cAAAY,MAAA,EAAAD,QAAA;8BACLZ,aAAac,CAAAA,MAAAA;8EACf;oBACFF,SAAAf,sCAAAM,OAAAE,cAAA,CAAAS,QAAA;4BACAC,IAAOf,eAAAA,OAAAA,YAAAA,CAAAA,OAAAA;wBACT,GAAAc,MAAAP,KAAA;wBAEAE,WAAOb,IAAAA,6BAAAA,EAAAA,MAAAA,KAAAA,CAAAA,SAAAA,EAAAA;oBACN;gBAACY,OAAAA;oBAAuBZ,QAAAA,IAAAA,CAAAA;gBAAUC;;YAAmD,OAAAG;QAExF;QACA,OAAMgB;OAEN;QAAAR;QAAAZ;QAAAC;QAAAC;KAAA;qIACwD;UAExDkB,wBAAwBC,OAAAA,MAAAA,CAAAA;gGAChB;UACNC,qCAAUf,OAAAgB,MAAA,CAAA;UACVC,kBAAiBH,IAAAA,wCAAA,EAAA;QACnBI,MAAA;QAEAH,UAAMI;yBACJpB;;UAGFoB,wBAAMC,OAAwBpB,WAAMqB,CAAAA;iCAClCtB;OACF,EAAG;UAEHqB,wBAA0B1B,OAAAA,WAAAA,CAAAA;QAE1BK,yBAAkC;;UAEhCM,oBAAAA,yBAAAA,aAAAA,CAAAA;UACAiB,QAAAA;;;;;;oBAOEC;kBACF;4BACWC;4BAEPC;;mCAEA,CAAGC,MAAI,CAAAC,IAAAA,yCAAA,EAAA,OAAA;;eAETC,eACA;mBAAEC;sBAAmBjC;YAEvBkC;yBAAoED;;wBACpEN,oBAAgBlB,qBAAAA,CAAAA,QAA6B0B,CAAAA,gBAASR;yBAAkBM;aAAoBG;QAC9FT,gBAAAlB,wBAAA4B,qBAAA,CAAAF,QAAA,CAAAR,gBAAA;YAEAM,aAAUC;aACRI;;QAGFA,MAAIA,cAAMX,EAAc;cACtBW,cAAMX,CAAAA,OAAeY,GAAAA,IAAAA,+BAAUC,EAAAA,uBAAehB,MAAuBc,cAAMX,CAAAA,OAAeY;;QAG5FD,MAAOA,cAAAA,EAAAA;QACPA,MAAAX,cAAA,CAAAY,OAAA,GAAAC,IAAAA,+BAAA,EAAAhB,uBAAAc,MAAAX,cAAA,CAAAY,OAAA"}
+{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  mergeClasses,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';\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 { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const referenceInOverflowClassName = useReferenceStyles().overflow;\n\n  const childrenArray = React.Children.toArray(children);\n  const totalReferencesCount = childrenArray.length;\n  const resolvedChildren = React.useMemo(() => {\n    if (maxVisibleReferences !== undefined && !areReferencesExpanded) {\n      const results = [];\n      for (let index = 0; index < childrenArray.length; index++) {\n        const child = childrenArray[index] as React.ReactElement;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        if (index >= maxVisibleReferences && React.isValidElement<any>(child)) {\n          results.push(\n            React.cloneElement(child, {\n              ...child.props,\n              className: mergeClasses(child.props.className, referenceInOverflowClassName),\n            }),\n          );\n        } else {\n          results.push(child);\n        }\n      }\n      return results;\n    }\n    return children;\n  }, [areReferencesExpanded, children, childrenArray, maxVisibleReferences, referenceInOverflowClassName]);\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 = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\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":["children","maxVisibleReferences","props","showLessButton","referenceListRef","referenceInOverflowClassName","childrenArray","showMoreButton","totalReferencesCount","rest","setAreReferencesExpanded","React","useState","index","overflow","Children","toArray","results","cloneElement","areReferencesExpanded","className","length","child","isValidElement","push","mergeClasses","overflowButtonTriggeredViaKeyboard","useArrowNavigationGroup","axis","circular","memorizeCurrent","useCallback","shouldUseOverflow","undefined","root","ref","useMergedRefs","focusAttributes","resolvedChildren","elementType","slot","optional","state","onClick","mergeCallbacks","onShowMoreButtonClick","onShowLessButtonClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAQhB;0CAE6C;AAelD,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EAENF,cAAMG,EACNC,cAAMC,EACN,GAAAC;kCAEsBC,yBAAA,GAAAC,OAAAC,QAAA,CAAA;6BACTC,OAAWA,MAAQP,CAAAA;yCACZA,IAAAA,uCAAoB,IAAAQ,QAAA;0BAClCH,OAAAI,QAAA,CAAAC,OAAA,CAAAhB;iCACaC,cAAAA,MAAAA;6BACXgB,OACEN,OAAMO,CAAAA;qCACKhB,aAAK,CAAAiB,uBAAA;8BACdC;4BACF,GAAAP,QAAAP,cAAAe,MAAA,EAAAR,QAAA;8BAEJP,aAAO,CAAAO,MAAA;8EACQS;6BACfrB,sCAAAU,OAAAY,cAAA,CAAAD,QAAA;4BACFE,IAAA,eAAAb,OAAAO,YAAA,CAAAI,OAAA;wBACA,GAAAA,MAAOL,KAAAA;wBACTG,WAAAK,IAAAA,6BAAA,EAAAH,MAAApB,KAAA,CAAAkB,SAAA,EAAAf;oBACA;gBACC,OAAA;oBAACc,QAAAA,IAAAA,CAAAA;gBAAuBnB;;mBAAyBC;;eAAmDD;OAEvG;QAAAmB;QAAAnB;QAAAM;QAAAL;QAAAI;KAA4F;gGACpC;UAExDqB,qCAAwBC,OAAAA,MAAwB,CAAA;UAC9CC,kBAAMD,IAAAA,wCAAA,EAAA;cACNE;kBACAC;QACFA,iBAAA;;UAGEpB,wBAAAA,OAAyBqB,WAAA,CAAA;QAC3BrB,yBAAK;OAEL,EAAA;UACEA,wBAAAA,OAAyBqB,WAAA,CAAA;QAC3BrB,yBAAK;OAEL,EAAA;UAEAsB,oBAAkC/B,yBAAAgC,aAAA,CAAAd;UAChCA,QAAAA;;;;;;;oBAQEe;kBACA3B;4BACAJ;4BACF;;mCAGIgC,CAAAA,MAAKC,CAAAA,IAAAA,yCAAmBhC,EAAAA,OAAAA;mDACrBiC,EAAAA,KAAejC;8BACX;mBACPJ;sBAEFsC;;yBAAqB;;wBAE6CC,oBAAaC,qBAAA,CAAAC,QAAA,CAAAlC,gBAAA;yBAAY0B;aAC7F9B;wBAAwEoC,wBAAaC,qBAAA,CAAAC,QAAA,CAAAtC,gBAAA;yBAAY8B;QACnG,KAAAA;;cAGES,cAAMnC,EAAc;QACtBmC,MAAAnC,cAAA,CAAAoC,OAAA,GAAAC,IAAAA,+BAAA,EAAAC,uBAAAH,MAAAnC,cAAA,CAAAoC,OAAA;;cAGED,cAAMvC,EAAc;QACtBuC,MAAAvC,cAAA,CAAAwC,OAAA,GAAAC,IAAAA,+BAAA,EAAAE,uBAAAJ,MAAAvC,cAAA,CAAAwC,OAAA;;IAGA,OAAAD"}

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

@@ -9,14 +9,15 @@ Object.defineProperty(exports, "useReferenceListContextValues_unstable", {
     }
 });
 function useReferenceListContextValues_unstable(state) {
-    const { appearance, areReferencesExpanded, overflowButtonTriggeredViaKeyboard, previousOverflowCount, shouldUseOverflow } = state;
+    const { areReferencesExpanded, maxVisibleReferences, overflowButtonTriggeredViaKeyboard, referenceListRef, shouldUseOverflow, totalReferencesCount } = state;
     // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
     const referenceList = {
-        appearance,
         areReferencesExpanded,
+        maxVisibleReferences,
         overflowButtonTriggeredViaKeyboard,
-        previousOverflowCount,
-        shouldUseOverflow
+        referenceListRef,
+        shouldUseOverflow,
+        totalReferencesCount
     };
     return {
         referenceList

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceListContextValues.ts"],"sourcesContent":["import type { ReferenceListState, ReferenceListContextValues } from './ReferenceList.types';\n\nexport function useReferenceListContextValues_unstable(state: ReferenceListState): ReferenceListContextValues {\n  const {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const referenceList = {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n  };\n\n  return { referenceList };\n}\n"],"names":["useReferenceListContextValues_unstable","state","appearance","areReferencesExpanded","referenceList","overflowButtonTriggeredViaKeyboard","shouldUseOverflow","previousOverflowCount"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,uCAAuCC,KAAyB;UAC9E,EAQAC,UAAA,EACAC,qBAAMC,oCACJF,uBACAC,mBACAE;uGAEAC;UACFF,gBAAA;QAEAF;;QAAuBG;QACzBE"}
+{"version":3,"sources":["useReferenceListContextValues.ts"],"sourcesContent":["import type { ReferenceListState, ReferenceListContextValues } from './ReferenceList.types';\n\nexport function useReferenceListContextValues_unstable(state: ReferenceListState): ReferenceListContextValues {\n  const {\n    areReferencesExpanded,\n    maxVisibleReferences,\n    overflowButtonTriggeredViaKeyboard,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const referenceList = {\n    areReferencesExpanded,\n    maxVisibleReferences,\n    overflowButtonTriggeredViaKeyboard,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n  };\n\n  return { referenceList };\n}\n"],"names":["useReferenceListContextValues_unstable","state","areReferencesExpanded","maxVisibleReferences","referenceList","overflowButtonTriggeredViaKeyboard","referenceListRef","totalReferencesCount"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,uCAAuCC,KAAyB;UAC9E,EASAC,qBAAA,EACAC,oBAAMC,oCACJF,kBACAC,mBACAE,sBACAC;uGAEAC;UACFH,gBAAA;QAEAF;;QAAuBG;QACzBC"}

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  root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> &\n  Required<Pick<ReferenceOverflowButtonProps, 'appearance'>> & {\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  root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\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":"AAaA;;CAEC"}

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

@@ -19,16 +19,16 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
     const { children, text } = props;
     const rootRef = _react.useRef(null);
     const [setTimeout] = (0, _reactutilities.useTimeout)();
-    const { areReferencesExpanded, ctxAppearance, previousOverflowCount, triggeredViaKeyboard } = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>({
-            ctxAppearance: ctx.appearance,
+    const { areReferencesExpanded, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>({
             areReferencesExpanded: ctx.areReferencesExpanded,
-            previousOverflowCount: ctx.previousOverflowCount,
+            maxVisibleReferences: ctx.maxVisibleReferences,
+            referenceListRef: ctx.referenceListRef,
+            totalReferencesCount: ctx.totalReferencesCount,
             triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
         }));
-    const appearance = props.appearance || ctxAppearance;
     const { isOverflowing, overflowCount } = (0, _reactcomponents.useOverflowMenu)();
     const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
-    const { findPrevFocusable } = (0, _reactcomponents.useFocusFinders)();
+    const { findFirstFocusable, findNextFocusable } = (0, _reactcomponents.useFocusFinders)();
     const onKeyDown = _react.useCallback((ev)=>{
         if (ev.key === _keyboardkeys.Enter || ev.key === _keyboardkeys.Space) {
             triggeredViaKeyboard.current = true;
@@ -36,17 +36,22 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
     }, [
         triggeredViaKeyboard
     ]);
-    // When the references are expanded or contracted via keyboard, we need to move focus to the appropriate element.
+    // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.
+    const previousOverflow = _react.useRef(0);
+    // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.
     _react.useEffect(()=>{
-        if (triggeredViaKeyboard.current) {
+        // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.
+        if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {
             let elementToFocus;
-            // If the references are contracted, we move focus to the overflow button.
+            // If the references are collapsed, we move focus to the overflow button.
             if (!areReferencesExpanded) {
                 elementToFocus = rootRef.current;
-            } else if (rootRef.current && previousOverflowCount) {
-                let currentElement = rootRef.current;
-                for(let i = 0; i < previousOverflowCount.current && currentElement; i++){
-                    currentElement = findPrevFocusable(currentElement);
+                previousOverflow.current = overflowCount;
+            } else if (rootRef.current && referenceListRef.current) {
+                const positionToFocus = maxVisibleReferences < totalReferencesCount - previousOverflow.current ? maxVisibleReferences : totalReferencesCount - previousOverflow.current;
+                let currentElement = findFirstFocusable(referenceListRef.current);
+                for(let i = 0; i < positionToFocus && currentElement; i++){
+                    currentElement = findNextFocusable(currentElement);
                 }
                 elementToFocus = currentElement;
             }
@@ -56,16 +61,19 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
                 triggeredViaKeyboard.current = false;
             }, 0);
         }
-        // We update the previousOverflowCount to the current one when references are contracted, so that we have the correct number once they are expanded.
-        previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
+    }, [
         areReferencesExpanded,
+        findFirstFocusable,
+        findNextFocusable,
         isOverflowing,
+        maxVisibleReferences,
+        overflowCount,
+        referenceListRef,
+        setTimeout,
+        totalReferencesCount,
         triggeredViaKeyboard
     ]);
     const state = {
-        appearance,
         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, ctxAppearance, previousOverflowCount, triggeredViaKeyboard } =\n    useReferenceListContext_unstable(ctx => ({\n      ctxAppearance: ctx.appearance,\n      areReferencesExpanded: ctx.areReferencesExpanded,\n      previousOverflowCount: ctx.previousOverflowCount,\n      triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n    }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findPrevFocusable } = 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  // When the references are expanded or contracted via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(\n    () => {\n      if (triggeredViaKeyboard.current) {\n        let elementToFocus: HTMLElement | null | undefined;\n\n        // If the references are contracted, we move focus to the overflow button.\n        if (!areReferencesExpanded) {\n          elementToFocus = rootRef.current;\n        }\n        // If the references are expanded, we move focus to the first reference that was hidden when they were contracted.\n        // We do this by moving focus to the element that is overflowCount elements before the overflow button.\n        else if (rootRef.current && previousOverflowCount) {\n          let currentElement: HTMLElement | null | undefined = rootRef.current;\n          for (let i = 0; i < previousOverflowCount.current && currentElement; i++) {\n            currentElement = findPrevFocusable(currentElement);\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      // We update the previousOverflowCount to the current one when references are contracted, so that we have the correct number once they are expanded.\n      previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [areReferencesExpanded, isOverflowing, triggeredViaKeyboard],\n  );\n\n  const state: ReferenceOverflowButtonState = {\n    appearance,\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","previousOverflowCount","triggeredViaKeyboard","ctxAppearance","isOverflowing","processedText","findPrevFocusable","useReferenceListContext_unstable","useCallback","ctx","ev","Enter","overflowButtonTriggeredViaKeyboard","appearance","React","useEffect","elementToFocus","text","overflowCount","currentElement","rootRef","i","current","setTimeout","state","shouldRenderOverflowButton","components","getIntrinsicElementProps","defaultProps","elementType","root","onKeyDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BEA;;;eAAAA;;;;iEA3BqB;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAEAC,QAAQC;oBAIJC,OAAAA,MAAAA,CAAAA;sBACAC,GAAAA,IAAAA,0BAAAA;UACF,EACFF,qBAAmBH,EAEnBM,aAAQC,EAERH,qBAAMI,EAENH,oBAAQI,KACRC,IAAAA,sDAAwBC,EAAWC,CAAAA,MACjCC,CAAAA;2BACYD,IAAKE,UAASD;mCACtBR,IAAAA,qBAA+B;mCACjCO,IAAAR,qBAAA;YACFC,sBACAO,IAAAG,kCAAA;;UAAsBC,aAAAhB,MAAAgB,UAAA,IAAAV;UAGxB,EACAW,aAAMC,eAEEb,yCACEc;0BAEJjB,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAkB,SAA0E,aAAAA,KAAAC,iBAAAD;6BAExED,yCAIG;sBACCG,OAAAA,WAAiDC,CAAAA,CAAAA;uBACrDT,mBAASU,IAAIX,GAAGW,GAAAA,KAAIpB,mBAAAA,EAAAA;iCAClBkB,OAAAA,GAAiBb;;;;KAEnBU;qHACF;oBAEA,CAAA;iCACWM,OAAA,EAAA;;sFAEsB;wCAC9B;gBACLN,iBAAAI,QAAAE,OAAA;mBAEA,IAAAF,QAAAE,OAAA,IAAArB,uBAAA;gBACAA,IAAAA,iBAAAA,QAA6BqB,OAAGtB;gBAElC,IAAA,IAAAqB,IAAA,GAAAA,IAAApB,sBAAAqB,OAAA,IAAAH,gBAAuDE,IAAA;oBACvDF,iBAAAb,kBAAAa;gBAACnB;gBAAuBI,iBAAAA;;YAAoC,+IAAA;YAG9DmB,WAAMC;gBACJX,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,KAAAA;gBACAY,qBAAAA,OAA4BrB,GAAAA;eAE5BsB;;4JAEA;8BAGEC,OAAAA,GAAAA,wBAAyB,IAAUT;8DAEzB;;;QAEVd;QAAAF;KAAA;kBACE0B;;oCAEAxB,iBAAAJ;oBACA6B;kBACF;QAEJ;QAEAL,MAAMM,qBAAI,CAACC,MAAAA,CAAAA,IAAAA,yCAA2BA,EAAAA,UAAWlC;YAEjDC,KAAO0B,IAAAA,8BAAAA,EAAAA,SAAAA;YACP,GAAA3B,KAAA"}
+{"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, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } =\n    useReferenceListContext_unstable(ctx => ({\n      areReferencesExpanded: ctx.areReferencesExpanded,\n      maxVisibleReferences: ctx.maxVisibleReferences,\n      referenceListRef: ctx.referenceListRef,\n      totalReferencesCount: ctx.totalReferencesCount,\n      triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n    }));\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","referenceListRef","ctx","totalReferencesCount","maxVisibleReferences","isOverflowing","processedText","findFirstFocusable","triggeredViaKeyboard","React","Space","overflowButtonTriggeredViaKeyboard","useEffect","undefined","text","overflowCount","elementToFocus","previousOverflow","current","Enter","rootRef","positionToFocus","i","currentElement","useRef","findNextFocusable","focus","shouldRenderOverflowButton","setTimeout","state","getIntrinsicElementProps","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BEA;;;eAAAA;;;;iEA3BqB;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAEAC,QAAQC;oBAIJC,OAAAA,MAAkBC,CAAAA;sBAClBC,GAAAA,IAAAA,0BAAAA;iCAEF,EAEFC,oBAAQC,EAERJ,gBAAMK,EAENH,oBAAQI,EACRC,oBAAkBC,+DAEgB,EAAAP,CAAAA,MAAKQ,CAAAA;mCACjCF,IAAAA,qBAA+B;kCACjCN,IAAAE,oBAAA;YACFH,kBACAC,IAAAD,gBAAA;kCAACO,IAAAA,oBAAAA;kCAAqBN,IAAAS,kCAAA;;UAIxB,EAEAN,aAAA,EACAI,aAAMG,yCACJ;UACAN,gBAAIF,aAAyBS,QAAAA,aAAaL,KAAAA,IAAAA,WAA4B,OAAEM,SAAA,aAAAA,KAAAC,iBAAAD;8BAGtE,mBACKd,yCACHgB;sBACAC,OAAAA,WAAiBC,CAAAA,CAAAA;kBACnB,KAKKC,mBAAIC,IAAAA,GAAQF,GAAAA,KAAOR,mBAAIT,EAAAA;iCACpBoB,OAAAA,GAAAA;;;;KAMGC;8IAC4BC;6BACrCd,OAAAe,MAAA,CAAA;oHAEiBD;oBACnB,CAAA;uHAEA;qCACWV,aAAAL,qBAAAU,OAAA,EAAA;;qFAEsB;wCAC9B;gBACLF,iBAAAI,QAAAF,OAAA;gBACCD,iBAAAC,OAAA,GAAAH;mBACDf,IAAAA,QAAAA,OAAAA,IAAAA,iBAAAA,OAAAA,EAAAA;gBACAO,MAAAA,kBAAAA,uBAAAA,uBAAAA,iBAAAA,OAAAA,GAAAA,uBAAAA,uBAAAA,iBAAAA,OAAAA;gBACAkB,IAAAA,iBAAAA,mBAAAA,iBAAAA,OAAAA;gBACApB,IAAAA,IAAAA,IAAAA,GAAAA,IAAAA,mBAAAA,gBAAAA,IAAAA;oBACAD,iBAAAA,kBAAAA;gBACAW;gBACAd,iBAAAA;;2JAEAE;uBACAK;gBACDQ,mBAAA,QAAAA,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAU,KAAA;gBAEDlB,qBAA4CU,OAAA,GAAA;eAC1CS;;;;QAGQpB;QAAAkB;QAAApB;QAAAD;QAAAW;QAAAd;QAAA2B;QAAAzB;QAAAK;KAAA;UACRqB,QAAA;oCAGEC,iBAAAA;oBACEhC;kBACA;;mCAGAiC,CAAAA,MAAAA,CAAAA,IAAAA,yCAAc,EAAA,UAAA;mDACZhC,EAAAA,SAAUO;oBACZ;;0BAEF;gBAEJP,UAAAO;YAEAuB;YAEAG,aAAOH;QACP"}

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js

@@ -27,40 +27,9 @@ const referenceOverflowButtonClassNames = {
     ".rbsq19a:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
     ".rbsq19a:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"
 ]);
-const useRootStyles = (0, _reactcomponents.__styles)({
-    darker: {
-        De3pzq: "f3vzo32",
-        g2u3we: "fj3muxo",
-        h3c5rm: [
-            "f1akhkt",
-            "f1lxtadh"
-        ],
-        B9xav0g: "f1aperda",
-        zhjwy3: [
-            "f1lxtadh",
-            "f1akhkt"
-        ],
-        Jwef8y: "f14vf7cg",
-        iro3zm: "fho4vwd"
-    }
-}, {
-    d: [
-        ".f3vzo32{background-color:var(--colorNeutralBackground5);}",
-        ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}",
-        ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
-        ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
-        ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}"
-    ],
-    h: [
-        ".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}",
-        ".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"
-    ]
-});
 const useReferenceOverflowButtonStyles_unstable = (state)=>{
     'use no memo';
-    const { appearance } = state;
     const rootBaseClassName = useRootBaseClassName();
-    const rootStyles = useRootStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(referenceOverflowButtonClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);
     return state;
 }; //# sourceMappingURL=useReferenceOverflowButtonStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n  root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  display: 'inline-flex',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  ...typographyStyles.caption1,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n});\n\nconst useRootStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n  state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(\n    referenceOverflowButtonClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["referenceOverflowButtonClassNames","useRootStyles","root","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","borderRadius","color","tokens","display","padding","spacingVerticalXXS","B9xav0g","typographyStyles","zhjwy3","borderColor","state","rootBaseClassName","useRootBaseClassName","rootStyles","colorNeutralBackground5Pressed","appearance","darker","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,iCAAAA;eAAAA;;IA6BPC,yCAA2B;eAA3BA;;;iCAlCY;AAKX,MAAMD,oCAAkF;UAC7FE;AACF;AAEA;;CAEC,SAECC,uBAAwBC,IAAAA,8BAAAA,EAAAA,WAAuB,MAAA;IAAA;IAAA;IAAA;CAAA;MAC/CC,gBAAkBC,IAAAA,yBAAAA,EAAAA;YAClBC;QACAC,QAAOC;QACPC,QAAAA;QACAC,QAAAA;YAAS;YAAUC;SAAAA;QACnBC,SAAGC;QAEHC,QAAA;YAAA;YAAU;SAAA;gBACRZ;gBACAa;;;OAIF;QAAA;QAAiB;QAAA;QAAA;QAAA;KAAA;;;QACuC;KAAA;;AAMpDf,MAAAA,4CAA2BgB,CAAAA;;UAG7B,YAEA;UAEAC,oBAAAC;UAEAC,aAAAnB;cACEE,CAAAA,SAAAA,GAAAA,IAAAA,6BAAwBkB,EAAAA,kCAA8BnB,IAAA,EAAAgB,mBAAAI,eAAA,YAAAF,WAAAG,MAAA,EAAAN,MAAAf,IAAA,CAAAsB,SAAA;WACxDP;GAEJ,mEAAA"}
+{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n  root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  display: 'inline-flex',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  ...typographyStyles.caption1,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n  state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["referenceOverflowButtonClassNames","useReferenceOverflowButtonStyles_unstable","root","backgroundColor","colorNeutralBackground3","display","state","rootBaseClassName","useRootBaseClassName","tokens","colorNeutralBackground3Hover","className","borderColor"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,iCAAAA;eAAAA;;IAYFC,yCAAA;eAAAA;;;iCAhBqD;AAIzD,MAAMD,oCAAkF;UAC7FE;AACF;AAEA;;CAEC,SAECC,uBAAwBC,IAAAA,8BAAAA,EAAAA,WAAuB,MAAA;IAAA;IAAA;IAAA;CAAA;AAI/CC,MAASJ,4CAAAK,CAAAA;;UAITC,oBAAUC;UACRL,IAAAA,CAAAA,SAAAA,GAAiBM,IAAAA,6BAAOC,EAAAA,kCAA4BR,IAAA,EAAAK,mBAAAD,MAAAJ,IAAA,CAAAS,SAAA;WACpDC;sEAEF"}

package/lib-commonjs/contexts/reference-v2/referenceListContext.js

@@ -22,15 +22,16 @@ _export(exports, {
 const _reactcontextselector = require("@fluentui/react-context-selector");
 const ReferenceListContext = (0, _reactcontextselector.createContext)(undefined);
 const referenceListContextDefaultValue = {
-    appearance: 'lighter',
     areReferencesExpanded: false,
+    maxVisibleReferences: undefined,
     overflowButtonTriggeredViaKeyboard: {
         current: false
     },
-    previousOverflowCount: {
-        current: 0
+    referenceListRef: {
+        current: null
     },
-    shouldUseOverflow: false
+    shouldUseOverflow: false,
+    totalReferencesCount: 0
 };
 const ReferenceListContextProvider = ReferenceListContext.Provider;
 const useReferenceListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(ReferenceListContext, (ctx = referenceListContextDefaultValue)=>selector(ctx)); //# sourceMappingURL=referenceListContext.js.map

package/lib-commonjs/contexts/reference-v2/referenceListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["referenceListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ReferenceListState } from '../../ReferenceListV2';\n\n/**\n * Context shared between ReferenceList and its children components\n */\nexport type ReferenceListContextValue = Pick<\n  ReferenceListState,\n  | 'appearance'\n  | 'areReferencesExpanded'\n  | 'overflowButtonTriggeredViaKeyboard'\n  | 'previousOverflowCount'\n  | 'shouldUseOverflow'\n>;\n\nexport const ReferenceListContext: Context<ReferenceListContextValue> = createContext<\n  ReferenceListContextValue | undefined\n>(undefined) as Context<ReferenceListContextValue>;\n\nconst referenceListContextDefaultValue: ReferenceListContextValue = {\n  appearance: 'lighter',\n  areReferencesExpanded: false,\n  overflowButtonTriggeredViaKeyboard: { current: false },\n  previousOverflowCount: { current: 0 },\n  shouldUseOverflow: false,\n};\n\nexport const ReferenceListContextProvider = ReferenceListContext.Provider;\n\nexport const useReferenceListContext_unstable = <T>(selector: ContextSelector<ReferenceListContextValue, T>) =>\n  useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));\n"],"names":["ReferenceListContext","ReferenceListContextProvider","useReferenceListContext_unstable","createContext","undefined","referenceListContextDefaultValue","appearance","areReferencesExpanded","overflowButtonTriggeredViaKeyboard","current","previousOverflowCount","shouldUseOverflow","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAgBaA,oBAAAA;eAAAA;;IAYAC,4BAAAA;eAAAA;;IAEAC,gCAAAA;eAAAA;;;sCA9BqC;AAgB3C,MAAMF,uBAA2DG,IAAAA,mCAAAA,EAEtEC;AAEF,MAAMC,mCAA8D;gBAClEC;2BACAC;wCACAC;iBAAsCC;;2BACtCC;iBAAyBD;;uBACzBE;AACF;AAEO,MAAMV,+BAA+BD,qBAAqBY,QAAQ;AAElE,MAAMV,mCAAmCW,CAAAA,WAC9CC,IAAAA,wCAAAA,EAAmBd,sBAAsB,CAACe,MAAMV,gCAAgC,GAAKQ,SAASE"}
+{"version":3,"sources":["referenceListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ReferenceListState } from '../../ReferenceListV2';\n\n/**\n * Context shared between ReferenceList and its children components\n */\nexport type ReferenceListContextValue = Pick<\n  ReferenceListState,\n  | 'areReferencesExpanded'\n  | 'maxVisibleReferences'\n  | 'overflowButtonTriggeredViaKeyboard'\n  | 'referenceListRef'\n  | 'shouldUseOverflow'\n  | 'totalReferencesCount'\n>;\n\nexport const ReferenceListContext: Context<ReferenceListContextValue> = createContext<\n  ReferenceListContextValue | undefined\n>(undefined) as Context<ReferenceListContextValue>;\n\nconst referenceListContextDefaultValue: ReferenceListContextValue = {\n  areReferencesExpanded: false,\n  maxVisibleReferences: undefined,\n  overflowButtonTriggeredViaKeyboard: { current: false },\n  referenceListRef: { current: null },\n  shouldUseOverflow: false,\n  totalReferencesCount: 0,\n};\n\nexport const ReferenceListContextProvider = ReferenceListContext.Provider;\n\nexport const useReferenceListContext_unstable = <T>(selector: ContextSelector<ReferenceListContextValue, T>) =>\n  useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));\n"],"names":["ReferenceListContext","ReferenceListContextProvider","useReferenceListContext_unstable","createContext","undefined","referenceListContextDefaultValue","areReferencesExpanded","maxVisibleReferences","overflowButtonTriggeredViaKeyboard","current","referenceListRef","shouldUseOverflow","totalReferencesCount","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiBaA,oBAAAA;eAAAA;;IAaAC,4BAAAA;eAAAA;;IAEAC,gCAAAA;eAAAA;;;sCAhCqC;AAiB3C,MAAMF,uBAA2DG,IAAAA,mCAAAA,EAEtEC;AAEF,MAAMC,mCAA8D;2BAClEC;0BACAC;wCACAC;iBAAsCC;;sBACtCC;iBAAoBD;;uBACpBE;0BACAC;AACF;AAEO,MAAMX,+BAA+BD,qBAAqBa,QAAQ;AAElE,MAAMX,mCAAmCY,CAAAA,WAC9CC,IAAAA,wCAAAA,EAAmBf,sBAAsB,CAACgB,MAAMX,gCAAgC,GAAKS,SAASE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-reference",
-  "version": "0.0.0-nightly-20240530-0404-c2e14c44.1",
+  "version": "0.0.0-nightly-20240531-0407-49d6b52e.1",
   "description": "Fluent AI controls for citations and references",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,9 +12,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-preview": "0.0.0-nightly-20240530-0404-c2e14c44.1",
-    "@fluentui-copilot/react-provider": "0.0.0-nightly-20240530-0404-c2e14c44.1",
-    "@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20240530-0404-c2e14c44.1",
+    "@fluentui-copilot/react-preview": "0.0.0-nightly-20240531-0407-49d6b52e.1",
+    "@fluentui-copilot/react-provider": "0.0.0-nightly-20240531-0407-49d6b52e.1",
+    "@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20240531-0407-49d6b52e.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {