@fluentui-copilot/react-reference 0.15.0 → 0.15.2-hotfix.1

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

@@ -10,84 +10,74 @@ import { useRootStyles } from '../Reference/useReferenceStyles.styles';
  *
  * @param props - props from this instance of ReferenceList
  * @param ref - reference to root HTMLElement of ReferenceList
- */
-export const useReferenceList_unstable = (props, ref) => {
-  const {
-    arrowableRegion,
-    children,
-    maxVisibleReferences,
-    minVisibleReferences,
-    showLessButton,
-    showMoreButton,
-    ...rest
-  } = props;
-  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);
-  const referenceListRef = React.useRef(null);
-  const totalReferencesCount = React.Children.count(children);
-  const styles = useRootStyles();
-  const resolvedChildren = useOverflowMaxVisibleItems({
-    additionalCondition: !areReferencesExpanded,
-    children,
-    maxVisibleItems: maxVisibleReferences,
-    minVisibleItems: minVisibleReferences,
-    overflowClassName: styles.overflow
-  });
-  // We keep track of whether we are interacting with the overflow button via keyboard or not.
-  const overflowButtonTriggeredViaKeyboard = React.useRef(false);
-  const focusAttributes = useArrowNavigationGroup({
-    axis: 'both',
-    circular: true,
-    memorizeCurrent: true
-  });
-  const onShowMoreButtonClick = React.useCallback(() => {
-    setAreReferencesExpanded(true);
-  }, []);
-  const onShowLessButtonClick = React.useCallback(() => {
-    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: minVisibleOverflowItems,
-    referenceListRef,
-    shouldUseOverflow,
-    totalReferencesCount,
-    components: {
-      root: 'div',
-      arrowableRegion: 'div',
-      showMoreButton: 'span',
-      showLessButton: 'span'
-    },
-    root: slot.always(getIntrinsicElementProps('div', {
-      ref: useMergedRefs(ref, referenceListRef),
-      ...rest
-    }), {
-      elementType: 'div'
-    }),
-    arrowableRegion: slot.always(arrowableRegion, {
-      defaultProps: {
-        ...focusAttributes,
-        children: resolvedChildren
-      },
-      elementType: 'div'
-    }),
-    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, {
-      elementType: 'span'
-    }) : undefined,
-    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, {
-      elementType: 'span'
-    }) : undefined
-  };
-  if (state.showMoreButton) {
-    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);
-  }
-  if (state.showLessButton) {
-    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);
-  }
-  return state;
+ */ export const useReferenceList_unstable = (props, ref)=>{
+    const { arrowableRegion, children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
+    const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);
+    const referenceListRef = React.useRef(null);
+    const totalReferencesCount = React.Children.count(children);
+    const styles = useRootStyles();
+    const resolvedChildren = useOverflowMaxVisibleItems({
+        additionalCondition: !areReferencesExpanded,
+        children,
+        maxVisibleItems: maxVisibleReferences,
+        minVisibleItems: minVisibleReferences,
+        overflowClassName: styles.overflow
+    });
+    // We keep track of whether we are interacting with the overflow button via keyboard or not.
+    const overflowButtonTriggeredViaKeyboard = React.useRef(false);
+    const focusAttributes = useArrowNavigationGroup({
+        axis: 'both',
+        circular: true,
+        memorizeCurrent: true
+    });
+    const onShowMoreButtonClick = React.useCallback(()=>{
+        setAreReferencesExpanded(true);
+    }, []);
+    const onShowLessButtonClick = React.useCallback(()=>{
+        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: minVisibleOverflowItems,
+        referenceListRef,
+        shouldUseOverflow,
+        totalReferencesCount,
+        components: {
+            root: 'div',
+            arrowableRegion: 'div',
+            showMoreButton: 'span',
+            showLessButton: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(ref, referenceListRef),
+            ...rest
+        }), {
+            elementType: 'div'
+        }),
+        arrowableRegion: slot.always(arrowableRegion, {
+            defaultProps: {
+                ...focusAttributes,
+                children: resolvedChildren
+            },
+            elementType: 'div'
+        }),
+        showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, {
+            elementType: 'span'
+        }) : undefined,
+        showLessButton: areReferencesExpanded ? slot.optional(showLessButton, {
+            elementType: 'span'
+        }) : undefined
+    };
+    if (state.showMoreButton) {
+        state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);
+    }
+    if (state.showLessButton) {
+        state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);
+    }
+    return state;
 };
-//# sourceMappingURL=useReferenceList.js.map

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

@@ -1,23 +1,15 @@
 export function useReferenceListContextValues_unstable(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 = {
-    areReferencesExpanded,
-    maxVisibleReferences,
-    overflowButtonTriggeredViaKeyboard,
-    referenceListRef,
-    shouldUseOverflow,
-    totalReferencesCount
-  };
-  return {
-    referenceList
-  };
+    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 = {
+        areReferencesExpanded,
+        maxVisibleReferences,
+        overflowButtonTriggeredViaKeyboard,
+        referenceListRef,
+        shouldUseOverflow,
+        totalReferencesCount
+    };
+    return {
+        referenceList
+    };
 }
-//# sourceMappingURL=useReferenceListContextValues.js.map

package/lib/components/reference-v2/ReferenceList/useReferenceListStyles.styles.raw.js

@@ -0,0 +1,47 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const referenceListClassNames = {
+    root: 'fai-ReferenceList',
+    arrowableRegion: 'fai-ReferenceList__arrowableRegion',
+    showMoreButton: 'fai-ReferenceList__showMoreButton',
+    showLessButton: 'fai-ReferenceList__showLessButton'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = makeResetStyles({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`
+});
+const useRootStyles = makeStyles({
+    referencesExpanded: {
+        flexWrap: 'wrap'
+    }
+});
+const useArrowableRegionBaseClassName = makeResetStyles({
+    display: 'contents',
+    maxWidth: '100%'
+});
+const useOverflowButtonBaseClassName = makeResetStyles({
+    display: 'inline-flex',
+    flexShrink: 0
+});
+/**
+ * Apply styling to the ReferenceList slots based on the state
+ */ export const useReferenceListStyles_unstable = (state)=>{
+    'use no memo';
+    const { areReferencesExpanded, shouldUseOverflow } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();
+    const overflowButtonBaseClassName = useOverflowButtonBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = mergeClasses(referenceListClassNames.root, rootBaseClassName, (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded, state.root.className);
+    state.arrowableRegion.className = mergeClasses(referenceListClassNames.arrowableRegion, arrowableRegionBaseClassName, state.arrowableRegion.className);
+    if (state.showMoreButton) {
+        state.showMoreButton.className = mergeClasses(referenceListClassNames.showMoreButton, overflowButtonBaseClassName, state.showMoreButton.className);
+    }
+    if (state.showLessButton) {
+        state.showLessButton.className = mergeClasses(referenceListClassNames.showLessButton, overflowButtonBaseClassName, state.showLessButton.className);
+    }
+    return state;
+};

package/lib/components/reference-v2/ReferenceList/useReferenceListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n  root: 'fai-ReferenceList',\n  arrowableRegion: 'fai-ReferenceList__arrowableRegion',\n  showMoreButton: 'fai-ReferenceList__showMoreButton',\n  showLessButton: 'fai-ReferenceList__showLessButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n});\n\nconst useRootStyles = makeStyles({\n  referencesExpanded: {\n    flexWrap: 'wrap',\n  },\n});\n\nconst useArrowableRegionBaseClassName = makeResetStyles({\n  display: 'contents',\n  maxWidth: '100%',\n});\n\nconst useOverflowButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexShrink: 0,\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n  'use no memo';\n\n  const { areReferencesExpanded, shouldUseOverflow } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();\n  const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(\n    referenceListClassNames.root,\n    rootBaseClassName,\n    (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded,\n    state.root.className,\n  );\n\n  state.arrowableRegion.className = mergeClasses(\n    referenceListClassNames.arrowableRegion,\n    arrowableRegionBaseClassName,\n    state.arrowableRegion.className,\n  );\n\n  if (state.showMoreButton) {\n    state.showMoreButton.className = mergeClasses(\n      referenceListClassNames.showMoreButton,\n      overflowButtonBaseClassName,\n      state.showMoreButton.className,\n    );\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.className = mergeClasses(\n      referenceListClassNames.showLessButton,\n      overflowButtonBaseClassName,\n      state.showLessButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","referenceListClassNames","root","arrowableRegion","showMoreButton","showLessButton","useRootBaseClassName","display","flexDirection","gap","spacingVerticalXS","spacingHorizontalXS","useRootStyles","referencesExpanded","flexWrap","useArrowableRegionBaseClassName","maxWidth","useOverflowButtonBaseClassName","flexShrink","useReferenceListStyles_unstable","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","arrowableRegionBaseClassName","overflowButtonBaseClassName","rootStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,iBAAiB;IACjBC,gBAAgB;IAChBC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBT,gBAAgB;IAC3CU,SAAS;IACTC,eAAe;IACfC,KAAK,CAAC,EAAET,OAAOU,iBAAiB,CAAC,CAAC,EAAEV,OAAOW,mBAAmB,CAAC,CAAC;AAClE;AAEA,MAAMC,gBAAgBd,WAAW;IAC/Be,oBAAoB;QAClBC,UAAU;IACZ;AACF;AAEA,MAAMC,kCAAkClB,gBAAgB;IACtDU,SAAS;IACTS,UAAU;AACZ;AAEA,MAAMC,iCAAiCpB,gBAAgB;IACrDU,SAAS;IACTW,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAE,GAAGF;IAErD,MAAMG,oBAAoBjB;IAC1B,MAAMkB,+BAA+BT;IACrC,MAAMU,8BAA8BR;IACpC,MAAMS,aAAad;IAEnBQ,MAAMlB,IAAI,CAACyB,SAAS,GAAG5B,aACrBE,wBAAwBC,IAAI,EAC5BqB,mBACA,AAACF,CAAAA,yBAAyB,CAACC,iBAAgB,KAAMI,WAAWb,kBAAkB,EAC9EO,MAAMlB,IAAI,CAACyB,SAAS;IAGtBP,MAAMjB,eAAe,CAACwB,SAAS,GAAG5B,aAChCE,wBAAwBE,eAAe,EACvCqB,8BACAJ,MAAMjB,eAAe,CAACwB,SAAS;IAGjC,IAAIP,MAAMhB,cAAc,EAAE;QACxBgB,MAAMhB,cAAc,CAACuB,SAAS,GAAG5B,aAC/BE,wBAAwBG,cAAc,EACtCqB,6BACAL,MAAMhB,cAAc,CAACuB,SAAS;IAElC;IAEA,IAAIP,MAAMf,cAAc,EAAE;QACxBe,MAAMf,cAAc,CAACsB,SAAS,GAAG5B,aAC/BE,wBAAwBI,cAAc,EACtCoB,6BACAL,MAAMf,cAAc,CAACsB,SAAS;IAElC;IAEA,OAAOP;AACT,EAAE"}

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

@@ -3,10 +3,9 @@ import { useReferenceOverflowButton_unstable } from './useReferenceOverflowButto
 import { renderReferenceOverflowButton_unstable } from './renderReferenceOverflowButton';
 import { useReferenceOverflowButtonStyles_unstable } from './useReferenceOverflowButtonStyles.styles';
 // ReferenceOverflowButton component - TODO: add more docs
-export const ReferenceOverflowButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useReferenceOverflowButton_unstable(props, ref);
-  useReferenceOverflowButtonStyles_unstable(state);
-  return renderReferenceOverflowButton_unstable(state);
+export const ReferenceOverflowButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useReferenceOverflowButton_unstable(props, ref);
+    useReferenceOverflowButtonStyles_unstable(state);
+    return renderReferenceOverflowButton_unstable(state);
 });
 ReferenceOverflowButton.displayName = 'ReferenceOverflowButton';
-//# sourceMappingURL=ReferenceOverflowButton.js.map

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

@@ -1,4 +1,3 @@
 /**
  * State used in rendering ReferenceOverflowButton
- */export {};
-//# sourceMappingURL=ReferenceOverflowButton.types.js.map
+ */ export { };

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

@@ -2,4 +2,3 @@ export { ReferenceOverflowButton } from './ReferenceOverflowButton';
 export { renderReferenceOverflowButton_unstable } from './renderReferenceOverflowButton';
 export { useReferenceOverflowButton_unstable } from './useReferenceOverflowButton';
 export { referenceOverflowButtonClassNames, useReferenceOverflowButtonStyles_unstable } from './useReferenceOverflowButtonStyles.styles';
-//# sourceMappingURL=index.js.map

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

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

@@ -12,82 +12,82 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
  *
  * @param props - props from this instance of ReferenceOverflowButton
  * @param ref - reference to root HTMLElement of ReferenceOverflowButton
- */
-export const useReferenceOverflowButton_unstable = (props, ref) => {
-  'use no memo';
-
-  const {
-    children,
-    id,
-    text
-  } = props;
-  const designVersion = useDesignVersion(props.designVersion);
-  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);
-  const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);
-  const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);
-  const {
-    isOverflowing,
-    overflowCount
-  } = useOverflowMenu();
-  const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
-  const {
-    findFirstFocusable,
-    findNextFocusable
-  } = useFocusFinders();
-  const onKeyDown = React.useCallback(ev => {
-    if (ev.key === Enter || ev.key === Space) {
-      triggeredViaKeyboard.current = true;
-    }
-  }, [triggeredViaKeyboard]);
-  // 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(() => {
-    // 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 collapsed, we move focus to the overflow button.
-      if (!areReferencesExpanded) {
-        elementToFocus = rootRef.current;
-        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);
+ */ export const useReferenceOverflowButton_unstable = (props, ref)=>{
+    'use no memo';
+    const { children, id, text } = props;
+    const designVersion = useDesignVersion(props.designVersion);
+    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);
+    const totalReferencesCount = useReferenceListContext_unstable((ctx)=>ctx.totalReferencesCount);
+    const triggeredViaKeyboard = useReferenceListContext_unstable((ctx)=>ctx.overflowButtonTriggeredViaKeyboard);
+    const { isOverflowing, overflowCount } = useOverflowMenu();
+    const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
+    const { findFirstFocusable, findNextFocusable } = useFocusFinders();
+    const onKeyDown = React.useCallback((ev)=>{
+        if (ev.key === Enter || ev.key === Space) {
+            triggeredViaKeyboard.current = true;
         }
-        elementToFocus = currentElement;
-      }
-      // 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.
-      setTimeout(() => {
-        elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
-        triggeredViaKeyboard.current = false;
-      }, 0);
-    }
-  }, [areReferencesExpanded, findFirstFocusable, findNextFocusable, isOverflowing, maxVisibleReferences, overflowCount, referenceListRef, setTimeout, totalReferencesCount, triggeredViaKeyboard]);
-  const state = {
-    designVersion,
-    id: referenceOverflowButtonId,
-    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
-    components: {
-      root: 'button'
-    },
-    root: slot.always(getIntrinsicElementProps('button', {
-      ref: useMergedRefs(rootRef, ref),
-      ...props
-    }), {
-      defaultProps: {
-        children: processedText
-      },
-      elementType: 'button'
-    })
-  };
-  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);
-  return state;
+    }, [
+        triggeredViaKeyboard
+    ]);
+    // 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(()=>{
+        // 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 collapsed, we move focus to the overflow button.
+            if (!areReferencesExpanded) {
+                elementToFocus = rootRef.current;
+                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;
+            }
+            // 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.
+            setTimeout(()=>{
+                elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+                triggeredViaKeyboard.current = false;
+            }, 0);
+        }
+    }, [
+        areReferencesExpanded,
+        findFirstFocusable,
+        findNextFocusable,
+        isOverflowing,
+        maxVisibleReferences,
+        overflowCount,
+        referenceListRef,
+        setTimeout,
+        totalReferencesCount,
+        triggeredViaKeyboard
+    ]);
+    const state = {
+        designVersion,
+        id: referenceOverflowButtonId,
+        shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
+        components: {
+            root: 'button'
+        },
+        root: slot.always(getIntrinsicElementProps('button', {
+            ref: useMergedRefs(rootRef, ref),
+            ...props
+        }), {
+            defaultProps: {
+                children: processedText
+            },
+            elementType: 'button'
+        })
+    };
+    state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);
+    return state;
 };
-//# sourceMappingURL=useReferenceOverflowButton.js.map

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

@@ -0,0 +1,45 @@
+import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const referenceOverflowButtonClassNames = {
+    root: 'fai-ReferenceOverflowButton'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    backgroundColor: tokens.colorNeutralBackground3,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+    borderRadius: tokens.borderRadiusMedium,
+    color: tokens.colorNeutralForeground2,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    minHeight: '24px',
+    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+    ...typographyStyles.caption1,
+    ':hover': {
+        backgroundColor: tokens.colorNeutralBackground3Hover,
+        borderColor: tokens.colorNeutralStroke1Hover,
+        color: tokens.colorNeutralForeground2Hover
+    },
+    ':hover:active': {
+        backgroundColor: tokens.colorNeutralBackground3Pressed,
+        borderColor: tokens.colorNeutralStroke1Pressed,
+        color: tokens.colorNeutralForeground2Pressed
+    }
+});
+const useNextStyles = makeStyles({
+    root: {
+        borderRadius: tokens.borderRadiusXLarge
+    }
+});
+/**
+ * Apply styling to the ReferenceOverflowButton slots based on the state
+ */ export const useReferenceOverflowButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { designVersion } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const nextStyles = useNextStyles();
+    state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  minHeight: '24px',\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 useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\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 { designVersion } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    referenceOverflowButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","referenceOverflowButtonClassNames","root","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","cursor","display","justifyContent","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","useReferenceOverflowButtonStyles_unstable","state","designVersion","rootBaseClassName","nextStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,gBAAgB,QAAQ,6BAA6B;AACzG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,YAAY;IACZC,iBAAiBL,OAAOM,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEP,OAAOQ,eAAe,CAAC,OAAO,EAAER,OAAOS,mBAAmB,CAAC,CAAC;IACvEC,cAAcV,OAAOW,kBAAkB;IACvCC,OAAOZ,OAAOa,uBAAuB;IACrCC,QAAQ;IACRC,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,SAAS,CAAC,EAAElB,OAAOmB,kBAAkB,CAAC,CAAC,EAAEnB,OAAOoB,kBAAkB,CAAC,CAAC;IACpE,GAAGrB,iBAAiBsB,QAAQ;IAE5B,UAAU;QACRhB,iBAAiBL,OAAOsB,4BAA4B;QACpDC,aAAavB,OAAOwB,wBAAwB;QAC5CZ,OAAOZ,OAAOyB,4BAA4B;IAC5C;IAEA,iBAAiB;QACfpB,iBAAiBL,OAAO0B,8BAA8B;QACtDH,aAAavB,OAAO2B,0BAA0B;QAC9Cf,OAAOZ,OAAO4B,8BAA8B;IAC9C;AACF;AAEA,MAAMC,gBAAgBhC,WAAW;IAAEK,MAAM;QAAEQ,cAAcV,OAAO8B,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoB/B;IAC1B,MAAMgC,aAAaN;IAEnBG,MAAM9B,IAAI,CAACkC,SAAS,GAAGtC,aACrBG,kCAAkCC,IAAI,EACtCgC,mBACAD,kBAAkB,UAAUE,WAAWjC,IAAI,EAC3C8B,MAAM9B,IAAI,CAACkC,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

package/lib/components/reference-v2/index.js

@@ -1,4 +1,3 @@
 export { Reference, referenceClassNames, referenceExtraClassNames, renderReference_unstable, useReferenceStyles_unstable, useReference_unstable } from './Reference';
 export { ReferenceList, referenceListClassNames, renderReferenceList_unstable, useReferenceListStyles_unstable, useReferenceList_unstable } from './ReferenceList';
 export { ReferenceOverflowButton, referenceOverflowButtonClassNames, renderReferenceOverflowButton_unstable, useReferenceOverflowButtonStyles_unstable, useReferenceOverflowButton_unstable } from './ReferenceOverflowButton';
-//# sourceMappingURL=index.js.map

package/lib/contexts/ReferenceGroupContext.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
+const noop = ()=>{};
 const ReferenceGroupContext = React.createContext(undefined);
 export const ReferenceGroupProvider = ReferenceGroupContext.Provider;
-export const useReferenceGroupSetOpen = () => {
-  const context = React.useContext(ReferenceGroupContext);
-  var _context_setOpen;
-  return (_context_setOpen = context === null || context === void 0 ? void 0 : context.setOpen) !== null && _context_setOpen !== void 0 ? _context_setOpen : noop;
+export const useReferenceGroupSetOpen = ()=>{
+    const context = React.useContext(ReferenceGroupContext);
+    var _context_setOpen;
+    return (_context_setOpen = context === null || context === void 0 ? void 0 : context.setOpen) !== null && _context_setOpen !== void 0 ? _context_setOpen : noop;
 };
-//# sourceMappingURL=ReferenceGroupContext.js.map

package/lib/contexts/reference-v2/index.js

@@ -1,2 +1 @@
 export { ReferenceListContext, ReferenceListContextProvider, useReferenceListContext_unstable } from './referenceListContext';
-//# sourceMappingURL=index.js.map

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

@@ -1,17 +1,16 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const ReferenceListContext = createContext(undefined);
 const referenceListContextDefaultValue = {
-  areReferencesExpanded: false,
-  maxVisibleReferences: undefined,
-  overflowButtonTriggeredViaKeyboard: {
-    current: false
-  },
-  referenceListRef: {
-    current: null
-  },
-  shouldUseOverflow: false,
-  totalReferencesCount: 0
+    areReferencesExpanded: false,
+    maxVisibleReferences: undefined,
+    overflowButtonTriggeredViaKeyboard: {
+        current: false
+    },
+    referenceListRef: {
+        current: null
+    },
+    shouldUseOverflow: false,
+    totalReferencesCount: 0
 };
 export const ReferenceListContextProvider = ReferenceListContext.Provider;
-export const useReferenceListContext_unstable = selector => useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));
-//# sourceMappingURL=referenceListContext.js.map
+export const useReferenceListContext_unstable = (selector)=>useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue)=>selector(ctx));

package/lib/index.js

@@ -8,4 +8,3 @@ export { ReferenceList as ReferenceListV2, referenceListClassNames as referenceL
 export { ReferenceOverflowButton, referenceOverflowButtonClassNames, renderReferenceOverflowButton_unstable, useReferenceOverflowButtonStyles_unstable, useReferenceOverflowButton_unstable } from './ReferenceOverflowButton';
 export { ReferenceListContext, ReferenceListContextProvider, useReferenceListContext_unstable } from './contexts/reference-v2';
 export { generateReferenceCitationPreview, useReferenceCitationPreview as useReferenceCitationPreviewV2 } from './utilities/reference-v2';
-//# sourceMappingURL=index.js.map

package/lib/utilities/index.js

@@ -1,3 +1,2 @@
 export { useReferenceCitationPreview } from './useReferenceCitationPreview';
 export { useReferenceGroup } from './useReferenceGroup';
-//# sourceMappingURL=index.js.map