@fluentui-copilot/react-reference 0.11.2 → 0.11.4

package/lib/components/ReferenceGroupToggle/index.js

@@ -2,5 +2,5 @@ export * from './ReferenceGroupToggle';
 export * from './ReferenceGroupToggle.types';
 export * from './renderReferenceGroupToggle';
 export * from './useReferenceGroupToggle';
-export * from './useReferenceGroupToggleStyles';
+export * from './useReferenceGroupToggleStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/ReferenceGroupToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceGroupToggle';\nexport * from './ReferenceGroupToggle.types';\nexport * from './renderReferenceGroupToggle';\nexport * from './useReferenceGroupToggle';\nexport * from './useReferenceGroupToggleStyles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,+BAA+B;AAC7C,cAAc,+BAA+B;AAC7C,cAAc,4BAA4B;AAC1C,cAAc,kCAAkC"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceGroupToggle';\nexport * from './ReferenceGroupToggle.types';\nexport * from './renderReferenceGroupToggle';\nexport * from './useReferenceGroupToggle';\nexport * from './useReferenceGroupToggleStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,+BAA+B;AAC7C,cAAc,+BAA+B;AAC7C,cAAc,4BAA4B;AAC1C,cAAc,yCAAyC"}

package/lib/components/ReferenceGroupToggle/useReferenceGroupToggle.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
 import { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';
+import { useCopilotMode } from '@fluentui-copilot/react-provider';
 /**
  * Create the state required to render ReferenceGroupToggle.
  *
@@ -14,7 +15,9 @@ export const useReferenceGroupToggle_unstable = (props, ref) => {
   const {
     isOpen = false
   } = props;
+  const mode = useCopilotMode(props.mode);
   return {
+    mode,
     isOpen,
     components: {
       root: 'button',

package/lib/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":["React","getIntrinsicElementProps","slot","ChevronDown16Regular","ChevronUp16Regular","useReferenceGroupToggle_unstable","props","ref","isOpen","components","root","icon","always","type","elementType","optional","defaultProps","children","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,wBAAwB;AAGjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,SAAS,KAAK,EAAE,GAAGF;IAE3B,OAAO;QACLE;QACAC,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMR,KAAKU,MAAM,CACfX,yBAAyB,UAAU;YACjCM;YACA,iBAAiBC;YACjBK,MAAM;YACN,GAAGP,KAAK;QACV,IACA;YAAEQ,aAAa;QAAS;QAE1BH,MAAMT,KAAKa,QAAQ,CAACT,MAAMK,IAAI,EAAE;YAC9BK,cAAc;gBACZC,UAAUT,uBAAS,oBAACJ,0CAAwB,oBAACD;YAC/C;YACAe,iBAAiB;YACjBJ,aAAa;QACf;IACF;AACF,EAAE"}
+{"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":["React","getIntrinsicElementProps","slot","ChevronDown16Regular","ChevronUp16Regular","useCopilotMode","useReferenceGroupToggle_unstable","props","ref","isOpen","mode","components","root","icon","always","type","elementType","optional","defaultProps","children","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,wBAAwB;AAEjF,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,SAAS,KAAK,EAAE,GAAGF;IAE3B,MAAMG,OAAOL,eAAeE,MAAMG,IAAI;IACtC,OAAO;QACLA;QACAD;QACAE,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMV,KAAKY,MAAM,CACfb,yBAAyB,UAAU;YACjCO;YACA,iBAAiBC;YACjBM,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAS;QAE1BH,MAAMX,KAAKe,QAAQ,CAACV,MAAMM,IAAI,EAAE;YAC9BK,cAAc;gBACZC,UAAUV,uBAAS,oBAACL,0CAAwB,oBAACD;YAC/C;YACAiB,iBAAiB;YACjBJ,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/ReferenceGroupToggle/{useReferenceGroupToggleStyles.js → useReferenceGroupToggleStyles.styles.js}

@@ -1,20 +1,42 @@
-import { __resetStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+import { __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
 export const referenceGroupToggleClassNames = {
   root: 'fai-ReferenceGroupToggle',
   icon: 'fai-ReferenceGroupToggle__icon'
 };
 const useButtonBaseClassName = __resetStyles("rctdkan", "rfdmif3", [".rctdkan{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding-top:var(--spacingVerticalXS);padding-right:0;padding-bottom:var(--spacingVerticalXS);padding-left:0;}", ".rfdmif3{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding-top:var(--spacingVerticalXS);padding-left:0;padding-bottom:var(--spacingVerticalXS);padding-right:0;}"]);
 const useIconBaseClassName = __resetStyles("r18biwo", null, [".r18biwo{display:inline-flex;align-items:center;}"]);
+const useStyles = __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);}"]
+});
 /**
  * Apply styling to the ReferenceGroupToggle slots based on the state
  */
 export const useReferenceGroupToggleStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    mode
+  } = state;
+  const styles = useStyles();
   const iconBaseClassName = useIconBaseClassName();
   const buttonBaseClassName = useButtonBaseClassName();
-  state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, state.root.className);
+  state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, styles[mode], state.root.className);
   if (state.icon) {
     state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);
   }
   return state;
 };
-//# sourceMappingURL=useReferenceGroupToggleStyles.js.map
+//# sourceMappingURL=useReferenceGroupToggleStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"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":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useStyles","canvas","sidecar","caption2","useReferenceGroupToggleStyles_unstable","state","mode","styles","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBT,gBAAgB;IAC7CU,SAAS;IACTC,WAAWP,OAAOQ,uBAAuB;IACzCC,YAAY;IACZ,GAAGR,iBAAiBS,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBZ,OAAOa,0BAA0B;IAClDC,OAAOd,OAAOe,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACP,GAAGlB,WAAWmB,OAAO,CAAClB,OAAOmB,iBAAiB,EAAE,EAAE;AACpD;AAEA,MAAMC,uBAAuBxB,gBAAgB;IAC3CU,SAAS;IACTG,YAAY;AACd;AAEA,MAAMY,YAAYxB,WAAW;IAC3ByB,QAAQ;QAAE,GAAGrB,iBAAiBS,QAAQ;IAAC;IACvCa,SAAS;QACP,GAAGtB,iBAAiBuB,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,SAASP;IAEf,MAAMQ,oBAAoBT;IAC1B,MAAMU,sBAAsBzB;IAC5BqB,MAAMvB,IAAI,CAAC4B,SAAS,GAAGjC,aACrBI,+BAA+BC,IAAI,EACnC2B,qBACAF,MAAM,CAACD,KAAK,EACZD,MAAMvB,IAAI,CAAC4B,SAAS;IAGtB,IAAIL,MAAMtB,IAAI,EAAE;QACdsB,MAAMtB,IAAI,CAAC2B,SAAS,GAAGjC,aAAaI,+BAA+BE,IAAI,EAAEyB,mBAAmBH,MAAMtB,IAAI,CAAC2B,SAAS;IAClH;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/ReferenceList/ReferenceList.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useReferenceList_unstable } from './useReferenceList';
 import { renderReferenceList_unstable } from './renderReferenceList';
-import { useReferenceListStyles_unstable } from './useReferenceListStyles';
+import { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';
 import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
 //ReferenceList component - TODO: add more docs
 export const ReferenceList = /*#__PURE__*/React.forwardRef((props, ref) => {

package/lib/components/ReferenceList/ReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles';\nimport type { ReferenceListProps } from './ReferenceList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n//ReferenceList component - TODO: add more docs\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n\n  useReferenceListStyles_unstable(state);\n  useCustomStyleHook('useReferenceListStyles')(state);\n\n  return renderReferenceList_unstable(state);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["React","useReferenceList_unstable","renderReferenceList_unstable","useReferenceListStyles_unstable","useCustomStyleHook","ReferenceList","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAG3E,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,+CAA+C;AAC/C,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,mBAAmB,0BAA0BK;IAE7C,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\nimport type { ReferenceListProps } from './ReferenceList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n//ReferenceList component - TODO: add more docs\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n\n  useReferenceListStyles_unstable(state);\n  useCustomStyleHook('useReferenceListStyles')(state);\n\n  return renderReferenceList_unstable(state);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["React","useReferenceList_unstable","renderReferenceList_unstable","useReferenceListStyles_unstable","useCustomStyleHook","ReferenceList","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,+CAA+C;AAC/C,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,mBAAmB,0BAA0BK;IAE7C,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/ReferenceList/index.js

@@ -2,5 +2,5 @@ export * from './ReferenceList';
 export * from './ReferenceList.types';
 export * from './renderReferenceList';
 export * from './useReferenceList';
-export * from './useReferenceListStyles';
+export * from './useReferenceListStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/ReferenceList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceList';\nexport * from './ReferenceList.types';\nexport * from './renderReferenceList';\nexport * from './useReferenceList';\nexport * from './useReferenceListStyles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,2BAA2B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceList';\nexport * from './ReferenceList.types';\nexport * from './renderReferenceList';\nexport * from './useReferenceList';\nexport * from './useReferenceListStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC"}

package/lib/components/ReferenceList/useReferenceList.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
-import { referenceListItemClassName } from './useReferenceListStyles';
+import { referenceListItemClassName } from './useReferenceListStyles.styles';
 // If you add JSX to this file, be sure to change the file type to .tsx
 /**
  * Create the state required to render ReferenceList.

package/lib/components/ReferenceList/useReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { referenceListItemClassName } from './useReferenceListStyles';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\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<HTMLOListElement>,\n): ReferenceListState => {\n  return {\n    components: {\n      root: 'ol',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('ol', {\n        ref,\n        ...props,\n        children: React.Children.map(props.children, child => <li className={referenceListItemClassName}>{child}</li>),\n      }),\n      { elementType: 'ol' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","referenceListItemClassName","useReferenceList_unstable","props","ref","components","root","always","children","Children","map","child","li","className","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAE5E,SAASC,0BAA0B,QAAQ,2BAA2B;AAEtE,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,yBAAyB,MAAM;YAC7BK;YACA,GAAGD,KAAK;YACRK,UAAUV,MAAMW,QAAQ,CAACC,GAAG,CAACP,MAAMK,QAAQ,EAAEG,CAAAA,sBAAS,oBAACC;oBAAGC,WAAWZ;mBAA6BU;QACpG,IACA;YAAEG,aAAa;QAAK;IAExB;AACF,EAAE"}
+{"version":3,"sources":["useReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { referenceListItemClassName } from './useReferenceListStyles.styles';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\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<HTMLOListElement>,\n): ReferenceListState => {\n  return {\n    components: {\n      root: 'ol',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('ol', {\n        ref,\n        ...props,\n        children: React.Children.map(props.children, child => <li className={referenceListItemClassName}>{child}</li>),\n      }),\n      { elementType: 'ol' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","referenceListItemClassName","useReferenceList_unstable","props","ref","components","root","always","children","Children","map","child","li","className","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAE5E,SAASC,0BAA0B,QAAQ,kCAAkC;AAE7E,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,yBAAyB,MAAM;YAC7BK;YACA,GAAGD,KAAK;YACRK,UAAUV,MAAMW,QAAQ,CAACC,GAAG,CAACP,MAAMK,QAAQ,EAAEG,CAAAA,sBAAS,oBAACC;oBAAGC,WAAWZ;mBAA6BU;QACpG,IACA;YAAEG,aAAa;QAAK;IAExB;AACF,EAAE"}

package/lib/components/ReferenceList/{useReferenceListStyles.js → useReferenceListStyles.styles.js}

@@ -11,7 +11,9 @@ const useRootClassName = __resetStyles("rc0s888", null, [".rc0s888{padding:0;mar
  * Apply styling to the ReferenceList slots based on the state
  */
 export const useReferenceListStyles_unstable = state => {
+  'use no memo';
+
   state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);
   return state;
 };
-//# sourceMappingURL=useReferenceListStyles.js.map
+//# sourceMappingURL=useReferenceListStyles.styles.js.map

package/lib/components/ReferenceList/useReferenceListStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n  root: 'fai-ReferenceList',\n};\n\nexport const referenceListItemClassName = 'fai-ReferenceList__item';\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: tokens.spacingVerticalS,\n\n  [`> .${referenceListItemClassName}`]: {\n    listStyleType: 'none',\n  },\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","referenceListClassNames","root","referenceListItemClassName","useRootClassName","padding","margin","display","flexDirection","gap","spacingVerticalS","listStyleType","useReferenceListStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,6BAA6B,0BAA0B;AAEpE;;CAEC,GACD,MAAMC,mBAAmBN,gBAAgB;IACvCO,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,KAAKT,OAAOU,gBAAgB;IAE5B,CAAC,CAAC,GAAG,EAAEP,2BAA2B,CAAC,CAAC,EAAE;QACpCQ,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMX,IAAI,CAACY,SAAS,GAAGf,aAAaE,wBAAwBC,IAAI,EAAEE,oBAAoBS,MAAMX,IAAI,CAACY,SAAS;IAE1G,OAAOD;AACT,EAAE"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useReference_unstable } from './useReference';
 import { renderReference_unstable } from './renderReference';
-import { useReferenceStyles_unstable } from './useReferenceStyles';
+import { useReferenceStyles_unstable } from './useReferenceStyles.styles';
 export const Reference = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useReference_unstable(props, ref);
   useReferenceStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["Reference.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReference_unstable } from './useReference';\nimport { renderReference_unstable } from './renderReference';\nimport { useReferenceStyles_unstable } from './useReferenceStyles';\nimport type { ReferenceProps } from './Reference.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const Reference: ForwardRefComponent<ReferenceProps> = React.forwardRef((props, ref) => {\n  const state = useReference_unstable(props, ref);\n\n  useReferenceStyles_unstable(state);\n  return renderReference_unstable(state);\n});\n\nReference.displayName = 'Reference';\n"],"names":["React","useReference_unstable","renderReference_unstable","useReferenceStyles_unstable","Reference","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AAInE,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQP,sBAAsBK,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAON,yBAAyBM;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["Reference.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReference_unstable } from './useReference';\nimport { renderReference_unstable } from './renderReference';\nimport { useReferenceStyles_unstable } from './useReferenceStyles.styles';\nimport type { ReferenceProps } from './Reference.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const Reference: ForwardRefComponent<ReferenceProps> = React.forwardRef((props, ref) => {\n  const state = useReference_unstable(props, ref);\n\n  useReferenceStyles_unstable(state);\n  return renderReference_unstable(state);\n});\n\nReference.displayName = 'Reference';\n"],"names":["React","useReference_unstable","renderReference_unstable","useReferenceStyles_unstable","Reference","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAI1E,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQP,sBAAsBK,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAON,yBAAyBM;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

package/lib/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'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\n  media?: 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":"AAmBA,WAEgD"}
+{"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  /** The root of the component that renders the reference as either a button or an anchor element. */\n  root: NonNullable<Slot<'button', 'a'>>;\n\n  /** The number of the citation this reference corresponds to. */\n  citation?: Slot<'span'>;\n\n  /** A divider that visually separates the citation from the content of the reference. */\n  divider?: Slot<'span'>;\n\n  /** A space containing the content of the reference, which goes into an ellipsis if it overflows. */\n  content?: Slot<'span'>;\n\n  /** A space within the content slot where a graphic such as an icon or an image can be displayed before the rest of the content. */\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":"AAsBA,WAEgD"}

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

@@ -2,5 +2,5 @@ export * from './Reference';
 export * from './Reference.types';
 export * from './renderReference';
 export * from './useReference';
-export { referenceClassNames, referenceExtraClassNames, useReferenceStyles_unstable } from './useReferenceStyles';
+export { referenceClassNames, referenceExtraClassNames, useReferenceStyles_unstable } from './useReferenceStyles.styles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Reference';\nexport * from './Reference.types';\nexport * from './renderReference';\nexport * from './useReference';\nexport { referenceClassNames, referenceExtraClassNames, useReferenceStyles_unstable } from './useReferenceStyles';\n"],"names":["referenceClassNames","referenceExtraClassNames","useReferenceStyles_unstable"],"rangeMappings":";;;;","mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,SAASA,mBAAmB,EAAEC,wBAAwB,EAAEC,2BAA2B,QAAQ,uBAAuB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Reference';\nexport * from './Reference.types';\nexport * from './renderReference';\nexport * from './useReference';\nexport {\n  referenceClassNames,\n  referenceExtraClassNames,\n  useReferenceStyles_unstable,\n} from './useReferenceStyles.styles';\n"],"names":["referenceClassNames","referenceExtraClassNames","useReferenceStyles_unstable"],"rangeMappings":";;;;","mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,SACEA,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,QACtB,8BAA8B"}

package/lib/components/reference-v2/Reference/renderReference.js

@@ -8,7 +8,7 @@ export const renderReference_unstable = state => {
   } = state;
   const reference = /*#__PURE__*/_jsxs(state.root, {
     children: [state.citation && /*#__PURE__*/_jsx(state.citation, {}), state.divider && /*#__PURE__*/_jsx(state.divider, {}), state.content && /*#__PURE__*/_jsxs(state.content, {
-      children: [state.media && /*#__PURE__*/_jsx(state.media, {}), state.root.children]
+      children: [state.graphic && /*#__PURE__*/_jsx(state.graphic, {}), state.root.children]
     })]
   });
   return shouldUseOverflow ? /*#__PURE__*/_jsx(OverflowItem, {

package/lib/components/reference-v2/Reference/renderReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  const { id, shouldUseOverflow } = state;\n\n  const reference = (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.divider && <state.divider />}\n      {state.content && (\n        <state.content>\n          {state.media && <state.media />}\n          {state.root.children}\n        </state.content>\n      )}\n    </state.root>\n  );\n\n  return shouldUseOverflow ? (\n    <OverflowItem key={id} id={id}>\n      {reference}\n    </OverflowItem>\n  ) : (\n    reference\n  );\n};\n"],"names":["OverflowItem","assertSlots","renderReference_unstable","state","id","shouldUseOverflow","reference","root","citation","divider","content","media","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,YAAY,EAAEC,WAAW,QAAQ,6BAA6B;AAGvE,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,MAAM,EAAEC,EAAE,EAAEC,iBAAiB,EAAE,GAAGF;IAElC,MAAMG,0BACJ,MAACH,MAAMI,IAAI;;YACRJ,MAAMK,QAAQ,kBAAI,KAACL,MAAMK,QAAQ;YACjCL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;YAC/BN,MAAMO,OAAO,kBACZ,MAACP,MAAMO,OAAO;;oBACXP,MAAMQ,KAAK,kBAAI,KAACR,MAAMQ,KAAK;oBAC3BR,MAAMI,IAAI,CAACK,QAAQ;;;;;IAM5B,OAAOP,kCACL,KAACL;QAAsBI,IAAIA;kBACxBE;OADgBF,MAInBE;AAEJ,EAAE"}
+{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  const { id, shouldUseOverflow } = state;\n\n  const reference = (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.divider && <state.divider />}\n      {state.content && (\n        <state.content>\n          {state.graphic && <state.graphic />}\n          {state.root.children}\n        </state.content>\n      )}\n    </state.root>\n  );\n\n  return shouldUseOverflow ? (\n    <OverflowItem key={id} id={id}>\n      {reference}\n    </OverflowItem>\n  ) : (\n    reference\n  );\n};\n"],"names":["OverflowItem","assertSlots","renderReference_unstable","state","id","shouldUseOverflow","reference","root","citation","divider","content","graphic","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,YAAY,EAAEC,WAAW,QAAQ,6BAA6B;AAGvE,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,MAAM,EAAEC,EAAE,EAAEC,iBAAiB,EAAE,GAAGF;IAElC,MAAMG,0BACJ,MAACH,MAAMI,IAAI;;YACRJ,MAAMK,QAAQ,kBAAI,KAACL,MAAMK,QAAQ;YACjCL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;YAC/BN,MAAMO,OAAO,kBACZ,MAACP,MAAMO,OAAO;;oBACXP,MAAMQ,OAAO,kBAAI,KAACR,MAAMQ,OAAO;oBAC/BR,MAAMI,IAAI,CAACK,QAAQ;;;;;IAM5B,OAAOP,kCACL,KAACL;QAAsBI,IAAIA;kBACxBE;OADgBF,MAInBE;AAEJ,EAAE"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';
 import { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';
-import { referenceExtraClassNames } from './useReferenceStyles';
+import { referenceExtraClassNames } from './useReferenceStyles.styles';
 /**
  * Create the state required to render Reference.
  *
@@ -13,58 +13,57 @@ import { referenceExtraClassNames } from './useReferenceStyles';
  */
 export const useReference_unstable = (props, ref) => {
   const {
+    as,
     children,
     id
   } = props;
-  const {
-    ctxAppearance,
-    shouldUseOverflow
-  } = useReferenceListContext_unstable(ctx => ({
-    ctxAppearance: ctx.appearance,
-    shouldUseOverflow: ctx.shouldUseOverflow
-  }));
-  const appearance = props.appearance || ctxAppearance;
+  const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);
   const referenceId = useId('reference-', id);
+  const elementType = as || (props.href ? 'a' : 'button');
+  const propsWithAssignedAs = {
+    type: elementType === 'button' ? 'button' : undefined,
+    ...props,
+    as: elementType,
+    id: referenceId
+  };
   const citation = slot.optional(props.citation, {
     elementType: 'span'
   });
-  const media = slot.optional(props.media, {
+  const graphic = slot.optional(props.graphic, {
     elementType: 'span'
   });
   const content = slot.optional(props.content, {
     elementType: 'span',
-    renderByDefault: media !== undefined || !!children
+    renderByDefault: graphic !== undefined || !!children
   });
   const divider = slot.optional(props.divider, {
     elementType: 'span',
     renderByDefault: citation !== undefined && content !== undefined
   });
   const state = {
-    appearance,
     id: referenceId,
     shouldUseOverflow,
     components: {
       root: 'button',
       citation: 'span',
       divider: 'span',
-      media: 'span',
+      graphic: 'span',
       content: 'span'
     },
-    root: slot.always(getIntrinsicElementProps('button', {
+    root: slot.always(getIntrinsicElementProps(elementType, {
       ref,
-      ...props,
-      id: referenceId
+      ...propsWithAssignedAs
     }), {
-      elementType: 'button'
+      elementType
     }),
     citation,
     divider,
     content,
-    media
+    graphic
   };
-  if (state.media && React.isValidElement(state.media.children)) {
-    state.media.children = React.cloneElement(state.media.children, {
-      className: mergeClasses(state.media.children.props.className, referenceExtraClassNames.mediaChild)
+  if (state.graphic && React.isValidElement(state.graphic.children)) {
+    state.graphic.children = React.cloneElement(state.graphic.children, {
+      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild)
     });
   }
   return state;

package/lib/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';\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 = (props: ReferenceProps, ref: React.Ref<HTMLButtonElement>): 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 media = slot.optional(props.media, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: media !== 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      media: '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    media,\n  };\n\n  if (state.media && React.isValidElement<HTMLElement>(state.media.children)) {\n    state.media.children = React.cloneElement(state.media.children, {\n      className: mergeClasses(state.media.children.props.className, referenceExtraClassNames.mediaChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useReference_unstable","props","ref","children","id","ctxAppearance","shouldUseOverflow","ctx","appearance","referenceId","citation","optional","elementType","media","content","renderByDefault","undefined","divider","state","components","root","always","isValidElement","cloneElement","className","mediaChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACjG,SAASC,gCAAgC,QAAQ,sDAAsD;AACvG,SAASC,wBAAwB,QAAQ,uBAAuB;AAGhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGH;IAEzB,MAAM,EAAEI,aAAa,EAAEC,iBAAiB,EAAE,GAAGR,iCAAiCS,CAAAA,MAAQ,CAAA;YACpFF,eAAeE,IAAIC,UAAU;YAC7BF,mBAAmBC,IAAID,iBAAiB;QAC1C,CAAA;IACA,MAAME,aAAaP,MAAMO,UAAU,IAAIH;IAEvC,MAAMI,cAAcZ,MAAM,cAAcO;IAExC,MAAMM,WAAWd,KAAKe,QAAQ,CAACV,MAAMS,QAAQ,EAAE;QAAEE,aAAa;IAAO;IACrE,MAAMC,QAAQjB,KAAKe,QAAQ,CAACV,MAAMY,KAAK,EAAE;QAAED,aAAa;IAAO;IAC/D,MAAME,UAAUlB,KAAKe,QAAQ,CAACV,MAAMa,OAAO,EAAE;QAC3CF,aAAa;QACbG,iBAAiBF,UAAUG,aAAa,CAAC,CAACb;IAC5C;IACA,MAAMc,UAAUrB,KAAKe,QAAQ,CAACV,MAAMgB,OAAO,EAAE;QAC3CL,aAAa;QACbG,iBAAiBL,aAAaM,aAAaF,YAAYE;IACzD;IAEA,MAAME,QAAwB;QAC5BV;QACAJ,IAAIK;QACJH;QAEAa,YAAY;YACVC,MAAM;YACNV,UAAU;YACVO,SAAS;YACTJ,OAAO;YACPC,SAAS;QACX;QAEAM,MAAMxB,KAAKyB,MAAM,CACf3B,yBAAyB,UAAU;YACjCQ;YACA,GAAGD,KAAK;YACRG,IAAIK;QACN,IACA;YAAEG,aAAa;QAAS;QAE1BF;QACAO;QACAH;QACAD;IACF;IAEA,IAAIK,MAAML,KAAK,IAAIpB,MAAM6B,cAAc,CAAcJ,MAAML,KAAK,CAACV,QAAQ,GAAG;QAC1Ee,MAAML,KAAK,CAACV,QAAQ,GAAGV,MAAM8B,YAAY,CAACL,MAAML,KAAK,CAACV,QAAQ,EAAE;YAC9DqB,WAAW7B,aAAauB,MAAML,KAAK,CAACV,QAAQ,CAACF,KAAK,CAACuB,SAAS,EAAEzB,yBAAyB0B,UAAU;QACnG;IACF;IAEA,OAAOP;AACT,EAAE"}
+{"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 { as, children, id } = props;\n\n  const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n  const referenceId = useId('reference-', id);\n\n  const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n  const propsWithAssignedAs = {\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n    id: referenceId,\n  } as ReferenceProps;\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(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      }),\n      { elementType },\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":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useReference_unstable","props","ref","as","children","id","shouldUseOverflow","ctx","referenceId","elementType","href","propsWithAssignedAs","type","undefined","citation","optional","graphic","content","renderByDefault","divider","state","components","root","always","isValidElement","cloneElement","className","graphicChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACjG,SAASC,gCAAgC,QAAQ,sDAAsD;AACvG,SAASC,wBAAwB,QAAQ,8BAA8B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGJ;IAE7B,MAAMK,oBAAoBR,iCAAiCS,CAAAA,MAAOA,IAAID,iBAAiB;IAEvF,MAAME,cAAcX,MAAM,cAAcQ;IAExC,MAAMI,cAAcN,MAAO,CAAA,AAACF,MAAqCS,IAAI,GAAG,MAAM,QAAO;IACrF,MAAMC,sBAAsB;QAC1BC,MAAMH,gBAAgB,WAAW,WAAWI;QAC5C,GAAGZ,KAAK;QACRE,IAAIM;QACJJ,IAAIG;IACN;IAEA,MAAMM,WAAWlB,KAAKmB,QAAQ,CAACd,MAAMa,QAAQ,EAAE;QAAEL,aAAa;IAAO;IACrE,MAAMO,UAAUpB,KAAKmB,QAAQ,CAACd,MAAMe,OAAO,EAAE;QAAEP,aAAa;IAAO;IACnE,MAAMQ,UAAUrB,KAAKmB,QAAQ,CAACd,MAAMgB,OAAO,EAAE;QAC3CR,aAAa;QACbS,iBAAiBF,YAAYH,aAAa,CAAC,CAACT;IAC9C;IACA,MAAMe,UAAUvB,KAAKmB,QAAQ,CAACd,MAAMkB,OAAO,EAAE;QAC3CV,aAAa;QACbS,iBAAiBJ,aAAaD,aAAaI,YAAYJ;IACzD;IAEA,MAAMO,QAAwB;QAC5Bf,IAAIG;QACJF;QAEAe,YAAY;YACVC,MAAM;YACNR,UAAU;YACVK,SAAS;YACTH,SAAS;YACTC,SAAS;QACX;QAEAK,MAAM1B,KAAK2B,MAAM,CACf7B,yBAAyBe,aAAa;YACpCP;YACA,GAAGS,mBAAmB;QACxB,IACA;YAAEF;QAAY;QAEhBK;QACAK;QACAF;QACAD;IACF;IAEA,IAAII,MAAMJ,OAAO,IAAIvB,MAAM+B,cAAc,CAAcJ,MAAMJ,OAAO,CAACZ,QAAQ,GAAG;QAC9EgB,MAAMJ,OAAO,CAACZ,QAAQ,GAAGX,MAAMgC,YAAY,CAACL,MAAMJ,OAAO,CAACZ,QAAQ,EAAE;YAClEsB,WAAW/B,aAAayB,MAAMJ,OAAO,CAACZ,QAAQ,CAACH,KAAK,CAACyB,SAAS,EAAE3B,yBAAyB4B,YAAY;QACvG;IACF;IAEA,OAAOP;AACT,EAAE"}

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

@@ -0,0 +1,51 @@
+import { __resetStyles, __styles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
+export const referenceClassNames = {
+  root: 'fai-Reference',
+  citation: 'fai-Reference__citation',
+  divider: 'fai-Reference__divider',
+  graphic: 'fai-Reference__graphic',
+  content: 'fai-Reference__content'
+};
+export const referenceExtraClassNames = {
+  graphicChild: 'fai-Reference__graphicChild'
+};
+const GRAPHIC_SIZE = '16px';
+const useRootBaseClassName = __resetStyles("rtvjomn", null, [".rtvjomn{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);box-sizing:border-box;color:var(--colorNeutralForeground2);column-gap:var(--spacingHorizontalXXS);display:flex;flex-shrink:0;justify-content:center;max-width:max-content;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);text-decoration:none;}", ".rtvjomn:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".rtvjomn:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}", ".rtvjomn:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".rtvjomn:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"]);
+export const useRootStyles = __styles({
+  overflow: {
+    a9b677: "fly5x3f"
+  }
+}, {
+  d: [".fly5x3f{width:100%;}"]
+});
+const useCitationBaseClassName = __resetStyles("rzdip90", null, [".rzdip90{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);}"]);
+const useDividerBaseClassName = __resetStyles("r1eyqaw5", null, [".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"]);
+const useGraphicBaseClassName = __resetStyles("rjrtsj7", null, [".rjrtsj7{font-size:16px;height:16px;line-height:16px;width:16px;}", ".rjrtsj7>.fai-Reference__graphicChild{height:16px;width:16px;}"]);
+const useContentBaseClassName = __resetStyles("r1yvxokd", null, [".r1yvxokd{column-gap:var(--spacingHorizontalSNudge);display:inline-flex;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
+/**
+ * Apply styling to the Reference slots based on the state
+ */
+export const useReferenceStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseClassName = useRootBaseClassName();
+  const citationBaseClassName = useCitationBaseClassName();
+  const dividerBaseClassName = useDividerBaseClassName();
+  const contentBaseClassName = useContentBaseClassName();
+  const graphicBaseClassName = useGraphicBaseClassName();
+  state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);
+  if (state.citation) {
+    state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
+  }
+  if (state.divider) {
+    state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
+  }
+  if (state.content) {
+    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);
+  }
+  if (state.graphic) {
+    state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useReferenceStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"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  maxWidth: 'max-content',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  textDecoration: 'none',\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":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceClassNames","root","citation","divider","graphic","content","referenceExtraClassNames","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","maxWidth","padding","spacingVerticalXXS","spacingHorizontalS","textDecoration","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","overflow","width","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","caption1","useReferenceStyles_unstable","state","rootBaseClassName","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,2BAA2B;IACtCC,cAAc;AAChB,EAAE;AAEF,MAAMC,eAAe;AAErB,MAAMC,uBAAuBd,gBAAgB;IAC3Ce,YAAY;IACZC,iBAAiBb,OAAOc,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEf,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOiB,mBAAmB,CAAC,CAAC;IACvEC,cAAclB,OAAOmB,kBAAkB;IACvCC,WAAW;IACXC,OAAOrB,OAAOsB,uBAAuB;IACrCC,WAAWvB,OAAOwB,oBAAoB;IACtCC,SAAS;IACTC,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IACVC,SAAS,CAAC,EAAE7B,OAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,OAAO+B,kBAAkB,CAAC,CAAC;IACpEC,gBAAgB;IAEhB,UAAU;QACRnB,iBAAiBb,OAAOiC,4BAA4B;QACpDC,aAAalC,OAAOmC,wBAAwB;QAC5Cd,OAAOrB,OAAOoC,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAElC,oBAAoBG,OAAO,CAAC,CAAC,CAAC,EAAE;YACrCQ,iBAAiBb,OAAOmC,wBAAwB;QAClD;IACF;IAEA,iBAAiB;QACftB,iBAAiBb,OAAOqC,8BAA8B;QACtDH,aAAalC,OAAOsC,0BAA0B;QAC9CjB,OAAOrB,OAAOuC,8BAA8B;QAE5C,CAAC,CAAC,GAAG,EAAErC,oBAAoBG,OAAO,CAAC,CAAC,CAAC,EAAE;YACrCQ,iBAAiBb,OAAOsC,0BAA0B;QACpD;IACF;AACF;AAEA,OAAO,MAAME,gBAAgB1C,WAAW;IACtC2C,UAAU;QACRC,OAAO;IACT;AACF,GAAG;AAEH,MAAMC,2BAA2B9C,gBAAgB;IAC/C,GAAGI,iBAAiB2C,cAAc;AACpC;AAEA,MAAMC,0BAA0BhD,gBAAgB;IAC9CgB,iBAAiBb,OAAOiB,mBAAmB;IAC3C6B,QAAQ;IACRC,QAAQ,CAAC,EAAE/C,OAAOgD,mBAAmB,CAAC,CAAC,EAAEhD,OAAOiD,mBAAmB,CAAC,CAAC;IACrEP,OAAO;AACT;AAEA,MAAMQ,0BAA0BrD,gBAAgB;IAC9CsD,UAAUzC;IACVoC,QAAQpC;IACR0C,YAAY1C;IACZgC,OAAOhC;IAEP,CAAC,CAAC,GAAG,EAAEF,yBAAyBC,YAAY,CAAC,CAAC,CAAC,EAAE;QAC/CqC,QAAQpC;QACRgC,OAAOhC;IACT;AACF;AAEA,MAAM2C,0BAA0BxD,gBAAgB;IAC9C0B,WAAWvB,OAAOsD,uBAAuB;IACzC7B,SAAS;IACT,GAAGxB,iBAAiBsD,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,oBAAoB/C;IAC1B,MAAMgD,wBAAwBhB;IAC9B,MAAMiB,uBAAuBf;IAC7B,MAAMgB,uBAAuBR;IAC7B,MAAMS,uBAAuBZ;IAE7BO,MAAMtD,IAAI,CAAC4D,SAAS,GAAGhE,aAAaG,oBAAoBC,IAAI,EAAEuD,mBAAmBD,MAAMtD,IAAI,CAAC4D,SAAS;IAErG,IAAIN,MAAMrD,QAAQ,EAAE;QAClBqD,MAAMrD,QAAQ,CAAC2D,SAAS,GAAGhE,aACzBG,oBAAoBE,QAAQ,EAC5BuD,uBACAF,MAAMrD,QAAQ,CAAC2D,SAAS;IAE5B;IAEA,IAAIN,MAAMpD,OAAO,EAAE;QACjBoD,MAAMpD,OAAO,CAAC0D,SAAS,GAAGhE,aAAaG,oBAAoBG,OAAO,EAAEuD,sBAAsBH,MAAMpD,OAAO,CAAC0D,SAAS;IACnH;IAEA,IAAIN,MAAMlD,OAAO,EAAE;QACjBkD,MAAMlD,OAAO,CAACwD,SAAS,GAAGhE,aAAaG,oBAAoBK,OAAO,EAAEsD,sBAAsBJ,MAAMlD,OAAO,CAACwD,SAAS;IACnH;IAEA,IAAIN,MAAMnD,OAAO,EAAE;QACjBmD,MAAMnD,OAAO,CAACyD,SAAS,GAAGhE,aAAaG,oBAAoBI,OAAO,EAAEwD,sBAAsBL,MAAMnD,OAAO,CAACyD,SAAS;IACnH;IAEA,OAAON;AACT,EAAE"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { renderReferenceList_unstable } from './renderReferenceList';
 import { useReferenceList_unstable } from './useReferenceList';
-import { useReferenceListStyles_unstable } from './useReferenceListStyles';
+import { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';
 import { useReferenceListContextValues_unstable } from './useReferenceListContextValues';
 export const ReferenceList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useReferenceList_unstable(props, ref);

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

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles';\nimport { useReferenceListContextValues_unstable } from './useReferenceListContextValues';\nimport type { ReferenceListProps } from './ReferenceList.types';\n\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n  const referenceListContextValues = useReferenceListContextValues_unstable(state);\n\n  useReferenceListStyles_unstable(state);\n\n  return renderReferenceList_unstable(state, referenceListContextValues);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["React","renderReferenceList_unstable","useReferenceList_unstable","useReferenceListStyles_unstable","useReferenceListContextValues_unstable","ReferenceList","forwardRef","props","ref","state","referenceListContextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,sCAAsC,QAAQ,kCAAkC;AAGzF,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAC/C,MAAME,6BAA6BN,uCAAuCK;IAE1EN,gCAAgCM;IAEhC,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
+{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\nimport { useReferenceListContextValues_unstable } from './useReferenceListContextValues';\nimport type { ReferenceListProps } from './ReferenceList.types';\n\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n  const referenceListContextValues = useReferenceListContextValues_unstable(state);\n\n  useReferenceListStyles_unstable(state);\n\n  return renderReferenceList_unstable(state, referenceListContextValues);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["React","renderReferenceList_unstable","useReferenceList_unstable","useReferenceListStyles_unstable","useReferenceListContextValues_unstable","ReferenceList","forwardRef","props","ref","state","referenceListContextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,sCAAsC,QAAQ,kCAAkC;AAGzF,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAC/C,MAAME,6BAA6BN,uCAAuCK;IAE1EN,gCAAgCM;IAEhC,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

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

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

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

@@ -2,5 +2,5 @@ export * from './ReferenceList';
 export * from './ReferenceList.types';
 export * from './renderReferenceList';
 export * from './useReferenceList';
-export * from './useReferenceListStyles';
+export * from './useReferenceListStyles.styles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceList';\nexport * from './ReferenceList.types';\nexport * from './renderReferenceList';\nexport * from './useReferenceList';\nexport * from './useReferenceListStyles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,2BAA2B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceList';\nexport * from './ReferenceList.types';\nexport * from './renderReferenceList';\nexport * from './useReferenceList';\nexport * from './useReferenceListStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, mergeCallbacks, mergeClasses, slot, useArrowNavigationGroup } from '@fluentui/react-components';
-import { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles';
+import { getIntrinsicElementProps, mergeCallbacks, mergeClasses, slot, useArrowNavigationGroup, useMergedRefs } from '@fluentui/react-components';
+import { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';
 /**
  * Create the state required to render ReferenceList.
  *
@@ -12,7 +12,6 @@ import { useRootStyles as useReferenceStyles } from '../Reference/useReferenceSt
  */
 export const useReferenceList_unstable = (props, ref) => {
   const {
-    appearance = 'lighter',
     children,
     maxVisibleReferences,
     showLessButton,
@@ -20,11 +19,13 @@ export const useReferenceList_unstable = (props, ref) => {
     ...rest
   } = props;
   const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);
+  const referenceListRef = React.useRef(null);
   const referenceInOverflowClassName = useReferenceStyles().overflow;
+  const childrenArray = React.Children.toArray(children);
+  const totalReferencesCount = childrenArray.length;
   const resolvedChildren = React.useMemo(() => {
     if (maxVisibleReferences !== undefined && !areReferencesExpanded) {
       const results = [];
-      const childrenArray = React.Children.toArray(children);
       for (let index = 0; index < childrenArray.length; index++) {
         const child = childrenArray[index];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -40,9 +41,7 @@ export const useReferenceList_unstable = (props, ref) => {
       return results;
     }
     return children;
-  }, [areReferencesExpanded, children, maxVisibleReferences, referenceInOverflowClassName]);
-  // We keep track of the previous overflow count to determine element to move focus to when expanding the references via keyboard.
-  const previousOverflowCount = React.useRef(0);
+  }, [areReferencesExpanded, children, childrenArray, maxVisibleReferences, referenceInOverflowClassName]);
   // We keep track of whether we are interacting with the overflow button via keyboard or not.
   const overflowButtonTriggeredViaKeyboard = React.useRef(false);
   const focusAttributes = useArrowNavigationGroup({
@@ -58,18 +57,19 @@ export const useReferenceList_unstable = (props, ref) => {
   }, []);
   const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
   const state = {
-    appearance,
     areReferencesExpanded,
     overflowButtonTriggeredViaKeyboard,
-    previousOverflowCount,
+    maxVisibleReferences,
+    referenceListRef,
     shouldUseOverflow,
+    totalReferencesCount,
     components: {
       root: 'div',
       showMoreButton: 'span',
       showLessButton: 'span'
     },
     root: slot.always(getIntrinsicElementProps('div', {
-      ref,
+      ref: useMergedRefs(ref, referenceListRef),
       ...focusAttributes,
       ...rest,
       children: resolvedChildren