@fluentui-copilot/react-reference 0.12.0 → 0.12.2

package/lib/utilities/reference-v2/generateReferenceCitationPreview.js

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';
+import { Preview, PreviewContent, PreviewHeader, PreviewMetadata, PreviewSurface, PreviewTrigger } from '@fluentui-copilot/react-preview';
+import { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';
+import { Citation } from '../../Citation';
+import { Reference } from '../../ReferenceV2';
+// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.
+const CitationCloseButton = citationCloseButtonProps => {
+  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);
+  const onPopoverCloseClick = React.useCallback(ev => {
+    setPopoverOpen(ev, false);
+    // Don't navigate
+    ev.preventDefault();
+  }, [setPopoverOpen]);
+  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);
+  return /*#__PURE__*/React.createElement(Citation, {
+    ...citationCloseButtonProps,
+    onClick: onCitationCloseButtonClick
+  });
+};
+/**
+ * Function to generate a Citation - Reference pair with correctly wired props.
+ * Both the Citation and the Reference act as trigger components to Previews that are also correctly wired by the function.
+ * Props can either be passed in to the function or applied directly to the generated components in JSX.
+ *
+ * A `useReferenceCitationPreview` hook exists that calls this function and memoizes its return value based on the props.
+ * You should use the hook when the props used to generate the Citation - Reference pair can change dynamically.
+ * If they are static, or in case you wanted to generate multiple pairs within a cycle, you should call
+ * `generateReferenceCitationPreview` directly.
+ *
+ * @returns A Citation - Reference pair with correctly wired props.
+ */
+export const generateReferenceCitationPreview = props => {
+  const {
+    citationPreviewProps,
+    citationPreviewSurfaceProps,
+    citationProps,
+    index,
+    previewContentProps,
+    previewHeaderProps,
+    referencePreviewProps,
+    referencePreviewSurfaceProps,
+    referenceProps,
+    sensitivityLabelProps
+  } = props;
+  const CitationWithPreview = props => {
+    var _previewContentProps_content;
+    return /*#__PURE__*/React.createElement(Preview, {
+      closeOnScroll: true,
+      positioning: "below",
+      size: "small",
+      trapFocus: true,
+      withArrow: true,
+      ...citationPreviewProps
+    }, /*#__PURE__*/React.createElement(PreviewTrigger, null, /*#__PURE__*/React.createElement(Citation, {
+      ...citationProps,
+      ...props
+    }, index)), /*#__PURE__*/React.createElement(PreviewSurface, citationPreviewSurfaceProps, /*#__PURE__*/React.createElement(PreviewContent, null, /*#__PURE__*/React.createElement(PreviewHeader, {
+      citation: /*#__PURE__*/React.createElement(CitationCloseButton, {
+        "aria-label": `Reference ${index}, close`,
+        referenceHref: "#",
+        tabIndex: -1
+      }, index),
+      media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic
+    }, referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children), /*#__PURE__*/React.createElement(PreviewMetadata, {
+      icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,
+      primaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.primaryText,
+      secondaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.secondaryText,
+      tertiaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.tertiaryText
+    }), sensitivityLabelProps && /*#__PURE__*/React.createElement(SensitivityLabel, sensitivityLabelProps), (_previewContentProps_content = previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.content) !== null && _previewContentProps_content !== void 0 ? _previewContentProps_content : citationPreviewProps === null || citationPreviewProps === void 0 ? void 0 : citationPreviewProps.children)));
+  };
+  const ReferenceWithPreview = props => {
+    const mergedReferenceProps = {
+      citation: index,
+      ...referenceProps,
+      ...props
+    };
+    var _previewHeaderProps_children, _previewContentProps_content;
+    return /*#__PURE__*/React.createElement(Preview, {
+      closeOnScroll: true,
+      positioning: "below",
+      size: "small",
+      trapFocus: true,
+      withArrow: true,
+      ...referencePreviewProps
+    }, /*#__PURE__*/React.createElement(PreviewTrigger, null, /*#__PURE__*/React.createElement(Reference, mergedReferenceProps)), /*#__PURE__*/React.createElement(PreviewSurface, referencePreviewSurfaceProps, /*#__PURE__*/React.createElement(PreviewContent, null, /*#__PURE__*/React.createElement(PreviewHeader, {
+      citation: /*#__PURE__*/React.createElement(CitationCloseButton, {
+        "aria-label": `Reference ${index}, close`,
+        referenceHref: "#",
+        tabIndex: -1
+      }, index),
+      media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
+      ...previewHeaderProps
+    }, (_previewHeaderProps_children = previewHeaderProps === null || previewHeaderProps === void 0 ? void 0 : previewHeaderProps.children) !== null && _previewHeaderProps_children !== void 0 ? _previewHeaderProps_children : referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children), /*#__PURE__*/React.createElement(PreviewMetadata, {
+      icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,
+      primaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.primaryText,
+      secondaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.secondaryText,
+      tertiaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.tertiaryText
+    }), sensitivityLabelProps && /*#__PURE__*/React.createElement(SensitivityLabel, sensitivityLabelProps), (_previewContentProps_content = previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.content) !== null && _previewContentProps_content !== void 0 ? _previewContentProps_content : referencePreviewProps === null || referencePreviewProps === void 0 ? void 0 : referencePreviewProps.children)));
+  };
+  const components = {
+    Citation: CitationWithPreview,
+    Reference: ReferenceWithPreview
+  };
+  return components;
+};
+//# sourceMappingURL=generateReferenceCitationPreview.js.map

package/lib/utilities/reference-v2/generateReferenceCitationPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["generateReferenceCitationPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n  Preview,\n  PreviewContent,\n  PreviewHeader,\n  PreviewMetadata,\n  PreviewSurface,\n  PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n  PreviewHeaderProps,\n  PreviewMetadataProps,\n  PreviewProps,\n  PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n  PreviewMetadataProps,\n  'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n  content?: React.ReactNode;\n};\n\nexport type ReferenceCitationPreviewGeneratorProps = {\n  citationPreviewProps?: PreviewProps;\n  citationPreviewSurfaceProps?: PreviewSurfaceProps;\n  citationProps?: CitationProps;\n  index: number;\n  previewContentProps?: PackagedPreviewContentProps;\n  previewHeaderProps?: PreviewHeaderProps;\n  referencePreviewProps?: PreviewProps;\n  referencePreviewSurfaceProps?: PreviewSurfaceProps;\n  referenceProps?: ReferenceProps;\n  sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type ReferenceCitationPreviewGenerator = (props: ReferenceCitationPreviewGeneratorProps) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n  const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n    ev => {\n      setPopoverOpen(ev, false);\n\n      // Don't navigate\n      ev.preventDefault();\n    },\n    [setPopoverOpen],\n  );\n\n  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n  return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\n/**\n * Function to generate a Citation - Reference pair with correctly wired props.\n * Both the Citation and the Reference act as trigger components to Previews that are also correctly wired by the function.\n * Props can either be passed in to the function or applied directly to the generated components in JSX.\n *\n * A `useReferenceCitationPreview` hook exists that calls this function and memoizes its return value based on the props.\n * You should use the hook when the props used to generate the Citation - Reference pair can change dynamically.\n * If they are static, or in case you wanted to generate multiple pairs within a cycle, you should call\n * `generateReferenceCitationPreview` directly.\n *\n * @returns A Citation - Reference pair with correctly wired props.\n */\nexport const generateReferenceCitationPreview: ReferenceCitationPreviewGenerator = props => {\n  const {\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    previewContentProps,\n    previewHeaderProps,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    sensitivityLabelProps,\n  } = props;\n\n  const CitationWithPreview: PackagedCitation = props => {\n    return (\n      <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n        <PreviewTrigger>\n          <Citation {...citationProps} {...props}>\n            {index}\n          </Citation>\n        </PreviewTrigger>\n        <PreviewSurface {...citationPreviewSurfaceProps}>\n          <PreviewContent>\n            <PreviewHeader\n              citation={\n                <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                  {index}\n                </CitationCloseButton>\n              }\n              media={referenceProps?.graphic as PreviewHeaderProps['media']}\n            >\n              {referenceProps?.children}\n            </PreviewHeader>\n            <PreviewMetadata\n              icon={previewContentProps?.icon}\n              primaryText={previewContentProps?.primaryText}\n              secondaryText={previewContentProps?.secondaryText}\n              tertiaryText={previewContentProps?.tertiaryText}\n            />\n            {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n            {previewContentProps?.content ?? citationPreviewProps?.children}\n          </PreviewContent>\n        </PreviewSurface>\n      </Preview>\n    );\n  };\n\n  const ReferenceWithPreview: PackagedReference = props => {\n    const mergedReferenceProps = {\n      citation: index,\n      ...referenceProps,\n      ...props,\n    } as ReferenceProps;\n\n    return (\n      <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...referencePreviewProps}>\n        <PreviewTrigger>\n          <Reference {...mergedReferenceProps} />\n        </PreviewTrigger>\n        <PreviewSurface {...referencePreviewSurfaceProps}>\n          <PreviewContent>\n            <PreviewHeader\n              citation={\n                <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                  {index}\n                </CitationCloseButton>\n              }\n              media={referenceProps?.graphic as PreviewHeaderProps['media']}\n              {...previewHeaderProps}\n            >\n              {previewHeaderProps?.children ?? referenceProps?.children}\n            </PreviewHeader>\n            <PreviewMetadata\n              icon={previewContentProps?.icon}\n              primaryText={previewContentProps?.primaryText}\n              secondaryText={previewContentProps?.secondaryText}\n              tertiaryText={previewContentProps?.tertiaryText}\n            />\n            {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n            {previewContentProps?.content ?? referencePreviewProps?.children}\n          </PreviewContent>\n        </PreviewSurface>\n      </Preview>\n    );\n  };\n\n  const components = {\n    Citation: CitationWithPreview,\n    Reference: ReferenceWithPreview,\n  };\n\n  return components;\n};\n"],"names":["React","mergeCallbacks","usePopoverContext_unstable","Preview","PreviewContent","PreviewHeader","PreviewMetadata","PreviewSurface","PreviewTrigger","SensitivityLabel","Citation","Reference","CitationCloseButton","citationCloseButtonProps","setPopoverOpen","context","setOpen","onPopoverCloseClick","useCallback","ev","preventDefault","onCitationCloseButtonClick","onClick","generateReferenceCitationPreview","props","citationPreviewProps","citationPreviewSurfaceProps","citationProps","index","previewContentProps","previewHeaderProps","referencePreviewProps","referencePreviewSurfaceProps","referenceProps","sensitivityLabelProps","CitationWithPreview","closeOnScroll","positioning","size","trapFocus","withArrow","citation","aria-label","referenceHref","tabIndex","media","graphic","children","icon","primaryText","secondaryText","tertiaryText","content","ReferenceWithPreview","mergedReferenceProps","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,6BAA6B;AAExF,SACEC,OAAO,EACPC,cAAc,EACdC,aAAa,EACbC,eAAe,EACfC,cAAc,EACdC,cAAc,QACT,kCAAkC;AACzC,SAASC,gBAAgB,QAAQ,4CAA4C;AAS7E,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAiC9C,6IAA6I;AAC7I,MAAMC,sBAAsB,CAACC;IAC3B,MAAMC,iBAAiBZ,2BAA2Ba,CAAAA,UAAWA,QAAQC,OAAO;IAE5E,MAAMC,sBAAsBjB,MAAMkB,WAAW,CAC3CC,CAAAA;QACEL,eAAeK,IAAI;QAEnB,iBAAiB;QACjBA,GAAGC,cAAc;IACnB,GACA;QAACN;KAAe;IAGlB,MAAMO,6BAA6BpB,eAAegB,qBAAqBJ,yBAAyBS,OAAO;IAEvG,qBAAO,oBAACZ;QAAU,GAAGG,wBAAwB;QAAES,SAASD;;AAC1D;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAME,mCAAsEC,CAAAA;IACjF,MAAM,EACJC,oBAAoB,EACpBC,2BAA2B,EAC3BC,aAAa,EACbC,KAAK,EACLC,mBAAmB,EACnBC,kBAAkB,EAClBC,qBAAqB,EACrBC,4BAA4B,EAC5BC,cAAc,EACdC,qBAAqB,EACtB,GAAGV;IAEJ,MAAMW,sBAAwCX,CAAAA;YA2BnCK;QA1BT,qBACE,oBAAC1B;YAAQiC,eAAAA;YAAcC,aAAY;YAAQC,MAAK;YAAQC,WAAAA;YAAUC,WAAAA;YAAW,GAAGf,oBAAoB;yBAClG,oBAACjB,oCACC,oBAACE;YAAU,GAAGiB,aAAa;YAAG,GAAGH,KAAK;WACnCI,uBAGL,oBAACrB,gBAAmBmB,2CAClB,oBAACtB,oCACC,oBAACC;YACCoC,wBACE,oBAAC7B;gBAAoB8B,cAAY,CAAC,UAAU,EAAEd,MAAM,OAAO,CAAC;gBAAEe,eAAc;gBAAIC,UAAU,CAAC;eACxFhB;YAGLiB,KAAK,EAAEZ,2BAAAA,qCAAAA,eAAgBa,OAAO;WAE7Bb,2BAAAA,qCAAAA,eAAgBc,QAAQ,iBAE3B,oBAACzC;YACC0C,IAAI,EAAEnB,gCAAAA,0CAAAA,oBAAqBmB,IAAI;YAC/BC,WAAW,EAAEpB,gCAAAA,0CAAAA,oBAAqBoB,WAAW;YAC7CC,aAAa,EAAErB,gCAAAA,0CAAAA,oBAAqBqB,aAAa;YACjDC,YAAY,EAAEtB,gCAAAA,0CAAAA,oBAAqBsB,YAAY;YAEhDjB,uCAAyB,oBAACzB,kBAAqByB,wBAC/CL,CAAAA,+BAAAA,gCAAAA,0CAAAA,oBAAqBuB,OAAO,cAA5BvB,0CAAAA,+BAAgCJ,iCAAAA,2CAAAA,qBAAsBsB,QAAQ;IAKzE;IAEA,MAAMM,uBAA0C7B,CAAAA;QAC9C,MAAM8B,uBAAuB;YAC3Bb,UAAUb;YACV,GAAGK,cAAc;YACjB,GAAGT,KAAK;QACV;YAkBWM,8BASFD;QAzBT,qBACE,oBAAC1B;YAAQiC,eAAAA;YAAcC,aAAY;YAAQC,MAAK;YAAQC,WAAAA;YAAUC,WAAAA;YAAW,GAAGT,qBAAqB;yBACnG,oBAACvB,oCACC,oBAACG,WAAc2C,sCAEjB,oBAAC/C,gBAAmByB,4CAClB,oBAAC5B,oCACC,oBAACC;YACCoC,wBACE,oBAAC7B;gBAAoB8B,cAAY,CAAC,UAAU,EAAEd,MAAM,OAAO,CAAC;gBAAEe,eAAc;gBAAIC,UAAU,CAAC;eACxFhB;YAGLiB,KAAK,EAAEZ,2BAAAA,qCAAAA,eAAgBa,OAAO;YAC7B,GAAGhB,kBAAkB;WAErBA,CAAAA,+BAAAA,+BAAAA,yCAAAA,mBAAoBiB,QAAQ,cAA5BjB,0CAAAA,+BAAgCG,2BAAAA,qCAAAA,eAAgBc,QAAQ,iBAE3D,oBAACzC;YACC0C,IAAI,EAAEnB,gCAAAA,0CAAAA,oBAAqBmB,IAAI;YAC/BC,WAAW,EAAEpB,gCAAAA,0CAAAA,oBAAqBoB,WAAW;YAC7CC,aAAa,EAAErB,gCAAAA,0CAAAA,oBAAqBqB,aAAa;YACjDC,YAAY,EAAEtB,gCAAAA,0CAAAA,oBAAqBsB,YAAY;YAEhDjB,uCAAyB,oBAACzB,kBAAqByB,wBAC/CL,CAAAA,+BAAAA,gCAAAA,0CAAAA,oBAAqBuB,OAAO,cAA5BvB,0CAAAA,+BAAgCE,kCAAAA,4CAAAA,sBAAuBgB,QAAQ;IAK1E;IAEA,MAAMQ,aAAa;QACjB7C,UAAUyB;QACVxB,WAAW0C;IACb;IAEA,OAAOE;AACT,EAAE"}

package/lib/utilities/reference-v2/index.js

@@ -0,0 +1,3 @@
+export * from './generateReferenceCitationPreview';
+export * from './useReferenceCitationPreview';
+//# sourceMappingURL=index.js.map

package/lib/utilities/reference-v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './generateReferenceCitationPreview';\nexport * from './useReferenceCitationPreview';\n"],"names":[],"rangeMappings":";","mappings":"AAAA,cAAc,qCAAqC;AACnD,cAAc,gCAAgC"}

package/lib/utilities/reference-v2/useReferenceCitationPreview.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { generateReferenceCitationPreview } from './generateReferenceCitationPreview';
+/**
+ * Hook to generate a Citation - Reference pair with correctly wired props.
+ * Both the Citation and the Reference act as trigger components to Previews that are also correctly wired by the hook.
+ * Props can either be passed in to the hook or applied directly to the generated components in JSX.
+ *
+ * This hook internally calls the `generateReferenceCitationPreview` function and memoizes its return value based on the props.
+ * You should only use this hook when the props used to generate the Citation - Reference pair can change dynamically.
+ * If they are static, or in case you wanted to generate multiple pairs within a cycle, you should call
+ * `generateReferenceCitationPreview` directly.
+ *
+ * @returns A Citation - Reference pair with correctly wired props.
+ */
+export const useReferenceCitationPreview = props => {
+  return React.useMemo(() => generateReferenceCitationPreview(props), [props]);
+};
+//# sourceMappingURL=useReferenceCitationPreview.js.map

package/lib/utilities/reference-v2/useReferenceCitationPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport {\n  generateReferenceCitationPreview,\n  type ReferenceCitationPreviewGenerator,\n  type ReferenceCitationPreviewGeneratorProps,\n} from './generateReferenceCitationPreview';\n\nexport type UseReferenceCitationPreviewProps = ReferenceCitationPreviewGeneratorProps;\n\nexport type UseReferenceCitationPreview = ReferenceCitationPreviewGenerator;\n\n/**\n * Hook to generate a Citation - Reference pair with correctly wired props.\n * Both the Citation and the Reference act as trigger components to Previews that are also correctly wired by the hook.\n * Props can either be passed in to the hook or applied directly to the generated components in JSX.\n *\n * This hook internally calls the `generateReferenceCitationPreview` function and memoizes its return value based on the props.\n * You should only use this hook when the props used to generate the Citation - Reference pair can change dynamically.\n * If they are static, or in case you wanted to generate multiple pairs within a cycle, you should call\n * `generateReferenceCitationPreview` directly.\n *\n * @returns A Citation - Reference pair with correctly wired props.\n */\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n  return React.useMemo(() => generateReferenceCitationPreview(props), [props]);\n};\n"],"names":["React","generateReferenceCitationPreview","useReferenceCitationPreview","props","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,YAAYA,WAAW,QAAQ;AAE/B,SACEC,gCAAgC,QAG3B,qCAAqC;AAM5C;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,8BAA2DC,CAAAA;IACtE,OAAOH,MAAMI,OAAO,CAAC,IAAMH,iCAAiCE,QAAQ;QAACA;KAAM;AAC7E,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n  props: ReferenceProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n  const { as, children, id } = props;\n\n  const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n  const referenceId = useId('reference-', id);\n\n  const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n  const propsWithAssignedAs = {\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n    id: referenceId,\n  } as ReferenceProps;\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const graphic = slot.optional(props.graphic, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: graphic !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: 'button',\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      }),\n      { elementType },\n    ),\n    citation,\n    divider,\n    content,\n    graphic,\n  };\n\n  if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n    state.graphic.children = React.cloneElement(state.graphic.children, {\n      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["as","props","children","elementType","id","shouldUseOverflow","useReferenceListContext_unstable","ctx","referenceId","propsWithAssignedAs","type","citation","optional","slot","content","renderByDefault","graphic","undefined","ref","always","getIntrinsicElementProps","divider","state","React","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBUA;;;eAAAA;;;;iEAnBa;iCAC6C;sCACnB;0CACR;AAgBvC,MAAQA,wBAAqBC,CAAAA,OAAAA;UAE7B,EAEAD,EAAA,EAEAE,QAAMC,EACNC,EAAA;UAEEC,oBAAQC,IAAAA,sDAAA,EAAAC,CAAAA,MAAAA,IAAAF,iBAAA;UACRL,cAAIG,IAAAA,sBAAAA,EAAAA,cAAAA;UACJC,cAAII,MAAAA,CAAAA,MAAAA,IAAAA,GAAAA,MAAAA,QAAAA;UACNC,sBAAA;QAEAC,MAAMC,gBAAgBC,WAASX,WAAMU;gBAAYR;QAAoBH,IAAAG;QACrEC,IAAAI;;UAAmEG,WAAAE,qBAAA,CAAAD,QAAA,CAAAX,MAAAU,QAAA,EAAA;QACnER,aAAMW;;UAEJC,UAAAA,qBAAAA,CAAAA,QAAiBC,CAAAA,MAAYC,OAAAA,EAAAA;QAC/Bd,aAAA;;UAEEA,UAAAA,qBAAa,CAAAS,QAAA,CAAAX,MAAAa,OAAA,EAAA;qBACbC;QACFA,iBAAAC,YAAAC,aAAA,CAAA,CAAAf;;UAGEE,UAAII,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,OAAAA,EAAAA;qBACJH;yBAEYM,aAAAM,aAAAH,YAAAG;;kBAEVN;;;oBAGAG;kBACF;sBAEMD;qBAEFK;qBACGT;qBAEL;;cAAcI,qBAAA,CAAAM,MAAA,CAAAC,IAAAA,yCAAA,EAAAjB,aAAA;;eAGhBkB,mBAAAA;YACAP;;QAEF;QAEAH;;;;;QAMAW,MAAOA,OAAAA,kBAAAA,OAAAA,cAAAA,CAAAA,MAAAA,OAAAA,CAAAA,QAAAA,GAAAA;QACPA,MAAAN,OAAA,CAAAd,QAAA,iBAAAqB,OAAAC,YAAA,CAAAF,MAAAN,OAAA,CAAAd,QAAA,EAAA"}
+{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n  props: ReferenceProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n  const { as, children, id } = props;\n\n  const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n  const referenceId = useId('reference-', id);\n\n  const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n  const propsWithAssignedAs = {\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n    id: referenceId,\n  } as ReferenceProps;\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const graphic = slot.optional(props.graphic, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: graphic !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: elementType,\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      }),\n      { elementType },\n    ),\n    citation,\n    divider,\n    content,\n    graphic,\n  };\n\n  if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n    state.graphic.children = React.cloneElement(state.graphic.children, {\n      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["as","props","children","elementType","id","shouldUseOverflow","useReferenceListContext_unstable","ctx","referenceId","propsWithAssignedAs","type","citation","optional","slot","content","renderByDefault","graphic","undefined","ref","always","getIntrinsicElementProps","divider","state","React","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBUA;;;eAAAA;;;;iEAnBa;iCAC6C;sCACnB;0CACR;AAgBvC,MAAQA,wBAAqBC,CAAAA,OAAAA;UAE7B,EAEAD,EAAA,EAEAE,QAAMC,EACNC,EAAA;UAEEC,oBAAQC,IAAAA,sDAAA,EAAAC,CAAAA,MAAAA,IAAAF,iBAAA;UACRL,cAAIG,IAAAA,sBAAAA,EAAAA,cAAAA;UACJC,cAAII,MAAAA,CAAAA,MAAAA,IAAAA,GAAAA,MAAAA,QAAAA;UACNC,sBAAA;QAEAC,MAAMC,gBAAgBC,WAASX,WAAMU;gBAAYR;QAAoBH,IAAAG;QACrEC,IAAAI;;UAAmEG,WAAAE,qBAAA,CAAAD,QAAA,CAAAX,MAAAU,QAAA,EAAA;QACnER,aAAMW;;UAEJC,UAAAA,qBAAAA,CAAAA,QAAiBC,CAAAA,MAAYC,OAAAA,EAAAA;QAC/Bd,aAAA;;UAEEA,UAAAA,qBAAa,CAAAS,QAAA,CAAAX,MAAAa,OAAA,EAAA;qBACbC;QACFA,iBAAAC,YAAAC,aAAA,CAAA,CAAAf;;UAGEE,UAAII,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,OAAAA,EAAAA;qBACJH;yBAEYM,aAAAM,aAAAH,YAAAG;;kBAEVN;;;oBAGAG;kBACFX;sBAEMU;qBAEFK;qBACGT;qBAEL;;cAAcI,qBAAA,CAAAM,MAAA,CAAAC,IAAAA,yCAAA,EAAAjB,aAAA;;eAGhBkB,mBAAAA;YACAP;;QAEF;QAEAH;;;;;QAMAW,MAAOA,OAAAA,kBAAAA,OAAAA,cAAAA,CAAAA,MAAAA,OAAAA,CAAAA,QAAAA,GAAAA;QACPA,MAAAN,OAAA,CAAAd,QAAA,iBAAAqB,OAAAC,YAAA,CAAAF,MAAAN,OAAA,CAAAd,QAAA,EAAA"}

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

@@ -34,19 +34,21 @@ const referenceExtraClassNames = {
     graphicChild: 'fai-Reference__graphicChild'
 };
 const GRAPHIC_SIZE = '16px';
-const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1rjhy11", null, [
-    ".r1rjhy11{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);box-sizing:border-box;color:var(--colorNeutralForeground2);column-gap:var(--spacingHorizontalXXS);display:flex;flex-shrink:0;justify-content:center;max-width:max-content;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);text-decoration:none;}",
-    ".r1rjhy11:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
-    ".r1rjhy11:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}",
-    ".r1rjhy11:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}",
-    ".r1rjhy11:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r19i5hos", null, [
+    ".r19i5hos{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);box-sizing:border-box;color:var(--colorNeutralForeground2);column-gap:var(--spacingHorizontalXXS);display:flex;flex-shrink:0;justify-content:center;max-width:100%;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);text-decoration:none;}",
+    ".r19i5hos:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
+    ".r19i5hos:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}",
+    ".r19i5hos:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}",
+    ".r19i5hos:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"
 ]);
 const useRootStyles = (0, _reactcomponents.__styles)({
     overflow: {
+        B2u0y6b: "f6dzj5z",
         a9b677: "fly5x3f"
     }
 }, {
     d: [
+        ".f6dzj5z{max-width:100%;}",
         ".fly5x3f{width:100%;}"
     ]
 });
@@ -56,12 +58,12 @@ 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 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;}"
+const useGraphicBaseClassName = (0, _reactcomponents.__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 = (0, _reactcomponents.__resetStyles)("r1yvxokd", null, [
-    ".r1yvxokd{column-gap:var(--spacingHorizontalSNudge);display:inline-flex;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
+const useContentBaseClassName = (0, _reactcomponents.__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);}"
 ]);
 const useReferenceStyles_unstable = (state)=>{
     'use no memo';

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  divider: 'fai-Reference__divider',\n  graphic: 'fai-Reference__graphic',\n  content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n  graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground2,\n  columnGap: tokens.spacingHorizontalXXS,\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  maxWidth: 'max-content',\n  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    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","useReferenceStyles_unstable","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","color","colorNeutralForeground2","display","__resetStyles","flexShrink","justifyContent","maxWidth","state","colorNeutralForeground2Hover","citationBaseClassName","tokens","contentBaseClassName","useContentBaseClassName","graphicBaseClassName","useGraphicBaseClassName","className","mergeClasses","rootBaseClassName","borderColor","colorNeutralStroke1Pressed","dividerBaseClassName","overflow","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IAsBXC,2BAAU;eAAVA;;IAfAC,aAAY;eAAZA;;;iCAnB0E;AAIrE,MAAMH,sBAAsD;UACjEI;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMP,2BAA2B;kBACtCQ;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;;;OAGRC;QAAAA;KAAcC;;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,0BAAUH,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;AAKV,MAAAjB,8BAAUqB,CAAAA;;UAGRP,oBAAcQ;UAEdC,wBAAOzB;iCACY0B;UACnBC,uBAAAC;UACFC,uBAAAC;UAEA1B,IAAA,CAAA2B,SAAiB,GAAAC,IAAAA,6BAAA,EAAAhC,oBAAAI,IAAA,EAAA6B,mBAAAV,MAAAnB,IAAA,CAAA2B,SAAA;cACfjB,QAAAA,EAAAA;cACAoB,QAAAA,CAAAA,SAAoBC,GAAAA,IAAAA,6BAAAA,EAAAA,oBAA0B9B,QAAA,EAAAoB,uBAAAF,MAAAlB,QAAA,CAAA0B,SAAA;;cAG5CzB,OAAKN,EAAAA;qBACLc,CAAAA,SAAAA,GAAiBY,IAAAA,6BAAOS,EAAAA,oBAA0B7B,OAAA,EAAA8B,sBAAAb,MAAAjB,OAAA,CAAAyB,SAAA;;QAEtDR,MAAAf,OAAA,EAAA;QACFe,MAAAf,OAAA,CAAAuB,SAAA,GAAAC,IAAAA,6BAAA,EAAAhC,oBAAAQ,OAAA,EAAAmB,sBAAAJ,MAAAf,OAAA,CAAAuB,SAAA;IAEA;QACEM,MAAAA,OAAU,EAAA;cACRC,OAAO,CAAAP,SAAA,GAAAC,IAAAA,6BAAA,EAAAhC,oBAAAO,OAAA,EAAAsB,sBAAAN,MAAAhB,OAAA,CAAAwB,SAAA;;IAEX,OAAGR;AAEH,wDACoC"}
+{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  divider: 'fai-Reference__divider',\n  graphic: 'fai-Reference__graphic',\n  content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n  graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground2,\n  columnGap: tokens.spacingHorizontalXXS,\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  maxWidth: '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 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 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","backgroundColor","colorNeutralBackground3Hover","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","border","borderRadius","columnGap","spacingHorizontalXXS","flexShrink","__resetStyles","justifyContent","maxWidth","minHeight","rootBaseClassName","tokens","dividerBaseClassName","useDividerBaseClassName","contentBaseClassName","useContentBaseClassName","graphicBaseClassName","useGraphicBaseClassName","colorNeutralBackground3Pressed","state","className","borderColor","color","colorNeutralForeground2Pressed","citationBaseClassName","mergeClasses","useRootStyles","makeStyles","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IAuBTC,2BAAwBC;eAAxBD;;IAhBFE,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;cACZZ;QACAa,SAAS;QACTC,QAAAA;;;OAGAC;QAAAA;QAAkBC;KAAoB;;MAEtCC,2BAAYC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACZC,0BAAgBD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAChBE,0BAAUF,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;MACVG,0BAAWH,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAKTlB,8BAAwBC,CAAAA;;UAIxBqB,oBAAOxB;kCACYyB;UACnBC,uBAAAC;UACFC,uBAAAC;UAEAC,uBAAiBC;UACf7B,IAAAA,CAAAA,SAAAA,GAAiBuB,IAAAA,6BAAOO,EAAAA,oBAAAA,IAA8B,EAAAR,mBAAAS,MAAA5B,IAAA,CAAA6B,SAAA;cACtDC,QAAAA,EAAaV;cACbW,QAAOX,CAAAA,SAAOY,GAAAA,IAAAA,6BAAAA,EAAAA,oBAA8B/B,QAAA,EAAAgC,uBAAAL,MAAA3B,QAAA,CAAA4B,SAAA;;cAG1ChC,OAAAA,EAAAA;cACFK,OAAA,CAAA2B,SAAA,GAAAK,IAAAA,6BAAA,EAAAvC,oBAAAO,OAAA,EAAAmB,sBAAAO,MAAA1B,OAAA,CAAA2B,SAAA;;IAEJ,IAAAD,MAAAxB,OAAA,EAAA;QAEAwB,MAAOxB,OAAM+B,CAAAA,SAAAA,GAAgBC,IAAAA,6BAAW,EAAAzC,oBAAAS,OAAA,EAAAmB,sBAAAK,MAAAxB,OAAA,CAAAyB,SAAA;;cAEpCZ,OAAU,EAAA;cACVoB,OAAO,CAAAR,SAAA,GAAAK,IAAAA,6BAAA,EAAAvC,oBAAAQ,OAAA,EAAAsB,sBAAAG,MAAAzB,OAAA,CAAA0B,SAAA;;IAEX,OAAGD;AAEH,wDACoC"}

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

@@ -11,39 +11,20 @@ Object.defineProperty(exports, "useReferenceList_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
+const _reactutilities = require("@fluentui-copilot/react-utilities");
 const _useReferenceStylesstyles = require("../Reference/useReferenceStyles.styles");
 const useReferenceList_unstable = (props, ref)=>{
     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 = [];
-            for(let index = 0; index < childrenArray.length; index++){
-                const child = childrenArray[index];
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                if (index >= maxVisibleReferences && /*#__PURE__*/ _react.isValidElement(child)) {
-                    results.push(/*#__PURE__*/ _react.cloneElement(child, {
-                        ...child.props,
-                        className: (0, _reactcomponents.mergeClasses)(child.props.className, referenceInOverflowClassName)
-                    }));
-                } else {
-                    results.push(child);
-                }
-            }
-            return results;
-        }
-        return children;
-    }, [
-        areReferencesExpanded,
+    const totalReferencesCount = _react.Children.count(children);
+    const styles = (0, _useReferenceStylesstyles.useRootStyles)();
+    const resolvedChildren = (0, _reactutilities.useOverflowMaxVisibleItems)({
+        additionalCondition: !areReferencesExpanded,
         children,
-        childrenArray,
-        maxVisibleReferences,
-        referenceInOverflowClassName
-    ]);
+        maxVisibleItems: maxVisibleReferences,
+        overflowClassName: styles.overflow
+    });
     // We keep track of whether we are interacting with the overflow button via keyboard or not.
     const overflowButtonTriggeredViaKeyboard = _react.useRef(false);
     const focusAttributes = (0, _reactcomponents.useArrowNavigationGroup)({

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  mergeClasses,\n  slot,\n  useArrowNavigationGroup,\n  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"}
+{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["children","maxVisibleReferences","props","showLessButton","referenceListRef","totalReferencesCount","styles","showMoreButton","resolvedChildren","maxVisibleItems","overflowClassName","overflow","React","Children","count","useRootStyles","overflowButtonTriggeredViaKeyboard","useRef","additionalCondition","focusAttributes","memorizeCurrent","setAreReferencesExpanded","useArrowNavigationGroup","axis","onShowLessButtonClick","onShowMoreButtonClick","useCallback","areReferencesExpanded","components","slot","always","getIntrinsicElementProps","shouldUseOverflow","elementType","rest","undefined","optional","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAOhB;gCACoC;0CACb;AAgB5B,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EACNF,cAAMG,EACNC,cAAMC;UAGJC,CAAAA,uBAAiBR,yBAAAA,GAAAA,OAAAA,QAAAA,CAAAA;UACjBS,mBAAmBJ,OAAAA,MAAOK,CAAAA;UAC5BN,uBAAAO,OAAAC,QAAA,CAAAC,KAAA,CAAAd;UAEAM,SAAAS,IAAAA,uCAAA;UACAP,mBAAMQ,IAAAA,0CAA2CC,EAAAA;QAEjDC,qBAAMC,CAAAA;;yBAEMlB;2BACVmB,OAAiBT,QAAA;;gGAGyE;UAC1FU,qCAAyBT,OAAAK,MAAA,CAAA;UACxBE,kBAAEG,IAAAA,wCAAA,EAAA;QAELC,MAAMC;kBACJH;QACFD,iBAAK;;UAILK,wBAAkCb,OAAAc,WAAA,CAAA;iCAChCC;;UAEA1B,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAG;;UAEAC,oBAAAA,yBAAAA,aAAAA,CAAAA;UAEAuB,QAAAA;;;;;;;oBAQOT;kBACH;4BACUX;4BAEZ;;cAAqBqB,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;iBAEvBxB,IAAAA,8BAAgByB,EAAAA,KAAAA;8BAAoDC;eAAoBC,IAAKC;sBAC7FhC;;yBAAiGgC;QACnG;QAEA5B,gBAAUA,oBAAgBsB,qBAAA,CAAAO,QAAA,CAAA7B,gBAAA;yBAClBA;QACR,KAAA4B;QAEAhC,gBAAUA,wBAAgB0B,qBAAA,CAAAO,QAAA,CAAAjC,gBAAA;yBAClBA;QACR,KAAAgC;;IAGA,IAAAE,MAAA9B,cAAA,EAAA"}

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

@@ -19,13 +19,11 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
     const { children, text } = props;
     const rootRef = _react.useRef(null);
     const [setTimeout] = (0, _reactutilities.useTimeout)();
-    const { areReferencesExpanded, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>({
-            areReferencesExpanded: ctx.areReferencesExpanded,
-            maxVisibleReferences: ctx.maxVisibleReferences,
-            referenceListRef: ctx.referenceListRef,
-            totalReferencesCount: ctx.totalReferencesCount,
-            triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
-        }));
+    const areReferencesExpanded = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.areReferencesExpanded);
+    const maxVisibleReferences = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.maxVisibleReferences);
+    const referenceListRef = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.referenceListRef);
+    const totalReferencesCount = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.totalReferencesCount);
+    const triggeredViaKeyboard = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.overflowButtonTriggeredViaKeyboard);
     const { isOverflowing, overflowCount } = (0, _reactcomponents.useOverflowMenu)();
     const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
     const { findFirstFocusable, findNextFocusable } = (0, _reactcomponents.useFocusFinders)();

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const { areReferencesExpanded, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } =\n    useReferenceListContext_unstable(ctx => ({\n      areReferencesExpanded: ctx.areReferencesExpanded,\n      maxVisibleReferences: ctx.maxVisibleReferences,\n      referenceListRef: ctx.referenceListRef,\n      totalReferencesCount: ctx.totalReferencesCount,\n      triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n    }));\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n  const previousOverflow = React.useRef(0);\n\n  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(() => {\n    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n      let elementToFocus: HTMLElement | null | undefined;\n\n      // If the references are collapsed, we move focus to the overflow button.\n      if (!areReferencesExpanded) {\n        elementToFocus = rootRef.current;\n        previousOverflow.current = overflowCount;\n      }\n      // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n      // We do this by moving focus according to the following heuristics:\n      // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n      // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n      else if (rootRef.current && referenceListRef.current) {\n        const positionToFocus =\n          maxVisibleReferences < totalReferencesCount - previousOverflow.current\n            ? maxVisibleReferences\n            : totalReferencesCount - previousOverflow.current;\n\n        let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n        for (let i = 0; i < positionToFocus && currentElement; i++) {\n          currentElement = findNextFocusable(currentElement);\n        }\n\n        elementToFocus = currentElement;\n      }\n\n      // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n      setTimeout(() => {\n        elementToFocus?.focus();\n        triggeredViaKeyboard.current = false;\n      }, 0);\n    }\n  }, [\n    areReferencesExpanded,\n    findFirstFocusable,\n    findNextFocusable,\n    isOverflowing,\n    maxVisibleReferences,\n    overflowCount,\n    referenceListRef,\n    setTimeout,\n    totalReferencesCount,\n    triggeredViaKeyboard,\n  ]);\n\n  const state: ReferenceOverflowButtonState = {\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["useReferenceOverflowButton_unstable","props","ref","children","areReferencesExpanded","referenceListRef","ctx","totalReferencesCount","maxVisibleReferences","isOverflowing","processedText","findFirstFocusable","triggeredViaKeyboard","React","Space","overflowButtonTriggeredViaKeyboard","useEffect","undefined","text","overflowCount","elementToFocus","previousOverflow","current","Enter","rootRef","positionToFocus","i","currentElement","useRef","findNextFocusable","focus","shouldRenderOverflowButton","setTimeout","state","getIntrinsicElementProps","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BEA;;;eAAAA;;;;iEA3BqB;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAEAC,QAAQC;oBAIJC,OAAAA,MAAkBC,CAAAA;sBAClBC,GAAAA,IAAAA,0BAAAA;iCAEF,EAEFC,oBAAQC,EAERJ,gBAAMK,EAENH,oBAAQI,EACRC,oBAAkBC,+DAEgB,EAAAP,CAAAA,MAAKQ,CAAAA;mCACjCF,IAAAA,qBAA+B;kCACjCN,IAAAE,oBAAA;YACFH,kBACAC,IAAAD,gBAAA;kCAACO,IAAAA,oBAAAA;kCAAqBN,IAAAS,kCAAA;;UAIxB,EAEAN,aAAA,EACAI,aAAMG,yCACJ;UACAN,gBAAIF,aAAyBS,QAAAA,aAAaL,KAAAA,IAAAA,WAA4B,OAAEM,SAAA,aAAAA,KAAAC,iBAAAD;8BAGtE,mBACKd,yCACHgB;sBACAC,OAAAA,WAAiBC,CAAAA,CAAAA;kBACnB,KAKKC,mBAAIC,IAAAA,GAAQF,GAAAA,KAAOR,mBAAIT,EAAAA;iCACpBoB,OAAAA,GAAAA;;;;KAMGC;8IAC4BC;6BACrCd,OAAAe,MAAA,CAAA;oHAEiBD;oBACnB,CAAA;uHAEA;qCACWV,aAAAL,qBAAAU,OAAA,EAAA;;qFAEsB;wCAC9B;gBACLF,iBAAAI,QAAAF,OAAA;gBACCD,iBAAAC,OAAA,GAAAH;mBACDf,IAAAA,QAAAA,OAAAA,IAAAA,iBAAAA,OAAAA,EAAAA;gBACAO,MAAAA,kBAAAA,uBAAAA,uBAAAA,iBAAAA,OAAAA,GAAAA,uBAAAA,uBAAAA,iBAAAA,OAAAA;gBACAkB,IAAAA,iBAAAA,mBAAAA,iBAAAA,OAAAA;gBACApB,IAAAA,IAAAA,IAAAA,GAAAA,IAAAA,mBAAAA,gBAAAA,IAAAA;oBACAD,iBAAAA,kBAAAA;gBACAW;gBACAd,iBAAAA;;2JAEAE;uBACAK;gBACDQ,mBAAA,QAAAA,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAU,KAAA;gBAEDlB,qBAA4CU,OAAA,GAAA;eAC1CS;;;;QAGQpB;QAAAkB;QAAApB;QAAAD;QAAAW;QAAAd;QAAA2B;QAAAzB;QAAAK;KAAA;UACRqB,QAAA;oCAGEC,iBAAAA;oBACEhC;kBACA;;mCAGAiC,CAAAA,MAAAA,CAAAA,IAAAA,yCAAc,EAAA,UAAA;mDACZhC,EAAAA,SAAUO;oBACZ;;0BAEF;gBAEJP,UAAAO;YAEAuB;YAEAG,aAAOH;QACP"}
+{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n\n  const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n  const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n  const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n  const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n  const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n  const previousOverflow = React.useRef(0);\n\n  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(() => {\n    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n      let elementToFocus: HTMLElement | null | undefined;\n\n      // If the references are collapsed, we move focus to the overflow button.\n      if (!areReferencesExpanded) {\n        elementToFocus = rootRef.current;\n        previousOverflow.current = overflowCount;\n      }\n      // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n      // We do this by moving focus according to the following heuristics:\n      // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n      // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n      else if (rootRef.current && referenceListRef.current) {\n        const positionToFocus =\n          maxVisibleReferences < totalReferencesCount - previousOverflow.current\n            ? maxVisibleReferences\n            : totalReferencesCount - previousOverflow.current;\n\n        let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n        for (let i = 0; i < positionToFocus && currentElement; i++) {\n          currentElement = findNextFocusable(currentElement);\n        }\n\n        elementToFocus = currentElement;\n      }\n\n      // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n      setTimeout(() => {\n        elementToFocus?.focus();\n        triggeredViaKeyboard.current = false;\n      }, 0);\n    }\n  }, [\n    areReferencesExpanded,\n    findFirstFocusable,\n    findNextFocusable,\n    isOverflowing,\n    maxVisibleReferences,\n    overflowCount,\n    referenceListRef,\n    setTimeout,\n    totalReferencesCount,\n    triggeredViaKeyboard,\n  ]);\n\n  const state: ReferenceOverflowButtonState = {\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["useReferenceOverflowButton_unstable","props","ref","children","areReferencesExpanded","text","rootRef","totalReferencesCount","setTimeout","triggeredViaKeyboard","useReferenceListContext_unstable","overflowCount","useOverflowMenu","maxVisibleReferences","referenceListRef","findFirstFocusable","useFocusFinders","useCallback","ev","Enter","ctx","overflowButtonTriggeredViaKeyboard","processedText","previousOverflow","findNextFocusable","React","onKeyDown","key","undefined","elementToFocus","current","i","positionToFocus","currentElement","focus","isOverflowing","components","state","shouldRenderOverflowButton","root","getIntrinsicElementProps","useMergedRefs","slot","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BEA;;;eAAAA;;;;iEA3BqB;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAGAC,QAAMC,EACNC,IAAA,KACAJ;UACAK,UAAMC,OAAAA,MAAAA,CAAAA;UACN,CAAAC,WAAMC,GAAAA,IAAAA,0BAAuBC;UAE7BN,wBAAuBO,IAAAA,sDAAkBC,EAAAA,CAAAA,MAAAA,IAAAA,qBAAAA;UAEzCC,uBAAsBV,IAAAA,sDAAAA,EAAAA,CAAAA,MAAAA,IAAAA,oBAAoBE;UAE1CS,mBAAQC,IAAAA,sDAA0CC,EAAAA,CAAAA,MAAAA,IAAAA,gBAAAA;UAClDT,uBAAwBU,IAAAA,sDACtBC,EAAAA,CAAAA,MAAAA,IAAAA,oBAAAA;UACET,uBAAeU,IAAAA,sDAA2B,EAAAC,CAAAA,MAAAA,IAAAC,kCAAA;yBAE1C,EACFV,aACA,yCAACF;UAAqBa,gBAAAnB,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAE,SAAA,aAAAA,KAAAM,iBAAAN;UAGxB,EACAU,kBAAMQ,EAENC,iBAAA,KACAC,IAAAA,gCAAgB;UACdC,YAAAD,OAAAR,WAAA,CAAAC,CAAAA;YACAA,GAAAS,GAAId,KAAAA,mBAAAA,IAAAA,GAAAA,GAAAA,KAAyBe,mBAAAA,EAAAA;iCACvBC,OAAAA,GAAAA;;;;KAGCzB;8IAC6B;6BAChCmB,OAAiBO,MAAAA,CAAO;oHAM4B;oBACpD,CAAA;uHAKgG;qCAChFC,aAAIC,qBAAmBC,OAAqB,EAAA;;qFAE5D;wCAEiBA;iCACnB3B,QAAAwB,OAAA;iCAEAA,OAAA,GAAAnB;mBACAH,IAAAA,QAAWsB,OAAA,IAAAhB,iBAAAgB,OAAA,EAAA;wCACTD,uBAAAA,uBAAAA,iBAAgBK,OAAK,GAAArB,uBAAAN,uBAAAgB,iBAAAO,OAAA;qCACrBrB,mBAA+BK,iBAAAgB,OAAA;oBACjC,IAAGC,IAAA,GAAAA,IAAAC,mBAAAC,gBAAAF,IAAA;oBACLE,iBAAAT,kBAAAS;gBACC;gBACD7B,iBAAAA;;2JAEAoB;uBACAW;gBACAtB,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,KAAAA;gBACAF,qBAAAA,OAAAA,GAAAA;eACAG;;;;QAEAP;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;KAAAA;UACAE,QAAAA;oCACD0B,iBAAA/B;QAEDgC,YAAMC;kBACJC;;mCAGEC,CAAAA,MAAM,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBACRC,IAAAA,8BAAA,EAAAnC,SAAAJ;eAEAqC,KAAMG;;0BAGM;gBACVvC,UACAmB;;yBAEInB;;;UAGJoC,IAAA,CAAAb,SAAA,GAAAiB,IAAAA,+BAAA,EAAAjB,WAAAzB,MAAAyB,SAAA;WAEJW;yDAIOA"}

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

@@ -22,10 +22,10 @@ const referenceOverflowButtonClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1xmbzvq", null, [
-    ".r1xmbzvq{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);display:inline-flex;justify-content:center;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}",
-    ".r1xmbzvq:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
-    ".r1xmbzvq:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"
+ */ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1hm0apo", null, [
+    ".r1hm0apo{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);cursor:pointer;display:inline-flex;justify-content:center;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}",
+    ".r1hm0apo:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
+    ".r1hm0apo:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"
 ]);
 const useReferenceOverflowButtonStyles_unstable = (state)=>{
     'use no memo';

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n  root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  display: 'inline-flex',\n  justifyContent: 'center',\n  minHeight: '24px',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  ...typographyStyles.caption1,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n  state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["referenceOverflowButtonClassNames","tokens","root","alignItems","__resetStyles","color","state","minHeight","useRootBaseClassName","padding","className","spacingVerticalXXS","rootBaseClassName","typographyStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,iCAAAA;eAAAA;;IAYJC,yCAA8B;eAA9BA;;;iCAhBuD;AAIzD,MAAMD,oCAAkF;UAC7FE;AACF;AAEA;;CAEC,SAECC,uBAAYC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;CAAA;AAIZC,MAAOJ,4CAA8BK,CAAAA;;UAGrCC,oBAAWC;UACXC,IAAAA,CAASC,SAAGT,GAAOU,IAAAA,6BAAAA,EAAAA,kCAAiDT,IAAA,EAAAU,mBAAAN,MAAAJ,IAAA,CAAAQ,SAAA;WACjEG;sEAGmD"}
+{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n  root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  minHeight: '24px',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  ...typographyStyles.caption1,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n  state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["referenceOverflowButtonClassNames","tokens","root","alignItems","__resetStyles","color","state","justifyContent","useRootBaseClassName","minHeight","mergeClasses","rootBaseClassName","className","padding"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,iCAAAA;eAAAA;;IAYJC,yCAA8B;eAA9BA;;;iCAhBuD;AAIzD,MAAMD,oCAAkF;UAC7FE;AACF;AAEA;;CAEC,SAECC,uBAAYC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;CAAA;AAIZC,MAAOJ,4CAA8BK,CAAAA;;UAGrCC,oBAAgBC;UAChBC,IAAAA,CAAAA,SAAW,GAAAC,IAAAA,6BAAA,EAAAV,kCAAAE,IAAA,EAAAS,mBAAAL,MAAAJ,IAAA,CAAAU,SAAA;WACXC;sEAGU"}

package/lib-commonjs/index.js

@@ -39,6 +39,9 @@ _export(exports, {
     citationClassNames: function() {
         return _Citation.citationClassNames;
     },
+    generateReferenceCitationPreview: function() {
+        return _referencev21.generateReferenceCitationPreview;
+    },
     referenceClassNames: function() {
         return _Reference.referenceClassNames;
     },
@@ -88,13 +91,13 @@ _export(exports, {
         return _Citation.useCitation_unstable;
     },
     useReferenceCitationPreview: function() {
-        return _hooks.useReferenceCitationPreview;
+        return _utilities.useReferenceCitationPreview;
     },
     useReferenceCitationPreviewV2: function() {
         return _referencev21.useReferenceCitationPreview;
     },
     useReferenceGroup: function() {
-        return _hooks.useReferenceGroup;
+        return _utilities.useReferenceGroup;
     },
     useReferenceGroupToggleStyles_unstable: function() {
         return _ReferenceGroupToggle.useReferenceGroupToggleStyles_unstable;
@@ -138,12 +141,12 @@ _export(exports, {
 });
 const _Citation = require("./Citation");
 const _Reference = require("./Reference");
-const _hooks = require("./hooks");
+const _utilities = require("./utilities");
 const _ReferenceList = require("./ReferenceList");
 const _ReferenceGroupToggle = require("./ReferenceGroupToggle");
 const _ReferenceV2 = require("./ReferenceV2");
 const _ReferenceListV2 = require("./ReferenceListV2");
 const _ReferenceOverflowButton = require("./ReferenceOverflowButton");
 const _referencev2 = require("./contexts/reference-v2");
-const _referencev21 = require("./hooks/reference-v2");
+const _referencev21 = require("./utilities/reference-v2");
  //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Citation,\n  citationClassNames,\n  renderCitation_unstable,\n  useCitation_unstable,\n  useCitationStyles_unstable,\n} from './Citation';\nexport {\n  Reference,\n  referenceClassNames,\n  renderReference_unstable,\n  useReference_unstable,\n  useReferenceStyles_unstable,\n} from './Reference';\nexport { useReferenceCitationPreview, useReferenceGroup } from './hooks';\nexport {\n  ReferenceList,\n  referenceListClassNames,\n  useReferenceList_unstable,\n  useReferenceListStyles_unstable,\n  renderReferenceList_unstable,\n} from './ReferenceList';\nexport {\n  ReferenceGroupToggle,\n  referenceGroupToggleClassNames,\n  renderReferenceGroupToggle_unstable,\n  useReferenceGroupToggleStyles_unstable,\n  useReferenceGroupToggle_unstable,\n} from './ReferenceGroupToggle';\n\n// Types\n\nexport type { CitationSlots, CitationProps, CitationState } from './Citation';\nexport type { ReferenceSlots, ReferenceProps, ReferenceState } from './Reference';\nexport type { ReferenceListSlots, ReferenceListProps, ReferenceListState } from './ReferenceList';\nexport type {\n  ReferenceGroupToggleSlots,\n  ReferenceGroupToggleProps,\n  ReferenceGroupToggleState,\n} from './ReferenceGroupToggle';\n\nexport type {\n  PackagedCitationProps,\n  PackagedCitation,\n  PackagedReferenceProps,\n  PackagedReference,\n  ReferenceCitationData,\n  UseReferenceCitationPreview,\n  UseReferenceGroup,\n  UseReferenceGroupProps,\n} from './hooks';\n\n// reference-v2 exports\nexport type {\n  ReferenceProps as ReferenceV2Props,\n  ReferenceSlots as ReferenceV2Slots,\n  ReferenceState as ReferenceV2State,\n} from './ReferenceV2';\nexport {\n  Reference as ReferenceV2,\n  referenceClassNames as referenceV2ClassNames,\n  referenceExtraClassNames as referenceV2ExtraClassNames,\n  renderReference_unstable as renderReferenceV2_unstable,\n  useReferenceStyles_unstable as useReferenceV2Styles_unstable,\n  useReference_unstable as useReferenceV2_unstable,\n} from './ReferenceV2';\n\nexport type {\n  ReferenceListContextValues as ReferenceListV2ContextValues,\n  ReferenceListProps as ReferenceListV2Props,\n  ReferenceListSlots as ReferenceListV2Slots,\n  ReferenceListState as ReferenceListV2State,\n} from './ReferenceListV2';\nexport {\n  ReferenceList as ReferenceListV2,\n  referenceListClassNames as referenceListV2ClassNames,\n  renderReferenceList_unstable as renderReferenceListV2_unstable,\n  useReferenceListStyles_unstable as useReferenceListV2Styles_unstable,\n  useReferenceList_unstable as useReferenceListV2_unstable,\n} from './ReferenceListV2';\n\nexport type {\n  ReferenceOverflowButtonProps,\n  ReferenceOverflowButtonSlots,\n  ReferenceOverflowButtonState,\n} from './ReferenceOverflowButton';\nexport {\n  ReferenceOverflowButton,\n  referenceOverflowButtonClassNames,\n  renderReferenceOverflowButton_unstable,\n  useReferenceOverflowButtonStyles_unstable,\n  useReferenceOverflowButton_unstable,\n} from './ReferenceOverflowButton';\n\nexport type { ReferenceListContextValue } from './contexts/reference-v2';\nexport {\n  ReferenceListContext,\n  ReferenceListContextProvider,\n  useReferenceListContext_unstable,\n} from './contexts/reference-v2';\n\nexport type {\n  PackagedCitation as PackagedCitationV2,\n  PackagedPreviewContentProps as PackagedPreviewContentV2Props,\n  PackagedReference as PackagedReferenceV2,\n  UseReferenceCitationPreview as UseReferenceCitationPreviewV2,\n  UseReferenceCitationPreviewProps as UseReferenceCitationPreviewV2Props,\n} from './hooks/reference-v2';\nexport { useReferenceCitationPreview as useReferenceCitationPreviewV2 } from './hooks/reference-v2';\n"],"names":["Citation","Reference","ReferenceGroupToggle","ReferenceList","ReferenceListContext","ReferenceListContextProvider","ReferenceListV2","ReferenceOverflowButton","ReferenceV2","citationClassNames","referenceClassNames","referenceGroupToggleClassNames","referenceListClassNames","referenceListV2ClassNames","referenceOverflowButtonClassNames","referenceV2ClassNames","referenceV2ExtraClassNames","referenceExtraClassNames","renderCitation_unstable","renderReferenceGroupToggle_unstable","renderReferenceListV2_unstable","renderReferenceList_unstable","renderReferenceOverflowButton_unstable","renderReferenceV2_unstable","renderReference_unstable","useCitationStyles_unstable","useCitation_unstable","useReferenceCitationPreview","useReferenceCitationPreviewV2","useReferenceGroup","useReferenceGroupToggleStyles_unstable","useReferenceGroupToggle_unstable","useReferenceListContext_unstable","useReferenceListStyles_unstable","useReferenceListV2Styles_unstable","useReferenceListV2_unstable","useReferenceList_unstable","useReferenceOverflowButtonStyles_unstable","useReferenceOverflowButton_unstable","useReferenceStyles_unstable","useReferenceV2Styles_unstable","useReferenceV2_unstable","useReference_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAORC,SAAS;eAATA,oBAAS;;IAeTC,oBAAoB;eAApBA,0CAAoB;;IAPpBC,aAAa;eAAbA,4BAAa;;IAgFbC,oBAAoB;eAApBA,iCAAoB;;IACpBC,4BAA4B;eAA5BA,yCAA4B;;IAvBXC,eAAe;eAAhCH,8BAAAA;;IAaAI,uBAAuB;eAAvBA,gDAAuB;;IA5BVC,WAAW;eAAxBP,sBAAAA;;IAzDAQ,kBAAkB;eAAlBA,4BAAkB;;IAOlBC,mBAAmB;eAAnBA,8BAAmB;;IAenBC,8BAA8B;eAA9BA,oDAA8B;;IAP9BC,uBAAuB;eAAvBA,sCAAuB;;IA0DIC,yBAAyB;eAApDD,wCAAAA;;IAaAE,iCAAiC;eAAjCA,0DAAiC;;IA5BVC,qBAAqB;eAA5CL,gCAAAA;;IAC4BM,0BAA0B;eAAtDC,qCAAAA;;IA1DAC,uBAAuB;eAAvBA,iCAAuB;;IAsBvBC,mCAAmC;eAAnCA,yDAAmC;;IAmDHC,8BAA8B;eAA9DC,6CAAAA;;IAxDAA,4BAA4B;eAA5BA,2CAA4B;;IAqE5BC,sCAAsC;eAAtCA,+DAAsC;;IA3BVC,0BAA0B;eAAtDC,qCAAAA;;IApDAA,wBAAwB;eAAxBA,mCAAwB;;IALxBC,0BAA0B;eAA1BA,oCAA0B;;IAD1BC,oBAAoB;eAApBA,8BAAoB;;IAUbC,2BAA2B;eAA3BA,kCAA2B;;IA8FIC,6BAA6B;eAA5DD,yCAAAA;;IA9F6BE,iBAAiB;eAAjBA,wBAAiB;;IAYrDC,sCAAsC;eAAtCA,4DAAsC;;IACtCC,gCAAgC;eAAhCA,sDAAgC;;IAuEhCC,gCAAgC;eAAhCA,6CAAgC;;IA/EhCC,+BAA+B;eAA/BA,8CAA+B;;IA0DIC,iCAAiC;eAApED,gDAAAA;;IAC6BE,2BAA2B;eAAxDC,0CAAAA;;IA5DAA,yBAAyB;eAAzBA,wCAAyB;;IAwEzBC,yCAAyC;eAAzCA,kEAAyC;;IACzCC,mCAAmC;eAAnCA,4DAAmC;;IA/EnCC,2BAA2B;eAA3BA,sCAA2B;;IAmDIC,6BAA6B;eAA5DD,wCAAAA;;IACyBE,uBAAuB;eAAhDC,kCAAAA;;IArDAA,qBAAqB;eAArBA,gCAAqB;;;0BALhB;2BAOA;uBACwD;+BAOxD;sCAOA;6BAqCA;iCAcA;yCAaA;6BAOA;8BASsE"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Citation,\n  citationClassNames,\n  renderCitation_unstable,\n  useCitation_unstable,\n  useCitationStyles_unstable,\n} from './Citation';\nexport {\n  Reference,\n  referenceClassNames,\n  renderReference_unstable,\n  useReference_unstable,\n  useReferenceStyles_unstable,\n} from './Reference';\nexport { useReferenceCitationPreview, useReferenceGroup } from './utilities';\nexport {\n  ReferenceList,\n  referenceListClassNames,\n  useReferenceList_unstable,\n  useReferenceListStyles_unstable,\n  renderReferenceList_unstable,\n} from './ReferenceList';\nexport {\n  ReferenceGroupToggle,\n  referenceGroupToggleClassNames,\n  renderReferenceGroupToggle_unstable,\n  useReferenceGroupToggleStyles_unstable,\n  useReferenceGroupToggle_unstable,\n} from './ReferenceGroupToggle';\n\n// Types\n\nexport type { CitationSlots, CitationProps, CitationState } from './Citation';\nexport type { ReferenceSlots, ReferenceProps, ReferenceState } from './Reference';\nexport type { ReferenceListSlots, ReferenceListProps, ReferenceListState } from './ReferenceList';\nexport type {\n  ReferenceGroupToggleSlots,\n  ReferenceGroupToggleProps,\n  ReferenceGroupToggleState,\n} from './ReferenceGroupToggle';\n\nexport type {\n  PackagedCitationProps,\n  PackagedCitation,\n  PackagedReferenceProps,\n  PackagedReference,\n  ReferenceCitationData,\n  UseReferenceCitationPreview,\n  UseReferenceGroup,\n  UseReferenceGroupProps,\n} from './utilities';\n\n// reference-v2 exports\nexport type {\n  ReferenceProps as ReferenceV2Props,\n  ReferenceSlots as ReferenceV2Slots,\n  ReferenceState as ReferenceV2State,\n} from './ReferenceV2';\nexport {\n  Reference as ReferenceV2,\n  referenceClassNames as referenceV2ClassNames,\n  referenceExtraClassNames as referenceV2ExtraClassNames,\n  renderReference_unstable as renderReferenceV2_unstable,\n  useReferenceStyles_unstable as useReferenceV2Styles_unstable,\n  useReference_unstable as useReferenceV2_unstable,\n} from './ReferenceV2';\n\nexport type {\n  ReferenceListContextValues as ReferenceListV2ContextValues,\n  ReferenceListProps as ReferenceListV2Props,\n  ReferenceListSlots as ReferenceListV2Slots,\n  ReferenceListState as ReferenceListV2State,\n} from './ReferenceListV2';\nexport {\n  ReferenceList as ReferenceListV2,\n  referenceListClassNames as referenceListV2ClassNames,\n  renderReferenceList_unstable as renderReferenceListV2_unstable,\n  useReferenceListStyles_unstable as useReferenceListV2Styles_unstable,\n  useReferenceList_unstable as useReferenceListV2_unstable,\n} from './ReferenceListV2';\n\nexport type {\n  ReferenceOverflowButtonProps,\n  ReferenceOverflowButtonSlots,\n  ReferenceOverflowButtonState,\n} from './ReferenceOverflowButton';\nexport {\n  ReferenceOverflowButton,\n  referenceOverflowButtonClassNames,\n  renderReferenceOverflowButton_unstable,\n  useReferenceOverflowButtonStyles_unstable,\n  useReferenceOverflowButton_unstable,\n} from './ReferenceOverflowButton';\n\nexport type { ReferenceListContextValue } from './contexts/reference-v2';\nexport {\n  ReferenceListContext,\n  ReferenceListContextProvider,\n  useReferenceListContext_unstable,\n} from './contexts/reference-v2';\n\nexport type {\n  PackagedCitation as PackagedCitationV2,\n  PackagedPreviewContentProps as PackagedPreviewContentV2Props,\n  PackagedReference as PackagedReferenceV2,\n  ReferenceCitationPreviewGenerator,\n  ReferenceCitationPreviewGeneratorProps,\n  UseReferenceCitationPreview as UseReferenceCitationPreviewV2,\n  UseReferenceCitationPreviewProps as UseReferenceCitationPreviewV2Props,\n} from './utilities/reference-v2';\nexport {\n  generateReferenceCitationPreview,\n  useReferenceCitationPreview as useReferenceCitationPreviewV2,\n} from './utilities/reference-v2';\n"],"names":["Citation","Reference","ReferenceGroupToggle","ReferenceList","ReferenceListContext","ReferenceListContextProvider","ReferenceListV2","ReferenceOverflowButton","ReferenceV2","citationClassNames","generateReferenceCitationPreview","referenceClassNames","referenceGroupToggleClassNames","referenceListClassNames","referenceListV2ClassNames","referenceOverflowButtonClassNames","referenceV2ClassNames","referenceV2ExtraClassNames","referenceExtraClassNames","renderCitation_unstable","renderReferenceGroupToggle_unstable","renderReferenceListV2_unstable","renderReferenceList_unstable","renderReferenceOverflowButton_unstable","renderReferenceV2_unstable","renderReference_unstable","useCitationStyles_unstable","useCitation_unstable","useReferenceCitationPreview","useReferenceCitationPreviewV2","useReferenceGroup","useReferenceGroupToggleStyles_unstable","useReferenceGroupToggle_unstable","useReferenceListContext_unstable","useReferenceListStyles_unstable","useReferenceListV2Styles_unstable","useReferenceListV2_unstable","useReferenceList_unstable","useReferenceOverflowButtonStyles_unstable","useReferenceOverflowButton_unstable","useReferenceStyles_unstable","useReferenceV2Styles_unstable","useReferenceV2_unstable","useReference_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAORC,SAAS;eAATA,oBAAS;;IAeTC,oBAAoB;eAApBA,0CAAoB;;IAPpBC,aAAa;eAAbA,4BAAa;;IAgFbC,oBAAoB;eAApBA,iCAAoB;;IACpBC,4BAA4B;eAA5BA,yCAA4B;;IAvBXC,eAAe;eAAhCH,8BAAAA;;IAaAI,uBAAuB;eAAvBA,gDAAuB;;IA5BVC,WAAW;eAAxBP,sBAAAA;;IAzDAQ,kBAAkB;eAAlBA,4BAAkB;;IA6GlBC,gCAAgC;eAAhCA,8CAAgC;;IAtGhCC,mBAAmB;eAAnBA,8BAAmB;;IAenBC,8BAA8B;eAA9BA,oDAA8B;;IAP9BC,uBAAuB;eAAvBA,sCAAuB;;IA0DIC,yBAAyB;eAApDD,wCAAAA;;IAaAE,iCAAiC;eAAjCA,0DAAiC;;IA5BVC,qBAAqB;eAA5CL,gCAAAA;;IAC4BM,0BAA0B;eAAtDC,qCAAAA;;IA1DAC,uBAAuB;eAAvBA,iCAAuB;;IAsBvBC,mCAAmC;eAAnCA,yDAAmC;;IAmDHC,8BAA8B;eAA9DC,6CAAAA;;IAxDAA,4BAA4B;eAA5BA,2CAA4B;;IAqE5BC,sCAAsC;eAAtCA,+DAAsC;;IA3BVC,0BAA0B;eAAtDC,qCAAAA;;IApDAA,wBAAwB;eAAxBA,mCAAwB;;IALxBC,0BAA0B;eAA1BA,oCAA0B;;IAD1BC,oBAAoB;eAApBA,8BAAoB;;IAUbC,2BAA2B;eAA3BA,sCAA2B;;IAkGHC,6BAA6B;eAA5DD,yCAAAA;;IAlGoCE,iBAAiB;eAAjBA,4BAAiB;;IAYrDC,sCAAsC;eAAtCA,4DAAsC;;IACtCC,gCAAgC;eAAhCA,sDAAgC;;IAuEhCC,gCAAgC;eAAhCA,6CAAgC;;IA/EhCC,+BAA+B;eAA/BA,8CAA+B;;IA0DIC,iCAAiC;eAApED,gDAAAA;;IAC6BE,2BAA2B;eAAxDC,0CAAAA;;IA5DAA,yBAAyB;eAAzBA,wCAAyB;;IAwEzBC,yCAAyC;eAAzCA,kEAAyC;;IACzCC,mCAAmC;eAAnCA,4DAAmC;;IA/EnCC,2BAA2B;eAA3BA,sCAA2B;;IAmDIC,6BAA6B;eAA5DD,wCAAAA;;IACyBE,uBAAuB;eAAhDC,kCAAAA;;IArDAA,qBAAqB;eAArBA,gCAAqB;;;0BALhB;2BAOA;2BACwD;+BAOxD;sCAOA;6BAqCA;iCAcA;yCAaA;6BAOA;8BAcA"}