npm - @fluentui-copilot/react-reference - Versions diffs - 0.13.1 → 0.13.3 - Mend

@fluentui-copilot/react-reference 0.13.1 → 0.13.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -1,6 +1,29 @@
 {
   "name": "@fluentui-copilot/react-reference",
   "entries": [
+    {
+      "date": "Wed, 04 Sep 2024 18:11:50 GMT",
+      "tag": "@fluentui-copilot/react-reference_v0.13.2",
+      "version": "0.13.2",
+      "comments": {
+        "none": [
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "6c540d99d0a351ca0b736ea12c1e3b0c5730984f",
+            "comment": "chore: Cherry-picking package updates from 0.18.1 release back to main."
+          }
+        ],
+        "patch": [
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "4599ce6b9a655803ab847422fa45b5f3b05d3abb",
+            "comment": "fix: Separate 'Show more/Show less' overflow button from arrowing behavior within ReferenceList."
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 21 Aug 2024 00:26:04 GMT",
       "tag": "@fluentui-copilot/react-reference_v0.13.0",

package/CHANGELOG.md CHANGED Viewed

@@ -1,9 +1,18 @@
 # Change Log - @fluentui-copilot/react-reference
-This log was last generated on Wed, 21 Aug 2024 00:26:04 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Sep 2024 18:11:50 GMT and should not be manually modified.
 <!-- Start content -->
+## [0.13.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.13.2)
+Wed, 04 Sep 2024 18:11:50 GMT
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.13.0..@fluentui-copilot/react-reference_v0.13.2)
+### Patches
+- fix: Separate 'Show more/Show less' overflow button from arrowing behavior within ReferenceList. ([PR #2115](https://github.com/microsoft/fluentai/pull/2115) by makotom@microsoft.com)
 ## [0.13.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.13.0)
 Wed, 21 Aug 2024 00:26:04 GMT

package/dist/index.d.ts CHANGED Viewed

@@ -199,7 +199,7 @@ export declare type ReferenceListV2ContextValues = {
     referenceList: ReferenceListContextValue;
 };
-export declare type ReferenceListV2Props = ComponentProps<ReferenceListV2Slots> & {
+export declare type ReferenceListV2Props = ComponentProps<Partial<ReferenceListV2Slots>> & {
     /**
      * The maximum number of references to display before the overflow button is shown even if there is
      * enough space available to show more.
@@ -220,6 +220,8 @@ export declare type ReferenceListV2Props = ComponentProps<ReferenceListV2Slots>
 export declare type ReferenceListV2Slots = {
     /** The root of the component that contains the list of references. */
     root: NonNullable<Slot<'div'>>;
+    /** The region that contains the references and is used for arrow navigation. */
+    arrowableRegion: NonNullable<Slot<'div'>>;
     /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */
     showMoreButton?: Slot<'span'>;
     /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */

package/lib/components/reference-v2/ReferenceList/ReferenceList.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n /** The root of the component that contains the list of references. /\n root: NonNullable<Slot<'div'>>;\n\n /* A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. /\n showMoreButton?: Slot<'span'>;\n\n /* A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. /\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n /\n The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.\n * @default undefined\n /\n maxVisibleReferences?: number;\n\n /\n The minimum number of references to always show before overflowing.\n * If this value exceeds the number of references, the overflow functionality will be disabled.\n * If this value is greater than `maxVisibleReferences`, then this will take precedence.\n * @default undefined\n */\n minVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences' \| 'minVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"~~AA0CA~~,WAEE"}
1	+ {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n /** The root of the component that contains the list of references. /\n root: NonNullable<Slot<'div'>>;\n\n /* The region that contains the references and is used for arrow navigation. /\n arrowableRegion: NonNullable<Slot<'div'>>;\n\n /* A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. /\n showMoreButton?: Slot<'span'>;\n\n /* A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. /\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<Partial<ReferenceListSlots>> & {\n /\n The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.\n * @default undefined\n /\n maxVisibleReferences?: number;\n\n /\n The minimum number of references to always show before overflowing.\n * If this value exceeds the number of references, the overflow functionality will be disabled.\n * If this value is greater than `maxVisibleReferences`, then this will take precedence.\n * @default undefined\n */\n minVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences' \| 'minVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA6CA,WAEE"}

package/lib/components/reference-v2/ReferenceList/renderReferenceList.js CHANGED Viewed

@@ -14,7 +14,7 @@ export const renderReferenceList_unstable = (state, contextValues) => {
     children: /*#__PURE__*/_jsx(Overflow, {
       minimumVisible: minVisibleReferences,
       children: /*#__PURE__*/_jsxs(state.root, {
-        children: [state.root.children, state.showMoreButton && /*#__PURE__*/_jsx(state.showMoreButton, {}), state.showLessButton && /*#__PURE__*/_jsx(state.showLessButton, {})]
+        children: [/*#__PURE__*/_jsx(state.arrowableRegion, {}), state.showMoreButton && /*#__PURE__*/_jsx(state.showMoreButton, {}), state.showLessButton && /*#__PURE__*/_jsx(state.showLessButton, {})]
       })
     })
   });

package/lib/components/reference-v2/ReferenceList/renderReferenceList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/\n Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n const { minVisibleReferences } = state;\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow minimumVisible={minVisibleReferences}>\n <state.root>\n {state.~~root.children}\~~n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["Overflow","assertSlots","ReferenceListContextProvider","renderReferenceList_unstable","state","contextValues","minVisibleReferences","value","referenceList","minimumVisible","root","~~children~~","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAEnE,SAASC,4BAA4B,QAAQ,sDAAsD;AAEnG;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,MAAM,EAAEE,oBAAoB,EAAE,GAAGF;IAEjC,qBACE,KAACF;QAA6BK,OAAOF,cAAcG,aAAa;kBAC9D,cAAA,KAACR;YAASS,gBAAgBH;sBACxB,cAAA,MAACF,MAAMM,IAAI;;~~oBACRN~~,~~MAAMM~~,~~IAAI~~,~~CAACC,QAAQ~~;~~oBACnBP~~,MAAMQ,cAAc,kBAAI,KAACR,MAAMQ,cAAc;oBAC7CR,MAAMS,cAAc,kBAAI,KAACT,MAAMS,cAAc;;;;;AAKxD,EAAE"}
1	+ {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/\n Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n const { minVisibleReferences } = state;\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow minimumVisible={minVisibleReferences}>\n <state.root>\n <state.arrowableRegion />\n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["Overflow","assertSlots","ReferenceListContextProvider","renderReferenceList_unstable","state","contextValues","minVisibleReferences","value","referenceList","minimumVisible","root","arrowableRegion","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAEnE,SAASC,4BAA4B,QAAQ,sDAAsD;AAEnG;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,MAAM,EAAEE,oBAAoB,EAAE,GAAGF;IAEjC,qBACE,KAACF;QAA6BK,OAAOF,cAAcG,aAAa;kBAC9D,cAAA,KAACR;YAASS,gBAAgBH;sBACxB,cAAA,MAACF,MAAMM,IAAI;;kCACT,KAACN,MAAMO,eAAe;oBACrBP,MAAMQ,cAAc,kBAAI,KAACR,MAAMQ,cAAc;oBAC7CR,MAAMS,cAAc,kBAAI,KAACT,MAAMS,cAAc;;;;;AAKxD,EAAE"}

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

@@ -13,6 +13,7 @@ import { useRootStyles } from '../Reference/useReferenceStyles.styles';
  */
 export const useReferenceList_unstable = (props, ref) => {
   const {
+    arrowableRegion,
     children,
     maxVisibleReferences,
     minVisibleReferences,
@@ -55,17 +56,23 @@ export const useReferenceList_unstable = (props, ref) => {
     totalReferencesCount,
     components: {
       root: 'div',
+      arrowableRegion: 'div',
       showMoreButton: 'span',
       showLessButton: 'span'
     },
     root: slot.always(getIntrinsicElementProps('div', {
       ref: useMergedRefs(ref, referenceListRef),
-      ...focusAttributes,
-      ...rest,
-      children: resolvedChildren
+      ...rest
     }), {
       elementType: 'div'
     }),
+    arrowableRegion: slot.always(arrowableRegion, {
+      defaultProps: {
+        ...focusAttributes,
+        children: resolvedChildren
+      },
+      elementType: 'div'
+    }),
     showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, {
       elementType: 'span'
     }) : undefined,

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

	@@ -1 +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 { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = 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 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":["React","getIntrinsicElementProps","mergeCallbacks","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","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","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,~~EAAEC~~,QAAQ,~~EAAEC~~,oBAAoB,~~EAAEC~~,oBAAoB,~~EAAEC~~,cAAc,~~EAAEC~~,cAAc,~~EAAE~~,GAAGC,~~MAAM~~,~~GAAGP~~;~~IAE1G~~,MAAM,~~CAACQ~~,uBAAuBC,yBAAyB,~~GAAGlB~~,~~MAAMmB~~,QAAQ,CAAC;IACzE,MAAMC,~~mBAAmBpB~~,~~MAAMqB~~,MAAM,CAAiB;IAEtD,MAAMC,~~uBAAuBtB~~,~~MAAMuB~~,QAAQ,CAACC,KAAK,CAACb;IAClD,MAAMc,~~SAASlB~~;IACf,~~MAAMmB~~,~~mBAAmBpB~~,2BAA2B;~~QAClDqB~~,qBAAqB,CAACV;QACtBN;QACAiB,iBAAiBhB;QACjBiB,iBAAiBhB;QACjBiB,mBAAmBL,OAAOM,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,~~qCAAqChC~~,~~MAAMqB~~,MAAM,CAAC;IAExD,MAAMY,~~kBAAkB7B~~,wBAAwB;~~QAC9C8B~~,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,~~wBAAwBrC~~,~~MAAMsC~~,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,~~wBAAwBvC~~,~~MAAMsC~~,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;~~YACN7B~~,gBAAgB;YAChBD,gBAAgB;QAClB;QACA8B,~~MAAMzC~~,~~KAAK0C~~,MAAM,~~CACf5C~~,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,~~KAAKU~~;YACxB,~~GAAGa~~,~~eAAe~~;~~YAClB~~,~~GAAGjB~~,~~IAAI~~;~~YACPL~~,~~UAAUe~~;~~QACZ~~,~~IACA~~;~~YAAEoB~~,aAAa;~~QAAM~~;~~QAEvB~~/B,gBAAgByB,~~oBAAoBrC~~,~~KAAK4C~~,QAAQ,~~CAAChC~~,gBAAgB;YAAE+B,aAAa;QAAO,KAAKL;QAC7F3B,gBAAgBG,~~wBAAwBd~~,~~KAAK4C~~,QAAQ,~~CAACjC~~,gBAAgB;YAAEgC,aAAa;QAAO,KAAKL;IACnG;IAEA,IAAIC,MAAM3B,cAAc,EAAE;QACxB2B,MAAM3B,cAAc,~~CAACiC~~,OAAO,~~GAAG9C~~,~~eAAemC~~,uBAAuBK,MAAM3B,cAAc,~~CAACiC~~,OAAO;IACnG;IAEA,~~IAAIN~~,MAAM5B,cAAc,EAAE;QACxB4B,MAAM5B,cAAc,~~CAACkC~~,OAAO,~~GAAG9C~~,~~eAAeqC~~,uBAAuBG,MAAM5B,cAAc,~~CAACkC~~,OAAO;IACnG;IAEA,~~OAAON~~;AACT,EAAE"}
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"}

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

@@ -1,6 +1,7 @@
 import { __resetStyles, __styles, mergeClasses, tokens } from '@fluentui/react-components';
 export const referenceListClassNames = {
   root: 'fai-ReferenceList',
+  arrowableRegion: 'fai-ReferenceList__arrowableRegion',
   showMoreButton: 'fai-ReferenceList__showMoreButton',
   showLessButton: 'fai-ReferenceList__showLessButton'
 };
@@ -15,6 +16,7 @@ const useRootStyles = __styles({
 }, {
   d: [".fni485r{flex-wrap:wrap;}"]
 });
+const useArrowableRegionBaseClassName = __resetStyles("rhs5m2c", null, [".rhs5m2c{display:contents;max-width:100%;}"]);
 const useOverflowButtonBaseClassName = __resetStyles("rulvm7g", null, [".rulvm7g{display:inline-flex;flex-shrink:0;}"]);
 /**
  * Apply styling to the ReferenceList slots based on the state
@@ -27,9 +29,11 @@ export const useReferenceListStyles_unstable = state => {
     shouldUseOverflow
   } = state;
   const rootBaseClassName = useRootBaseClassName();
-  const rootStyles = useRootStyles();
+  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);
   }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 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 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 ~~rootStyles~~ = ~~useRootStyles~~();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded \|\| !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.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","showMoreButton","showLessButton","useRootBaseClassName","display","flexDirection","gap","spacingVerticalXS","spacingHorizontalXS","useRootStyles","referencesExpanded","flexWrap","useOverflowButtonBaseClassName","flexShrink","useReferenceListStyles_unstable","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","~~rootStyles~~","overflowButtonBaseClassName","className"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAI/F,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,gBAAgB;IAChBC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,~~uBAAuBR~~,gBAAgB;~~IAC3CS~~,SAAS;IACTC,eAAe;IACfC,KAAK,CAAC,~~EAAER~~,~~OAAOS~~,iBAAiB,CAAC,CAAC,~~EAAET~~,~~OAAOU~~,mBAAmB,CAAC,CAAC;AAClE;AAEA,MAAMC,~~gBAAgBb~~,WAAW;IAC/Bc,oBAAoB;QAClBC,UAAU;IACZ;AACF;AAEA,MAAMC,~~iCAAiCjB~~,gBAAgB;~~IACrDS~~,SAAS;IACTS,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAE,GAAGF;IAErD,MAAMG,~~oBAAoBf~~;IAC1B,~~MAAMgB,aAAaV~~;~~IACnB~~,~~MAAMW~~,8BAA8BR;~~IAEpCG~~,~~MAAMf~~,IAAI,~~CAACqB~~,SAAS,~~GAAGxB~~,aACrBE,wBAAwBC,IAAI,~~EAC5BkB~~,mBACA,AAACF,CAAAA,yBAAyB,CAACC,iBAAgB,~~KAAME~~,~~WAAWT~~,kBAAkB,~~EAC9EK~~,~~MAAMf~~,IAAI,~~CAACqB~~,SAAS;~~IAGtB~~,~~IAAIN~~,~~MAAMd~~,cAAc,EAAE;~~QACxBc~~,~~MAAMd~~,cAAc,~~CAACoB~~,SAAS,~~GAAGxB~~,aAC/BE,~~wBAAwBE~~,cAAc,~~EACtCmB~~,6BACAL,~~MAAMd~~,cAAc,~~CAACoB~~,SAAS;IAElC;IAEA,~~IAAIN~~,~~MAAMb~~,cAAc,EAAE;~~QACxBa~~,~~MAAMb~~,cAAc,~~CAACmB~~,SAAS,~~GAAGxB~~,aAC/BE,~~wBAAwBG~~,cAAc,~~EACtCkB~~,6BACAL,~~MAAMb~~,cAAc,~~CAACmB~~,SAAS;IAElC;IAEA,~~OAAON~~;AACT,EAAE"}
1	+ {"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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,EAAEC,MAAM,QAAQ,6BAA6B;AAI/F,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/useReferenceOverflowButton.js.map CHANGED Viewed

	@@ -1 +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\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;~~IAGrB~~,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"}
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"}

package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n /** The root of the component that contains the list of references. /\n root: NonNullable<Slot<'div'>>;\n\n /* A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. /\n showMoreButton?: Slot<'span'>;\n\n /* A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. /\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n /\n The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.\n * @default undefined\n /\n maxVisibleReferences?: number;\n\n /\n The minimum number of references to always show before overflowing.\n * If this value exceeds the number of references, the overflow functionality will be disabled.\n * If this value is greater than `maxVisibleReferences`, then this will take precedence.\n * @default undefined\n */\n minVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences' \| 'minVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
1	+ {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n /** The root of the component that contains the list of references. /\n root: NonNullable<Slot<'div'>>;\n\n /* The region that contains the references and is used for arrow navigation. /\n arrowableRegion: NonNullable<Slot<'div'>>;\n\n /* A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. /\n showMoreButton?: Slot<'span'>;\n\n /* A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. /\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<Partial<ReferenceListSlots>> & {\n /\n The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.\n * @default undefined\n /\n maxVisibleReferences?: number;\n\n /\n The minimum number of references to always show before overflowing.\n * If this value exceeds the number of references, the overflow functionality will be disabled.\n * If this value is greater than `maxVisibleReferences`, then this will take precedence.\n * @default undefined\n */\n minVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences' \| 'minVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/reference-v2/ReferenceList/renderReferenceList.js CHANGED Viewed

@@ -20,7 +20,7 @@ const renderReferenceList_unstable = (state, contextValues)=>{
             minimumVisible: minVisibleReferences,
             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
                 children: [
-                    state.root.children,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.arrowableRegion, {}),
                     state.showMoreButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.showMoreButton, {}),
                     state.showLessButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.showLessButton, {})
                 ]

package/lib-commonjs/components/reference-v2/ReferenceList/renderReferenceList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/\n Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n const { minVisibleReferences } = state;\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow minimumVisible={minVisibleReferences}>\n <state.root>\n {state.~~root.children}\~~n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["assertSlots","state","minVisibleReferences","contextValues","minimumVisible","referenceList","showMoreButton","root","showLessButton","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAVF;iCAEsC;sCAEO;AAM3CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCAExBC,EAAAA;UAER,sBACuCC;sBACzBC,GAAAA,IAAAA,eAAAA,EAAAA,kDAAgBF,EAAAA;6BACxBG,aAAA~~;;4BACGJ;iCACMK~~,GAAAA,IAAAA,gBAAAA,EAAAA,MAAcC,IAAA,EAAA~~;;0BACpBN~~,~~IAAMO~~,~~CAAAA~~,~~QAAAA~~;~~oBAAcP~~,~~MAAAK~~,~~cAAI~~,~~IAACL~~,~~WAAMO~~,~~GAAAA~~,IAAAA,~~eAAAA~~,~~EAAAA~~,~~MAAcF~~,cAAA,EAAA,CAAA;oBAAAL,MAAAO,cAAA,IAAA,WAAA,~~GAAAC~~,IAAAA,eAAA,~~EAAAR~~,MAAAO,cAAA,EAAA,CAAA;iBAAA;;;;GAKxD,+CAAE"}
1	+ {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/\n Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n const { minVisibleReferences } = state;\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow minimumVisible={minVisibleReferences}>\n <state.root>\n <state.arrowableRegion />\n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["assertSlots","state","minVisibleReferences","contextValues","minimumVisible","referenceList","showMoreButton","root","showLessButton","arrowableRegion","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAVF;iCAEsC;sCAEO;AAM3CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCAExBC,EAAAA;UAER,sBACuCC;sBACzBC,GAAAA,IAAAA,eAAAA,EAAAA,kDAAgBF,EAAAA;6BACxBG,aAAA;;;iCAESC,GAAAA,IAAAA,gBAAAA,EAAAA,MAAcC,IAAA,EAAA;;+BACdC,GAAAA,IAAAA,eAAAA,EAAAA,MAAcC,eAAI,EAAA,CAAA;oBAACR,MAAMO,cAAc,IAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAT,MAAAK,cAAA,EAAA,CAAA;oBAAAL,MAAAO,cAAA,IAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAT,MAAAO,cAAA,EAAA,CAAA;iBAAA;;;;GAKxD,+CAAE"}

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

@@ -14,7 +14,7 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reactutilities = require("@fluentui-copilot/react-utilities");
 const _useReferenceStylesstyles = require("../Reference/useReferenceStyles.styles");
 const useReferenceList_unstable = (props, ref)=>{
-    const { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
+    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);
@@ -50,17 +50,23 @@ const useReferenceList_unstable = (props, ref)=>{
         totalReferencesCount,
         components: {
             root: 'div',
+            arrowableRegion: 'div',
             showMoreButton: 'span',
             showLessButton: 'span'
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
             ref: (0, _reactcomponents.useMergedRefs)(ref, referenceListRef),
-            ...focusAttributes,
-            ...rest,
-            children: resolvedChildren
+            ...rest
         }), {
             elementType: 'div'
         }),
+        arrowableRegion: _reactcomponents.slot.always(arrowableRegion, {
+            defaultProps: {
+                ...focusAttributes,
+                children: resolvedChildren
+            },
+            elementType: 'div'
+        }),
         showMoreButton: shouldUseOverflow ? _reactcomponents.slot.optional(showMoreButton, {
             elementType: 'span'
         }) : undefined,

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

	@@ -1 +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 { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = 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 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~~","~~minVisibleReferences~~","~~referenceListRef","~~totalReferencesCount","useRootStyles","~~showLessButton~~","resolvedChildren","additionalCondition","~~minVisibleItems~~","~~overflowClassName~~","~~styles~~","~~overflow~~","~~React~~","Children","count","overflowButtonTriggeredViaKeyboard","~~useRef~~","~~focusAttributes~~","memorizeCurrent","~~onShowLessButtonClick~~","useCallback","setAreReferencesExpanded","~~circular~~","~~shouldUseOverflow~~","~~areReferencesExpanded~~","components","~~rest~~","~~elementType~~","~~showMoreButton~~","~~slot~~","~~optional~~","~~ref~~","~~undefined~~","~~mergeCallbacks~~","~~onShowMoreButtonClick~~","state"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAyBUA~~;;;eAAAA;;;;~~iEAzBa~~;iCAOhB;gCACoC;0CACb;AAgB5B,~~MAAQA~~,~~4BAAUC~~,~~CAAoBC~~,~~OAAEC~~;~~UAExC~~,~~EACAH~~,~~QAAMI~~,~~EAENH~~,~~oBAAMI~~,~~EACNF~~,~~oBAAeG~~,EACfC,~~cAAMC~~,gBACJC;~~UAGAC~~,CAAAA,~~uBAAiBP~~,~~yBAAAA~~,~~GAAAA~~,~~OAAAA~~,~~QAAAA~~,~~CAAAA~~;~~UACjBQ~~,~~mBAAmBC~~,~~OAAAA~~,~~MAAOC~~,~~CAAAA~~;~~UAC5BR~~,~~uBAAAS~~,~~OAAAC~~,QAAA,CAAAC,KAAA,~~CAAAhB~~;~~UAEAY~~,~~SAAAN~~,IAAAA,~~uCAAA~~;~~UACAE~~,~~mBAAMS~~,IAAAA,~~0CAA2CC~~,~~EAAAA~~;~~QAEjDT~~,~~qBAAMU,CAAAA~~;;~~yBAEMlB~~;~~yBACVmB~~;~~QACFT~~,~~mBAAAC~~,~~OAAAC~~,~~QAAA~~;;~~gGAG2B~~;~~UACxBI~~,~~qCAAEH~~,~~OAAAI~~,~~MAAA~~,CAAA;~~UAELC~~,~~kBAAME~~,IAAAA,~~wCAA8BC~~,~~EAAAA~~;~~cAClCC~~;~~QACFC~~,~~UAAK~~;~~QAELJ~~,~~iBAAMK~~;;~~UAMJC~~,wBAAAA,OAAAA,WAAAA,CAAAA;~~iCACAT~~;;~~UAEAd~~,wBAAAA,OAAAA,WAAAA,CAAAA;~~iCACAC~~;;~~UAEAC~~,~~oBAAAA~~,CAAAA,~~yBAAAA~~,~~aAAAA~~,~~uBAAAA~~,~~oBAAAA~~,~~KAAAA~~,~~yBAAAA~~,~~aAAAA~~,~~CAAAA~~;~~UAEAsB,QAAAA~~;;;;;;;;~~oBASOC~~;~~kBACH5B~~;~~4BAEF~~;~~4BAAE6B~~;;~~cAEJC~~,~~qBAAAA,~~CAAAA,~~MAAAA,CAAAA,~~IAAAA,~~yCAAoCC~~,EAAAA,~~OAAKC~~;~~mDAA2BH~~,~~EAAaI~~,~~KAAA7B~~;~~eAAOe,eAAKe~~;~~eAC7F3B~~,~~IAAAA~~;~~sBAAwEsB~~;~~YAAoB~~;~~YAC9FA~~,~~aAAA~~;~~QAEA~~;~~wBACQC~~,~~oBAAyBK~~,~~qBAAAA~~,~~CAAAA~~,~~QAAAA~~,~~CAAeC~~,~~gBAAAA;YAChDP~~,~~aAAA~~;~~QAEA~~,~~KAAIQ~~;~~wBACI9B~~,~~wBAAyB4B~~,~~qBAAAA~~,~~CAAAA~~,~~QAAed~~,~~CAAAA~~,~~gBAAAA~~;~~YAChDQ~~,~~aAAA~~;~~QAEA~~,~~KAAAK;IACA~~"}
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"}

package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListStyles.styles.js CHANGED Viewed

@@ -19,6 +19,7 @@ _export(exports, {
 const _reactcomponents = require("@fluentui/react-components");
 const referenceListClassNames = {
     root: 'fai-ReferenceList',
+    arrowableRegion: 'fai-ReferenceList__arrowableRegion',
     showMoreButton: 'fai-ReferenceList__showMoreButton',
     showLessButton: 'fai-ReferenceList__showLessButton'
 };
@@ -36,6 +37,9 @@ const useRootStyles = (0, _reactcomponents.__styles)({
         ".fni485r{flex-wrap:wrap;}"
     ]
 });
+const useArrowableRegionBaseClassName = (0, _reactcomponents.__resetStyles)("rhs5m2c", null, [
+    ".rhs5m2c{display:contents;max-width:100%;}"
+]);
 const useOverflowButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rulvm7g", null, [
     ".rulvm7g{display:inline-flex;flex-shrink:0;}"
 ]);
@@ -43,9 +47,11 @@ const useReferenceListStyles_unstable = (state)=>{
     'use no memo';
     const { areReferencesExpanded, shouldUseOverflow } = state;
     const rootBaseClassName = useRootBaseClassName();
-    const rootStyles = useRootStyles();
+    const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();
     const overflowButtonBaseClassName = useOverflowButtonBaseClassName();
+    const rootStyles = useRootStyles();
     state.root.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.root, rootBaseClassName, (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded, state.root.className);
+    state.arrowableRegion.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.arrowableRegion, arrowableRegionBaseClassName, state.arrowableRegion.className);
     if (state.showMoreButton) {
         state.showMoreButton.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.showMoreButton, overflowButtonBaseClassName, state.showMoreButton.className);
     }

package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 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 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 ~~rootStyles~~ = ~~useRootStyles~~();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded \|\| !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.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":["referenceListClassNames","~~useReferenceListStyles_unstable~~","root","showMoreButton","showLessButton","display","__resetStyles","flexDirection","__styles","spacingVerticalXS","Eh141a","~~useOverflowButtonBaseClassName~~","~~state~~","~~areReferencesExpanded~~","~~shouldUseOverflow~~","~~rootBaseClassName~~","~~useRootStyles~~","~~rootStyles~~","overflowButtonBaseClassName","~~mergeClasses~~","~~referencesExpanded~~","className"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;~~IAwBbC~~,+~~BAAA~~;~~eAAAA~~;;;~~iCA5B0D~~;AAInD,MAAMD,0BAA8D;~~UACzEE~~;oBACAC;oBACAC;AACF;AAEA;;CAEC,SAECC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,gBAAeC,IAAAA,yBAAA,EAAA;wBACAC;QACjBC,QAAA;IAEA;;;;KAEc;;AAEd,MAAAC,~~iCAAAL~~,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;~~AAKA~~,~~MAAAL~~,~~kCAAAW~~,~~CAAAA~~;~~IAEA~~;~~IAEC~~,~~MACD~~,~~EACEC~~,qBAAA,~~EAEAC~~,~~iBAAQD,KAERD~~;~~UACAG~~,~~oBAAmBC~~;~~UACnBC~~,~~aAAMC~~;~~UAENN~~,~~8BAAuBO~~;~~UAOnBP~~,~~IAAAA~~,CAAAA,~~SAAMT~~,GAAAA,IAAAA,~~6BAAgB~~,~~EAAAH~~,~~wBAAAE~~,~~IAAA~~,~~EAAAa~~,~~mBAAA~~,~~AAAAF~~,CAAAA,~~yBAAA~~,~~CAAAC~~,~~iBAAA~~,~~KAAAG~~,~~WAAAG~~,~~kBAAA~~,~~EAAAR~~,~~MAAAV~~,~~IAAA~~,~~CAAAmB~~,~~SAAA~~;~~cACxBT~~,~~cAAMT~~,~~EAAc~~;~~QAKtBS~~,~~MAAAT~~,~~cAAA~~,~~CAAAkB~~,~~SAAA~~,~~GAAAF~~,IAAAA,~~6BAAA~~,~~EAAAnB~~,~~wBAAAG~~,~~cAAA~~,~~EAAAe~~,~~6BAAAN~~,~~MAAAT~~,~~cAAA~~,~~CAAAkB~~,~~SAAA~~;;~~cAGET~~,~~cAAMR~~,EAAc;~~QAKtBQ~~,~~MAAAR~~,cAAA,~~CAAAiB~~,SAAA,~~GAAAF~~,IAAAA,6BAAA,~~EAAAnB~~,~~wBAAAI~~,cAAA,EAAAc,~~6BAAAN~~,~~MAAAR~~,cAAA,~~CAAAiB~~,SAAA;;~~IAGA,OAAAT~~"}
1	+ {"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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":["referenceListClassNames","useOverflowButtonBaseClassName","makeResetStyles","root","arrowableRegion","showMoreButton","showLessButton","display","__resetStyles","flexDirection","__styles","spacingVerticalXS","Eh141a","useArrowableRegionBaseClassName","areReferencesExpanded","state","rootBaseClassName","useRootBaseClassName","arrowableRegionBaseClassName","shouldUseOverflow","overflowButtonBaseClassName","rootStyles","useRootStyles","mergeClasses","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IA2BPC,+BAAiCC;eAAjCD;;;iCA/BoD;AAInD,MAAMD,0BAA8D;UACzEG;qBACAC;oBACAC;oBACAC;AACF;AAEA;;CAEC,SAECC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,gBAAeC,IAAAA,yBAAA,EAAA;wBACAC;QACjBC,QAAA;IAEA;;;;KAEc;;AAEd,MAAAC,kCAAAL,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;AAEA,MAAMK,iCAAAA,IAAAA,8BAAkCX,EAAAA,WAAgB,MAAA;IAAA;CAAA;AAKlDD,MAAAA,kCAAiCC,CAAAA;;IAGvC,MAAA,EAEAY,qBAAA,qBAEC,GACDC;UACEC,oBAAAC;UAEAC,+BAA+BC;UAE/BC,8BAA0BH;UAC1BI,aAAMH;UACNf,IAAMiB,CAAAA,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,wBAA8BnB,IAAAA,EAAAA,mBAAAA,CAAAA,yBAAAA,CAAAA,iBAAAA,KAAAA,WAAAA,kBAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;UACpCG,eAAmBkB,CAAAA,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,wBAAAA,eAAAA,EAAAA,8BAAAA,MAAAA,eAAAA,CAAAA,SAAAA;QAEnBP,MAAMZ,cAAc,EAAGoB;QAOvBR,MAAMX,cAAAA,CAAeoB,SAACA,GAASD,IAAAA,6BAAGA,EAAAA,wBAChCvB,cAAwBI,EAAegB,6BACvCF,MACAH,cAAMX,CAAAA,SAAgBoB;;cAItBT,cAAMV,EAAc;QAKtBU,MAAAT,cAAA,CAAAkB,SAAA,GAAAD,IAAAA,6BAAA,EAAAvB,wBAAAM,cAAA,EAAAc,6BAAAL,MAAAT,cAAA,CAAAkB,SAAA;;WAGET;4DAOKA"}

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

	@@ -1 +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\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,~~EAGAC~~,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"}
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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-reference",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "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.3",
-    "@fluentui-copilot/react-provider": "^0.9.0",
+    "@fluentui-copilot/react-provider": "^0.9.1",
     "@fluentui-copilot/react-sensitivity-label": "^0.5.3",
     "@fluentui-copilot/react-utilities": "^0.0.3",
     "@swc/helpers": "^0.5.1"