npm - @fluentui-copilot/react-reference - Versions diffs - 0.0.0-nightly-20240527-0406-162a35f3.1 → 0.0.0-nightly-20240531-0407-49d6b52e.1 - Mend

@fluentui-copilot/react-reference 0.0.0-nightly-20240527-0406-162a35f3.1 → 0.0.0-nightly-20240531-0407-49d6b52e.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 (64) hide show

package/lib-commonjs/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 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":["referenceClassNames","referenceExtraClassNames","useReferenceStyles_unstable","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","text","mediaChild","labelFontSize","typographyStyles","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","makeResetStyles","boxSizing","__styles","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","borderRadius","padding","spacingVerticalS","boxShadow","columnGap","alignItems","Byoj8tv","uwmqm3","useStyles","makeStyles","sidecar","inline","popover","shorthands","closed","rowGap","nk6f5a","Bt984gj","justifyContent","psn4ub","mediaPopover","height","Bdqf98w","justifySelf","color","Ijaq50","marginTop","Be2twd7","metadataSubsequentText","position","left","top","uvfttm","flexDirection","wordBreak","hidden","Bw0ie65","mc9l5x","Beiy3e4","useLabelStyles","alignSelf","canvas","paddingTop","Br312pm","Bahqtrf","maxWidth","Biipf1f","Fd1uvx","Bh9c35c","Bmxbyg5","rootClassName","z8tnut","styles","state","B2u0y6b","mergeClasses","className","isExpanded","isSubsequentText","mode","layout","labelStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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":["referenceClassNames","referenceExtraClassNames","state","mergeClasses","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","text","mediaChild","labelFontSize","typographyStyles","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","makeResetStyles","boxSizing","__styles","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","borderRadius","padding","spacingVerticalS","boxShadow","columnGap","alignItems","Byoj8tv","uwmqm3","useStyles","makeStyles","sidecar","inline","popover","shorthands","closed","rowGap","nk6f5a","Bt984gj","justifyContent","psn4ub","mediaPopover","height","Bdqf98w","justifySelf","color","Ijaq50","marginTop","Be2twd7","metadataSubsequentText","position","left","top","uvfttm","flexDirection","wordBreak","hidden","Bw0ie65","mc9l5x","Beiy3e4","useLabelStyles","alignSelf","canvas","paddingTop","Br312pm","Bahqtrf","maxWidth","Biipf1f","Fd1uvx","Bh9c35c","Bmxbyg5","z8tnut","rootClassName","labelStyles","B2u0y6b","isSubsequentText","isExpanded","className","styles","mode","layout"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

@@ -31,6 +31,7 @@ const referenceListItemClassName = 'fai-ReferenceList__item';
     ".rc0s888>.fai-ReferenceList__item{list-style-type:none;}"
 ]);
 const useReferenceListStyles_unstable = (state)=>{
+    'use no memo';
     state.root.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.root, useRootClassName(), state.root.className);
     return state;
 }; //# sourceMappingURL=useReferenceListStyles.styles.js.map

package/lib-commonjs/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 state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n return state;\n};\n"],"names":["referenceListClassNames","referenceListItemClassName","tokens","root","padding","__resetStyles","gap","state","~~useRootClassName~~","~~className~~","~~listStyleType~~"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IAIAC,0BAAAA;eAAAA;;IAUNC,+BAAuB;eAAvBA;;;iCAlBuC;AAIvC,MAAMF,0BAA8D;UACzEG;AACF;AAEO,MAAMF,6BAA6B;AAE1C;;CAEC,SAECG,mBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;AAITC,MAAKJ,kCAAuBK,CAAAA~~;UAE1BJ~~,~~IAAKF~~,~~CAAAA~~,~~SAAAA~~,~~GAAAA~~,IAAAA,~~6BAAAA~~,~~EAA2BD~~,~~wBAAIG~~,IAAA,~~EAAAK~~,~~oBAAAD~~,MAAAJ,IAAA,~~CAAAM~~,SAAA;~~WACpCC~~;~~GAEJ,yDAAA~~"}
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":["referenceListClassNames","referenceListItemClassName","tokens","root","padding","__resetStyles","gap","state","className","mergeClasses","useRootClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IAIAC,0BAAAA;eAAAA;;IAUNC,+BAAuB;eAAvBA;;;iCAlBuC;AAIvC,MAAMF,0BAA8D;UACzEG;AACF;AAEO,MAAMF,6BAA6B;AAE1C;;CAEC,SAECG,mBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;AAITC,MAAKJ,kCAAuBK,CAAAA;;UAI5BJ,IAAA,CAAAK,SAAA,GAAAC,IAAAA,6BAAA,EAAAT,wBAAAG,IAAA,EAAAO,oBAAAH,MAAAJ,IAAA,CAAAK,SAAA;IACF,OAAAD;AAEA"}

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n makeResetStyles~~,\n~~ makeStyles~~,\n~~ mergeClasses~~,\n shorthands,\n~~ tokens~~,\n~~ typographyStyles~~,\n~~} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n divider: 'fai-Reference__divider',\n graphic: 'fai-Reference__graphic',\n content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground2,\n columnGap: tokens.spacingHorizontalXXS,\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n darker: {\n backgroundColor: tokens.colorNeutralBackground5,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground5Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground5Pressed,\n },\n },\n overflow: {\n width: '100%',\n },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst ~~useDividerStyles = makeStyles({\n darker: {\n backgroundColor: tokens.colorNeutralStroke1,\n },\n});\n\nconst~~ useGraphicBaseClassName = makeResetStyles({\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n ...typographyStyles.caption1,\n});\n\n/*\n Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n ~~const~~ { ~~appearance } = state~~;\n\n const rootBaseClassName = useRootBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n ~~const rootStyles = useRootStyles();\n const dividerStyles = useDividerStyles();\n\n~~ state.root.className = mergeClasses(\n referenceClassNames.root~~,\n~~ rootBaseClassName~~,\n appearance~~ ~~=== 'darker' && rootStyles.darker,\n~~ state.root.className~~,\n~~ );\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(\n referenceClassNames.divider~~,\n~~ dividerBaseClassName~~,\n appearance~~ ~~=== 'darker' && dividerStyles.darker,\n~~ state.divider.className~~,\n~~ );\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","~~shorthands~~","~~tokens~~","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","~~borderRadius~~","~~boxSizing~~","~~color~~","~~columnGap~~","~~spacingHorizontalXXS~~","~~display","flexShrink","~~padding","~~a9b677~~","~~__resetStyles~~","~~useDividerBaseClassName~~","~~useDividerStyles~~","~~borderColor~~","~~useGraphicBaseClassName~~","~~useContentBaseClassName","colorNeutralStroke1","rootBaseClassName","~~dividerBaseClassName","~~contentBaseClassName~~","~~overflow~~","~~width~~","~~useRootStyles~~","~~dividerStyles","~~state","className","mergeClasses","~~appearance~~","~~rootStyles~~","~~darker~~","~~useCitationBaseClassName","typographyStyles","caption2Strong","citationBaseClassName","colorNeutralStroke2","margin","~~graphicBaseClassName"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;~~IAWaA~~,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;~~IA2CNC~~,~~2BAAuBC~~;~~eAAvBD~~;;~~IApCLE~~,aAAY;eAAZA;;;~~iCApBgB~~;~~AAKX~~,MAAMJ,sBAAsD;UACjEK;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMR,2BAA2B;kBACtCS;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;~~YACZC~~;QACAC,QAAQ;~~QACRC,~~QAAAA;~~QACAC,QAAAA;YAAAA;YAAW;SAAA;QACXC,SAAOhB;QACPiB,QAAAA;YAAAA;YAAkBC;SAAAA;QAClBC,QAAAA;QACAC,QAAAA~~;;~~cAEAC;QAEAC~~,~~QAAA;;;;;QAG4C;QAAA;QAAA;QAAA;QAAA;KAAA;;;QAEH;KAAA;;iCAEvCC~~,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;~~MACFC~~,~~0BAAAD~~,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;~~MAEAE~~,~~mBAAiBd~~,IAAAA,~~yBAAA,EAAA;YACfC;gBACAc;;;;;KAIoD;;MAEtDC,0BAAAJ,IAAAA,~~8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;~~AACF~~,~~MAAAK~~,~~0BAAAL,~~IAAAA,~~8BAAA~~,~~EAAA~~,~~YAAA~~,~~MAAA~~;~~IAAA~~;~~CAAA~~;~~MAKOxB~~,~~8BAA8B8B~~,CAAAA~~;UAEjC~~,~~YACEjB~~;~~UAGFkB~~,~~oBAAiBrB~~;~~kCACET;UACnB+B~~,~~uBAAAP~~;~~UACFQ~~,~~uBAAAJ~~;~~UACAK~~,~~uBAAUN~~;~~UACRO~~,~~aAAOC;UACTC~~,~~gBAAAX;IACFY~~,~~MAAGnC~~,~~IAAA~~,~~CAAAoC,SAAA,GAAAC,~~IAAAA,~~6BAAA~~,~~EAAA1C~~,~~oBAAAK~~,IAAA,~~EAAA4B~~,~~mBAAAU~~,~~eAAA~~,~~YAAAC,WAAAC,MAAA,EAAAL,MAAAnC,~~IAAA,~~CAAAoC~~,SAAA;~~IAEH~~,~~IAAMK~~,~~MAAAA,QAAAA,~~EAAAA;~~QACJN~~,~~MAAGO,QAAAA,~~CAAAA,~~SAAiBC~~,~~GAAAA~~,IAAAA,~~6BAAc~~,~~EAAAhD~~,~~oBAAAM~~,QAAA,~~EAAA2C~~,~~uBAAAT~~,~~MAAAlC~~,QAAA,~~CAAAmC~~,SAAA~~;IACpC;IAEA~~,~~IAAMd~~,~~MAAAA~~,~~OAAAA,EAAAA~~;~~QACJZ~~,~~MAAAA~~,~~OAAAA~~,~~CAAAA~~,~~SAAiBZ~~,~~GAAO+C~~,IAAAA,~~6BAAAA~~,~~EAAAA~~,~~oBAAmB3C~~,OAAA,~~EAAA2B~~,~~sBAAAS~~,~~eAAA~~,~~YAAAJ,cAAAM,MAAA,EAAAL,MAAAjC,~~OAAA,~~CAAAkC~~,SAAA~~;;QAE3CU~~,~~MAAQ1C~~,~~OAAGN~~,~~EAAAA~~;~~QACXkC~~,~~MAAAA,~~OAAO,~~CAAAI~~,SAAA,GAAAC,IAAAA,6BAAA,~~EAAA1C~~,oBAAAS,OAAA,~~EAAA0B~~,~~sBAAAK~~,~~MAAA/B~~,OAAA,~~CAAAgC~~,SAAA~~;IACT;IAEA~~,~~IAAMb~~,~~MAAAA~~,~~OAAAA~~,~~EAAAA~~;~~QACJiB~~,~~MAAAA~~,~~OAAQ~~,~~CAAAJ~~,~~SAAA~~,~~GAAAC~~,IAAAA,~~6BAAA~~,~~EAAA1C~~,~~oBAAAQ~~,OAAA,~~EAAA4C~~,~~sBAAAZ~~,~~MAAAhC~~,OAAA,~~CAAAiC~~,SAAA;;~~WAERD~~;~~AACF~~,~~GAEA,qDAAgD~~"}
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 padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n width: '100%',\n },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n ...typographyStyles.caption1,\n});\n\n/*\n Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","color","colorNeutralForeground2Hover","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","colorNeutralForeground2","display","__resetStyles","flexShrink","justifyContent","padding","spacingVerticalXXS","tokens","spacingHorizontalS","rootBaseClassName","citationBaseClassName","useCitationBaseClassName","dividerBaseClassName","useDividerBaseClassName","borderColor","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","state","className","mergeClasses","overflow","width","contentBaseClassName","graphicBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IAsBTC,2BAAcC;eAAdD;;IAfFE,aAAY;eAAZA;;;iCAnB0E;AAIrE,MAAMJ,sBAAsD;UACjEK;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMR,2BAA2B;kBACtCS;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;cACZC;QACAC,QAAQ;;;OAGRd;QAAAA;KAAce;;MAEdC,2BAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,0BAAYD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACZE,0BAAgBF,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;MAChBG,0BAAmBC,IAAAA,8BAAsBC,EAAAA,YAAOC,MAAAA;IAAAA;CAAoB;MAKlEvB,8BAAcC,CAAAA;;UAIduB,oBAAAd;UACFe,wBAAAC;UAEAC,uBAAiBC;UACff,uBAAiBS;UACjBO,uBAAoBC;UACpB9B,IAAAA,CAAAA,SAAc+B,GAAAA,IAAAA,6BAAAA,EAAAA,oBAA8B5B,IAAA,EAAAqB,mBAAAQ,MAAA7B,IAAA,CAAA8B,SAAA;cAE1C7B,QAAKN,EAAAA;sBACLe,CAAAA,SAAAA,GAAiBS,IAAAA,6BAAOQ,EAAAA,oBAA0B1B,QAAA,EAAAqB,uBAAAO,MAAA5B,QAAA,CAAA6B,SAAA;;QAEtDD,MAAA3B,OAAA,EAAA;QACF2B,MAAA3B,OAAA,CAAA4B,SAAA,GAAAC,IAAAA,6BAAA,EAAApC,oBAAAO,OAAA,EAAAsB,sBAAAK,MAAA3B,OAAA,CAAA4B,SAAA;IAEA;QACEE,MAAAA,OAAU,EAAA;cACRC,OAAO,CAAAH,SAAA,GAAAC,IAAAA,6BAAA,EAAApC,oBAAAS,OAAA,EAAA8B,sBAAAL,MAAAzB,OAAA,CAAA0B,SAAA;;IAEX,IAAGD,MAAA1B,OAAA,EAAA;QAEH0B,MAAMN,OAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA2Bf,EAAAA,oBAAgBL,OAAA,EAAAgC,sBAAAN,MAAA1B,OAAA,CAAA2B,SAAA;;IAEjD,OAAAD;AAEA,wDAC6C"}

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

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

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

@@ -13,13 +13,15 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
 const _useReferenceStylesstyles = require("../Reference/useReferenceStyles.styles");
 const useReferenceList_unstable = (props, ref)=>{
-    const { appearance = 'lighter', children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
+    const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
     const [areReferencesExpanded, setAreReferencesExpanded] = _react.useState(false);
+    const referenceListRef = _react.useRef(null);
     const referenceInOverflowClassName = (0, _useReferenceStylesstyles.useRootStyles)().overflow;
+    const childrenArray = _react.Children.toArray(children);
+    const totalReferencesCount = childrenArray.length;
     const resolvedChildren = _react.useMemo(()=>{
         if (maxVisibleReferences !== undefined && !areReferencesExpanded) {
             const results = [];
-            const childrenArray = _react.Children.toArray(children);
             for(let index = 0; index < childrenArray.length; index++){
                 const child = childrenArray[index];
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -38,11 +40,10 @@ const useReferenceList_unstable = (props, ref)=>{
     }, [
         areReferencesExpanded,
         children,
+        childrenArray,
         maxVisibleReferences,
         referenceInOverflowClassName
     ]);
-    // We keep track of the previous overflow count to determine element to move focus to when expanding the references via keyboard.
-    const previousOverflowCount = _react.useRef(0);
     // We keep track of whether we are interacting with the overflow button via keyboard or not.
     const overflowButtonTriggeredViaKeyboard = _react.useRef(false);
     const focusAttributes = (0, _reactcomponents.useArrowNavigationGroup)({
@@ -58,18 +59,19 @@ const useReferenceList_unstable = (props, ref)=>{
     }, []);
     const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
     const state = {
-        appearance,
         areReferencesExpanded,
         overflowButtonTriggeredViaKeyboard,
-        previousOverflowCount,
+        maxVisibleReferences,
+        referenceListRef,
         shouldUseOverflow,
+        totalReferencesCount,
         components: {
             root: 'div',
             showMoreButton: 'span',
             showLessButton: 'span'
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
-            ref,
+            ref: (0, _reactcomponents.useMergedRefs)(ref, referenceListRef),
             ...focusAttributes,
             ...rest,
             children: resolvedChildren

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n mergeClasses,\n slot,\n useArrowNavigationGroup,\n} from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';\n\n/*\n Create the state required to render ReferenceList.\n \n The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n \n @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const { ~~appearance = 'lighter',~~ children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n\n const referenceInOverflowClassName = useReferenceStyles().overflow;\n const resolvedChildren = React.useMemo(() => {\n if (maxVisibleReferences !== undefined && !areReferencesExpanded) {\n const results = [];\n ~~const childrenArray = React.Children.toArray(children);\n~~ for (let index = 0; index < childrenArray.length; index++) {\n const child = childrenArray[index] as React.ReactElement;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (index >= maxVisibleReferences && React.isValidElement<any>(child)) {\n results.push(\n React.cloneElement(child, {\n ...child.props,\n className: mergeClasses(child.props.className, referenceInOverflowClassName),\n }),\n );\n } else {\n results.push(child);\n }\n }\n return results;\n }\n\n return children;\n }, [areReferencesExpanded, children, maxVisibleReferences, referenceInOverflowClassName]);\n\n // We keep track of ~~the previous overflow count to determine element to move focus to when expanding the references via keyboard.\n const previousOverflowCount = React.useRef(0);\n\n // We keep track of~~ whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n const state: ReferenceListState = {\n ~~appearance~~,\n ~~areReferencesExpanded~~,\n ~~overflowButtonTriggeredViaKeyboard~~,\n ~~previousOverflowCount~~,\n shouldUseOverflow,\n\n components: {\n root: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...focusAttributes,\n ...rest,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n };\n\n if (state.showMoreButton) {\n state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n }\n\n if (state.showLessButton) {\n state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n }\n\n return state;\n};\n"],"names":["~~appearance~~","~~children~~","~~maxVisibleReferences~~","~~referenceInOverflowClassName~~","~~resolvedChildren~~","~~results~~","childrenArray","setAreReferencesExpanded","React","useState","~~isValidElement~~","~~cloneElement~~","~~props~~","~~areReferencesExpanded~~","~~className~~","~~Children~~","~~toArray~~","~~index~~","length","child","~~push~~","~~previousOverflowCount~~","~~useArrowNavigationGroup~~","~~circular~~","~~useRef~~","~~memorizeCurrent","~~axis","~~onShowMoreButtonClick~~","~~onShowLessButtonClick~~","useCallback","~~overflowButtonTriggeredViaKeyboard~~","~~showLessButton~~","~~always~~","ref","~~rest~~","~~getIntrinsicElementProps~~","~~focusAttributes~~","elementType","~~showMoreButton~~","optional","~~undefined~~","~~slot~~","~~state~~","~~onClick~~","~~mergeCallbacks~~"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAwBUA~~;;;eAAAA;;;;~~iEAxBa~~;~~iCAOhB~~;0CAE6C;AAelD,MAAQA,~~4BAAwBC~~,~~CAAAA~~,~~OAAUC~~;~~UAE1C~~,~~EAEAF~~,~~aAAMG~~,~~SAAAA~~,~~EACNF~~,~~QAAMG~~,~~sBACAF~~,~~gBACIG~~,~~gBACAC~~;~~kCAGJC~~,yBAAA,GAAAC,OAAAC,QAAA,CAAA;~~yCACaP~~,~~IAAAA~~,~~uCAAwBM~~,~~IAAME,QAAAA~~;~~6BACzCL~~,~~OACEG~~,~~OAAMG~~,~~CAAAA~~;~~qCACKC~~,~~aAAK~~,CAAAC,~~uBAAA~~;~~8BACdC~~;~~kCACFN~~,~~OAAAO~~,~~QAAA~~,~~CAAAC~~,~~OAAA~~,~~CAAAf~~;~~4BAEG~~,~~GAAAgB~~,~~QAAAX~~,~~cAAAY~~,MAAA,~~EAAAD~~,QAAA;~~8BACLZ~~,~~aAAac~~,~~CAAAA~~,~~MAAAA~~;~~8EACf~~;~~oBACFF~~,~~SAAAf~~,~~sCAAAM~~,~~OAAAE,~~cAAA,~~CAAAS~~,QAAA;~~4BACAC~~,~~IAAOf~~,~~eAAAA~~,~~OAAAA~~,~~YAAAA~~,~~CAAAA~~,~~OAAAA~~;~~wBACT~~,~~GAAAc~~,~~MAAAP~~,~~KAAA~~;~~wBAEAE~~,~~WAAOb~~,IAAAA,~~6BAAAA~~,~~EAAAA~~,~~MAAAA~~,~~KAAAA~~,~~CAAAA~~,~~SAAAA~~,~~EAAAA~~;~~oBACN~~;~~gBAACY~~,~~OAAAA~~;~~oBAAuBZ~~,QAAAA,IAAAA,CAAAA;~~gBAAUC~~;;~~YAAmD,OAAAG~~;~~QAExF~~;~~QACA,OAAMgB~~;~~OAEN~~;~~QAAAR~~;~~QAAAZ~~;~~QAAAC~~;~~QAAAC~~;~~KAAA~~;~~qIACwD;UAExDkB~~,~~wBAAwBC~~,OAAAA,~~MAAAA~~,~~CAAAA;gGAChB;UACNC,qCAAUf,OAAAgB,MAAA,~~CAAA;~~UACVC~~,~~kBAAiBH~~,IAAAA,wCAAA,EAAA;~~QACnBI,MAAA~~;~~QAEAH~~,~~UAAMI;yBACJpB~~;;~~UAGFoB~~,~~wBAAMC~~,~~OAAwBpB~~,~~WAAMqB~~,~~CAAAA~~;~~iCAClCtB~~;~~OACF~~,~~EAAG~~;~~UAEHqB~~,~~wBAA0B1B~~,~~OAAAA~~,~~WAAAA~~,~~CAAAA~~;~~QAE1BK~~,~~yBAAkC;;UAEhCM~~,~~oBAAAA~~,~~yBAAAA~~,~~aAAAA~~,~~CAAAA~~;~~UACAiB~~,QAAAA~~;;;;;;oBAOEC~~;~~kBACF~~;~~4BACWC~~;~~4BAEPC~~;;~~mCAEA~~,~~CAAGC~~,~~MAAI~~,~~CAAAC~~,IAAAA,~~yCAAA~~,~~EAAA~~,~~OAAA;;eAETC~~,~~eACA~~;~~mBAAEC~~;~~sBAAmBjC~~;~~YAEvBkC;yBAAoED~~;;~~wBACpEN~~,~~oBAAgBlB~~,~~qBAAAA~~,~~CAAAA~~,~~QAA6B0B~~,~~CAAAA~~,~~gBAASR~~;~~yBAAkBM~~;~~aAAoBG~~;~~QAC9FT~~,~~gBAAAlB~~,~~wBAAA4B,~~qBAAA,~~CAAAF~~,QAAA,~~CAAAR~~,gBAAA;~~YAEAM~~,~~aAAUC;aACRI~~;;~~QAGFA~~,~~MAAIA~~,~~cAAMX,~~EAAc;~~cACtBW~~,~~cAAMX~~,~~CAAAA~~,~~OAAeY~~,~~GAAAA~~,IAAAA,+~~BAAUC~~,~~EAAAA~~,~~uBAAehB~~,~~MAAuBc~~,~~cAAMX~~,~~CAAAA~~,~~OAAeY~~;;~~QAG5FD~~,~~MAAOA~~,~~cAAAA,EAAAA~~;~~QACPA~~,~~MAAAX~~,cAAA,~~CAAAY~~,OAAA,GAAAC,IAAAA,+BAAA,~~EAAAhB~~,~~uBAAAc~~,~~MAAAX~~,cAAA,~~CAAAY~~,OAAA"}
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":["children","maxVisibleReferences","props","showLessButton","referenceListRef","referenceInOverflowClassName","childrenArray","showMoreButton","totalReferencesCount","rest","setAreReferencesExpanded","React","useState","index","overflow","Children","toArray","results","cloneElement","areReferencesExpanded","className","length","child","isValidElement","push","mergeClasses","overflowButtonTriggeredViaKeyboard","useArrowNavigationGroup","axis","circular","memorizeCurrent","useCallback","shouldUseOverflow","undefined","root","ref","useMergedRefs","focusAttributes","resolvedChildren","elementType","slot","optional","state","onClick","mergeCallbacks","onShowMoreButtonClick","onShowLessButtonClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAQhB;0CAE6C;AAelD,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EAENF,cAAMG,EACNC,cAAMC,EACN,GAAAC;kCAEsBC,yBAAA,GAAAC,OAAAC,QAAA,CAAA;6BACTC,OAAWA,MAAQP,CAAAA;yCACZA,IAAAA,uCAAoB,IAAAQ,QAAA;0BAClCH,OAAAI,QAAA,CAAAC,OAAA,CAAAhB;iCACaC,cAAAA,MAAAA;6BACXgB,OACEN,OAAMO,CAAAA;qCACKhB,aAAK,CAAAiB,uBAAA;8BACdC;4BACF,GAAAP,QAAAP,cAAAe,MAAA,EAAAR,QAAA;8BAEJP,aAAO,CAAAO,MAAA;8EACQS;6BACfrB,sCAAAU,OAAAY,cAAA,CAAAD,QAAA;4BACFE,IAAA,eAAAb,OAAAO,YAAA,CAAAI,OAAA;wBACA,GAAAA,MAAOL,KAAAA;wBACTG,WAAAK,IAAAA,6BAAA,EAAAH,MAAApB,KAAA,CAAAkB,SAAA,EAAAf;oBACA;gBACC,OAAA;oBAACc,QAAAA,IAAAA,CAAAA;gBAAuBnB;;mBAAyBC;;eAAmDD;OAEvG;QAAAmB;QAAAnB;QAAAM;QAAAL;QAAAI;KAA4F;gGACpC;UAExDqB,qCAAwBC,OAAAA,MAAwB,CAAA;UAC9CC,kBAAMD,IAAAA,wCAAA,EAAA;cACNE;kBACAC;QACFA,iBAAA;;UAGEpB,wBAAAA,OAAyBqB,WAAA,CAAA;QAC3BrB,yBAAK;OAEL,EAAA;UACEA,wBAAAA,OAAyBqB,WAAA,CAAA;QAC3BrB,yBAAK;OAEL,EAAA;UAEAsB,oBAAkC/B,yBAAAgC,aAAA,CAAAd;UAChCA,QAAAA;;;;;;;oBAQEe;kBACA3B;4BACAJ;4BACF;;mCAGIgC,CAAAA,MAAKC,CAAAA,IAAAA,yCAAmBhC,EAAAA,OAAAA;mDACrBiC,EAAAA,KAAejC;8BACX;mBACPJ;sBAEFsC;;yBAAqB;;wBAE6CC,oBAAaC,qBAAA,CAAAC,QAAA,CAAAlC,gBAAA;yBAAY0B;aAC7F9B;wBAAwEoC,wBAAaC,qBAAA,CAAAC,QAAA,CAAAtC,gBAAA;yBAAY8B;QACnG,KAAAA;;cAGES,cAAMnC,EAAc;QACtBmC,MAAAnC,cAAA,CAAAoC,OAAA,GAAAC,IAAAA,+BAAA,EAAAC,uBAAAH,MAAAnC,cAAA,CAAAoC,OAAA;;cAGED,cAAMvC,EAAc;QACtBuC,MAAAvC,cAAA,CAAAwC,OAAA,GAAAC,IAAAA,+BAAA,EAAAE,uBAAAJ,MAAAvC,cAAA,CAAAwC,OAAA;;IAGA,OAAAD"}

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

@@ -9,14 +9,15 @@ Object.defineProperty(exports, "useReferenceListContextValues_unstable", {
     }
 });
 function useReferenceListContextValues_unstable(state) {
-    const { appearance, areReferencesExpanded, overflowButtonTriggeredViaKeyboard, previousOverflowCount, shouldUseOverflow } = state;
+    const { areReferencesExpanded, maxVisibleReferences, overflowButtonTriggeredViaKeyboard, referenceListRef, shouldUseOverflow, totalReferencesCount } = state;
     // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
     const referenceList = {
-        appearance,
         areReferencesExpanded,
+        maxVisibleReferences,
         overflowButtonTriggeredViaKeyboard,
-        previousOverflowCount,
-        shouldUseOverflow
+        referenceListRef,
+        shouldUseOverflow,
+        totalReferencesCount
     };
     return {
         referenceList

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceListContextValues.ts"],"sourcesContent":["import type { ReferenceListState, ReferenceListContextValues } from './ReferenceList.types';\n\nexport function useReferenceListContextValues_unstable(state: ReferenceListState): ReferenceListContextValues {\n const {\n ~~appearance~~,\n ~~areReferencesExpanded~~,\n overflowButtonTriggeredViaKeyboard,\n ~~previousOverflowCount~~,\n shouldUseOverflow,\n } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n const referenceList = {\n ~~appearance~~,\n ~~areReferencesExpanded~~,\n overflowButtonTriggeredViaKeyboard,\n ~~previousOverflowCount~~,\n shouldUseOverflow,\n };\n\n return { referenceList };\n}\n"],"names":["useReferenceListContextValues_unstable","state","~~appearance~~","~~areReferencesExpanded~~","referenceList","overflowButtonTriggeredViaKeyboard","~~shouldUseOverflow~~","~~previousOverflowCount~~"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,uCAAuCC,KAAyB;UAC9E,~~EAQAC~~,~~UAAA~~,EACAC,~~qBAAMC~~,oCACJF,~~uBACAC~~,mBACAE;uGAEAC;~~UACFF~~,gBAAA;QAEAF;;QAAuBG;~~QACzBE~~"}
1	+ {"version":3,"sources":["useReferenceListContextValues.ts"],"sourcesContent":["import type { ReferenceListState, ReferenceListContextValues } from './ReferenceList.types';\n\nexport function useReferenceListContextValues_unstable(state: ReferenceListState): ReferenceListContextValues {\n const {\n areReferencesExpanded,\n maxVisibleReferences,\n overflowButtonTriggeredViaKeyboard,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n const referenceList = {\n areReferencesExpanded,\n maxVisibleReferences,\n overflowButtonTriggeredViaKeyboard,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n };\n\n return { referenceList };\n}\n"],"names":["useReferenceListContextValues_unstable","state","areReferencesExpanded","maxVisibleReferences","referenceList","overflowButtonTriggeredViaKeyboard","referenceListRef","totalReferencesCount"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,uCAAuCC,KAAyB;UAC9E,EASAC,qBAAA,EACAC,oBAAMC,oCACJF,kBACAC,mBACAE,sBACAC;uGAEAC;UACFH,gBAAA;QAEAF;;QAAuBG;QACzBC"}

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

@@ -40,6 +40,7 @@ const useOverflowButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r6su
     ".r6su6fj{flex-shrink:0;}"
 ]);
 const useReferenceListStyles_unstable = (state)=>{
+    'use no memo';
     const { areReferencesExpanded, shouldUseOverflow } = state;
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n showMoreButton: 'fai-ReferenceList__showMoreButton',\n showLessButton: 'fai-ReferenceList__showLessButton',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n});\n\nconst useRootStyles = makeStyles({\n referencesExpanded: {\n flexWrap: 'wrap',\n },\n});\n\nconst useOverflowButtonBaseClassName = makeResetStyles({\n 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 const { areReferencesExpanded, shouldUseOverflow } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded \|\| !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.className,\n );\n\n if (state.showMoreButton) {\n state.showMoreButton.className = mergeClasses(\n referenceListClassNames.showMoreButton,\n overflowButtonBaseClassName,\n state.showMoreButton.className,\n );\n }\n\n if (state.showLessButton) {\n state.showLessButton.className = mergeClasses(\n referenceListClassNames.showLessButton,\n overflowButtonBaseClassName,\n state.showLessButton.className,\n );\n }\n\n return state;\n};\n"],"names":["referenceListClassNames","useReferenceListStyles_unstable","root","showMoreButton","showLessButton","display","__resetStyles","flexDirection","__styles","spacingVerticalXS","Eh141a","useOverflowButtonBaseClassName","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","~~useRootStyles~~","~~rootStyles~~","~~overflowButtonBaseClassName","~~mergeClasses"~~,"referencesExpanded","className"~~],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IAyBbC,+BAAA;eAAAA;;;iCA7B0D;AAInD,MAAMD,0BAA8D;UACzEE;oBACAC;oBACAC;AACF;AAEA;;CAEC,SAECC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,gBAAeC,IAAAA,yBAAA,EAAA;wBACAC;QACjBC,QAAA;IAEA;;;;KAEc;;AAEd,MAAAC,iCAAAL,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;AAMA,MAAAL,kCAAAW,CAAAA~~;YAGAC~~,~~qBAAaZ~~,~~EACXa~~,~~iBAAQD~~,~~KAERD~~;UACAG,~~oBAAmBC~~;~~UACnBC~~,~~aAAMC~~;~~UAENN~~,~~8BAAuBO~~;~~UAOnBP~~,IAAAA,CAAAA,SAAMT,GAAAA,IAAAA,~~6BAAgB~~,~~EAAAH~~,~~wBAAAE~~,~~IAAA~~,~~EAAAa~~,~~mBAAA~~,~~AAAAF,~~CAAAA,~~yBAAA~~,~~CAAAC~~,~~iBAAA~~,~~KAAAG~~,~~WAAAG~~,~~kBAAA~~,~~EAAAR~~,MAAAV,IAAA,~~CAAAmB~~,SAAA;~~cACxBT~~,~~cAAMT~~,~~EAAc~~;~~QAKtBS~~,~~MAAAT~~,~~cAAA~~,~~CAAAkB~~,~~SAAA~~,~~GAAAF~~,IAAAA,6BAAA,~~EAAAnB~~,wBAAAG,cAAA,~~EAAAe~~,~~6BAAAN~~,MAAAT,cAAA,~~CAAAkB~~,SAAA;;~~cAGET~~,~~cAAMR~~,~~EAAc~~;~~QAKtBQ~~,MAAAR,~~cAAA~~,~~CAAAiB~~,~~SAAA~~,~~GAAAF~~,IAAAA,~~6BAAA~~,~~EAAAnB~~,~~wBAAAI~~,~~cAAA~~,~~EAAAc~~,~~6BAAAN~~,~~MAAAR~~,~~cAAA~~,~~CAAAiB~~,~~SAAA;;IAGA,OAAAT~~"}
1	+ {"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n 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":["referenceListClassNames","useReferenceListStyles_unstable","root","showMoreButton","showLessButton","display","__resetStyles","flexDirection","__styles","spacingVerticalXS","Eh141a","useOverflowButtonBaseClassName","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","overflowButtonBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IAyBbC,+BAAA;eAAAA;;;iCA7B0D;AAInD,MAAMD,0BAA8D;UACzEE;oBACAC;oBACAC;AACF;AAEA;;CAEC,SAECC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,gBAAeC,IAAAA,yBAAA,EAAA;wBACAC;QACjBC,QAAA;IAEA;;;;KAEc;;AAEd,MAAAC,iCAAAL,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;AAMA,MAAAL,kCAAAW,CAAAA;;UAIE,EAEAC,qBAAQA,EAERC,iBAAMC,KACNH;UACAG,oBAAMC;UAENJ,aAAWK;UAOPL,8BAAsBD;UACxBC,IAAAA,CAAAA,SAAMT,GAAAA,IAAAA,6BAAec,EAASjB,wBAC5BA,IAAAA,EAAAA,mBAAwBG,CAAAA,yBACxBa,CAAAA,iBACMb,KAAAA,WAAec,kBAAS,EAAAL,MAAAV,IAAA,CAAAe,SAAA;QAElCL,MAAAT,cAAA,EAAA;QAEAS,MAAIA,cAAMR,CAAAA,SAAgB,GAAAc,IAAAA,6BAAA,EAAAlB,wBAAAG,cAAA,EAAAa,6BAAAJ,MAAAT,cAAA,CAAAc,SAAA;;QAM1BL,MAAAR,cAAA,EAAA;QAEAQ,MAAAR,cAAOQ,CAAAA,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,wBAAAA,cAAAA,EAAAA,6BAAAA,MAAAA,cAAAA,CAAAA,SAAAA;IACP"}

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

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