npm - @fluentui-copilot/react-reference - Versions diffs - 0.11.4 → 0.12.1 - Mend

@fluentui-copilot/react-reference 0.11.4 → 0.12.1

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

Files changed (98) hide show

package/lib/components/Reference/useReferenceStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n buttonClassNames,\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 media: 'fai-Reference__media',\n actions: 'fai-Reference__actions',\n sensitivity: 'fai-Reference__sensitivity',\n metadata: 'fai-Reference__metadata',\n primaryText: 'fai-Reference__primaryText',\n secondaryText: 'fai-Reference__secondaryText',\n tertiaryText: 'fai-Reference__tertiaryText',\n icon: 'fai-Reference__icon',\n label: 'fai-Reference__label',\n content: 'fai-Reference__content',\n detailsButton: 'fai-Reference__detailsButton',\n};\n\nexport const referenceExtraClassNames = {\n text: 'fai-Reference__text',\n mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n boxSizing: 'border-box',\n width: '100%',\n display: 'grid',\n gridTemplateAreas: `\n \"citation media title actions\"\n \". . title .\"\n \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n \"metadata metadata metadata metadata\"\n \"content content content content\"\n `,\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n gridTemplateRows: '32px auto auto auto auto',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxShadow: 'none',\n columnGap: tokens.spacingHorizontalXS,\n alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n canvas: {},\n sidecar: {\n gridTemplateRows: '24px auto auto auto',\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),\n },\n inline: {},\n popover: {\n ...shorthands.borderWidth('0px'),\n width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n ...shorthands.padding('0px'),\n },\n closed: {\n rowGap: 0,\n },\n citation: {\n ...shorthands.gridArea('citation'),\n },\n media: {\n ...shorthands.gridArea('media'),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n mediaPopover: {\n width: '16px',\n height: '16px',\n\n [`> .${referenceExtraClassNames.mediaChild}`]: {\n width: '16px',\n height: '16px',\n },\n },\n actions: {\n ...shorthands.gridArea('actions'),\n justifySelf: 'end',\n display: 'flex',\n gridRowStart: 1,\n },\n detailsButton: {\n [`> ${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground3,\n },\n },\n sensitivity: {\n ...shorthands.gridArea('sensitivityLabel'),\n justifySelf: 'start',\n },\n metadata: {\n marginTop: tokens.spacingVerticalXS,\n\n ...shorthands.gridArea('metadata'),\n ...typographyStyles.caption2,\n },\n metadataSubsequentText: {\n position: 'relative',\n marginLeft: tokens.spacingHorizontalS,\n\n '&::before': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n left: `calc(${tokens.spacingHorizontalS} / -2)`,\n top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n height: typographyStyles.caption2.fontSize,\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n },\n icon: {\n ...typographyStyles.caption2,\n verticalAlign: 'middle',\n },\n content: {\n marginTop: tokens.spacingVerticalXS,\n ...shorthands.gridArea('content'),\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalS,\n color: tokens.colorNeutralForeground3,\n wordBreak: 'break-word',\n },\n hidden: {\n display: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n root: {\n ...shorthands.gridArea('title'),\n alignSelf: 'start',\n ...typographyStyles.caption1Strong,\n wordBreak: 'break-word',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n display: '-webkit-box',\n overflowY: 'hidden',\n },\n\n canvas: {\n // 24px is the height of the tallest element within the reference\n paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n sidecar: {\n // 16px is the height of the tallest element within the reference\n paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n closed: {\n maxWidth: '100%',\n '-webkit-line-clamp': '1',\n },\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 { isExpanded, mode, layout } = state;\n\n const rootClassName = useReferenceClassName();\n const styles = useStyles();\n const labelStyles = useLabelStyles();\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootClassName,\n styles[mode],\n styles[layout],\n !isExpanded && styles.closed,\n state.root.className,\n );\n\n if (state.citation) {\n state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n }\n\n if (state.media) {\n state.media.className = mergeClasses(\n referenceClassNames.media,\n styles.media,\n layout === 'popover' && styles.mediaPopover,\n state.media.className,\n );\n }\n\n if (state.actions) {\n state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n }\n\n state.label.className = mergeClasses(\n referenceClassNames.label,\n labelStyles.root,\n labelStyles[mode],\n !isExpanded && labelStyles.closed,\n state.label.className,\n );\n\n if (state.sensitivity) {\n state.sensitivity.className = mergeClasses(\n referenceClassNames.sensitivity,\n styles.sensitivity,\n !isExpanded && styles.hidden,\n state.sensitivity.className,\n );\n }\n\n state.metadata.className = mergeClasses(\n referenceClassNames.metadata,\n styles.metadata,\n !isExpanded && styles.hidden,\n state.metadata.className,\n );\n\n let isSubsequentText = false;\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n referenceClassNames.primaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.primaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n referenceClassNames.secondaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.secondaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n referenceClassNames.tertiaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.tertiaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n }\n state.content.className = mergeClasses(\n referenceClassNames.content,\n styles.content,\n !isExpanded && styles.hidden,\n state.content.className,\n );\n\n if (state.detailsButton) {\n state.detailsButton.className = mergeClasses(\n referenceClassNames.detailsButton,\n styles.detailsButton,\n state.detailsButton.className,\n );\n }\n\n return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,gBAAgB,EAChBC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,aAAa;IACbC,eAAe;IACfC,cAAc;IACdC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,2BAA2B;IACtCC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,MAAMC,gBAAgBlB,iBAAiBmB,cAAc,CAACC,QAAQ;AAC9D,MAAMC,kBAAkBrB,iBAAiBmB,cAAc,CAACG,UAAU;AAElE,MAAMC,kBAAkB;AAExB,MAAMC,wBAAwB7B,gBAAgB;IAC5C8B,WAAW;IACXC,OAAO;IACPC,SAAS;IACTC,mBAAmB,CAAC;;;;;;IAMlB,CAAC;IACHC,qBAAqB;IACrBC,kBAAkB;IAClBC,QAAQ,CAAC,EAAEhC,OAAOiC,eAAe,CAAC,OAAO,EAAEjC,OAAOkC,mBAAmB,CAAC,CAAC;IACvEC,cAAcnC,OAAOoC,kBAAkB;IACvCC,SAAS,CAAC,EAAErC,OAAOsC,gBAAgB,CAAC,CAAC,EAAEtC,OAAOuC,kBAAkB,CAAC,CAAC;IAClEC,WAAW;IACXC,WAAWzC,OAAO0C,mBAAmB;IACrCC,YAAY;AACd;AAEA,MAAMC,YAAY/C,WAAW;IAC3BgD,QAAQ,CAAC;IACTC,SAAS;QACPf,kBAAkB;QAClB,GAAGhC,WAAWsC,OAAO,CAACrC,OAAO+C,iBAAiB,EAAE/C,OAAOuC,kBAAkB,CAAC;IAC5E;IACAS,QAAQ,CAAC;IACTC,SAAS;QACP,GAAGlD,WAAWmD,WAAW,CAAC,MAAM;QAChCvB,OAAO,CAAC,KAAK,EAAEH,gBAAgB,IAAI,EAAExB,OAAOmD,kBAAkB,CAAC,MAAM,CAAC;QACtE,GAAGpD,WAAWsC,OAAO,CAAC,MAAM;IAC9B;IACAe,QAAQ;QACNC,QAAQ;IACV;IACAjD,UAAU;QACR,GAAGL,WAAWuD,QAAQ,CAAC,WAAW;IACpC;IACAjD,OAAO;QACL,GAAGN,WAAWuD,QAAQ,CAAC,QAAQ;QAC/B1B,SAAS;QACTe,YAAY;QACZY,gBAAgB;IAClB;IACAC,cAAc;QACZ7B,OAAO;QACP8B,QAAQ;QAER,CAAC,CAAC,GAAG,EAAEzC,yBAAyBE,UAAU,CAAC,CAAC,CAAC,EAAE;YAC7CS,OAAO;YACP8B,QAAQ;QACV;IACF;IACAnD,SAAS;QACP,GAAGP,WAAWuD,QAAQ,CAAC,UAAU;QACjCI,aAAa;QACb9B,SAAS;QACT+B,cAAc;IAChB;IACA5C,eAAe;QACb,CAAC,CAAC,EAAE,EAAEpB,iBAAiBiB,IAAI,CAAC,CAAC,CAAC,EAAE;YAC9BgD,OAAO5D,OAAO6D,uBAAuB;QACvC;IACF;IACAtD,aAAa;QACX,GAAGR,WAAWuD,QAAQ,CAAC,mBAAmB;QAC1CI,aAAa;IACf;IACAlD,UAAU;QACRsD,WAAW9D,OAAO+C,iBAAiB;QAEnC,GAAGhD,WAAWuD,QAAQ,CAAC,WAAW;QAClC,GAAGrD,iBAAiB8D,QAAQ;IAC9B;IACAC,wBAAwB;QACtBC,UAAU;QACVC,YAAYlE,OAAOuC,kBAAkB;QAErC,aAAa;YACXzB,SAAS;YACTc,SAAS;YACTqC,UAAU;YACVE,MAAM,CAAC,KAAK,EAAEnE,OAAOuC,kBAAkB,CAAC,MAAM,CAAC;YAC/C6B,KAAK,CAAC,MAAM,EAAEnE,iBAAiB8D,QAAQ,CAACxC,UAAU,CAAC,GAAG,EAAEtB,iBAAiB8D,QAAQ,CAAC1C,QAAQ,CAAC,MAAM,CAAC;YAClGoC,QAAQxD,iBAAiB8D,QAAQ,CAAC1C,QAAQ;YAC1C,GAAGtB,WAAWsE,UAAU,CAACrE,OAAOiC,eAAe,EAAE,SAASjC,OAAOsE,mBAAmB,CAAC;QACvF;IACF;IACA1D,MAAM;QACJ,GAAGX,iBAAiB8D,QAAQ;QAC5BQ,eAAe;IACjB;IACAzD,SAAS;QACPgD,WAAW9D,OAAO+C,iBAAiB;QACnC,GAAGhD,WAAWuD,QAAQ,CAAC,UAAU;QACjC1B,SAAS;QACT4C,eAAe;QACfnB,QAAQrD,OAAOsC,gBAAgB;QAC/BsB,OAAO5D,OAAO6D,uBAAuB;QACrCY,WAAW;IACb;IACAC,QAAQ;QACN9C,SAAS;IACX;AACF;AAEA,MAAM+C,iBAAiB9E,WAAW;IAChCM,MAAM;QACJ,GAAGJ,WAAWuD,QAAQ,CAAC,QAAQ;QAC/BsB,WAAW;QACX,GAAG3E,iBAAiBmB,cAAc;QAClCqD,WAAW;QACX,sBAAsB;QACtB,sBAAsB;QACtB7C,SAAS;QACTiD,WAAW;IACb;IAEAhC,QAAQ;QACN,iEAAiE;QACjEiC,YAAY,CAAC,oBAAoB,EAAExD,gBAAgB,GAAG,EAAEH,cAAc,EAAE,CAAC;IAC3E;IAEA2B,SAAS;QACP,iEAAiE;QACjEgC,YAAY,CAAC,oBAAoB,EAAExD,gBAAgB,GAAG,EAAEH,cAAc,EAAE,CAAC;IAC3E;IAEAiC,QAAQ;QACN2B,UAAU;QACV,sBAAsB;IACxB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,MAAM,EAAE,GAAGH;IAErC,MAAMI,gBAAgB5D;IACtB,MAAM6D,SAAS1C;IACf,MAAM2C,cAAcZ;IACpBM,MAAM9E,IAAI,CAACqF,SAAS,GAAG1F,aACrBI,oBAAoBC,IAAI,EACxBkF,eACAC,MAAM,CAACH,KAAK,EACZG,MAAM,CAACF,OAAO,EACd,CAACF,cAAcI,OAAOlC,MAAM,EAC5B6B,MAAM9E,IAAI,CAACqF,SAAS;IAGtB,IAAIP,MAAM7E,QAAQ,EAAE;QAClB6E,MAAM7E,QAAQ,CAACoF,SAAS,GAAG1F,aAAaI,oBAAoBE,QAAQ,EAAEkF,OAAOlF,QAAQ,EAAE6E,MAAM7E,QAAQ,CAACoF,SAAS;IACjH;IAEA,IAAIP,MAAM5E,KAAK,EAAE;QACf4E,MAAM5E,KAAK,CAACmF,SAAS,GAAG1F,aACtBI,oBAAoBG,KAAK,EACzBiF,OAAOjF,KAAK,EACZ+E,WAAW,aAAaE,OAAO9B,YAAY,EAC3CyB,MAAM5E,KAAK,CAACmF,SAAS;IAEzB;IAEA,IAAIP,MAAM3E,OAAO,EAAE;QACjB2E,MAAM3E,OAAO,CAACkF,SAAS,GAAG1F,aAAaI,oBAAoBI,OAAO,EAAEgF,OAAOhF,OAAO,EAAE2E,MAAM3E,OAAO,CAACkF,SAAS;IAC7G;IAEAP,MAAMpE,KAAK,CAAC2E,SAAS,GAAG1F,aACtBI,oBAAoBW,KAAK,EACzB0E,YAAYpF,IAAI,EAChBoF,WAAW,CAACJ,KAAK,EACjB,CAACD,cAAcK,YAAYnC,MAAM,EACjC6B,MAAMpE,KAAK,CAAC2E,SAAS;IAGvB,IAAIP,MAAM1E,WAAW,EAAE;QACrB0E,MAAM1E,WAAW,CAACiF,SAAS,GAAG1F,aAC5BI,oBAAoBK,WAAW,EAC/B+E,OAAO/E,WAAW,EAClB,CAAC2E,cAAcI,OAAOZ,MAAM,EAC5BO,MAAM1E,WAAW,CAACiF,SAAS;IAE/B;IAEAP,MAAMzE,QAAQ,CAACgF,SAAS,GAAG1F,aACzBI,oBAAoBM,QAAQ,EAC5B8E,OAAO9E,QAAQ,EACf,CAAC0E,cAAcI,OAAOZ,MAAM,EAC5BO,MAAMzE,QAAQ,CAACgF,SAAS;IAG1B,IAAIC,mBAAmB;IACvB,IAAIR,MAAMxE,WAAW,EAAE;QACrBwE,MAAMxE,WAAW,CAAC+E,SAAS,GAAG1F,aAC5BI,oBAAoBO,WAAW,EAC/BO,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMxE,WAAW,CAAC+E,SAAS;QAE7BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMvE,aAAa,EAAE;QACvBuE,MAAMvE,aAAa,CAAC8E,SAAS,GAAG1F,aAC9BI,oBAAoBQ,aAAa,EACjCM,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMvE,aAAa,CAAC8E,SAAS;QAE/BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMtE,YAAY,EAAE;QACtBsE,MAAMtE,YAAY,CAAC6E,SAAS,GAAG1F,aAC7BI,oBAAoBS,YAAY,EAChCK,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMtE,YAAY,CAAC6E,SAAS;QAE9BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMrE,IAAI,EAAE;QACdqE,MAAMrE,IAAI,CAAC4E,SAAS,GAAG1F,aAAaI,oBAAoBU,IAAI,EAAE0E,OAAO1E,IAAI,EAAEqE,MAAMrE,IAAI,CAAC4E,SAAS;IACjG;IACAP,MAAMnE,OAAO,CAAC0E,SAAS,GAAG1F,aACxBI,oBAAoBY,OAAO,EAC3BwE,OAAOxE,OAAO,EACd,CAACoE,cAAcI,OAAOZ,MAAM,EAC5BO,MAAMnE,OAAO,CAAC0E,SAAS;IAGzB,IAAIP,MAAMlE,aAAa,EAAE;QACvBkE,MAAMlE,aAAa,CAACyE,SAAS,GAAG1F,aAC9BI,oBAAoBa,aAAa,EACjCuE,OAAOvE,aAAa,EACpBkE,MAAMlE,aAAa,CAACyE,SAAS;IAEjC;IAEA,OAAOP;AACT,EAAE"}
1	+ {"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n buttonClassNames,\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\n/** deprecated Use ReferenceV2 component, hooks and types instead. /\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n media: 'fai-Reference__media',\n actions: 'fai-Reference__actions',\n sensitivity: 'fai-Reference__sensitivity',\n metadata: 'fai-Reference__metadata',\n primaryText: 'fai-Reference__primaryText',\n secondaryText: 'fai-Reference__secondaryText',\n tertiaryText: 'fai-Reference__tertiaryText',\n icon: 'fai-Reference__icon',\n label: 'fai-Reference__label',\n content: 'fai-Reference__content',\n detailsButton: 'fai-Reference__detailsButton',\n};\n\n/* deprecated Use ReferenceV2 component, hooks and types instead. /\nexport const referenceExtraClassNames = {\n text: 'fai-Reference__text',\n mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n boxSizing: 'border-box',\n width: '100%',\n display: 'grid',\n gridTemplateAreas: `\n \"citation media title actions\"\n \". . title .\"\n \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n \"metadata metadata metadata metadata\"\n \"content content content content\"\n `,\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n gridTemplateRows: '32px auto auto auto auto',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxShadow: 'none',\n columnGap: tokens.spacingHorizontalXS,\n alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n canvas: {},\n sidecar: {\n gridTemplateRows: '24px auto auto auto',\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),\n },\n inline: {},\n popover: {\n ...shorthands.borderWidth('0px'),\n width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} 2))`,\n ...shorthands.padding('0px'),\n },\n closed: {\n rowGap: 0,\n },\n citation: {\n ...shorthands.gridArea('citation'),\n },\n media: {\n ...shorthands.gridArea('media'),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n mediaPopover: {\n width: '16px',\n height: '16px',\n\n [`> .${referenceExtraClassNames.mediaChild}`]: {\n width: '16px',\n height: '16px',\n },\n },\n actions: {\n ...shorthands.gridArea('actions'),\n justifySelf: 'end',\n display: 'flex',\n gridRowStart: 1,\n },\n detailsButton: {\n [`> ${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground3,\n },\n },\n sensitivity: {\n ...shorthands.gridArea('sensitivityLabel'),\n justifySelf: 'start',\n },\n metadata: {\n marginTop: tokens.spacingVerticalXS,\n\n ...shorthands.gridArea('metadata'),\n ...typographyStyles.caption2,\n },\n metadataSubsequentText: {\n position: 'relative',\n marginLeft: tokens.spacingHorizontalS,\n\n '&::before': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n left: `calc(${tokens.spacingHorizontalS} / -2)`,\n top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n height: typographyStyles.caption2.fontSize,\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n },\n icon: {\n ...typographyStyles.caption2,\n verticalAlign: 'middle',\n },\n content: {\n marginTop: tokens.spacingVerticalXS,\n ...shorthands.gridArea('content'),\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalS,\n color: tokens.colorNeutralForeground3,\n wordBreak: 'break-word',\n },\n hidden: {\n display: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n root: {\n ...shorthands.gridArea('title'),\n alignSelf: 'start',\n ...typographyStyles.caption1Strong,\n wordBreak: 'break-word',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n display: '-webkit-box',\n overflowY: 'hidden',\n },\n\n canvas: {\n // 24px is the height of the tallest element within the reference\n paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n sidecar: {\n // 16px is the height of the tallest element within the reference\n paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n closed: {\n maxWidth: '100%',\n '-webkit-line-clamp': '1',\n },\n});\n\n/*\n Apply styling to the Reference slots based on the state\n \n deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const { isExpanded, mode, layout } = state;\n\n const rootClassName = useReferenceClassName();\n const styles = useStyles();\n const labelStyles = useLabelStyles();\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootClassName,\n styles[mode],\n styles[layout],\n !isExpanded && styles.closed,\n state.root.className,\n );\n\n if (state.citation) {\n state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n }\n\n if (state.media) {\n state.media.className = mergeClasses(\n referenceClassNames.media,\n styles.media,\n layout === 'popover' && styles.mediaPopover,\n state.media.className,\n );\n }\n\n if (state.actions) {\n state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n }\n\n state.label.className = mergeClasses(\n referenceClassNames.label,\n labelStyles.root,\n labelStyles[mode],\n !isExpanded && labelStyles.closed,\n state.label.className,\n );\n\n if (state.sensitivity) {\n state.sensitivity.className = mergeClasses(\n referenceClassNames.sensitivity,\n styles.sensitivity,\n !isExpanded && styles.hidden,\n state.sensitivity.className,\n );\n }\n\n state.metadata.className = mergeClasses(\n referenceClassNames.metadata,\n styles.metadata,\n !isExpanded && styles.hidden,\n state.metadata.className,\n );\n\n let isSubsequentText = false;\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n referenceClassNames.primaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.primaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n referenceClassNames.secondaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.secondaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n referenceClassNames.tertiaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.tertiaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n }\n state.content.className = mergeClasses(\n referenceClassNames.content,\n styles.content,\n !isExpanded && styles.hidden,\n state.content.className,\n );\n\n if (state.detailsButton) {\n state.detailsButton.className = mergeClasses(\n referenceClassNames.detailsButton,\n styles.detailsButton,\n state.detailsButton.className,\n );\n }\n\n return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.js CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useReferenceGroupToggle_unstable } from './useReferenceGroupToggle';
 import { renderReferenceGroupToggle_unstable } from './renderReferenceGroupToggle';
 import { useReferenceGroupToggleStyles_unstable } from './useReferenceGroupToggleStyles.styles';
-// ReferenceGroupToggle component - TODO: add more docs
+/** deprecated The ReferenceGroup pattern is deprecated and will be removed in a future release. */
 export const ReferenceGroupToggle = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useReferenceGroupToggle_unstable(props, ref);
   useReferenceGroupToggleStyles_unstable(state);

package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceGroupToggle_unstable } from './useReferenceGroupToggle';\nimport { renderReferenceGroupToggle_unstable } from './renderReferenceGroupToggle';\nimport { useReferenceGroupToggleStyles_unstable } from './useReferenceGroupToggleStyles.styles';\nimport type { ReferenceGroupToggleProps } from './ReferenceGroupToggle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// ~~ReferenceGroupToggle~~ ~~component~~ - ~~TODO:~~ ~~add~~ ~~more~~ ~~docs\~~nexport const ReferenceGroupToggle: ForwardRefComponent<ReferenceGroupToggleProps> = React.forwardRef((props, ref) => {\n const state = useReferenceGroupToggle_unstable(props, ref);\n\n useReferenceGroupToggleStyles_unstable(state);\n return renderReferenceGroupToggle_unstable(state);\n});\n\nReferenceGroupToggle.displayName = 'ReferenceGroupToggle';\n"],"names":["React","useReferenceGroupToggle_unstable","renderReferenceGroupToggle_unstable","useReferenceGroupToggleStyles_unstable","ReferenceGroupToggle","forwardRef","props","ref","state","displayName"],"rangeMappings":"~~;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,yCAAyC;AAIhG,~~uDAAuD;AACvD~~,OAAO,MAAMC,qCAAuEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQP,iCAAiCK,OAAOC;IAEtDJ,uCAAuCK;IACvC,OAAON,oCAAoCM;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}
1	+ {"version":3,"sources":["ReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceGroupToggle_unstable } from './useReferenceGroupToggle';\nimport { renderReferenceGroupToggle_unstable } from './renderReferenceGroupToggle';\nimport { useReferenceGroupToggleStyles_unstable } from './useReferenceGroupToggleStyles.styles';\nimport type { ReferenceGroupToggleProps } from './ReferenceGroupToggle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n/** deprecated The ReferenceGroup pattern is deprecated and will be removed in a future release. */\nexport const ReferenceGroupToggle: ForwardRefComponent<ReferenceGroupToggleProps> = React.forwardRef((props, ref) => {\n const state = useReferenceGroupToggle_unstable(props, ref);\n\n useReferenceGroupToggleStyles_unstable(state);\n return renderReferenceGroupToggle_unstable(state);\n});\n\nReferenceGroupToggle.displayName = 'ReferenceGroupToggle';\n"],"names":["React","useReferenceGroupToggle_unstable","renderReferenceGroupToggle_unstable","useReferenceGroupToggleStyles_unstable","ReferenceGroupToggle","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,yCAAyC;AAIhG,iGAAiG,GACjG,OAAO,MAAMC,qCAAuEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQP,iCAAiCK,OAAOC;IAEtDJ,uCAAuCK;IACvC,OAAON,oCAAoCM;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}

package/lib/components/ReferenceList/ReferenceList.js CHANGED Viewed

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

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

	@@ -1 +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.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"}
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.styles';\nimport type { ReferenceListProps } from './ReferenceList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\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,uEAAuE,GACvE,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/ReferenceList.types.js CHANGED Viewed

@@ -1,4 +1,2 @@
-/**
- * State used in rendering ReferenceList
- */export {};
+/** deprecated Use ReferenceListV2 component, hooks and types instead. */export {};
 //# sourceMappingURL=ReferenceList.types.js.map

package/lib/components/ReferenceList/ReferenceList.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceListSlots = {\n /*\n The root slot.\n /\n root: Slot<'ol'>;\n};\n\n~~/\n~~ ~~ReferenceList~~ ~~Props\n~~ /\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots>;\n\n~~/\n~~ ~~State~~ ~~used~~ in ~~rendering~~ ~~ReferenceList\n~~ */\nexport type ReferenceListState = ComponentState<ReferenceListSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"~~AAcA;;CAEC~~,~~GACD~~,WAAoE"}
1	+ {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. /\nexport type ReferenceListSlots = {\n /\n The root slot.\n /\n root: Slot<'ol'>;\n};\n\n/* deprecated Use ReferenceListV2 component, hooks and types instead. /\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots>;\n\n/* deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport type ReferenceListState = ComponentState<ReferenceListSlots>;\n"],"names":[],"rangeMappings":"","mappings":"AAaA,uEAAuE,GACvE,WAAoE"}

package/lib/components/ReferenceList/renderReferenceList.js CHANGED Viewed

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
-/**
- * Render the final JSX of ReferenceList
- */
+/** deprecated Use ReferenceListV2 component, hooks and types instead. */
 export const renderReferenceList_unstable = state => {
   assertSlots(state);
   return /*#__PURE__*/_jsx(state.root, {});

package/lib/components/ReferenceList/renderReferenceList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots } from './ReferenceList.types';\n\n~~/\n~~ ~~Render~~ ~~the~~ ~~final~~ ~~JSX~~ of ~~ReferenceList\n~~ */\nexport const renderReferenceList_unstable = (state: ReferenceListState) => {\n assertSlots<ReferenceListSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderReferenceList_unstable","state","root"],"rangeMappings":"~~;;;;;;;~~","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD~~;;CAEC~~,~~GACD~~,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
1	+ {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots } from './ReferenceList.types';\n\n/* deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const renderReferenceList_unstable = (state: ReferenceListState) => {\n assertSlots<ReferenceListSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderReferenceList_unstable","state","root"],"rangeMappings":";;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD,uEAAuE,GACvE,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/ReferenceList/useReferenceList.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
 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.
  *
@@ -10,6 +9,8 @@ import { referenceListItemClassName } from './useReferenceListStyles.styles';
  *
  * @param props - props from this instance of ReferenceList
  * @param ref - reference to root HTMLElement of ReferenceList
+ *
+ * deprecated Use ReferenceListV2 component, hooks and types instead.
  */
 export const useReferenceList_unstable = (props, ref) => {
   return {

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

	@@ -1 +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.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"}
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.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 \n deprecated Use ReferenceListV2 component, hooks and types instead.\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;;;;;;;;;;CAUC,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.styles.js CHANGED Viewed

@@ -1,7 +1,9 @@
 import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';
+/** deprecated Use ReferenceListV2 component, hooks and types instead. */
 export const referenceListClassNames = {
   root: 'fai-ReferenceList'
 };
+/** deprecated Use ReferenceListV2 component, hooks and types instead. */
 export const referenceListItemClassName = 'fai-ReferenceList__item';
 /**
  * Styles for the root slot
@@ -9,6 +11,8 @@ export const referenceListItemClassName = 'fai-ReferenceList__item';
 const useRootClassName = __resetStyles("rc0s888", null, [".rc0s888{padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacingVerticalS);}", ".rc0s888>.fai-ReferenceList__item{list-style-type:none;}"]);
 /**
  * Apply styling to the ReferenceList slots based on the state
+ *
+ * deprecated Use ReferenceListV2 component, hooks and types instead.
  */
 export const useReferenceListStyles_unstable = state => {
   'use no memo';

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

	@@ -1 +1 @@
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"}
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\n/** deprecated Use ReferenceListV2 component, hooks and types instead. /\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n};\n\n/* deprecated Use ReferenceListV2 component, hooks and types instead. /\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 \n deprecated Use ReferenceListV2 component, hooks and types instead.\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,uEAAuE,GACvE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,uEAAuE,GACvE,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;;;;CAIC,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/useReference.js CHANGED Viewed

@@ -44,7 +44,7 @@ export const useReference_unstable = (props, ref) => {
     id: referenceId,
     shouldUseOverflow,
     components: {
-      root: 'button',
+      root: elementType,
       citation: 'span',
       divider: 'span',
       graphic: 'span',

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

	@@ -1 +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 { 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"}
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 { 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: elementType,\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,MAAMb;YACNK,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 CHANGED Viewed

@@ -10,13 +10,14 @@ 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);}"]);
+const useRootBaseClassName = __resetStyles("r1rjhy11", null, [".r1rjhy11{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;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);text-decoration:none;}", ".r1rjhy11:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1rjhy11:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}", ".r1rjhy11:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r1rjhy11:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"]);
 export const useRootStyles = __styles({
   overflow: {
+    B2u0y6b: "f6dzj5z",
     a9b677: "fly5x3f"
   }
 }, {
-  d: [".fly5x3f{width:100%;}"]
+  d: [".f6dzj5z{max-width:100%;}", ".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;}"]);

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

	@@ -1 +1 @@
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"}
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 minHeight: '24px',\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 maxWidth: '100%',\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","minHeight","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":"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"}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, mergeCallbacks, mergeClasses, slot, useArrowNavigationGroup, useMergedRefs } from '@fluentui/react-components';
-import { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';
+import { getIntrinsicElementProps, mergeCallbacks, slot, useArrowNavigationGroup, useMergedRefs } from '@fluentui/react-components';
+import { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';
+import { useRootStyles } from '../Reference/useReferenceStyles.styles';
 /**
  * Create the state required to render ReferenceList.
  *
@@ -20,28 +21,14 @@ export const useReferenceList_unstable = (props, ref) => {
   } = 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 = [];
-      for (let index = 0; index < childrenArray.length; index++) {
-        const child = childrenArray[index];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (index >= maxVisibleReferences && React.isValidElement(child)) {
-          results.push(React.cloneElement(child, {
-            ...child.props,
-            className: mergeClasses(child.props.className, referenceInOverflowClassName)
-          }));
-        } else {
-          results.push(child);
-        }
-      }
-      return results;
-    }
-    return children;
-  }, [areReferencesExpanded, children, childrenArray, maxVisibleReferences, referenceInOverflowClassName]);
+  const totalReferencesCount = React.Children.count(children);
+  const styles = useRootStyles();
+  const resolvedChildren = useOverflowMaxVisibleItems({
+    additionalCondition: !areReferencesExpanded,
+    children,
+    maxVisibleItems: maxVisibleReferences,
+    overflowClassName: styles.overflow
+  });
   // We keep track of whether we are interacting with the overflow button via keyboard or not.
   const overflowButtonTriggeredViaKeyboard = React.useRef(false);
   const focusAttributes = useArrowNavigationGroup({

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n ~~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"}
1	+ {"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/*\n Create the state required to render ReferenceList.\n \n The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n \n @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const totalReferencesCount = React.Children.count(children);\n const styles = useRootStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n additionalCondition: !areReferencesExpanded,\n children,\n maxVisibleItems: maxVisibleReferences,\n overflowClassName: styles.overflow,\n });\n\n // We keep track of whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow = 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","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","children","maxVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","resolvedChildren","additionalCondition","maxVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","state","components","root","always","elementType","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AACpC,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,aAAa,QAAQ,yCAAyC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGN;IAEpF,MAAM,CAACO,uBAAuBC,yBAAyB,GAAGjB,MAAMkB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBnB,MAAMoB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBrB,MAAMsB,QAAQ,CAACC,KAAK,CAACZ;IAClD,MAAMa,SAASjB;IACf,MAAMkB,mBAAmBnB,2BAA2B;QAClDoB,qBAAqB,CAACV;QACtBL;QACAgB,iBAAiBf;QACjBgB,mBAAmBJ,OAAOK,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqC9B,MAAMoB,MAAM,CAAC;IAExD,MAAMW,kBAAkB3B,wBAAwB;QAC9C4B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBnC,MAAMoC,WAAW,CAA6C;QAC1FnB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMoB,wBAAwBrC,MAAMoC,WAAW,CAA6C;QAC1FnB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,oBAAoB1B,yBAAyB2B,aAAa,CAACvB;IAEjE,MAAMwB,QAA4B;QAChCxB;QACAc;QACAlB;QACAO;QACAmB;QACAjB;QAEAoB,YAAY;YACVC,MAAM;YACN5B,gBAAgB;YAChBD,gBAAgB;QAClB;QACA6B,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKS;YACxB,GAAGY,eAAe;YAClB,GAAGhB,IAAI;YACPJ,UAAUc;QACZ,IACA;YAAEmB,aAAa;QAAM;QAEvB9B,gBAAgBwB,oBAAoBnC,KAAK0C,QAAQ,CAAC/B,gBAAgB;YAAE8B,aAAa;QAAO,KAAKL;QAC7F1B,gBAAgBG,wBAAwBb,KAAK0C,QAAQ,CAAChC,gBAAgB;YAAE+B,aAAa;QAAO,KAAKL;IACnG;IAEA,IAAIC,MAAM1B,cAAc,EAAE;QACxB0B,MAAM1B,cAAc,CAACgC,OAAO,GAAG5C,eAAeiC,uBAAuBK,MAAM1B,cAAc,CAACgC,OAAO;IACnG;IAEA,IAAIN,MAAM3B,cAAc,EAAE;QACxB2B,MAAM3B,cAAc,CAACiC,OAAO,GAAG5C,eAAemC,uBAAuBG,MAAM3B,cAAc,CAACiC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}

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

@@ -15,7 +15,7 @@ const useRootStyles = __styles({
 }, {
   d: [".fni485r{flex-wrap:wrap;}"]
 });
-const useOverflowButtonBaseClassName = __resetStyles("r6su6fj", null, [".r6su6fj{flex-shrink:0;}"]);
+const useOverflowButtonBaseClassName = __resetStyles("rulvm7g", null, [".rulvm7g{display:inline-flex;flex-shrink:0;}"]);
 /**
  * Apply styling to the ReferenceList slots based on the state
  */

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n showMoreButton: 'fai-ReferenceList__showMoreButton',\n showLessButton: 'fai-ReferenceList__showLessButton',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n});\n\nconst useRootStyles = makeStyles({\n referencesExpanded: {\n flexWrap: 'wrap',\n },\n});\n\nconst useOverflowButtonBaseClassName = makeResetStyles({\n flexShrink: 0,\n});\n\n/\n Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n 'use no memo';\n\n const { areReferencesExpanded, shouldUseOverflow } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded \|\| !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.className,\n );\n\n if (state.showMoreButton) {\n state.showMoreButton.className = mergeClasses(\n referenceListClassNames.showMoreButton,\n overflowButtonBaseClassName,\n state.showMoreButton.className,\n );\n }\n\n if (state.showLessButton) {\n state.showLessButton.className = mergeClasses(\n referenceListClassNames.showLessButton,\n overflowButtonBaseClassName,\n state.showLessButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","referenceListClassNames","root","showMoreButton","showLessButton","useRootBaseClassName","display","flexDirection","gap","spacingVerticalXS","spacingHorizontalXS","useRootStyles","referencesExpanded","flexWrap","useOverflowButtonBaseClassName","flexShrink","useReferenceListStyles_unstable","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","rootStyles","overflowButtonBaseClassName","className"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAI/F,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,gBAAgB;IAChBC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBR,gBAAgB;IAC3CS,SAAS;IACTC,eAAe;IACfC,KAAK,CAAC,EAAER,OAAOS,iBAAiB,CAAC,CAAC,EAAET,OAAOU,mBAAmB,CAAC,CAAC;AAClE;AAEA,MAAMC,gBAAgBb,WAAW;IAC/Bc,oBAAoB;QAClBC,UAAU;IACZ;AACF;AAEA,MAAMC,iCAAiCjB,gBAAgB;~~IACrDkB~~,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAE,GAAGF;IAErD,MAAMG,oBAAoBf;IAC1B,MAAMgB,aAAaV;IACnB,MAAMW,8BAA8BR;IAEpCG,MAAMf,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,wBAAwBC,IAAI,EAC5BkB,mBACA,AAACF,CAAAA,yBAAyB,CAACC,iBAAgB,KAAME,WAAWT,kBAAkB,EAC9EK,MAAMf,IAAI,CAACqB,SAAS;IAGtB,IAAIN,MAAMd,cAAc,EAAE;QACxBc,MAAMd,cAAc,CAACoB,SAAS,GAAGxB,aAC/BE,wBAAwBE,cAAc,EACtCmB,6BACAL,MAAMd,cAAc,CAACoB,SAAS;IAElC;IAEA,IAAIN,MAAMb,cAAc,EAAE;QACxBa,MAAMb,cAAc,CAACmB,SAAS,GAAGxB,aAC/BE,wBAAwBG,cAAc,EACtCkB,6BACAL,MAAMb,cAAc,CAACmB,SAAS;IAElC;IAEA,OAAON;AACT,EAAE"}
1	+ {"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n showMoreButton: 'fai-ReferenceList__showMoreButton',\n showLessButton: 'fai-ReferenceList__showLessButton',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n});\n\nconst useRootStyles = makeStyles({\n referencesExpanded: {\n flexWrap: 'wrap',\n },\n});\n\nconst useOverflowButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexShrink: 0,\n});\n\n/\n Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n 'use no memo';\n\n const { areReferencesExpanded, shouldUseOverflow } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded \|\| !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.className,\n );\n\n if (state.showMoreButton) {\n state.showMoreButton.className = mergeClasses(\n referenceListClassNames.showMoreButton,\n overflowButtonBaseClassName,\n state.showMoreButton.className,\n );\n }\n\n if (state.showLessButton) {\n state.showLessButton.className = mergeClasses(\n referenceListClassNames.showLessButton,\n overflowButtonBaseClassName,\n state.showLessButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","referenceListClassNames","root","showMoreButton","showLessButton","useRootBaseClassName","display","flexDirection","gap","spacingVerticalXS","spacingHorizontalXS","useRootStyles","referencesExpanded","flexWrap","useOverflowButtonBaseClassName","flexShrink","useReferenceListStyles_unstable","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","rootStyles","overflowButtonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAI/F,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,gBAAgB;IAChBC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBR,gBAAgB;IAC3CS,SAAS;IACTC,eAAe;IACfC,KAAK,CAAC,EAAER,OAAOS,iBAAiB,CAAC,CAAC,EAAET,OAAOU,mBAAmB,CAAC,CAAC;AAClE;AAEA,MAAMC,gBAAgBb,WAAW;IAC/Bc,oBAAoB;QAClBC,UAAU;IACZ;AACF;AAEA,MAAMC,iCAAiCjB,gBAAgB;IACrDS,SAAS;IACTS,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAE,GAAGF;IAErD,MAAMG,oBAAoBf;IAC1B,MAAMgB,aAAaV;IACnB,MAAMW,8BAA8BR;IAEpCG,MAAMf,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,wBAAwBC,IAAI,EAC5BkB,mBACA,AAACF,CAAAA,yBAAyB,CAACC,iBAAgB,KAAME,WAAWT,kBAAkB,EAC9EK,MAAMf,IAAI,CAACqB,SAAS;IAGtB,IAAIN,MAAMd,cAAc,EAAE;QACxBc,MAAMd,cAAc,CAACoB,SAAS,GAAGxB,aAC/BE,wBAAwBE,cAAc,EACtCmB,6BACAL,MAAMd,cAAc,CAACoB,SAAS;IAElC;IAEA,IAAIN,MAAMb,cAAc,EAAE;QACxBa,MAAMb,cAAc,CAACmB,SAAS,GAAGxB,aAC/BE,wBAAwBG,cAAc,EACtCkB,6BACAL,MAAMb,cAAc,CAACmB,SAAS;IAElC;IAEA,OAAON;AACT,EAAE"}

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

@@ -21,19 +21,11 @@ export const useReferenceOverflowButton_unstable = (props, ref) => {
   } = props;
   const rootRef = React.useRef(null);
   const [setTimeout] = useTimeout();
-  const {
-    areReferencesExpanded,
-    maxVisibleReferences,
-    referenceListRef,
-    totalReferencesCount,
-    triggeredViaKeyboard
-  } = useReferenceListContext_unstable(ctx => ({
-    areReferencesExpanded: ctx.areReferencesExpanded,
-    maxVisibleReferences: ctx.maxVisibleReferences,
-    referenceListRef: ctx.referenceListRef,
-    totalReferencesCount: ctx.totalReferencesCount,
-    triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
-  }));
+  const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);
+  const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);
+  const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);
+  const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);
+  const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);
   const {
     isOverflowing,
     overflowCount

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useFocusFinders,\n useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/*\n Create the state required to render ReferenceOverflowButton.\n \n The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n \n @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n props: ReferenceOverflowButtonProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { children, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n 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"}
1	+ {"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useFocusFinders,\n useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/*\n Create the state required to render ReferenceOverflowButton.\n \n The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n \n @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n props: ReferenceOverflowButtonProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { children, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n\n const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n const { isOverflowing, overflowCount } = useOverflowMenu();\n\n const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n ev => {\n if (ev.key === Enter \|\| ev.key === Space) {\n triggeredViaKeyboard.current = true;\n }\n },\n [triggeredViaKeyboard],\n );\n\n // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n const previousOverflow = React.useRef(0);\n\n // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n React.useEffect(() => {\n // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n let elementToFocus: HTMLElement \| null \| undefined;\n\n // If the references are collapsed, we move focus to the overflow button.\n if (!areReferencesExpanded) {\n elementToFocus = rootRef.current;\n previousOverflow.current = overflowCount;\n }\n // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n // We do this by moving focus according to the following heuristics:\n // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n else if (rootRef.current && referenceListRef.current) {\n const positionToFocus =\n maxVisibleReferences < totalReferencesCount - previousOverflow.current\n ? maxVisibleReferences\n : totalReferencesCount - previousOverflow.current;\n\n let currentElement: HTMLElement \| null \| undefined = findFirstFocusable(referenceListRef.current);\n for (let i = 0; i < positionToFocus && currentElement; i++) {\n currentElement = findNextFocusable(currentElement);\n }\n\n elementToFocus = currentElement;\n }\n\n // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n setTimeout(() => {\n elementToFocus?.focus();\n triggeredViaKeyboard.current = false;\n }, 0);\n }\n }, [\n areReferencesExpanded,\n findFirstFocusable,\n findNextFocusable,\n isOverflowing,\n maxVisibleReferences,\n overflowCount,\n referenceListRef,\n setTimeout,\n totalReferencesCount,\n triggeredViaKeyboard,\n ]);\n\n const state: ReferenceOverflowButtonState = {\n shouldRenderOverflowButton: isOverflowing \|\| areReferencesExpanded,\n\n components: {\n root: 'button',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref: useMergedRefs(rootRef, ref),\n ...props,\n }),\n {\n defaultProps: {\n children: processedText,\n },\n elementType: 'button',\n },\n ),\n };\n\n state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n return state;\n};\n"],"names":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useReferenceOverflowButton_unstable","props","ref","children","text","rootRef","useRef","setTimeout","areReferencesExpanded","ctx","maxVisibleReferences","referenceListRef","totalReferencesCount","triggeredViaKeyboard","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","processedText","findFirstFocusable","findNextFocusable","onKeyDown","useCallback","ev","key","current","previousOverflow","useEffect","undefined","elementToFocus","positionToFocus","currentElement","i","focus","state","shouldRenderOverflowButton","components","root","always","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,eAAe,EACfC,aAAa,EACbC,eAAe,QACV,6BAA6B;AACpC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,gCAAgC,QAAQ,sDAAsD;AAGvG;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA;IAEA,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGH;IAE3B,MAAMI,UAAUhB,MAAMiB,MAAM,CAAoB;IAEhD,MAAM,CAACC,WAAW,GAAGT;IAGrB,MAAMU,wBAAwBT,iCAAiCU,CAAAA,MAAOA,IAAID,qBAAqB;IAC/F,MAAME,uBAAuBX,iCAAiCU,CAAAA,MAAOA,IAAIC,oBAAoB;IAC7F,MAAMC,mBAAmBZ,iCAAiCU,CAAAA,MAAOA,IAAIE,gBAAgB;IACrF,MAAMC,uBAAuBb,iCAAiCU,CAAAA,MAAOA,IAAIG,oBAAoB;IAC7F,MAAMC,uBAAuBd,iCAAiCU,CAAAA,MAAOA,IAAIK,kCAAkC;IAE3G,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGnB;IAEzC,MAAMoB,gBAAgBd,qBAAAA,sBAAAA,WAAa,OAAOC,SAAS,aAAaA,KAAKY,iBAAiBZ;IAEtF,MAAM,EAAEc,kBAAkB,EAAEC,iBAAiB,EAAE,GAAGxB;IAClD,MAAMyB,YAAY/B,MAAMgC,WAAW,CACjCC,CAAAA;QACE,IAAIA,GAAGC,GAAG,KAAKjC,SAASgC,GAAGC,GAAG,KAAKhC,OAAO;YACxCsB,qBAAqBW,OAAO,GAAG;QACjC;IACF,GACA;QAACX;KAAqB;IAGxB,0IAA0I;IAC1I,MAAMY,mBAAmBpC,MAAMiB,MAAM,CAAC;IAEtC,gHAAgH;IAChHjB,MAAMqC,SAAS,CAAC;QACd,+GAA+G;QAC/G,IAAIhB,yBAAyBiB,aAAad,qBAAqBW,OAAO,EAAE;YACtE,IAAII;YAEJ,yEAAyE;YACzE,IAAI,CAACpB,uBAAuB;gBAC1BoB,iBAAiBvB,QAAQmB,OAAO;gBAChCC,iBAAiBD,OAAO,GAAGR;YAC7B,OAKK,IAAIX,QAAQmB,OAAO,IAAIb,iBAAiBa,OAAO,EAAE;gBACpD,MAAMK,kBACJnB,uBAAuBE,uBAAuBa,iBAAiBD,OAAO,GAClEd,uBACAE,uBAAuBa,iBAAiBD,OAAO;gBAErD,IAAIM,iBAAiDZ,mBAAmBP,iBAAiBa,OAAO;gBAChG,IAAK,IAAIO,IAAI,GAAGA,IAAIF,mBAAmBC,gBAAgBC,IAAK;oBAC1DD,iBAAiBX,kBAAkBW;gBACrC;gBAEAF,iBAAiBE;YACnB;YAEA,+IAA+I;YAC/IvB,WAAW;gBACTqB,2BAAAA,qCAAAA,eAAgBI,KAAK;gBACrBnB,qBAAqBW,OAAO,GAAG;YACjC,GAAG;QACL;IACF,GAAG;QACDhB;QACAU;QACAC;QACAJ;QACAL;QACAM;QACAL;QACAJ;QACAK;QACAC;KACD;IAED,MAAMoB,QAAsC;QAC1CC,4BAA4BnB,iBAAiBP;QAE7C2B,YAAY;YACVC,MAAM;QACR;QAEAA,MAAM1C,KAAK2C,MAAM,CACf7C,yBAAyB,UAAU;YACjCU,KAAKN,cAAcS,SAASH;YAC5B,GAAGD,KAAK;QACV,IACA;YACEqC,cAAc;gBACZnC,UAAUc;YACZ;YACAsB,aAAa;QACf;IAEJ;IAEAN,MAAMG,IAAI,CAAChB,SAAS,GAAG3B,eAAe2B,WAAWnB,MAAMmB,SAAS;IAEhE,OAAOa;AACT,EAAE"}

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

@@ -5,7 +5,7 @@ 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 useRootBaseClassName = __resetStyles("r1hm0apo", null, [".r1hm0apo{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);cursor:pointer;display:inline-flex;justify-content:center;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".r1hm0apo:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1hm0apo:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"]);
 /**
  * Apply styling to the ReferenceOverflowButton slots based on the state
  */

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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 alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n cursor: 'pointer',\n display: 'inline-flex',\n justifyContent: 'center',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n ...typographyStyles.caption1,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n});\n\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","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","cursor","display","justifyContent","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","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,YAAY;IACZC,iBAAiBN,OAAOO,uBAAuB;IAC/CC,QAAQ,CAAC,EAAER,OAAOS,eAAe,CAAC,OAAO,EAAET,OAAOU,mBAAmB,CAAC,CAAC;IACvEC,cAAcX,OAAOY,kBAAkB;IACvCC,OAAOb,OAAOc,uBAAuB;IACrCC,QAAQ;IACRC,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,SAAS,CAAC,EAAEnB,OAAOoB,kBAAkB,CAAC,CAAC,EAAEpB,OAAOqB,kBAAkB,CAAC,CAAC;IACpE,GAAGpB,iBAAiBqB,QAAQ;IAE5B,UAAU;QACRhB,iBAAiBN,OAAOuB,4BAA4B;QACpDC,aAAaxB,OAAOyB,wBAAwB;QAC5CZ,OAAOb,OAAO0B,4BAA4B;IAC5C;IAEA,iBAAiB;QACfpB,iBAAiBN,OAAO2B,8BAA8B;QACtDH,aAAaxB,OAAO4B,0BAA0B;QAC9Cf,OAAOb,OAAO6B,8BAA8B;IAC9C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA;IAEA,MAAMC,oBAAoB5B;IAE1B2B,MAAM5B,IAAI,CAAC8B,SAAS,GAAGlC,aAAaG,kCAAkCC,IAAI,EAAE6B,mBAAmBD,MAAM5B,IAAI,CAAC8B,SAAS;IAEnH,OAAOF;AACT,EAAE"}

package/lib/index.js CHANGED Viewed

@@ -1,11 +1,11 @@
 export { Citation, citationClassNames, renderCitation_unstable, useCitation_unstable, useCitationStyles_unstable } from './Citation';
 export { Reference, referenceClassNames, renderReference_unstable, useReference_unstable, useReferenceStyles_unstable } from './Reference';
-export { useReferenceCitationPreview, useReferenceGroup } from './hooks';
+export { useReferenceCitationPreview, useReferenceGroup } from './utilities';
 export { ReferenceList, referenceListClassNames, useReferenceList_unstable, useReferenceListStyles_unstable, renderReferenceList_unstable } from './ReferenceList';
 export { ReferenceGroupToggle, referenceGroupToggleClassNames, renderReferenceGroupToggle_unstable, useReferenceGroupToggleStyles_unstable, useReferenceGroupToggle_unstable } from './ReferenceGroupToggle';
-export { Reference as ReferenceV2, referenceClassNames as referenceV2ClassNames, referenceExtraClassNames as referenceV2ExtraClassNames, renderReference_unstable as renderReferenceV2_unstable, useReferenceStyles_unstable as useReferenceStylesV2_unstable, useReference_unstable as useReferenceV2_unstable } from './ReferenceV2';
-export { ReferenceList as ReferenceListV2, referenceListClassNames as referenceListV2ClassNames, renderReferenceList_unstable as renderReferenceListV2_unstable, useReferenceListStyles_unstable as useReferenceListStylesV2_unstable, useReferenceList_unstable as useReferenceListV2_unstable } from './ReferenceListV2';
+export { Reference as ReferenceV2, referenceClassNames as referenceV2ClassNames, referenceExtraClassNames as referenceV2ExtraClassNames, renderReference_unstable as renderReferenceV2_unstable, useReferenceStyles_unstable as useReferenceV2Styles_unstable, useReference_unstable as useReferenceV2_unstable } from './ReferenceV2';
+export { ReferenceList as ReferenceListV2, referenceListClassNames as referenceListV2ClassNames, renderReferenceList_unstable as renderReferenceListV2_unstable, useReferenceListStyles_unstable as useReferenceListV2Styles_unstable, useReferenceList_unstable as useReferenceListV2_unstable } from './ReferenceListV2';
 export { ReferenceOverflowButton, referenceOverflowButtonClassNames, renderReferenceOverflowButton_unstable, useReferenceOverflowButtonStyles_unstable, useReferenceOverflowButton_unstable } from './ReferenceOverflowButton';
 export { ReferenceListContext, ReferenceListContextProvider, useReferenceListContext_unstable } from './contexts/reference-v2';
-export { useReferenceCitationPreview as useReferenceCitationPreviewV2 } from './hooks/reference-v2';
+export { generateReferenceCitationPreview, useReferenceCitationPreview as useReferenceCitationPreviewV2 } from './utilities/reference-v2';
 //# sourceMappingURL=index.js.map