@fluentui-copilot/react-reference 0.0.0-nightly-20240530-0404-c2e14c44.1 → 0.0.0-nightly-20240603-0405-523b7bd2.1

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  mergeClasses,\n  slot,\n  useArrowNavigationGroup,\n} from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const { appearance = 'lighter', children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n\n  const referenceInOverflowClassName = useReferenceStyles().overflow;\n  const resolvedChildren = React.useMemo(() => {\n    if (maxVisibleReferences !== undefined && !areReferencesExpanded) {\n      const results = [];\n      const childrenArray = React.Children.toArray(children);\n      for (let index = 0; index < childrenArray.length; index++) {\n        const child = childrenArray[index] as React.ReactElement;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        if (index >= maxVisibleReferences && React.isValidElement<any>(child)) {\n          results.push(\n            React.cloneElement(child, {\n              ...child.props,\n              className: mergeClasses(child.props.className, referenceInOverflowClassName),\n            }),\n          );\n        } else {\n          results.push(child);\n        }\n      }\n      return results;\n    }\n\n    return children;\n  }, [areReferencesExpanded, children, maxVisibleReferences, referenceInOverflowClassName]);\n\n  // We keep track of the previous overflow count to determine element to move focus to when expanding the references via keyboard.\n  const previousOverflowCount = React.useRef(0);\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","mergeClasses","slot","useArrowNavigationGroup","useRootStyles","useReferenceStyles","useReferenceList_unstable","props","ref","appearance","children","maxVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceInOverflowClassName","overflow","resolvedChildren","useMemo","undefined","results","childrenArray","Children","toArray","index","length","child","isValidElement","push","cloneElement","className","previousOverflowCount","useRef","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","state","components","root","always","elementType","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,YAAY,EACZC,IAAI,EACJC,uBAAuB,QAClB,6BAA6B;AAEpC,SAASC,iBAAiBC,kBAAkB,QAAQ,yCAAyC;AAE7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,aAAa,SAAS,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGP;IAE5G,MAAM,CAACQ,uBAAuBC,yBAAyB,GAAGlB,MAAMmB,QAAQ,CAAC;IAEzE,MAAMC,+BAA+Bb,qBAAqBc,QAAQ;IAClE,MAAMC,mBAAmBtB,MAAMuB,OAAO,CAAC;QACrC,IAAIV,yBAAyBW,aAAa,CAACP,uBAAuB;YAChE,MAAMQ,UAAU,EAAE;YAClB,MAAMC,gBAAgB1B,MAAM2B,QAAQ,CAACC,OAAO,CAAChB;YAC7C,IAAK,IAAIiB,QAAQ,GAAGA,QAAQH,cAAcI,MAAM,EAAED,QAAS;gBACzD,MAAME,QAAQL,aAAa,CAACG,MAAM;gBAClC,8DAA8D;gBAC9D,IAAIA,SAAShB,wBAAwBb,MAAMgC,cAAc,CAAMD,QAAQ;oBACrEN,QAAQQ,IAAI,CACVjC,MAAMkC,YAAY,CAACH,OAAO;wBACxB,GAAGA,MAAMtB,KAAK;wBACd0B,WAAWhC,aAAa4B,MAAMtB,KAAK,CAAC0B,SAAS,EAAEf;oBACjD;gBAEJ,OAAO;oBACLK,QAAQQ,IAAI,CAACF;gBACf;YACF;YACA,OAAON;QACT;QAEA,OAAOb;IACT,GAAG;QAACK;QAAuBL;QAAUC;QAAsBO;KAA6B;IAExF,iIAAiI;IACjI,MAAMgB,wBAAwBpC,MAAMqC,MAAM,CAAC;IAE3C,4FAA4F;IAC5F,MAAMC,qCAAqCtC,MAAMqC,MAAM,CAAC;IAExD,MAAME,kBAAkBlC,wBAAwB;QAC9CmC,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwB3C,MAAM4C,WAAW,CAA6C;QAC1F1B,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAM2B,wBAAwB7C,MAAM4C,WAAW,CAA6C;QAC1F1B,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAM4B,oBAAoBjC,yBAAyBW,aAAa,CAACP;IAEjE,MAAM8B,QAA4B;QAChCpC;QACAM;QACAqB;QACAF;QACAU;QAEAE,YAAY;YACVC,MAAM;YACNlC,gBAAgB;YAChBD,gBAAgB;QAClB;QACAmC,MAAM7C,KAAK8C,MAAM,CACfjD,yBAAyB,OAAO;YAC9BS;YACA,GAAG6B,eAAe;YAClB,GAAGvB,IAAI;YACPJ,UAAUU;QACZ,IACA;YAAE6B,aAAa;QAAM;QAEvBpC,gBAAgB+B,oBAAoB1C,KAAKgD,QAAQ,CAACrC,gBAAgB;YAAEoC,aAAa;QAAO,KAAK3B;QAC7FV,gBAAgBG,wBAAwBb,KAAKgD,QAAQ,CAACtC,gBAAgB;YAAEqC,aAAa;QAAO,KAAK3B;IACnG;IAEA,IAAIuB,MAAMhC,cAAc,EAAE;QACxBgC,MAAMhC,cAAc,CAACsC,OAAO,GAAGnD,eAAeyC,uBAAuBI,MAAMhC,cAAc,CAACsC,OAAO;IACnG;IAEA,IAAIN,MAAMjC,cAAc,EAAE;QACxBiC,MAAMjC,cAAc,CAACuC,OAAO,GAAGnD,eAAe2C,uBAAuBE,MAAMjC,cAAc,CAACuC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}
+{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  mergeClasses,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const referenceInOverflowClassName = useReferenceStyles().overflow;\n\n  const childrenArray = React.Children.toArray(children);\n  const totalReferencesCount = childrenArray.length;\n  const resolvedChildren = React.useMemo(() => {\n    if (maxVisibleReferences !== undefined && !areReferencesExpanded) {\n      const results = [];\n      for (let index = 0; index < childrenArray.length; index++) {\n        const child = childrenArray[index] as React.ReactElement;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        if (index >= maxVisibleReferences && React.isValidElement<any>(child)) {\n          results.push(\n            React.cloneElement(child, {\n              ...child.props,\n              className: mergeClasses(child.props.className, referenceInOverflowClassName),\n            }),\n          );\n        } else {\n          results.push(child);\n        }\n      }\n      return results;\n    }\n    return children;\n  }, [areReferencesExpanded, children, childrenArray, maxVisibleReferences, referenceInOverflowClassName]);\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","mergeClasses","slot","useArrowNavigationGroup","useMergedRefs","useRootStyles","useReferenceStyles","useReferenceList_unstable","props","ref","children","maxVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","referenceInOverflowClassName","overflow","childrenArray","Children","toArray","totalReferencesCount","length","resolvedChildren","useMemo","undefined","results","index","child","isValidElement","push","cloneElement","className","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","state","components","root","always","elementType","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,YAAY,EACZC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AAEpC,SAASC,iBAAiBC,kBAAkB,QAAQ,yCAAyC;AAE7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGN;IAEpF,MAAM,CAACO,uBAAuBC,yBAAyB,GAAGlB,MAAMmB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBpB,MAAMqB,MAAM,CAAiB;IAEtD,MAAMC,+BAA+Bd,qBAAqBe,QAAQ;IAElE,MAAMC,gBAAgBxB,MAAMyB,QAAQ,CAACC,OAAO,CAACd;IAC7C,MAAMe,uBAAuBH,cAAcI,MAAM;IACjD,MAAMC,mBAAmB7B,MAAM8B,OAAO,CAAC;QACrC,IAAIjB,yBAAyBkB,aAAa,CAACd,uBAAuB;YAChE,MAAMe,UAAU,EAAE;YAClB,IAAK,IAAIC,QAAQ,GAAGA,QAAQT,cAAcI,MAAM,EAAEK,QAAS;gBACzD,MAAMC,QAAQV,aAAa,CAACS,MAAM;gBAClC,8DAA8D;gBAC9D,IAAIA,SAASpB,wBAAwBb,MAAMmC,cAAc,CAAMD,QAAQ;oBACrEF,QAAQI,IAAI,CACVpC,MAAMqC,YAAY,CAACH,OAAO;wBACxB,GAAGA,MAAMxB,KAAK;wBACd4B,WAAWnC,aAAa+B,MAAMxB,KAAK,CAAC4B,SAAS,EAAEhB;oBACjD;gBAEJ,OAAO;oBACLU,QAAQI,IAAI,CAACF;gBACf;YACF;YACA,OAAOF;QACT;QACA,OAAOpB;IACT,GAAG;QAACK;QAAuBL;QAAUY;QAAeX;QAAsBS;KAA6B;IAEvG,4FAA4F;IAC5F,MAAMiB,qCAAqCvC,MAAMqB,MAAM,CAAC;IAExD,MAAMmB,kBAAkBnC,wBAAwB;QAC9CoC,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwB5C,MAAM6C,WAAW,CAA6C;QAC1F3B,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAM4B,wBAAwB9C,MAAM6C,WAAW,CAA6C;QAC1F3B,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAM6B,oBAAoBlC,yBAAyBkB,aAAa,CAACd;IAEjE,MAAM+B,QAA4B;QAChC/B;QACAsB;QACA1B;QACAO;QACA2B;QACApB;QAEAsB,YAAY;YACVC,MAAM;YACNnC,gBAAgB;YAChBD,gBAAgB;QAClB;QACAoC,MAAM9C,KAAK+C,MAAM,CACflD,yBAAyB,OAAO;YAC9BU,KAAKL,cAAcK,KAAKS;YACxB,GAAGoB,eAAe;YAClB,GAAGxB,IAAI;YACPJ,UAAUiB;QACZ,IACA;YAAEuB,aAAa;QAAM;QAEvBrC,gBAAgBgC,oBAAoB3C,KAAKiD,QAAQ,CAACtC,gBAAgB;YAAEqC,aAAa;QAAO,KAAKrB;QAC7FjB,gBAAgBG,wBAAwBb,KAAKiD,QAAQ,CAACvC,gBAAgB;YAAEsC,aAAa;QAAO,KAAKrB;IACnG;IAEA,IAAIiB,MAAMjC,cAAc,EAAE;QACxBiC,MAAMjC,cAAc,CAACuC,OAAO,GAAGpD,eAAe0C,uBAAuBI,MAAMjC,cAAc,CAACuC,OAAO;IACnG;IAEA,IAAIN,MAAMlC,cAAc,EAAE;QACxBkC,MAAMlC,cAAc,CAACwC,OAAO,GAAGpD,eAAe4C,uBAAuBE,MAAMlC,cAAc,CAACwC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}

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

@@ -1,18 +1,20 @@
 export function useReferenceListContextValues_unstable(state) {
   const {
-    appearance,
     areReferencesExpanded,
+    maxVisibleReferences,
     overflowButtonTriggeredViaKeyboard,
-    previousOverflowCount,
-    shouldUseOverflow
+    referenceListRef,
+    shouldUseOverflow,
+    totalReferencesCount
   } = state;
   // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
   const referenceList = {
-    appearance,
     areReferencesExpanded,
+    maxVisibleReferences,
     overflowButtonTriggeredViaKeyboard,
-    previousOverflowCount,
-    shouldUseOverflow
+    referenceListRef,
+    shouldUseOverflow,
+    totalReferencesCount
   };
   return {
     referenceList

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceListContextValues.ts"],"sourcesContent":["import type { ReferenceListState, ReferenceListContextValues } from './ReferenceList.types';\n\nexport function useReferenceListContextValues_unstable(state: ReferenceListState): ReferenceListContextValues {\n  const {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const referenceList = {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n  };\n\n  return { referenceList };\n}\n"],"names":["useReferenceListContextValues_unstable","state","appearance","areReferencesExpanded","overflowButtonTriggeredViaKeyboard","previousOverflowCount","shouldUseOverflow","referenceList"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAEA,OAAO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAM,EACJC,UAAU,EACVC,qBAAqB,EACrBC,kCAAkC,EAClCC,qBAAqB,EACrBC,iBAAiB,EAClB,GAAGL;IAEJ,mGAAmG;IACnG,MAAMM,gBAAgB;QACpBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAc;AACzB"}
+{"version":3,"sources":["useReferenceListContextValues.ts"],"sourcesContent":["import type { ReferenceListState, ReferenceListContextValues } from './ReferenceList.types';\n\nexport function useReferenceListContextValues_unstable(state: ReferenceListState): ReferenceListContextValues {\n  const {\n    areReferencesExpanded,\n    maxVisibleReferences,\n    overflowButtonTriggeredViaKeyboard,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const referenceList = {\n    areReferencesExpanded,\n    maxVisibleReferences,\n    overflowButtonTriggeredViaKeyboard,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n  };\n\n  return { referenceList };\n}\n"],"names":["useReferenceListContextValues_unstable","state","areReferencesExpanded","maxVisibleReferences","overflowButtonTriggeredViaKeyboard","referenceListRef","shouldUseOverflow","totalReferencesCount","referenceList"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAEA,OAAO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAM,EACJC,qBAAqB,EACrBC,oBAAoB,EACpBC,kCAAkC,EAClCC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACrB,GAAGN;IAEJ,mGAAmG;IACnG,MAAMO,gBAAgB;QACpBN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAc;AACzB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> &\n  Required<Pick<ReferenceOverflowButtonProps, 'appearance'>> & {\n    shouldRenderOverflowButton: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {\n  shouldRenderOverflowButton: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAaA;;CAEC,GACD,WAEE"}

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

@@ -23,40 +23,47 @@ export const useReferenceOverflowButton_unstable = (props, ref) => {
   const [setTimeout] = useTimeout();
   const {
     areReferencesExpanded,
-    ctxAppearance,
-    previousOverflowCount,
+    maxVisibleReferences,
+    referenceListRef,
+    totalReferencesCount,
     triggeredViaKeyboard
   } = useReferenceListContext_unstable(ctx => ({
-    ctxAppearance: ctx.appearance,
     areReferencesExpanded: ctx.areReferencesExpanded,
-    previousOverflowCount: ctx.previousOverflowCount,
+    maxVisibleReferences: ctx.maxVisibleReferences,
+    referenceListRef: ctx.referenceListRef,
+    totalReferencesCount: ctx.totalReferencesCount,
     triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
   }));
-  const appearance = props.appearance || ctxAppearance;
   const {
     isOverflowing,
     overflowCount
   } = useOverflowMenu();
   const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
   const {
-    findPrevFocusable
+    findFirstFocusable,
+    findNextFocusable
   } = useFocusFinders();
   const onKeyDown = React.useCallback(ev => {
     if (ev.key === Enter || ev.key === Space) {
       triggeredViaKeyboard.current = true;
     }
   }, [triggeredViaKeyboard]);
-  // When the references are expanded or contracted via keyboard, we need to move focus to the appropriate element.
+  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.
+  const previousOverflow = React.useRef(0);
+  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.
   React.useEffect(() => {
-    if (triggeredViaKeyboard.current) {
+    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.
+    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {
       let elementToFocus;
-      // If the references are contracted, we move focus to the overflow button.
+      // If the references are collapsed, we move focus to the overflow button.
       if (!areReferencesExpanded) {
         elementToFocus = rootRef.current;
-      } else if (rootRef.current && previousOverflowCount) {
-        let currentElement = rootRef.current;
-        for (let i = 0; i < previousOverflowCount.current && currentElement; i++) {
-          currentElement = findPrevFocusable(currentElement);
+        previousOverflow.current = overflowCount;
+      } else if (rootRef.current && referenceListRef.current) {
+        const positionToFocus = maxVisibleReferences < totalReferencesCount - previousOverflow.current ? maxVisibleReferences : totalReferencesCount - previousOverflow.current;
+        let currentElement = findFirstFocusable(referenceListRef.current);
+        for (let i = 0; i < positionToFocus && currentElement; i++) {
+          currentElement = findNextFocusable(currentElement);
         }
         elementToFocus = currentElement;
       }
@@ -66,13 +73,8 @@ export const useReferenceOverflowButton_unstable = (props, ref) => {
         triggeredViaKeyboard.current = false;
       }, 0);
     }
-    // We update the previousOverflowCount to the current one when references are contracted, so that we have the correct number once they are expanded.
-    previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [areReferencesExpanded, isOverflowing, triggeredViaKeyboard]);
+  }, [areReferencesExpanded, findFirstFocusable, findNextFocusable, isOverflowing, maxVisibleReferences, overflowCount, referenceListRef, setTimeout, totalReferencesCount, triggeredViaKeyboard]);
   const state = {
-    appearance,
     shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
     components: {
       root: 'button'

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const { areReferencesExpanded, ctxAppearance, previousOverflowCount, triggeredViaKeyboard } =\n    useReferenceListContext_unstable(ctx => ({\n      ctxAppearance: ctx.appearance,\n      areReferencesExpanded: ctx.areReferencesExpanded,\n      previousOverflowCount: ctx.previousOverflowCount,\n      triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n    }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findPrevFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // When the references are expanded or contracted via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(\n    () => {\n      if (triggeredViaKeyboard.current) {\n        let elementToFocus: HTMLElement | null | undefined;\n\n        // If the references are contracted, we move focus to the overflow button.\n        if (!areReferencesExpanded) {\n          elementToFocus = rootRef.current;\n        }\n        // If the references are expanded, we move focus to the first reference that was hidden when they were contracted.\n        // We do this by moving focus to the element that is overflowCount elements before the overflow button.\n        else if (rootRef.current && previousOverflowCount) {\n          let currentElement: HTMLElement | null | undefined = rootRef.current;\n          for (let i = 0; i < previousOverflowCount.current && currentElement; i++) {\n            currentElement = findPrevFocusable(currentElement);\n          }\n          elementToFocus = currentElement;\n        }\n\n        // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n        setTimeout(() => {\n          elementToFocus?.focus();\n          triggeredViaKeyboard.current = false;\n        }, 0);\n      }\n\n      // We update the previousOverflowCount to the current one when references are contracted, so that we have the correct number once they are expanded.\n      previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [areReferencesExpanded, isOverflowing, triggeredViaKeyboard],\n  );\n\n  const state: ReferenceOverflowButtonState = {\n    appearance,\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useReferenceOverflowButton_unstable","props","ref","children","text","rootRef","useRef","setTimeout","areReferencesExpanded","ctxAppearance","previousOverflowCount","triggeredViaKeyboard","ctx","appearance","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","processedText","findPrevFocusable","onKeyDown","useCallback","ev","key","current","useEffect","elementToFocus","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,MAAM,EAAEU,qBAAqB,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,oBAAoB,EAAE,GACzFZ,iCAAiCa,CAAAA,MAAQ,CAAA;YACvCH,eAAeG,IAAIC,UAAU;YAC7BL,uBAAuBI,IAAIJ,qBAAqB;YAChDE,uBAAuBE,IAAIF,qBAAqB;YAChDC,sBAAsBC,IAAIE,kCAAkC;QAC9D,CAAA;IACF,MAAMD,aAAaZ,MAAMY,UAAU,IAAIJ;IAEvC,MAAM,EAAEM,aAAa,EAAEC,aAAa,EAAE,GAAGnB;IAEzC,MAAMoB,gBAAgBd,qBAAAA,sBAAAA,WAAa,OAAOC,SAAS,aAAaA,KAAKY,iBAAiBZ;IAEtF,MAAM,EAAEc,iBAAiB,EAAE,GAAGvB;IAC9B,MAAMwB,YAAY9B,MAAM+B,WAAW,CACjCC,CAAAA;QACE,IAAIA,GAAGC,GAAG,KAAKhC,SAAS+B,GAAGC,GAAG,KAAK/B,OAAO;YACxCoB,qBAAqBY,OAAO,GAAG;QACjC;IACF,GACA;QAACZ;KAAqB;IAGxB,iHAAiH;IACjHtB,MAAMmC,SAAS,CACb;QACE,IAAIb,qBAAqBY,OAAO,EAAE;YAChC,IAAIE;YAEJ,0EAA0E;YAC1E,IAAI,CAACjB,uBAAuB;gBAC1BiB,iBAAiBpB,QAAQkB,OAAO;YAClC,OAGK,IAAIlB,QAAQkB,OAAO,IAAIb,uBAAuB;gBACjD,IAAIgB,iBAAiDrB,QAAQkB,OAAO;gBACpE,IAAK,IAAII,IAAI,GAAGA,IAAIjB,sBAAsBa,OAAO,IAAIG,gBAAgBC,IAAK;oBACxED,iBAAiBR,kBAAkBQ;gBACrC;gBACAD,iBAAiBC;YACnB;YAEA,+IAA+I;YAC/InB,WAAW;gBACTkB,2BAAAA,qCAAAA,eAAgBG,KAAK;gBACrBjB,qBAAqBY,OAAO,GAAG;YACjC,GAAG;QACL;QAEA,oJAAoJ;QACpJb,sBAAsBa,OAAO,GAAGf,wBAAwB,IAAIQ;IAC9D,GACA,uDAAuD;IACvD;QAACR;QAAuBO;QAAeJ;KAAqB;IAG9D,MAAMkB,QAAsC;QAC1ChB;QACAiB,4BAA4Bf,iBAAiBP;QAE7CuB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMtC,KAAKuC,MAAM,CACfzC,yBAAyB,UAAU;YACjCU,KAAKN,cAAcS,SAASH;YAC5B,GAAGD,KAAK;QACV,IACA;YACEiC,cAAc;gBACZ/B,UAAUc;YACZ;YACAkB,aAAa;QACf;IAEJ;IAEAN,MAAMG,IAAI,CAACb,SAAS,GAAG1B,eAAe0B,WAAWlB,MAAMkB,SAAS;IAEhE,OAAOU;AACT,EAAE"}
+{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const { areReferencesExpanded, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } =\n    useReferenceListContext_unstable(ctx => ({\n      areReferencesExpanded: ctx.areReferencesExpanded,\n      maxVisibleReferences: ctx.maxVisibleReferences,\n      referenceListRef: ctx.referenceListRef,\n      totalReferencesCount: ctx.totalReferencesCount,\n      triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n    }));\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n  const previousOverflow = React.useRef(0);\n\n  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(() => {\n    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n      let elementToFocus: HTMLElement | null | undefined;\n\n      // If the references are collapsed, we move focus to the overflow button.\n      if (!areReferencesExpanded) {\n        elementToFocus = rootRef.current;\n        previousOverflow.current = overflowCount;\n      }\n      // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n      // We do this by moving focus according to the following heuristics:\n      // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n      // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n      else if (rootRef.current && referenceListRef.current) {\n        const positionToFocus =\n          maxVisibleReferences < totalReferencesCount - previousOverflow.current\n            ? maxVisibleReferences\n            : totalReferencesCount - previousOverflow.current;\n\n        let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n        for (let i = 0; i < positionToFocus && currentElement; i++) {\n          currentElement = findNextFocusable(currentElement);\n        }\n\n        elementToFocus = currentElement;\n      }\n\n      // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n      setTimeout(() => {\n        elementToFocus?.focus();\n        triggeredViaKeyboard.current = false;\n      }, 0);\n    }\n  }, [\n    areReferencesExpanded,\n    findFirstFocusable,\n    findNextFocusable,\n    isOverflowing,\n    maxVisibleReferences,\n    overflowCount,\n    referenceListRef,\n    setTimeout,\n    totalReferencesCount,\n    triggeredViaKeyboard,\n  ]);\n\n  const state: ReferenceOverflowButtonState = {\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useReferenceOverflowButton_unstable","props","ref","children","text","rootRef","useRef","setTimeout","areReferencesExpanded","maxVisibleReferences","referenceListRef","totalReferencesCount","triggeredViaKeyboard","ctx","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,MAAM,EAAEU,qBAAqB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,oBAAoB,EAAEC,oBAAoB,EAAE,GACjHb,iCAAiCc,CAAAA,MAAQ,CAAA;YACvCL,uBAAuBK,IAAIL,qBAAqB;YAChDC,sBAAsBI,IAAIJ,oBAAoB;YAC9CC,kBAAkBG,IAAIH,gBAAgB;YACtCC,sBAAsBE,IAAIF,oBAAoB;YAC9CC,sBAAsBC,IAAIC,kCAAkC;QAC9D,CAAA;IAEF,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;YACxCqB,qBAAqBY,OAAO,GAAG;QACjC;IACF,GACA;QAACZ;KAAqB;IAGxB,0IAA0I;IAC1I,MAAMa,mBAAmBpC,MAAMiB,MAAM,CAAC;IAEtC,gHAAgH;IAChHjB,MAAMqC,SAAS,CAAC;QACd,+GAA+G;QAC/G,IAAIjB,yBAAyBkB,aAAaf,qBAAqBY,OAAO,EAAE;YACtE,IAAII;YAEJ,yEAAyE;YACzE,IAAI,CAACpB,uBAAuB;gBAC1BoB,iBAAiBvB,QAAQmB,OAAO;gBAChCC,iBAAiBD,OAAO,GAAGR;YAC7B,OAKK,IAAIX,QAAQmB,OAAO,IAAId,iBAAiBc,OAAO,EAAE;gBACpD,MAAMK,kBACJpB,uBAAuBE,uBAAuBc,iBAAiBD,OAAO,GAClEf,uBACAE,uBAAuBc,iBAAiBD,OAAO;gBAErD,IAAIM,iBAAiDZ,mBAAmBR,iBAAiBc,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;gBACrBpB,qBAAqBY,OAAO,GAAG;YACjC,GAAG;QACL;IACF,GAAG;QACDhB;QACAU;QACAC;QACAJ;QACAN;QACAO;QACAN;QACAH;QACAI;QACAC;KACD;IAED,MAAMqB,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/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js

@@ -1,4 +1,4 @@
-import { __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
 export const referenceOverflowButtonClassNames = {
   root: 'fai-ReferenceOverflowButton'
 };
@@ -6,32 +6,14 @@ export const referenceOverflowButtonClassNames = {
  * Styles for the root slot
  */
 const useRootBaseClassName = __resetStyles("rbsq19a", null, [".rbsq19a{background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);display:inline-flex;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".rbsq19a:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".rbsq19a:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"]);
-const useRootStyles = __styles({
-  darker: {
-    De3pzq: "f3vzo32",
-    g2u3we: "fj3muxo",
-    h3c5rm: ["f1akhkt", "f1lxtadh"],
-    B9xav0g: "f1aperda",
-    zhjwy3: ["f1lxtadh", "f1akhkt"],
-    Jwef8y: "f14vf7cg",
-    iro3zm: "fho4vwd"
-  }
-}, {
-  d: [".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}"],
-  h: [".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}", ".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"]
-});
 /**
  * Apply styling to the ReferenceOverflowButton slots based on the state
  */
 export const useReferenceOverflowButtonStyles_unstable = state => {
   'use no memo';
 
-  const {
-    appearance
-  } = state;
   const rootBaseClassName = useRootBaseClassName();
-  const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
+  state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);
   return state;
 };
 //# sourceMappingURL=useReferenceOverflowButtonStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n  root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  display: 'inline-flex',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  ...typographyStyles.caption1,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n});\n\nconst useRootStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n  state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(\n    referenceOverflowButtonClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceOverflowButtonClassNames","root","useRootBaseClassName","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","display","padding","spacingVerticalXXS","spacingHorizontalS","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","darker","colorNeutralBackground5","colorNeutralStroke1","colorNeutralBackground5Hover","colorNeutralBackground5Pressed","useReferenceOverflowButtonStyles_unstable","state","appearance","rootBaseClassName","rootStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBR,gBAAgB;IAC3CS,iBAAiBL,OAAOM,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEP,OAAOQ,eAAe,CAAC,OAAO,EAAER,OAAOS,mBAAmB,CAAC,CAAC;IACvEC,cAAcV,OAAOW,kBAAkB;IACvCC,OAAOZ,OAAOa,uBAAuB;IACrCC,SAAS;IACTC,SAAS,CAAC,EAAEf,OAAOgB,kBAAkB,CAAC,CAAC,EAAEhB,OAAOiB,kBAAkB,CAAC,CAAC;IACpE,GAAGhB,iBAAiBiB,QAAQ;IAE5B,UAAU;QACRb,iBAAiBL,OAAOmB,4BAA4B;QACpDC,aAAapB,OAAOqB,wBAAwB;QAC5CT,OAAOZ,OAAOsB,4BAA4B;IAC5C;IAEA,iBAAiB;QACfjB,iBAAiBL,OAAOuB,8BAA8B;QACtDH,aAAapB,OAAOwB,0BAA0B;QAC9CZ,OAAOZ,OAAOyB,8BAA8B;IAC9C;AACF;AAEA,MAAMC,gBAAgB7B,WAAW;IAC/B8B,QAAQ;QACNtB,iBAAiBL,OAAO4B,uBAAuB;QAC/C,GAAG7B,WAAWqB,WAAW,CAACpB,OAAO6B,mBAAmB,CAAC;QAErD,UAAU;YACRxB,iBAAiBL,OAAO8B,4BAA4B;QACtD;QAEA,iBAAiB;YACfzB,iBAAiBL,OAAO+B,8BAA8B;QACxD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,oBAAoB/B;IAC1B,MAAMgC,aAAaV;IAEnBO,MAAM9B,IAAI,CAACkC,SAAS,GAAGvC,aACrBI,kCAAkCC,IAAI,EACtCgC,mBACAD,eAAe,YAAYE,WAAWT,MAAM,EAC5CM,MAAM9B,IAAI,CAACkC,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n  root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  display: 'inline-flex',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  ...typographyStyles.caption1,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n  state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","referenceOverflowButtonClassNames","root","useRootBaseClassName","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","display","padding","spacingVerticalXXS","spacingHorizontalS","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useReferenceOverflowButtonStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIrG,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBN,gBAAgB;IAC3CO,iBAAiBL,OAAOM,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEP,OAAOQ,eAAe,CAAC,OAAO,EAAER,OAAOS,mBAAmB,CAAC,CAAC;IACvEC,cAAcV,OAAOW,kBAAkB;IACvCC,OAAOZ,OAAOa,uBAAuB;IACrCC,SAAS;IACTC,SAAS,CAAC,EAAEf,OAAOgB,kBAAkB,CAAC,CAAC,EAAEhB,OAAOiB,kBAAkB,CAAC,CAAC;IACpE,GAAGhB,iBAAiBiB,QAAQ;IAE5B,UAAU;QACRb,iBAAiBL,OAAOmB,4BAA4B;QACpDC,aAAapB,OAAOqB,wBAAwB;QAC5CT,OAAOZ,OAAOsB,4BAA4B;IAC5C;IAEA,iBAAiB;QACfjB,iBAAiBL,OAAOuB,8BAA8B;QACtDH,aAAapB,OAAOwB,0BAA0B;QAC9CZ,OAAOZ,OAAOyB,8BAA8B;IAC9C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA;IAEA,MAAMC,oBAAoBxB;IAE1BuB,MAAMxB,IAAI,CAAC0B,SAAS,GAAG9B,aAAaG,kCAAkCC,IAAI,EAAEyB,mBAAmBD,MAAMxB,IAAI,CAAC0B,SAAS;IAEnH,OAAOF;AACT,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["referenceListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ReferenceListState } from '../../ReferenceListV2';\n\n/**\n * Context shared between ReferenceList and its children components\n */\nexport type ReferenceListContextValue = Pick<\n  ReferenceListState,\n  | 'appearance'\n  | 'areReferencesExpanded'\n  | 'overflowButtonTriggeredViaKeyboard'\n  | 'previousOverflowCount'\n  | 'shouldUseOverflow'\n>;\n\nexport const ReferenceListContext: Context<ReferenceListContextValue> = createContext<\n  ReferenceListContextValue | undefined\n>(undefined) as Context<ReferenceListContextValue>;\n\nconst referenceListContextDefaultValue: ReferenceListContextValue = {\n  appearance: 'lighter',\n  areReferencesExpanded: false,\n  overflowButtonTriggeredViaKeyboard: { current: false },\n  previousOverflowCount: { current: 0 },\n  shouldUseOverflow: false,\n};\n\nexport const ReferenceListContextProvider = ReferenceListContext.Provider;\n\nexport const useReferenceListContext_unstable = <T>(selector: ContextSelector<ReferenceListContextValue, T>) =>\n  useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ReferenceListContext","undefined","referenceListContextDefaultValue","appearance","areReferencesExpanded","overflowButtonTriggeredViaKeyboard","current","previousOverflowCount","shouldUseOverflow","ReferenceListContextProvider","Provider","useReferenceListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAgBrF,OAAO,MAAMC,uBAA2DF,cAEtEG,WAAiD;AAEnD,MAAMC,mCAA8D;IAClEC,YAAY;IACZC,uBAAuB;IACvBC,oCAAoC;QAAEC,SAAS;IAAM;IACrDC,uBAAuB;QAAED,SAAS;IAAE;IACpCE,mBAAmB;AACrB;AAEA,OAAO,MAAMC,+BAA+BT,qBAAqBU,QAAQ,CAAC;AAE1E,OAAO,MAAMC,mCAAmC,CAAIC,WAClDb,mBAAmBC,sBAAsB,CAACa,MAAMX,gCAAgC,GAAKU,SAASC,MAAM"}
+{"version":3,"sources":["referenceListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ReferenceListState } from '../../ReferenceListV2';\n\n/**\n * Context shared between ReferenceList and its children components\n */\nexport type ReferenceListContextValue = Pick<\n  ReferenceListState,\n  | 'areReferencesExpanded'\n  | 'maxVisibleReferences'\n  | 'overflowButtonTriggeredViaKeyboard'\n  | 'referenceListRef'\n  | 'shouldUseOverflow'\n  | 'totalReferencesCount'\n>;\n\nexport const ReferenceListContext: Context<ReferenceListContextValue> = createContext<\n  ReferenceListContextValue | undefined\n>(undefined) as Context<ReferenceListContextValue>;\n\nconst referenceListContextDefaultValue: ReferenceListContextValue = {\n  areReferencesExpanded: false,\n  maxVisibleReferences: undefined,\n  overflowButtonTriggeredViaKeyboard: { current: false },\n  referenceListRef: { current: null },\n  shouldUseOverflow: false,\n  totalReferencesCount: 0,\n};\n\nexport const ReferenceListContextProvider = ReferenceListContext.Provider;\n\nexport const useReferenceListContext_unstable = <T>(selector: ContextSelector<ReferenceListContextValue, T>) =>\n  useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ReferenceListContext","undefined","referenceListContextDefaultValue","areReferencesExpanded","maxVisibleReferences","overflowButtonTriggeredViaKeyboard","current","referenceListRef","shouldUseOverflow","totalReferencesCount","ReferenceListContextProvider","Provider","useReferenceListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAiBrF,OAAO,MAAMC,uBAA2DF,cAEtEG,WAAiD;AAEnD,MAAMC,mCAA8D;IAClEC,uBAAuB;IACvBC,sBAAsBH;IACtBI,oCAAoC;QAAEC,SAAS;IAAM;IACrDC,kBAAkB;QAAED,SAAS;IAAK;IAClCE,mBAAmB;IACnBC,sBAAsB;AACxB;AAEA,OAAO,MAAMC,+BAA+BV,qBAAqBW,QAAQ,CAAC;AAE1E,OAAO,MAAMC,mCAAmC,CAAIC,WAClDd,mBAAmBC,sBAAsB,CAACc,MAAMZ,gCAAgC,GAAKW,SAASC,MAAM"}

package/lib-commonjs/components/ReferenceGroupToggle/ReferenceGroupToggle.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceGroupToggle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceGroupToggleSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n};\n\n/**\n * ReferenceGroupToggle Props\n */\nexport type ReferenceGroupToggleProps = ComponentProps<ReferenceGroupToggleSlots> & {\n  isOpen?: boolean;\n};\n\n/**\n * State used in rendering ReferenceGroupToggle\n */\nexport type ReferenceGroupToggleState = ComponentState<ReferenceGroupToggleSlots> &\n  Required<Pick<ReferenceGroupToggleProps, 'isOpen'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAcA;;CAEC"}
+{"version":3,"sources":["ReferenceGroupToggle.types.ts"],"sourcesContent":["import { CopilotMode } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceGroupToggleSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n};\n\n/**\n * ReferenceGroupToggle Props\n */\nexport type ReferenceGroupToggleProps = ComponentProps<ReferenceGroupToggleSlots> &\n  CopilotMode & {\n    isOpen?: boolean;\n  };\n\n/**\n * State used in rendering ReferenceGroupToggle\n */\nexport type ReferenceGroupToggleState = ComponentState<ReferenceGroupToggleSlots> &\n  Required<Pick<ReferenceGroupToggleProps, 'isOpen' | 'mode'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC"}

package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggle.js

@@ -12,9 +12,12 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
+const _reactprovider = require("@fluentui-copilot/react-provider");
 const useReferenceGroupToggle_unstable = (props, ref)=>{
     const { isOpen = false } = props;
+    const mode = (0, _reactprovider.useCopilotMode)(props.mode);
     return {
+        mode,
         isOpen,
         components: {
             root: 'button',

package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';\nimport type { ReferenceGroupToggleProps, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\n\n/**\n * Create the state required to render ReferenceGroupToggle.\n *\n * The returned state can be modified with hooks such as useReferenceGroupToggleStyles_unstable,\n * before being passed to renderReferenceGroupToggle_unstable.\n *\n * @param props - props from this instance of ReferenceGroupToggle\n * @param ref - reference to root HTMLElement of ReferenceGroupToggle\n */\nexport const useReferenceGroupToggle_unstable = (\n  props: ReferenceGroupToggleProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceGroupToggleState => {\n  const { isOpen = false } = props;\n\n  return {\n    isOpen,\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-expanded': isOpen,\n        type: 'button',\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: slot.optional(props.icon, {\n      defaultProps: {\n        children: isOpen ? <ChevronUp16Regular /> : <ChevronDown16Regular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["isOpen","props","root","ref","type","getIntrinsicElementProps","elementType","icon","defaultProps","optional","renderByDefault","React","createElement","ChevronUp16Regular","ChevronDown16Regular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBUA;;;eAAAA;;;;iEAlBa;iCACwB;4BACU;AAgBvD,MAAQA,mCAAmBC,CAAAA,OAAAA;UAE3B,WACED,KAAAA;;;oBAIA;kBACAE;kBAEIC;;mCAEAC,CAAAA,MAAM,CAAAC,IAAAA,yCAAA,EAAA,UAAA;;6BAGRL;kBAAEM;eAAsBL,KAAA;YAE1BM;yBACEC;;mCAEA,CAAAC,QAAA,CAAAR,MAAAM,IAAA,EAAA;0BACAG;0BACAJ,SAAa,WAAA,GAAAK,OAAAC,aAAA,CAAAC,8BAAA,EAAA,QAAA,WAAA,GAAAF,OAAAC,aAAA,CAAAE,gCAAA,EAAA;;YAEjBJ,iBAAA;YACAJ,aAAA"}
+{"version":3,"sources":["useReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';\nimport type { ReferenceGroupToggleProps, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport { useCopilotMode } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render ReferenceGroupToggle.\n *\n * The returned state can be modified with hooks such as useReferenceGroupToggleStyles_unstable,\n * before being passed to renderReferenceGroupToggle_unstable.\n *\n * @param props - props from this instance of ReferenceGroupToggle\n * @param ref - reference to root HTMLElement of ReferenceGroupToggle\n */\nexport const useReferenceGroupToggle_unstable = (\n  props: ReferenceGroupToggleProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceGroupToggleState => {\n  const { isOpen = false } = props;\n\n  const mode = useCopilotMode(props.mode);\n  return {\n    mode,\n    isOpen,\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-expanded': isOpen,\n        type: 'button',\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: slot.optional(props.icon, {\n      defaultProps: {\n        children: isOpen ? <ChevronUp16Regular /> : <ChevronDown16Regular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["isOpen","props","components","root","ref","type","getIntrinsicElementProps","elementType","icon","defaultProps","optional","renderByDefault","React","createElement","ChevronUp16Regular","ChevronDown16Regular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBUA;;;eAAAA;;;;iEAnBa;iCACwB;4BACU;+BAE1B;AAe7B,MAAQA,mCAAmBC,CAAAA,OAAAA;UAE3B,EACAD,SAAO,KAAA;UAELA,OAAAA,IAAAA,6BAAAA,EAAAA,MAAAA,IAAAA;WACAE;;;oBAGA;kBACAC;kBAEIC;;mCAEAC,CAAAA,MAAM,CAAAC,IAAAA,yCAAA,EAAA,UAAA;;6BAGRN;kBAAEO;eAAsBN,KAAA;YAE1BO;yBACEC;;mCAEA,CAAAC,QAAA,CAAAT,MAAAO,IAAA,EAAA;0BACAG;0BACAJ,SAAa,WAAA,GAAAK,OAAAC,aAAA,CAAAC,8BAAA,EAAA,QAAA,WAAA,GAAAF,OAAAC,aAAA,CAAAE,gCAAA,EAAA;;YAEjBJ,iBAAA;YACAJ,aAAA"}

package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js

@@ -28,11 +28,36 @@ const useButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rctdkan", "r
 const useIconBaseClassName = (0, _reactcomponents.__resetStyles)("r18biwo", null, [
     ".r18biwo{display:inline-flex;align-items:center;}"
 ]);
+const useStyles = (0, _reactcomponents.__styles)({
+    canvas: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    },
+    sidecar: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fcpl73t"
+    }
+}, {
+    d: [
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f13mqy1h{font-size:var(--fontSizeBase100);}",
+        ".fcpl73t{line-height:var(--lineHeightBase100);}"
+    ]
+});
 const useReferenceGroupToggleStyles_unstable = (state)=>{
     'use no memo';
+    const { mode } = state;
+    const styles = useStyles();
     const iconBaseClassName = useIconBaseClassName();
     const buttonBaseClassName = useButtonBaseClassName();
-    state.root.className = (0, _reactcomponents.mergeClasses)(referenceGroupToggleClassNames.root, buttonBaseClassName, state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(referenceGroupToggleClassNames.root, buttonBaseClassName, styles[mode], state.root.className);
     if (state.icon) {
         state.icon.className = (0, _reactcomponents.mergeClasses)(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);
     }

package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  ...shorthands.padding(tokens.spacingVerticalXS, 0),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  'use no memo';\n\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["referenceGroupToggleClassNames","useReferenceGroupToggleStyles_unstable","root","icon","useButtonBaseClassName","makeResetStyles","display","__resetStyles","border","state","cursor","useIconBaseClassName","width","shorthands","padding","mergeClasses","spacingVerticalXS","buttonBaseClassName","className","iconBaseClassName","alignItems"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,8BAAAA;eAAAA;;IAUHC,sCAAA;eAAAA;;;iCAdkE;AAIrE,MAAMD,iCAA4E;UACvFE;UACAC;AACF;AAEA,MAAMC,yBAAyBC,IAAAA,8BAAAA,EAAAA,WAAgB,WAAA;IAAA;IAAA;CAAA;MAC7CC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;AAITC,MAAQP,yCAAAQ,CAAAA;;UAGRC,oBAAQC;UACRC,sBAAOR;UACJS,IAAAA,CAAAA,SAAWC,GAAOC,IAAAA,6BAAQC,EAAAA,+BAAqBd,IAAA,EAAAe,qBAAAR,MAAAP,IAAA,CAAAgB,SAAA;IACpD,IAAAT,MAAAN,IAAA,EAAA;QAEAM,MAAME,IAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAAuBN,EAAAA,+BAAgBF,IAAA,EAAAgB,mBAAAV,MAAAN,IAAA,CAAAe,SAAA;;WAE3CE;AACF,GAEA,gEAAA"}
+{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  ...shorthands.padding(tokens.spacingVerticalXS, 0),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: { ...typographyStyles.caption1 },\n  sidecar: {\n    ...typographyStyles.caption2,\n  },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  'use no memo';\n\n  const { mode } = state;\n  const styles = useStyles();\n\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(\n    referenceGroupToggleClassNames.root,\n    buttonBaseClassName,\n    styles[mode],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["referenceGroupToggleClassNames","typographyStyles","root","icon","useButtonBaseClassName","makeResetStyles","display","__resetStyles","columnGap","tokens","spacingHorizontalSNudge","alignItems","Bahqtrf","border","backgroundColor","color","shorthands","Be2twd7","Bhrd7zp","useIconBaseClassName","d","useStyles","state","styles","iconBaseClassName","buttonBaseClassName","className","mergeClasses","mode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,8BAAAA;eAAAA;;IA0BNC,sCAAyB;eAAzBA;;;iCA/BW;AAKX,MAAMD,iCAA4E;UACvFE;UACAC;AACF;AAEA,MAAMC,yBAAyBC,IAAAA,8BAAAA,EAAAA,WAAgB,WAAA;IAAA;IAAA;CAAA;MAC7CC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,YAAWC,IAAAA,yBAAOC,EAAAA;YAClBC;QACAC,SAAGX;QACHY,SAAQ;QACRC,SAAAA;QACAC,SAAON;;aAEA;QACPG,SAAGI;QACLC,SAAA;QAEAC,SAAMC;QACJb,SAAS;;AAEX,GAAA;IAEAc,GAAA;QAAMC;QAAuB;QAAA;QAAA;QAAA;QAAA;KAAA;;MAGtBpB,yCAAyBqB,CAAAA;;IAIhC,MAAA,QAEC,GACDA;UACEC,SAAAF;UAEAG,oBAAiBF;UACjBG,sBAAeJ;UAEfnB,IAAMsB,CAAAA,SAAAA,GAAAA,IAAAA,6BAAoBL,EAAAA,+BAAAA,IAAAA,EAAAA,qBAAAA,MAAAA,CAAAA,KAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;QAC1BG,MAAMG,IAAAA,EAAAA;QACNH,MAAMpB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,6BAAAA,EACrB3B,+BAA+BE,IAAI,EACnCuB,mBAAAA,MACAF,IAAOK,CAAAA,SACPN;;WAIAA;mEAGKA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n  root: NonNullable<Slot<'button', 'a'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\n  graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'appearance' | 'id'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n  root: NonNullable<Slot<'button', 'a'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\n  graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'id'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/reference-v2/Reference/useReference.js

@@ -15,11 +15,7 @@ const _referenceListContext = require("../../../contexts/reference-v2/referenceL
 const _useReferenceStylesstyles = require("./useReferenceStyles.styles");
 const useReference_unstable = (props, ref)=>{
     const { children, id } = props;
-    const { ctxAppearance, shouldUseOverflow } = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>({
-            ctxAppearance: ctx.appearance,
-            shouldUseOverflow: ctx.shouldUseOverflow
-        }));
-    const appearance = props.appearance || ctxAppearance;
+    const shouldUseOverflow = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.shouldUseOverflow);
     const referenceId = (0, _reactcomponents.useId)('reference-', id);
     const citation = _reactcomponents.slot.optional(props.citation, {
         elementType: 'span'
@@ -36,7 +32,6 @@ const useReference_unstable = (props, ref)=>{
         renderByDefault: citation !== undefined && content !== undefined
     });
     const state = {
-        appearance,
         id: referenceId,
         shouldUseOverflow,
         components: {

package/lib-commonjs/components/reference-v2/Reference/useReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n  props: ReferenceProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n  const { children, id } = props;\n\n  const { ctxAppearance, shouldUseOverflow } = useReferenceListContext_unstable(ctx => ({\n    ctxAppearance: ctx.appearance,\n    shouldUseOverflow: ctx.shouldUseOverflow,\n  }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const referenceId = useId('reference-', id);\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const graphic = slot.optional(props.graphic, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: graphic !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    appearance,\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: 'button',\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        id: referenceId,\n      }),\n      { elementType: 'button' },\n    ),\n    citation,\n    divider,\n    content,\n    graphic,\n  };\n\n  if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n    state.graphic.children = React.cloneElement(state.graphic.children, {\n      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["children","props","ctxAppearance","referenceId","shouldUseOverflow","slot","ctx","appearance","optional","graphic","content","elementType","citation","renderByDefault","divider","state","components","undefined","ref","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBUA;;;eAAAA;;;;iEAnBa;iCAC6C;sCACnB;0CACR;AAgBvC,MAAQA,wBAAiBC,CAAAA,OAAAA;UAEzB,UACEC;UAGF,EAEAA,aAAMC,EAENC,iBAAiBC,+DAA6C,EAAAC,CAAAA,MAAA,CAAA;YAAOJ,eAAAI,IAAAC,UAAA;YACrEH,mBAAgBC,IAAKG,iBAAeC;;UAA+BF,aAAAN,MAAAM,UAAA,IAAAL;UACnEC,cAAgBE,IAAAA,sBAAKG,EAAAA,cAAeE;UAClCC,WAAAA,qBAAa,CAAAH,QAAA,CAAAP,MAAAW,QAAA,EAAA;qBACbC;;UAEFJ,UAAMK,qBAAUT,CAAAA,QAAKG,CAAAA,MAASP,OAAMa,EAAO;qBACzCH;;UAEFD,UAAAL,qBAAA,CAAAG,QAAA,CAAAP,MAAAS,OAAA,EAAA;QAEAC,aAAMI;yBACJR,YAAAA,aAAAA,CAAAA,CAAAA;;UAEAH,UAAAA,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,OAAAA,EAAAA;qBAEAY;yBACQJ,aAAAK,aAAAP,YAAAO;;kBAENH;;;;oBAKIT;kBAEFa;sBACGjB;qBACHkB;qBAEF;qBAAER;;cAEJC,qBAAAA,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,UAAAA;;eAEAF,KAAAA;gBACAD;QACF,IAAA;YAEAE,aAAUF;;;;QAIVC;QAEAD;IACA"}
+{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n  props: ReferenceProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n  const { children, id } = props;\n\n  const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n  const referenceId = useId('reference-', id);\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const graphic = slot.optional(props.graphic, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: graphic !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: 'button',\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        id: referenceId,\n      }),\n      { elementType: 'button' },\n    ),\n    citation,\n    divider,\n    content,\n    graphic,\n  };\n\n  if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n    state.graphic.children = React.cloneElement(state.graphic.children, {\n      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["children","props","referenceId","id","shouldUseOverflow","useReferenceListContext_unstable","ctx","slot","optional","graphic","elementType","citation","renderByDefault","content","divider","undefined","root","ref","always","getIntrinsicElementProps","state","React","isValidElement","className","mergeClasses","referenceExtraClassNames","graphicChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBUA;;;eAAAA;;;;iEAnBa;iCAC6C;sCACnB;0CACR;AAgBvC,MAAQA,wBAAiBC,CAAAA,OAAAA;UAEzB,EAEAD,QAAME,EAENC,EAAA;UAAqEC,oBAAAC,IAAAA,sDAAA,EAAAC,CAAAA,MAAAA,IAAAF,iBAAA;UACrEF,cAAgBK,IAAAA,sBAAKC,EAAAA,cAAeC;UAAWC,WAAAA,qBAAa,CAAAF,QAAA,CAAAP,MAAAU,QAAA,EAAA;QAAOD,aAAA;;UAEjEA,UAAAA,qBAAa,CAAAF,QAAA,CAAAP,MAAAQ,OAAA,EAAA;qBACbG;;UAEFC,UAAMC,qBAAUP,CAAAA,QAAKC,CAAAA,MAASP,OAAMa,EAAO;qBACzCJ;yBACAE,YAAiBD,aAAaI,CAAAA,CAAAA;;UAGhCD,UAA8BP,qBAAA,CAAAC,QAAA,CAAAP,MAAAa,OAAA,EAAA;qBACxBZ;yBACJE,aAAAA,aAAAA,YAAAA;;kBAGEY;;;oBAGAP;kBACAI;sBACF;qBAEMN;qBAEFU;qBACGhB;;cAELM,qBACA,CAAAW,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;;eAAwBlB,KAAA;gBAE1BU;YACAG;yBACAD;;QAEFF;QAEAG;;;;QAIAM,MAAAX,OAAA,kBAAAY,OAAAC,cAAA,CAAAF,MAAAX,OAAA,CAAAT,QAAA,GAAA;QAEAoB,MAAAX,OAAOW,CAAAA,QAAAA,iBAAAA,OAAAA,YAAAA,CAAAA,MAAAA,OAAAA,CAAAA,QAAAA,EAAAA;YACPG,WAAAC,IAAAA,6BAAA,EAAAJ,MAAAX,OAAA,CAAAT,QAAA,CAAAC,KAAA,CAAAsB,SAAA,EAAAE,kDAAA,CAAAC,YAAA"}

package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js

@@ -42,36 +42,12 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1aeqif9", nul
     ".r1aeqif9:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"
 ]);
 const useRootStyles = (0, _reactcomponents.__styles)({
-    darker: {
-        De3pzq: "f3vzo32",
-        g2u3we: "fj3muxo",
-        h3c5rm: [
-            "f1akhkt",
-            "f1lxtadh"
-        ],
-        B9xav0g: "f1aperda",
-        zhjwy3: [
-            "f1lxtadh",
-            "f1akhkt"
-        ],
-        Jwef8y: "f14vf7cg",
-        iro3zm: "fho4vwd"
-    },
     overflow: {
         a9b677: "fly5x3f"
     }
 }, {
     d: [
-        ".f3vzo32{background-color:var(--colorNeutralBackground5);}",
-        ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}",
-        ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
-        ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
-        ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}",
         ".fly5x3f{width:100%;}"
-    ],
-    h: [
-        ".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}",
-        ".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"
     ]
 });
 const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("rzdip90", null, [
@@ -80,15 +56,6 @@ const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("rzdip90",
 const useDividerBaseClassName = (0, _reactcomponents.__resetStyles)("r1eyqaw5", null, [
     ".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"
 ]);
-const useDividerStyles = (0, _reactcomponents.__styles)({
-    darker: {
-        De3pzq: "f1d3jkam"
-    }
-}, {
-    d: [
-        ".f1d3jkam{background-color:var(--colorNeutralStroke1);}"
-    ]
-});
 const useGraphicBaseClassName = (0, _reactcomponents.__resetStyles)("rjrtsj7", null, [
     ".rjrtsj7{font-size:16px;height:16px;line-height:16px;width:16px;}",
     ".rjrtsj7>.fai-Reference__graphicChild{height:16px;width:16px;}"
@@ -98,20 +65,17 @@ const useContentBaseClassName = (0, _reactcomponents.__resetStyles)("r1yvxokd",
 ]);
 const useReferenceStyles_unstable = (state)=>{
     'use no memo';
-    const { appearance } = state;
     const rootBaseClassName = useRootBaseClassName();
     const citationBaseClassName = useCitationBaseClassName();
     const dividerBaseClassName = useDividerBaseClassName();
     const contentBaseClassName = useContentBaseClassName();
     const graphicBaseClassName = useGraphicBaseClassName();
-    const rootStyles = useRootStyles();
-    const dividerStyles = useDividerStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, state.root.className);
     if (state.citation) {
         state.citation.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.citation, citationBaseClassName, state.citation.className);
     }
     if (state.divider) {
-        state.divider.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.divider, dividerBaseClassName, appearance === 'darker' && dividerStyles.darker, state.divider.className);
+        state.divider.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
     }
     if (state.content) {
         state.content.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.content, contentBaseClassName, state.content.className);

package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  divider: 'fai-Reference__divider',\n  graphic: 'fai-Reference__graphic',\n  content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n  graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground2,\n  columnGap: tokens.spacingHorizontalXXS,\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${referenceClassNames.divider}`]: {\n      backgroundColor: tokens.colorNeutralStroke1Hover,\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n\n    [`& .${referenceClassNames.divider}`]: {\n      backgroundColor: tokens.colorNeutralStroke1Pressed,\n    },\n  },\n});\n\nexport const useRootStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n  overflow: {\n    width: '100%',\n  },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n  ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralStroke2,\n  height: '16px',\n  margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n  width: '1px',\n});\n\nconst useDividerStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralStroke1,\n  },\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n  fontSize: GRAPHIC_SIZE,\n  height: GRAPHIC_SIZE,\n  lineHeight: GRAPHIC_SIZE,\n  width: GRAPHIC_SIZE,\n\n  [`> .${referenceExtraClassNames.graphicChild}`]: {\n    height: GRAPHIC_SIZE,\n    width: GRAPHIC_SIZE,\n  },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\n  ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const graphicBaseClassName = useGraphicBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(\n      referenceClassNames.citation,\n      citationBaseClassName,\n      state.citation.className,\n    );\n  }\n\n  if (state.divider) {\n    state.divider.className = mergeClasses(\n      referenceClassNames.divider,\n      dividerBaseClassName,\n      appearance === 'darker' && dividerStyles.darker,\n      state.divider.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n  }\n\n  if (state.graphic) {\n    state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n  }\n\n  return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","shorthands","tokens","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","borderRadius","boxSizing","color","columnGap","spacingHorizontalXXS","display","flexShrink","padding","a9b677","__resetStyles","useDividerBaseClassName","useDividerStyles","borderColor","useGraphicBaseClassName","useContentBaseClassName","colorNeutralStroke1","rootBaseClassName","citationBaseClassName","useCitationBaseClassName","overflow","width","graphicBaseClassName","rootStyles","useRootStyles","typographyStyles","caption2Strong","appearance","darker","state","className","height","margin","spacingVerticalNone","spacingHorizontalXS","dividerBaseClassName","dividerStyles","makeStyles","contentBaseClassName","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IA2CNC,2BAAuBC;eAAvBD;;IApCLE,aAAY;eAAZA;;;iCApBgB;AAKX,MAAMJ,sBAAsD;UACjEK;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMR,2BAA2B;kBACtCS;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;YACZC;QACAC,QAAQ;QACRC,QAAAA;QACAC,QAAAA;YAAAA;YAAW;SAAA;QACXC,SAAOhB;QACPiB,QAAAA;YAAAA;YAAkBC;SAAAA;QAClBC,QAAAA;QACAC,QAAAA;;cAEAC;QAEAC,QAAA;;;;;QAG4C;QAAA;QAAA;QAAA;QAAA;KAAA;;;QAEH;KAAA;;iCAEvCC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACFC,0BAAAD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAEAE,mBAAiBd,IAAAA,yBAAA,EAAA;YACfC;gBACAc;;;;;KAIoD;;MAEtDC,0BAAAJ,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;AACF,MAAAK,0BAAAL,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAKOxB,8BAA8B8B,CAAAA;;UAIjC,YAEA;UAEAC,oBAAArB;UACFsB,wBAAAC;UACAC,uBAAUT;UACRU,uBAAON;UACTO,uBAAAR;IACF,MAAGS,aAAAC;IAEH,MAAML,gBAAAA;UACDM,IAAAA,CAAAA,SAAAA,GAAiBC,IAAAA,6BAAAA,EAAc1C,oBAAAK,IAAA,EAAA4B,mBAAAU,eAAA,YAAAJ,WAAAK,MAAA,EAAAC,MAAAxC,IAAA,CAAAyC,SAAA;IACpC,IAAAD,MAAAvC,QAAA,EAAA;QAEAuC,MAAMlB,QAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA0Bd,EAAAA,oBAAgBP,QAAA,EAAA4B,uBAAAW,MAAAvC,QAAA,CAAAwC,SAAA;;QAE9CC,MAAQxC,OAAA,EAAA;QACRyC,MAAAA,OAAW7C,CAAAA,SAAO8C,GAAAA,IAAAA,6BAAoB,EAACjD,oBAASkD,OAAAA,EAAoBC,sBAACR,eAAA,YAAAS,cAAAR,MAAA,EAAAC,MAAAtC,OAAA,CAAAuC,SAAA;;IAEvE,IAAAD,MAAApC,OAAA,EAAA;QAEAoC,MAAMjB,OAAAA,CAAAA,SAAmByB,GAAAA,IAAAA,6BAAW,EAAArD,oBAAAS,OAAA,EAAA6C,sBAAAT,MAAApC,OAAA,CAAAqC,SAAA;;cAEhC/B,OAAAA,EAAAA;QACF8B,MAAArC,OAAA,CAAAsC,SAAA,GAAAS,IAAAA,6BAAA,EAAAvD,oBAAAQ,OAAA,EAAA8B,sBAAAO,MAAArC,OAAA,CAAAsC,SAAA;IACF;IAEA,OAAMhB;wDAEInB"}
+{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  divider: 'fai-Reference__divider',\n  graphic: 'fai-Reference__graphic',\n  content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n  graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground2,\n  columnGap: tokens.spacingHorizontalXXS,\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${referenceClassNames.divider}`]: {\n      backgroundColor: tokens.colorNeutralStroke1Hover,\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n\n    [`& .${referenceClassNames.divider}`]: {\n      backgroundColor: tokens.colorNeutralStroke1Pressed,\n    },\n  },\n});\n\nexport const useRootStyles = makeStyles({\n  overflow: {\n    width: '100%',\n  },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n  ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralStroke2,\n  height: '16px',\n  margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n  width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n  fontSize: GRAPHIC_SIZE,\n  height: GRAPHIC_SIZE,\n  lineHeight: GRAPHIC_SIZE,\n  width: GRAPHIC_SIZE,\n\n  [`> .${referenceExtraClassNames.graphicChild}`]: {\n    height: GRAPHIC_SIZE,\n    width: GRAPHIC_SIZE,\n  },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\n  ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const graphicBaseClassName = useGraphicBaseClassName();\n\n  state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(\n      referenceClassNames.citation,\n      citationBaseClassName,\n      state.citation.className,\n    );\n  }\n\n  if (state.divider) {\n    state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n  }\n\n  if (state.graphic) {\n    state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n  }\n\n  return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","color","colorNeutralForeground2Hover","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","colorNeutralForeground2","display","__resetStyles","flexShrink","justifyContent","padding","spacingVerticalXXS","tokens","spacingHorizontalS","rootBaseClassName","citationBaseClassName","useCitationBaseClassName","dividerBaseClassName","useDividerBaseClassName","borderColor","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","state","className","mergeClasses","overflow","width","contentBaseClassName","graphicBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IAsBTC,2BAAcC;eAAdD;;IAfFE,aAAY;eAAZA;;;iCAnB0E;AAIrE,MAAMJ,sBAAsD;UACjEK;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMR,2BAA2B;kBACtCS;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;cACZC;QACAC,QAAQ;;;OAGRd;QAAAA;KAAce;;MAEdC,2BAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,0BAAYD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACZE,0BAAgBF,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;MAChBG,0BAAmBC,IAAAA,8BAAsBC,EAAAA,YAAOC,MAAAA;IAAAA;CAAoB;MAKlEvB,8BAAcC,CAAAA;;UAIduB,oBAAAd;UACFe,wBAAAC;UAEAC,uBAAiBC;UACff,uBAAiBS;UACjBO,uBAAoBC;UACpB9B,IAAAA,CAAAA,SAAc+B,GAAAA,IAAAA,6BAAAA,EAAAA,oBAA8B5B,IAAA,EAAAqB,mBAAAQ,MAAA7B,IAAA,CAAA8B,SAAA;cAE1C7B,QAAKN,EAAAA;sBACLe,CAAAA,SAAAA,GAAiBS,IAAAA,6BAAOQ,EAAAA,oBAA0B1B,QAAA,EAAAqB,uBAAAO,MAAA5B,QAAA,CAAA6B,SAAA;;QAEtDD,MAAA3B,OAAA,EAAA;QACF2B,MAAA3B,OAAA,CAAA4B,SAAA,GAAAC,IAAAA,6BAAA,EAAApC,oBAAAO,OAAA,EAAAsB,sBAAAK,MAAA3B,OAAA,CAAA4B,SAAA;IAEA;QACEE,MAAAA,OAAU,EAAA;cACRC,OAAO,CAAAH,SAAA,GAAAC,IAAAA,6BAAA,EAAApC,oBAAAS,OAAA,EAAA8B,sBAAAL,MAAAzB,OAAA,CAAA0B,SAAA;;IAEX,IAAGD,MAAA1B,OAAA,EAAA;QAEH0B,MAAMN,OAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA2Bf,EAAAA,oBAAgBL,OAAA,EAAAgC,sBAAAN,MAAA1B,OAAA,CAAA2B,SAAA;;IAEjD,OAAAD;AAEA,wDAC6C"}