npm - @fluentui-copilot/react-reference - Versions diffs - 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251014-0405-d8d3e89c.1 - Mend

@fluentui-copilot/react-reference 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251014-0405-d8d3e89c.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 (160) hide show

package/lib/components/Citation/useCitationStyles.styles.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+export const citationClassNames = {
+  root: 'fai-Citation'
+};
+const useCitationBaseClassName = __resetStyles("r1jm3di4", "r6zn0t3", [".r1jm3di4{display:inline-flex;justify-content:center;box-sizing:border-box;align-items:center;cursor:pointer;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightBold);line-height:var(--lineHeightBase200);background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);color:var(--colorNeutralForeground2);min-width:14px;height:14px;vertical-align:calc((var(--lineHeightBase200) - var(--fontSizeBase100)) / 2);padding-inline:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);text-decoration:none;margin-left:var(--spacingHorizontalXXS);margin-right:var(--spacingHorizontalXXS);}", ".r1jm3di4:hover{cursor:pointer;color:var(--colorBrandForeground2Hover);border-color:var(--colorBrandStroke2Hover);background-color:var(--colorBrandBackground2Hover);}", ".r1jm3di4:hover:active{cursor:pointer;color:var(--colorBrandForeground2Pressed);border-color:var(--colorBrandStroke2Pressed);background-color:var(--colorBrandBackground2Pressed);}", ".r6zn0t3{display:inline-flex;justify-content:center;box-sizing:border-box;align-items:center;cursor:pointer;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightBold);line-height:var(--lineHeightBase200);background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);color:var(--colorNeutralForeground2);min-width:14px;height:14px;vertical-align:calc((var(--lineHeightBase200) - var(--fontSizeBase100)) / 2);padding-inline:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);text-decoration:none;margin-right:var(--spacingHorizontalXXS);margin-left:var(--spacingHorizontalXXS);}", ".r6zn0t3:hover{cursor:pointer;color:var(--colorBrandForeground2Hover);border-color:var(--colorBrandStroke2Hover);background-color:var(--colorBrandBackground2Hover);}", ".r6zn0t3:hover:active{cursor:pointer;color:var(--colorBrandForeground2Pressed);border-color:var(--colorBrandStroke2Pressed);background-color:var(--colorBrandBackground2Pressed);}"]);
+const useCitationRootStyles = __styles({
+  isBlock: {
+    mc9l5x: "f22iagw",
+    Frg6f3: ["f1tyq0we", "f11qmguv"],
+    t21cq0: ["f11qmguv", "f1tyq0we"]
+  },
+  isPopoverLocked: {
+    sj55zd: "fkjhhq2",
+    g2u3we: "f1nbqb3e",
+    h3c5rm: ["fah3j9v", "f56crja"],
+    B9xav0g: "fef4ti1",
+    zhjwy3: ["f56crja", "fah3j9v"],
+    De3pzq: "f16xkysk",
+    Bi91k9c: "fbszb7v",
+    Bgoe8wy: "ftxwbyd",
+    Bwzppfd: ["f1p7dilp", "f15x2k42"],
+    oetu4i: "fegdlwn",
+    gg5e9n: ["f15x2k42", "f1p7dilp"],
+    Jwef8y: "f121v1wq"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".fkjhhq2{color:var(--colorBrandForeground2Pressed);}", ".f1nbqb3e{border-top-color:var(--colorBrandStroke2Pressed);}", ".fah3j9v{border-right-color:var(--colorBrandStroke2Pressed);}", ".f56crja{border-left-color:var(--colorBrandStroke2Pressed);}", ".fef4ti1{border-bottom-color:var(--colorBrandStroke2Pressed);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}"],
+  h: [".fbszb7v:hover{color:var(--colorBrandForeground2Pressed);}", ".ftxwbyd:hover{border-top-color:var(--colorBrandStroke2Pressed);}", ".f1p7dilp:hover{border-right-color:var(--colorBrandStroke2Pressed);}", ".f15x2k42:hover{border-left-color:var(--colorBrandStroke2Pressed);}", ".fegdlwn:hover{border-bottom-color:var(--colorBrandStroke2Pressed);}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}"]
+});
+const useNextStyles = __styles({
+  root: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu"
+  }
+}, {
+  d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the Citation slots based on the state
+ */
+export const useCitationStyles_unstable = state => {
+  'use no memo';
+  const {
+    designVersion
+  } = state;
+  const rootBaseClassName = useCitationBaseClassName();
+  const rootStyles = useCitationRootStyles();
+  const nextStyles = useNextStyles();
+  state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useCitationStyles.styles.js.map

package/lib/components/Citation/useCitationStyles.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n root: 'fai-Citation',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n display: 'inline-flex',\n justifyContent: 'center',\n boxSizing: 'border-box',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.caption2Strong,\n\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground2,\n\n minWidth: '14px',\n height: '14px',\n verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n paddingInline: tokens.spacingHorizontalXXS,\n\n borderRadius: tokens.borderRadiusMedium,\n\n textDecoration: 'none',\n\n marginLeft: tokens.spacingHorizontalXXS,\n marginRight: tokens.spacingHorizontalXXS,\n\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Hover,\n borderColor: tokens.colorBrandStroke2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n\n ':hover:active': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Pressed,\n borderColor: tokens.colorBrandStroke2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n});\n\nconst useCitationRootStyles = makeStyles({\n isBlock: {\n display: 'flex',\n marginLeft: 0,\n marginRight: 0,\n },\n isPopoverLocked: {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n ':hover': {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n },\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","cursor","caption2Strong","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","paddingInline","spacingHorizontalXXS","borderRadius","borderRadiusMedium","textDecoration","marginLeft","marginRight","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useNextStyles","borderRadiusXLarge","useCitationStyles_unstable","state","designVersion","rootBaseClassName","rootStyles","nextStyles","className","block"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,6BAA6B;AACnG,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZC,QAAQ;IACR,GAAGR,iBAAiBS,cAAc;IAElCC,iBAAiBX,OAAOY,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEb,OAAOc,eAAe,CAAC,OAAO,EAAEd,OAAOe,mBAAmB,CAAC,CAAC;IACvEC,OAAOhB,OAAOiB,uBAAuB;IAErCC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEnB,iBAAiBS,cAAc,CAACW,UAAU,CAAC,GAAG,EAAEpB,iBAAiBS,cAAc,CAACY,QAAQ,CAAC,MAAM,CAAC;IACxHC,eAAevB,OAAOwB,oBAAoB;IAE1CC,cAAczB,OAAO0B,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAY5B,OAAOwB,oBAAoB;IACvCK,aAAa7B,OAAOwB,oBAAoB;IAExC,UAAU;QACRf,QAAQ;QACRO,OAAOhB,OAAO8B,0BAA0B;QACxCC,aAAa/B,OAAOgC,sBAAsB;QAC1CrB,iBAAiBX,OAAOiC,0BAA0B;IACpD;IAEA,iBAAiB;QACfxB,QAAQ;QACRO,OAAOhB,OAAOkC,4BAA4B;QAC1CH,aAAa/B,OAAOmC,wBAAwB;QAC5CxB,iBAAiBX,OAAOoC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBxC,WAAW;IACvCyC,SAAS;QACPjC,SAAS;QACTuB,YAAY;QACZC,aAAa;IACf;IACAU,iBAAiB;QACfvB,OAAOhB,OAAOkC,4BAA4B;QAC1C,GAAGnC,WAAWgC,WAAW,CAAC/B,OAAOmC,wBAAwB,CAAC;QAC1DxB,iBAAiBX,OAAOwC,qBAAqB;QAC7C,UAAU;YACRxB,OAAOhB,OAAOkC,4BAA4B;YAC1C,GAAGnC,WAAWgC,WAAW,CAAC/B,OAAOmC,wBAAwB,CAAC;YAC1DxB,iBAAiBX,OAAOwC,qBAAqB;QAC/C;IACF;AACF;AAEA,MAAMC,gBAAgB5C,WAAW;IAAEM,MAAM;QAAEsB,cAAczB,OAAO0C,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoB1C;IAC1B,MAAM2C,aAAaV;IACnB,MAAMW,aAAaP;IAEnBG,MAAMzC,IAAI,CAAC8C,SAAS,GAAGnD,aACrBI,mBAAmBC,IAAI,EACvByC,MAAML,eAAe,IAAIQ,WAAWR,eAAe,EACnDK,MAAMM,KAAK,IAAIH,WAAWT,OAAO,EACjCQ,mBACAD,kBAAkB,UAAUG,WAAW7C,IAAI,EAC3CyC,MAAMzC,IAAI,CAAC8C,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/Citation/useCitationStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,69 @@
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+export const citationClassNames = {
+    root: 'fai-Citation'
+};
+const useCitationBaseClassName = makeResetStyles({
+    display: 'inline-flex',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    cursor: 'pointer',
+    ...typographyStyles.caption2Strong,
+    backgroundColor: tokens.colorNeutralBackground3,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+    color: tokens.colorNeutralForeground2,
+    minWidth: '14px',
+    height: '14px',
+    verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,
+    paddingInline: tokens.spacingHorizontalXXS,
+    borderRadius: tokens.borderRadiusMedium,
+    textDecoration: 'none',
+    marginLeft: tokens.spacingHorizontalXXS,
+    marginRight: tokens.spacingHorizontalXXS,
+    ':hover': {
+        cursor: 'pointer',
+        color: tokens.colorBrandForeground2Hover,
+        borderColor: tokens.colorBrandStroke2Hover,
+        backgroundColor: tokens.colorBrandBackground2Hover
+    },
+    ':hover:active': {
+        cursor: 'pointer',
+        color: tokens.colorBrandForeground2Pressed,
+        borderColor: tokens.colorBrandStroke2Pressed,
+        backgroundColor: tokens.colorBrandBackground2Pressed
+    }
+});
+const useCitationRootStyles = makeStyles({
+    isBlock: {
+        display: 'flex',
+        marginLeft: 0,
+        marginRight: 0
+    },
+    isPopoverLocked: {
+        color: tokens.colorBrandForeground2Pressed,
+        ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),
+        backgroundColor: tokens.colorBrandBackground2,
+        ':hover': {
+            color: tokens.colorBrandForeground2Pressed,
+            ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),
+            backgroundColor: tokens.colorBrandBackground2
+        }
+    }
+});
+const useNextStyles = makeStyles({
+    root: {
+        borderRadius: tokens.borderRadiusXLarge
+    }
+});
+/**
+ * Apply styling to the Citation slots based on the state
+ */ export const useCitationStyles_unstable = (state)=>{
+    'use no memo';
+    const { designVersion } = state;
+    const rootBaseClassName = useCitationBaseClassName();
+    const rootStyles = useCitationRootStyles();
+    const nextStyles = useNextStyles();
+    state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
+    return state;
+};

package/lib/components/Citation/useCitationStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

package/lib/components/Reference/Reference.js ADDED Viewed

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

package/lib/components/Reference/Reference.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/lib/components/Reference/Reference.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { };

package/lib/components/Reference/Reference.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n /** The root of the component that renders the reference as either a button or an anchor element. */\n root: NonNullable<Slot<'button', 'a'>>;\n\n /** The number of the citation this reference corresponds to. */\n citation?: Slot<'span'>;\n\n /** A divider that visually separates the citation from the content of the reference. */\n divider?: Slot<'span'>;\n\n /** A space containing the content of the reference, which goes into an ellipsis if it overflows. */\n content?: Slot<'span'>;\n\n /** A space within the content slot where a graphic such as an icon or an image can be displayed before the rest of the content. */\n graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & DesignVersion & {};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n Required<Pick<ReferenceProps, 'id' | 'designVersion'>> &\n Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":"AAuBA,WAEgD"}

package/lib/components/Reference/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export { Reference } from './Reference';
+export { renderReference_unstable } from './renderReference';
+export { useReference_unstable } from './useReference';
+export { referenceClassNames, referenceExtraClassNames, useReferenceStyles_unstable } from './useReferenceStyles.styles';

package/lib/components/Reference/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["index.ts"],"sourcesContent":["export { Reference } from './Reference';\nexport type { ReferenceProps, ReferenceSlots, ReferenceState } from './Reference.types';\nexport { renderReference_unstable } from './renderReference';\nexport { useReference_unstable } from './useReference';\nexport {\n referenceClassNames,\n referenceExtraClassNames,\n useReferenceStyles_unstable,\n} from './useReferenceStyles.styles';\n"],"names":["Reference","renderReference_unstable","useReference_unstable","referenceClassNames","referenceExtraClassNames","useReferenceStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SACEC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,QACtB,8BAA8B"}

package/lib/components/Reference/renderReference.js ADDED Viewed

@@ -0,0 +1,22 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { OverflowItem, assertSlots } from '@fluentui/react-components';
+export const renderReference_unstable = (state)=>{
+    assertSlots(state);
+    const { id, shouldUseOverflow } = state;
+    const reference = /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.citation && /*#__PURE__*/ _jsx(state.citation, {}),
+            state.divider && /*#__PURE__*/ _jsx(state.divider, {}),
+            state.content && /*#__PURE__*/ _jsxs(state.content, {
+                children: [
+                    state.graphic && /*#__PURE__*/ _jsx(state.graphic, {}),
+                    state.root.children
+                ]
+            })
+        ]
+    });
+    return shouldUseOverflow ? /*#__PURE__*/ _jsx(OverflowItem, {
+        id: id,
+        children: reference
+    }, id) : reference;
+};

package/lib/components/Reference/renderReference.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/lib/components/Reference/useReference.js ADDED Viewed

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';
+import { useReferenceListContext_unstable } from '../../contexts/referenceListContext';
+import { referenceExtraClassNames } from './useReferenceStyles.styles';
+import { useDesignVersion } from '@fluentui-copilot/react-provider';
+/**
+ * Create the state required to render Reference.
+ *
+ * The returned state can be modified with hooks such as useReferenceStyles_unstable,
+ * before being passed to renderReference_unstable.
+ *
+ * @param props - props from this instance of Reference
+ * @param ref - reference to root HTMLElement of Reference
+ */ export const useReference_unstable = (props, ref)=>{
+    const { as, children, id } = props;
+    const designVersion = useDesignVersion(props.designVersion);
+    const shouldUseOverflow = useReferenceListContext_unstable((ctx)=>ctx.shouldUseOverflow);
+    const referenceId = useId('reference-', id);
+    const elementType = as || (props.href ? 'a' : 'button');
+    const propsWithAssignedAs = {
+        type: elementType === 'button' ? 'button' : undefined,
+        ...props,
+        as: elementType,
+        id: referenceId
+    };
+    const citation = slot.optional(props.citation, {
+        elementType: 'span'
+    });
+    const graphic = slot.optional(props.graphic, {
+        elementType: 'span'
+    });
+    const content = slot.optional(props.content, {
+        elementType: 'span',
+        renderByDefault: graphic !== undefined || !!children
+    });
+    const divider = slot.optional(props.divider, {
+        elementType: 'span',
+        renderByDefault: citation !== undefined && content !== undefined
+    });
+    const state = {
+        designVersion,
+        id: referenceId,
+        shouldUseOverflow,
+        components: {
+            root: elementType,
+            citation: 'span',
+            divider: 'span',
+            graphic: 'span',
+            content: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps(elementType, {
+            ref,
+            ...propsWithAssignedAs
+        }, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute
+        [
+            'content'
+        ]), {
+            elementType
+        }),
+        citation,
+        divider,
+        content,
+        graphic
+    };
+    if (state.graphic && React.isValidElement(state.graphic.children)) {
+        state.graphic.children = React.cloneElement(state.graphic.children, {
+            className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild)
+        });
+    }
+    return state;
+};

package/lib/components/Reference/useReference.js.map ADDED Viewed

@@ -0,0 +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/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState, ReferenceSlots } from './Reference.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { JSXIntrinsicElement } from '@fluentui/react-components';\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n props: ReferenceProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n const { as, children, id } = props;\n\n const designVersion = useDesignVersion(props.designVersion);\n\n const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n const referenceId = useId('reference-', id);\n\n const elementType = as || ((props as JSXIntrinsicElement<'a'>).href ? 'a' : 'button');\n const propsWithAssignedAs = {\n type: elementType === 'button' ? 'button' : undefined,\n ...props,\n as: elementType,\n id: referenceId,\n };\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 as ReferenceSlots['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 designVersion,\n id: referenceId,\n shouldUseOverflow,\n\n components: {\n root: elementType,\n citation: 'span',\n divider: 'span',\n graphic: 'span',\n content: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(\n elementType,\n {\n ref,\n ...propsWithAssignedAs,\n },\n // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n ['content'],\n ) as ReferenceSlots['root'],\n { elementType },\n ),\n citation,\n divider,\n content,\n graphic,\n };\n\n if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n state.graphic.children = React.cloneElement(state.graphic.children, {\n className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n });\n }\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useDesignVersion","useReference_unstable","props","ref","as","children","id","designVersion","shouldUseOverflow","ctx","referenceId","elementType","href","propsWithAssignedAs","type","undefined","citation","optional","graphic","content","renderByDefault","divider","state","components","root","always","isValidElement","cloneElement","className","graphicChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACjG,SAASC,gCAAgC,QAAQ,sCAAsC;AACvF,SAASC,wBAAwB,QAAQ,8BAA8B;AAEvE,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGJ;IAE7B,MAAMK,gBAAgBP,iBAAiBE,MAAMK,aAAa;IAE1D,MAAMC,oBAAoBV,iCAAiCW,CAAAA,MAAOA,IAAID,iBAAiB;IAEvF,MAAME,cAAcb,MAAM,cAAcS;IAExC,MAAMK,cAAcP,MAAO,CAAA,AAACF,MAAmCU,IAAI,GAAG,MAAM,QAAO;IACnF,MAAMC,sBAAsB;QAC1BC,MAAMH,gBAAgB,WAAW,WAAWI;QAC5C,GAAGb,KAAK;QACRE,IAAIO;QACJL,IAAII;IACN;IAEA,MAAMM,WAAWpB,KAAKqB,QAAQ,CAACf,MAAMc,QAAQ,EAAE;QAAEL,aAAa;IAAO;IACrE,MAAMO,UAAUtB,KAAKqB,QAAQ,CAACf,MAAMgB,OAAO,EAAE;QAAEP,aAAa;IAAO;IACnE,MAAMQ,UAAUvB,KAAKqB,QAAQ,CAACf,MAAMiB,OAAO,EAA+B;QACxER,aAAa;QACbS,iBAAiBF,YAAYH,aAAa,CAAC,CAACV;IAC9C;IACA,MAAMgB,UAAUzB,KAAKqB,QAAQ,CAACf,MAAMmB,OAAO,EAAE;QAC3CV,aAAa;QACbS,iBAAiBJ,aAAaD,aAAaI,YAAYJ;IACzD;IAEA,MAAMO,QAAwB;QAC5Bf;QACAD,IAAII;QACJF;QAEAe,YAAY;YACVC,MAAMb;YACNK,UAAU;YACVK,SAAS;YACTH,SAAS;YACTC,SAAS;QACX;QAEAK,MAAM5B,KAAK6B,MAAM,CACf/B,yBACEiB,aACA;YACER;YACA,GAAGU,mBAAmB;QACxB,GACA,qFAAqF;QACrF;YAAC;SAAU,GAEb;YAAEF;QAAY;QAEhBK;QACAK;QACAF;QACAD;IACF;IAEA,IAAII,MAAMJ,OAAO,IAAIzB,MAAMiC,cAAc,CAAcJ,MAAMJ,OAAO,CAACb,QAAQ,GAAG;QAC9EiB,MAAMJ,OAAO,CAACb,QAAQ,GAAGZ,MAAMkC,YAAY,CAACL,MAAMJ,OAAO,CAACb,QAAQ,EAAE;YAClEuB,WAAWjC,aAAa2B,MAAMJ,OAAO,CAACb,QAAQ,CAACH,KAAK,CAAC0B,SAAS,EAAE7B,yBAAyB8B,YAAY;QACvG;IACF;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/Reference/useReferenceStyles.styles.js ADDED Viewed

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

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\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: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: '100%',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n textDecoration: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useRootNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\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 display: 'inline-flex',\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 alignItems: 'center',\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n textAlign: 'start',\n wordBreak: 'break-word',\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 { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootNextStyles = useRootNextStyles();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\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(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceClassNames","root","citation","divider","graphic","content","referenceExtraClassNames","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","maxWidth","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","textDecoration","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","overflow","width","useRootNextStyles","borderRadiusXLarge","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","textAlign","wordBreak","caption1","useReferenceStyles_unstable","state","designVersion","rootBaseClassName","rootNextStyles","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/Reference/useReferenceStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,110 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+export const referenceClassNames = {
+    root: 'fai-Reference',
+    citation: 'fai-Reference__citation',
+    divider: 'fai-Reference__divider',
+    graphic: 'fai-Reference__graphic',
+    content: 'fai-Reference__content'
+};
+export const referenceExtraClassNames = {
+    graphicChild: 'fai-Reference__graphicChild'
+};
+const GRAPHIC_SIZE = '16px';
+const useRootBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    backgroundColor: tokens.colorNeutralBackground3,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+    borderRadius: tokens.borderRadiusMedium,
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground2,
+    columnGap: tokens.spacingHorizontalXXS,
+    display: 'inline-flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+    maxWidth: '100%',
+    minHeight: '24px',
+    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+    textDecoration: 'none',
+    ':hover': {
+        backgroundColor: tokens.colorNeutralBackground3Hover,
+        borderColor: tokens.colorNeutralStroke1Hover,
+        color: tokens.colorNeutralForeground2Hover,
+        [`& .${referenceClassNames.divider}`]: {
+            backgroundColor: tokens.colorNeutralStroke1Hover
+        }
+    },
+    ':hover:active': {
+        backgroundColor: tokens.colorNeutralBackground3Pressed,
+        borderColor: tokens.colorNeutralStroke1Pressed,
+        color: tokens.colorNeutralForeground2Pressed,
+        [`& .${referenceClassNames.divider}`]: {
+            backgroundColor: tokens.colorNeutralStroke1Pressed
+        }
+    }
+});
+export const useRootStyles = makeStyles({
+    overflow: {
+        maxWidth: '100%',
+        width: '100%'
+    }
+});
+const useRootNextStyles = makeStyles({
+    root: {
+        borderRadius: tokens.borderRadiusXLarge
+    }
+});
+const useCitationBaseClassName = makeResetStyles({
+    ...typographyStyles.caption2Strong
+});
+const useDividerBaseClassName = makeResetStyles({
+    backgroundColor: tokens.colorNeutralStroke2,
+    height: '16px',
+    margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,
+    width: '1px'
+});
+const useGraphicBaseClassName = makeResetStyles({
+    display: 'inline-flex',
+    fontSize: GRAPHIC_SIZE,
+    height: GRAPHIC_SIZE,
+    lineHeight: GRAPHIC_SIZE,
+    width: GRAPHIC_SIZE,
+    [`> .${referenceExtraClassNames.graphicChild}`]: {
+        height: GRAPHIC_SIZE,
+        width: GRAPHIC_SIZE
+    }
+});
+const useContentBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    columnGap: tokens.spacingHorizontalSNudge,
+    display: 'inline-flex',
+    textAlign: 'start',
+    wordBreak: 'break-word',
+    ...typographyStyles.caption1
+});
+/**
+ * Apply styling to the Reference slots based on the state
+ */ export const useReferenceStyles_unstable = (state)=>{
+    'use no memo';
+    const { designVersion } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootNextStyles = useRootNextStyles();
+    const citationBaseClassName = useCitationBaseClassName();
+    const dividerBaseClassName = useDividerBaseClassName();
+    const contentBaseClassName = useContentBaseClassName();
+    const graphicBaseClassName = useGraphicBaseClassName();
+    state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
+    if (state.citation) {
+        state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
+    }
+    if (state.divider) {
+        state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
+    }
+    if (state.content) {
+        state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);
+    }
+    if (state.graphic) {
+        state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
+    }
+    return state;
+};

package/lib/components/Reference/useReferenceStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

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

@@ -0,0 +1 @@

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

package/lib/components/ReferenceList/ReferenceList.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { };

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

@@ -0,0 +1 @@

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

package/lib/components/ReferenceList/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export { ReferenceList } from './ReferenceList';
+export { renderReferenceList_unstable } from './renderReferenceList';
+export { useReferenceList_unstable } from './useReferenceList';
+export { referenceListClassNames, useReferenceListStyles_unstable } from './useReferenceListStyles.styles';

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["index.ts"],"sourcesContent":["export { ReferenceList } from './ReferenceList';\nexport type { ReferenceListContextValues, ReferenceListProps, ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nexport { renderReferenceList_unstable } from './renderReferenceList';\nexport { useReferenceList_unstable } from './useReferenceList';\nexport { referenceListClassNames, useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\n"],"names":["ReferenceList","renderReferenceList_unstable","useReferenceList_unstable","referenceListClassNames","useReferenceListStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}

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

@@ -0,0 +1,22 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { Overflow, assertSlots } from '@fluentui/react-components';
+import { ReferenceListContextProvider } from '../../contexts/referenceListContext';
+/**
+ * Render the final JSX of ReferenceList
+ */ export const renderReferenceList_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    const { minVisibleReferences } = state;
+    return /*#__PURE__*/ _jsx(ReferenceListContextProvider, {
+        value: contextValues.referenceList,
+        children: /*#__PURE__*/ _jsx(Overflow, {
+            minimumVisible: minVisibleReferences,
+            children: /*#__PURE__*/ _jsxs(state.root, {
+                children: [
+                    /*#__PURE__*/ _jsx(state.arrowableRegion, {}),
+                    state.showMoreButton && /*#__PURE__*/ _jsx(state.showMoreButton, {}),
+                    state.showLessButton && /*#__PURE__*/ _jsx(state.showLessButton, {})
+                ]
+            })
+        })
+    });
+};

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

@@ -0,0 +1 @@

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