@fluentui-copilot/react-reference 0.0.0-nightly-20240424-0405-f2067016.1 → 0.0.0-nightly-20240429-0406-78118c43.1

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

@@ -0,0 +1,71 @@
+import { __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+export const referenceClassNames = {
+  root: 'fai-Reference',
+  citation: 'fai-Reference__citation',
+  divider: 'fai-Reference__divider',
+  media: 'fai-Reference__media',
+  content: 'fai-Reference__content'
+};
+export const referenceExtraClassNames = {
+  mediaChild: 'fai-Reference__mediaChild'
+};
+const MEDIA_SIZE = '16px';
+const useRootBaseClassName = __resetStyles("r1aeqif9", null, [".r1aeqif9{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;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);}", ".r1aeqif9:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1aeqif9:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}", ".r1aeqif9:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r1aeqif9:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"]);
+export const useRootStyles = __styles({
+  darker: {
+    De3pzq: "f3vzo32",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    Jwef8y: "f14vf7cg",
+    iro3zm: "fho4vwd"
+  },
+  overflow: {
+    a9b677: "fly5x3f"
+  }
+}, {
+  d: [".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fly5x3f{width:100%;}"],
+  h: [".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}", ".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"]
+});
+const useCitationBaseClassName = __resetStyles("rzdip90", null, [".rzdip90{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);}"]);
+const useDividerBaseClassName = __resetStyles("r1eyqaw5", null, [".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"]);
+const useDividerStyles = __styles({
+  darker: {
+    De3pzq: "f1d3jkam"
+  }
+}, {
+  d: [".f1d3jkam{background-color:var(--colorNeutralStroke1);}"]
+});
+const useMediaBaseClassName = __resetStyles("r4nw7iy", null, [".r4nw7iy{font-size:16px;height:16px;line-height:16px;width:16px;}", ".r4nw7iy>.fai-Reference__mediaChild{height:16px;width:16px;}"]);
+const useContentBaseClassName = __resetStyles("r1yvxokd", null, [".r1yvxokd{column-gap:var(--spacingHorizontalSNudge);display:inline-flex;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
+/**
+ * Apply styling to the Reference slots based on the state
+ */
+export const useReferenceStyles_unstable = state => {
+  const {
+    appearance
+  } = state;
+  const rootBaseClassName = useRootBaseClassName();
+  const citationBaseClassName = useCitationBaseClassName();
+  const dividerBaseClassName = useDividerBaseClassName();
+  const contentBaseClassName = useContentBaseClassName();
+  const mediaBaseClassName = useMediaBaseClassName();
+  const rootStyles = useRootStyles();
+  const dividerStyles = useDividerStyles();
+  state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
+  if (state.citation) {
+    state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
+  }
+  if (state.divider) {
+    state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, appearance === 'darker' && dividerStyles.darker, state.divider.className);
+  }
+  if (state.content) {
+    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);
+  }
+  if (state.media) {
+    state.media.className = mergeClasses(referenceClassNames.media, mediaBaseClassName, state.media.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useReferenceStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceStyles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  divider: 'fai-Reference__divider',\n  media: 'fai-Reference__media',\n  content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst MEDIA_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground2,\n  columnGap: tokens.spacingHorizontalXXS,\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${referenceClassNames.divider}`]: {\n      backgroundColor: tokens.colorNeutralStroke1Hover,\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n\n    [`& .${referenceClassNames.divider}`]: {\n      backgroundColor: tokens.colorNeutralStroke1Pressed,\n    },\n  },\n});\n\nexport const useRootStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n  overflow: {\n    width: '100%',\n  },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n  ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralStroke2,\n  height: '16px',\n  margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n  width: '1px',\n});\n\nconst useDividerStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralStroke1,\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  fontSize: MEDIA_SIZE,\n  height: MEDIA_SIZE,\n  lineHeight: MEDIA_SIZE,\n  width: MEDIA_SIZE,\n\n  [`> .${referenceExtraClassNames.mediaChild}`]: {\n    height: MEDIA_SIZE,\n    width: MEDIA_SIZE,\n  },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\n  ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(\n      referenceClassNames.citation,\n      citationBaseClassName,\n      state.citation.className,\n    );\n  }\n\n  if (state.divider) {\n    state.divider.className = mergeClasses(\n      referenceClassNames.divider,\n      dividerBaseClassName,\n      appearance === 'darker' && dividerStyles.darker,\n      state.divider.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(referenceClassNames.media, mediaBaseClassName, state.media.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","divider","media","content","referenceExtraClassNames","mediaChild","MEDIA_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","padding","spacingVerticalXXS","spacingHorizontalS","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","darker","colorNeutralBackground5","colorNeutralStroke1","colorNeutralBackground5Hover","colorNeutralBackground5Pressed","overflow","width","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useDividerStyles","useMediaBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","caption1","useReferenceStyles_unstable","state","appearance","rootBaseClassName","citationBaseClassName","dividerBaseClassName","contentBaseClassName","mediaBaseClassName","rootStyles","dividerStyles","className"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReferenceList.types.js.map

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

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

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

@@ -0,0 +1,6 @@
+export * from './ReferenceList';
+export * from './ReferenceList.types';
+export * from './renderReferenceList';
+export * from './useReferenceList';
+export * from './useReferenceListStyles';
+//# sourceMappingURL=index.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n  assertSlots<ReferenceListSlots>(state);\n\n  return (\n    <ReferenceListContextProvider value={contextValues.referenceList}>\n      <Overflow>\n        <state.root>\n          {state.root.children}\n          {state.showMoreButton && <state.showMoreButton />}\n          {state.showLessButton && <state.showLessButton />}\n        </state.root>\n      </Overflow>\n    </ReferenceListContextProvider>\n  );\n};\n"],"names":["Overflow","assertSlots","ReferenceListContextProvider","renderReferenceList_unstable","state","contextValues","value","referenceList","root","children","showMoreButton","showLessButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAEnE,SAASC,4BAA4B,QAAQ,sDAAsD;AAEnG;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,qBACE,KAACF;QAA6BI,OAAOD,cAAcE,aAAa;kBAC9D,cAAA,KAACP;sBACC,cAAA,MAACI,MAAMI,IAAI;;oBACRJ,MAAMI,IAAI,CAACC,QAAQ;oBACnBL,MAAMM,cAAc,kBAAI,KAACN,MAAMM,cAAc;oBAC7CN,MAAMO,cAAc,kBAAI,KAACP,MAAMO,cAAc;;;;;AAKxD,EAAE"}

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, mergeCallbacks, mergeClasses, slot, useArrowNavigationGroup } from '@fluentui/react-components';
+import { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles';
+/**
+ * Create the state required to render ReferenceList.
+ *
+ * The returned state can be modified with hooks such as useReferenceListStyles_unstable,
+ * before being passed to renderReferenceList_unstable.
+ *
+ * @param props - props from this instance of ReferenceList
+ * @param ref - reference to root HTMLElement of ReferenceList
+ */
+export const useReferenceList_unstable = (props, ref) => {
+  const {
+    appearance = 'lighter',
+    children,
+    maxVisibleReferences,
+    showLessButton,
+    showMoreButton,
+    ...rest
+  } = props;
+  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);
+  const referenceInOverflowClassName = useReferenceStyles().overflow;
+  const resolvedChildren = React.useMemo(() => {
+    if (maxVisibleReferences !== undefined && !areReferencesExpanded) {
+      const results = [];
+      const childrenArray = React.Children.toArray(children);
+      for (let index = 0; index < childrenArray.length; index++) {
+        const child = childrenArray[index];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (index >= maxVisibleReferences && React.isValidElement(child)) {
+          results.push(React.cloneElement(child, {
+            ...child.props,
+            className: mergeClasses(child.props.className, referenceInOverflowClassName)
+          }));
+        } else {
+          results.push(child);
+        }
+      }
+      return results;
+    }
+    return children;
+  }, [areReferencesExpanded, children, maxVisibleReferences, referenceInOverflowClassName]);
+  // We keep track of the previous overflow count to determine element to move focus to when expanding the references via keyboard.
+  const previousOverflowCount = React.useRef(0);
+  // We keep track of whether we are interacting with the overflow button via keyboard or not.
+  const overflowButtonTriggeredViaKeyboard = React.useRef(false);
+  const focusAttributes = useArrowNavigationGroup({
+    axis: 'both',
+    circular: true,
+    memorizeCurrent: true
+  });
+  const onShowMoreButtonClick = React.useCallback(() => {
+    setAreReferencesExpanded(true);
+  }, []);
+  const onShowLessButtonClick = React.useCallback(() => {
+    setAreReferencesExpanded(false);
+  }, []);
+  const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
+  const state = {
+    appearance,
+    areReferencesExpanded,
+    overflowButtonTriggeredViaKeyboard,
+    previousOverflowCount,
+    shouldUseOverflow,
+    components: {
+      root: 'div',
+      showMoreButton: 'span',
+      showLessButton: 'span'
+    },
+    root: slot.always(getIntrinsicElementProps('div', {
+      ref,
+      ...focusAttributes,
+      ...rest,
+      children: resolvedChildren
+    }), {
+      elementType: 'div'
+    }),
+    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, {
+      elementType: 'span'
+    }) : undefined,
+    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, {
+      elementType: 'span'
+    }) : undefined
+  };
+  if (state.showMoreButton) {
+    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);
+  }
+  if (state.showLessButton) {
+    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);
+  }
+  return state;
+};
+//# sourceMappingURL=useReferenceList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  mergeClasses,\n  slot,\n  useArrowNavigationGroup,\n} from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const { appearance = 'lighter', children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n\n  const referenceInOverflowClassName = useReferenceStyles().overflow;\n  const resolvedChildren = React.useMemo(() => {\n    if (maxVisibleReferences !== undefined && !areReferencesExpanded) {\n      const results = [];\n      const childrenArray = React.Children.toArray(children);\n      for (let index = 0; index < childrenArray.length; index++) {\n        const child = childrenArray[index] as React.ReactElement;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        if (index >= maxVisibleReferences && React.isValidElement<any>(child)) {\n          results.push(\n            React.cloneElement(child, {\n              ...child.props,\n              className: mergeClasses(child.props.className, referenceInOverflowClassName),\n            }),\n          );\n        } else {\n          results.push(child);\n        }\n      }\n      return results;\n    }\n\n    return children;\n  }, [areReferencesExpanded, children, maxVisibleReferences, referenceInOverflowClassName]);\n\n  // We keep track of the previous overflow count to determine element to move focus to when expanding the references via keyboard.\n  const previousOverflowCount = React.useRef(0);\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","mergeClasses","slot","useArrowNavigationGroup","useRootStyles","useReferenceStyles","useReferenceList_unstable","props","ref","appearance","children","maxVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceInOverflowClassName","overflow","resolvedChildren","useMemo","undefined","results","childrenArray","Children","toArray","index","length","child","isValidElement","push","cloneElement","className","previousOverflowCount","useRef","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","state","components","root","always","elementType","optional","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,YAAY,EACZC,IAAI,EACJC,uBAAuB,QAClB,6BAA6B;AAEpC,SAASC,iBAAiBC,kBAAkB,QAAQ,kCAAkC;AAEtF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,aAAa,SAAS,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGP;IAE5G,MAAM,CAACQ,uBAAuBC,yBAAyB,GAAGlB,MAAMmB,QAAQ,CAAC;IAEzE,MAAMC,+BAA+Bb,qBAAqBc,QAAQ;IAClE,MAAMC,mBAAmBtB,MAAMuB,OAAO,CAAC;QACrC,IAAIV,yBAAyBW,aAAa,CAACP,uBAAuB;YAChE,MAAMQ,UAAU,EAAE;YAClB,MAAMC,gBAAgB1B,MAAM2B,QAAQ,CAACC,OAAO,CAAChB;YAC7C,IAAK,IAAIiB,QAAQ,GAAGA,QAAQH,cAAcI,MAAM,EAAED,QAAS;gBACzD,MAAME,QAAQL,aAAa,CAACG,MAAM;gBAClC,8DAA8D;gBAC9D,IAAIA,SAAShB,wBAAwBb,MAAMgC,cAAc,CAAMD,QAAQ;oBACrEN,QAAQQ,IAAI,CACVjC,MAAMkC,YAAY,CAACH,OAAO;wBACxB,GAAGA,MAAMtB,KAAK;wBACd0B,WAAWhC,aAAa4B,MAAMtB,KAAK,CAAC0B,SAAS,EAAEf;oBACjD;gBAEJ,OAAO;oBACLK,QAAQQ,IAAI,CAACF;gBACf;YACF;YACA,OAAON;QACT;QAEA,OAAOb;IACT,GAAG;QAACK;QAAuBL;QAAUC;QAAsBO;KAA6B;IAExF,iIAAiI;IACjI,MAAMgB,wBAAwBpC,MAAMqC,MAAM,CAAC;IAE3C,4FAA4F;IAC5F,MAAMC,qCAAqCtC,MAAMqC,MAAM,CAAC;IAExD,MAAME,kBAAkBlC,wBAAwB;QAC9CmC,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwB3C,MAAM4C,WAAW,CAA6C;QAC1F1B,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAM2B,wBAAwB7C,MAAM4C,WAAW,CAA6C;QAC1F1B,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAM4B,oBAAoBjC,yBAAyBW,aAAa,CAACP;IAEjE,MAAM8B,QAA4B;QAChCpC;QACAM;QACAqB;QACAF;QACAU;QAEAE,YAAY;YACVC,MAAM;YACNlC,gBAAgB;YAChBD,gBAAgB;QAClB;QACAmC,MAAM7C,KAAK8C,MAAM,CACfjD,yBAAyB,OAAO;YAC9BS;YACA,GAAG6B,eAAe;YAClB,GAAGvB,IAAI;YACPJ,UAAUU;QACZ,IACA;YAAE6B,aAAa;QAAM;QAEvBpC,gBAAgB+B,oBAAoB1C,KAAKgD,QAAQ,CAACrC,gBAAgB;YAAEoC,aAAa;QAAO,KAAK3B;QAC7FV,gBAAgBG,wBAAwBb,KAAKgD,QAAQ,CAACtC,gBAAgB;YAAEqC,aAAa;QAAO,KAAK3B;IACnG;IAEA,IAAIuB,MAAMhC,cAAc,EAAE;QACxBgC,MAAMhC,cAAc,CAACsC,OAAO,GAAGnD,eAAeyC,uBAAuBI,MAAMhC,cAAc,CAACsC,OAAO;IACnG;IAEA,IAAIN,MAAMjC,cAAc,EAAE;QACxBiC,MAAMjC,cAAc,CAACuC,OAAO,GAAGnD,eAAe2C,uBAAuBE,MAAMjC,cAAc,CAACuC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}

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

@@ -0,0 +1,21 @@
+export function useReferenceListContextValues_unstable(state) {
+  const {
+    appearance,
+    areReferencesExpanded,
+    overflowButtonTriggeredViaKeyboard,
+    previousOverflowCount,
+    shouldUseOverflow
+  } = state;
+  // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
+  const referenceList = {
+    appearance,
+    areReferencesExpanded,
+    overflowButtonTriggeredViaKeyboard,
+    previousOverflowCount,
+    shouldUseOverflow
+  };
+  return {
+    referenceList
+  };
+}
+//# sourceMappingURL=useReferenceListContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceListContextValues.ts"],"sourcesContent":["import type { ReferenceListState, ReferenceListContextValues } from './ReferenceList.types';\n\nexport function useReferenceListContextValues_unstable(state: ReferenceListState): ReferenceListContextValues {\n  const {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const referenceList = {\n    appearance,\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    previousOverflowCount,\n    shouldUseOverflow,\n  };\n\n  return { referenceList };\n}\n"],"names":["useReferenceListContextValues_unstable","state","appearance","areReferencesExpanded","overflowButtonTriggeredViaKeyboard","previousOverflowCount","shouldUseOverflow","referenceList"],"mappings":"AAEA,OAAO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAM,EACJC,UAAU,EACVC,qBAAqB,EACrBC,kCAAkC,EAClCC,qBAAqB,EACrBC,iBAAiB,EAClB,GAAGL;IAEJ,mGAAmG;IACnG,MAAMM,gBAAgB;QACpBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAc;AACzB"}

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

@@ -0,0 +1,39 @@
+import { __resetStyles, __styles, mergeClasses, tokens } from '@fluentui/react-components';
+export const referenceListClassNames = {
+  root: 'fai-ReferenceList',
+  showMoreButton: 'fai-ReferenceList__showMoreButton',
+  showLessButton: 'fai-ReferenceList__showLessButton'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootBaseClassName = __resetStyles("rylvie1", null, [".rylvie1{display:flex;flex-direction:row;gap:var(--spacingVerticalXS) var(--spacingHorizontalXS);}"]);
+const useRootStyles = __styles({
+  referencesExpanded: {
+    Eh141a: "fni485r"
+  }
+}, {
+  d: [".fni485r{flex-wrap:wrap;}"]
+});
+const useOverflowButtonBaseClassName = __resetStyles("r6su6fj", null, [".r6su6fj{flex-shrink:0;}"]);
+/**
+ * Apply styling to the ReferenceList slots based on the state
+ */
+export const useReferenceListStyles_unstable = state => {
+  const {
+    areReferencesExpanded,
+    shouldUseOverflow
+  } = state;
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  const overflowButtonBaseClassName = useOverflowButtonBaseClassName();
+  state.root.className = mergeClasses(referenceListClassNames.root, rootBaseClassName, (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded, state.root.className);
+  if (state.showMoreButton) {
+    state.showMoreButton.className = mergeClasses(referenceListClassNames.showMoreButton, overflowButtonBaseClassName, state.showMoreButton.className);
+  }
+  if (state.showLessButton) {
+    state.showLessButton.className = mergeClasses(referenceListClassNames.showLessButton, overflowButtonBaseClassName, state.showLessButton.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useReferenceListStyles.js.map

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

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

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useReferenceOverflowButton_unstable } from './useReferenceOverflowButton';
+import { renderReferenceOverflowButton_unstable } from './renderReferenceOverflowButton';
+import { useReferenceOverflowButtonStyles_unstable } from './useReferenceOverflowButtonStyles';
+// ReferenceOverflowButton component - TODO: add more docs
+export const ReferenceOverflowButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useReferenceOverflowButton_unstable(props, ref);
+  useReferenceOverflowButtonStyles_unstable(state);
+  return renderReferenceOverflowButton_unstable(state);
+});
+ReferenceOverflowButton.displayName = 'ReferenceOverflowButton';
+//# sourceMappingURL=ReferenceOverflowButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ReferenceOverflowButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceOverflowButton_unstable } from './useReferenceOverflowButton';\nimport { renderReferenceOverflowButton_unstable } from './renderReferenceOverflowButton';\nimport { useReferenceOverflowButtonStyles_unstable } from './useReferenceOverflowButtonStyles';\nimport type { ReferenceOverflowButtonProps } from './ReferenceOverflowButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// ReferenceOverflowButton component - TODO: add more docs\nexport const ReferenceOverflowButton: ForwardRefComponent<ReferenceOverflowButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useReferenceOverflowButton_unstable(props, ref);\n\n    useReferenceOverflowButtonStyles_unstable(state);\n    return renderReferenceOverflowButton_unstable(state);\n  },\n);\n\nReferenceOverflowButton.displayName = 'ReferenceOverflowButton';\n"],"names":["React","useReferenceOverflowButton_unstable","renderReferenceOverflowButton_unstable","useReferenceOverflowButtonStyles_unstable","ReferenceOverflowButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,yCAAyC,QAAQ,qCAAqC;AAI/F,0DAA0D;AAC1D,OAAO,MAAMC,wCAA6EJ,MAAMK,UAAU,CACxG,CAACC,OAAOC;IACN,MAAMC,QAAQP,oCAAoCK,OAAOC;IAEzDJ,0CAA0CK;IAC1C,OAAON,uCAAuCM;AAChD,GACA;AAEFJ,wBAAwBK,WAAW,GAAG"}

package/lib/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReferenceOverflowButton.types.js.map

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

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

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

@@ -0,0 +1,6 @@
+export * from './ReferenceOverflowButton';
+export * from './ReferenceOverflowButton.types';
+export * from './renderReferenceOverflowButton';
+export * from './useReferenceOverflowButton';
+export * from './useReferenceOverflowButtonStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceOverflowButton';\nexport * from './ReferenceOverflowButton.types';\nexport * from './renderReferenceOverflowButton';\nexport * from './useReferenceOverflowButton';\nexport * from './useReferenceOverflowButtonStyles';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,kCAAkC;AAChD,cAAc,kCAAkC;AAChD,cAAc,+BAA+B;AAC7C,cAAc,qCAAqC"}

package/lib/components/reference-v2/ReferenceOverflowButton/renderReferenceOverflowButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-components';
+/**
+ * Render the final JSX of ReferenceOverflowButton
+ */
+export const renderReferenceOverflowButton_unstable = state => {
+  assertSlots(state);
+  return state.shouldRenderOverflowButton ? /*#__PURE__*/_jsx(state.root, {}) : null;
+};
+//# sourceMappingURL=renderReferenceOverflowButton.js.map

package/lib/components/reference-v2/ReferenceOverflowButton/renderReferenceOverflowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderReferenceOverflowButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonState, ReferenceOverflowButtonSlots } from './ReferenceOverflowButton.types';\n\n/**\n * Render the final JSX of ReferenceOverflowButton\n */\nexport const renderReferenceOverflowButton_unstable = (state: ReferenceOverflowButtonState) => {\n  assertSlots<ReferenceOverflowButtonSlots>(state);\n\n  return state.shouldRenderOverflowButton ? <state.root /> : null;\n};\n"],"names":["assertSlots","renderReferenceOverflowButton_unstable","state","shouldRenderOverflowButton","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrDF,YAA0CE;IAE1C,OAAOA,MAAMC,0BAA0B,iBAAG,KAACD,MAAME,IAAI,QAAM;AAC7D,EAAE"}

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

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Enter, Space } from '@fluentui/keyboard-keys';
+import { getIntrinsicElementProps, mergeCallbacks, slot, useFocusFinders, useMergedRefs, useOverflowMenu } from '@fluentui/react-components';
+import { useTimeout } from '@fluentui/react-utilities';
+import { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';
+/**
+ * Create the state required to render ReferenceOverflowButton.
+ *
+ * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,
+ * before being passed to renderReferenceOverflowButton_unstable.
+ *
+ * @param props - props from this instance of ReferenceOverflowButton
+ * @param ref - reference to root HTMLElement of ReferenceOverflowButton
+ */
+export const useReferenceOverflowButton_unstable = (props, ref) => {
+  const {
+    children,
+    text
+  } = props;
+  const rootRef = React.useRef(null);
+  const [setTimeout] = useTimeout();
+  const {
+    areReferencesExpanded,
+    ctxAppearance,
+    previousOverflowCount,
+    triggeredViaKeyboard
+  } = useReferenceListContext_unstable(ctx => ({
+    ctxAppearance: ctx.appearance,
+    areReferencesExpanded: ctx.areReferencesExpanded,
+    previousOverflowCount: ctx.previousOverflowCount,
+    triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
+  }));
+  const appearance = props.appearance || ctxAppearance;
+  const {
+    isOverflowing,
+    overflowCount
+  } = useOverflowMenu();
+  const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
+  const {
+    findPrevFocusable
+  } = useFocusFinders();
+  const onKeyDown = React.useCallback(ev => {
+    if (ev.key === Enter || ev.key === Space) {
+      triggeredViaKeyboard.current = true;
+    }
+  }, [triggeredViaKeyboard]);
+  // When the references are expanded or contracted via keyboard, we need to move focus to the appropriate element.
+  React.useEffect(() => {
+    if (triggeredViaKeyboard.current) {
+      let elementToFocus;
+      // If the references are contracted, we move focus to the overflow button.
+      if (!areReferencesExpanded) {
+        elementToFocus = rootRef.current;
+      } else if (rootRef.current && previousOverflowCount) {
+        let currentElement = rootRef.current;
+        for (let i = 0; i < previousOverflowCount.current && currentElement; i++) {
+          currentElement = findPrevFocusable(currentElement);
+        }
+        elementToFocus = currentElement;
+      }
+      // 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.
+      setTimeout(() => {
+        elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+        triggeredViaKeyboard.current = false;
+      }, 0);
+    }
+    // We update the previousOverflowCount to the current one when references are contracted, so that we have the correct number once they are expanded.
+    previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [areReferencesExpanded, isOverflowing, triggeredViaKeyboard]);
+  const state = {
+    appearance,
+    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
+    components: {
+      root: 'button'
+    },
+    root: slot.always(getIntrinsicElementProps('button', {
+      ref: useMergedRefs(rootRef, ref),
+      ...props
+    }), {
+      defaultProps: {
+        children: processedText
+      },
+      elementType: 'button'
+    })
+  };
+  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);
+  return state;
+};
+//# sourceMappingURL=useReferenceOverflowButton.js.map

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

@@ -0,0 +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  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const { areReferencesExpanded, ctxAppearance, previousOverflowCount, triggeredViaKeyboard } =\n    useReferenceListContext_unstable(ctx => ({\n      ctxAppearance: ctx.appearance,\n      areReferencesExpanded: ctx.areReferencesExpanded,\n      previousOverflowCount: ctx.previousOverflowCount,\n      triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n    }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findPrevFocusable } = 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  // When the references are expanded or contracted via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(\n    () => {\n      if (triggeredViaKeyboard.current) {\n        let elementToFocus: HTMLElement | null | undefined;\n\n        // If the references are contracted, we move focus to the overflow button.\n        if (!areReferencesExpanded) {\n          elementToFocus = rootRef.current;\n        }\n        // If the references are expanded, we move focus to the first reference that was hidden when they were contracted.\n        // We do this by moving focus to the element that is overflowCount elements before the overflow button.\n        else if (rootRef.current && previousOverflowCount) {\n          let currentElement: HTMLElement | null | undefined = rootRef.current;\n          for (let i = 0; i < previousOverflowCount.current && currentElement; i++) {\n            currentElement = findPrevFocusable(currentElement);\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      // We update the previousOverflowCount to the current one when references are contracted, so that we have the correct number once they are expanded.\n      previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [areReferencesExpanded, isOverflowing, triggeredViaKeyboard],\n  );\n\n  const state: ReferenceOverflowButtonState = {\n    appearance,\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useReferenceOverflowButton_unstable","props","ref","children","text","rootRef","useRef","setTimeout","areReferencesExpanded","ctxAppearance","previousOverflowCount","triggeredViaKeyboard","ctx","appearance","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","processedText","findPrevFocusable","onKeyDown","useCallback","ev","key","current","useEffect","elementToFocus","currentElement","i","focus","state","shouldRenderOverflowButton","components","root","always","defaultProps","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,eAAe,EACfC,aAAa,EACbC,eAAe,QACV,6BAA6B;AACpC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,gCAAgC,QAAQ,sDAAsD;AAGvG;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGH;IAE3B,MAAMI,UAAUhB,MAAMiB,MAAM,CAAoB;IAEhD,MAAM,CAACC,WAAW,GAAGT;IAErB,MAAM,EAAEU,qBAAqB,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,oBAAoB,EAAE,GACzFZ,iCAAiCa,CAAAA,MAAQ,CAAA;YACvCH,eAAeG,IAAIC,UAAU;YAC7BL,uBAAuBI,IAAIJ,qBAAqB;YAChDE,uBAAuBE,IAAIF,qBAAqB;YAChDC,sBAAsBC,IAAIE,kCAAkC;QAC9D,CAAA;IACF,MAAMD,aAAaZ,MAAMY,UAAU,IAAIJ;IAEvC,MAAM,EAAEM,aAAa,EAAEC,aAAa,EAAE,GAAGnB;IAEzC,MAAMoB,gBAAgBd,qBAAAA,sBAAAA,WAAa,OAAOC,SAAS,aAAaA,KAAKY,iBAAiBZ;IAEtF,MAAM,EAAEc,iBAAiB,EAAE,GAAGvB;IAC9B,MAAMwB,YAAY9B,MAAM+B,WAAW,CACjCC,CAAAA;QACE,IAAIA,GAAGC,GAAG,KAAKhC,SAAS+B,GAAGC,GAAG,KAAK/B,OAAO;YACxCoB,qBAAqBY,OAAO,GAAG;QACjC;IACF,GACA;QAACZ;KAAqB;IAGxB,iHAAiH;IACjHtB,MAAMmC,SAAS,CACb;QACE,IAAIb,qBAAqBY,OAAO,EAAE;YAChC,IAAIE;YAEJ,0EAA0E;YAC1E,IAAI,CAACjB,uBAAuB;gBAC1BiB,iBAAiBpB,QAAQkB,OAAO;YAClC,OAGK,IAAIlB,QAAQkB,OAAO,IAAIb,uBAAuB;gBACjD,IAAIgB,iBAAiDrB,QAAQkB,OAAO;gBACpE,IAAK,IAAII,IAAI,GAAGA,IAAIjB,sBAAsBa,OAAO,IAAIG,gBAAgBC,IAAK;oBACxED,iBAAiBR,kBAAkBQ;gBACrC;gBACAD,iBAAiBC;YACnB;YAEA,+IAA+I;YAC/InB,WAAW;gBACTkB,2BAAAA,qCAAAA,eAAgBG,KAAK;gBACrBjB,qBAAqBY,OAAO,GAAG;YACjC,GAAG;QACL;QAEA,oJAAoJ;QACpJb,sBAAsBa,OAAO,GAAGf,wBAAwB,IAAIQ;IAC9D,GACA,uDAAuD;IACvD;QAACR;QAAuBO;QAAeJ;KAAqB;IAG9D,MAAMkB,QAAsC;QAC1ChB;QACAiB,4BAA4Bf,iBAAiBP;QAE7CuB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMtC,KAAKuC,MAAM,CACfzC,yBAAyB,UAAU;YACjCU,KAAKN,cAAcS,SAASH;YAC5B,GAAGD,KAAK;QACV,IACA;YACEiC,cAAc;gBACZ/B,UAAUc;YACZ;YACAkB,aAAa;QACf;IAEJ;IAEAN,MAAMG,IAAI,CAACb,SAAS,GAAG1B,eAAe0B,WAAWlB,MAAMkB,SAAS;IAEhE,OAAOU;AACT,EAAE"}

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

@@ -0,0 +1,35 @@
+import { __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+export const referenceOverflowButtonClassNames = {
+  root: 'fai-ReferenceOverflowButton'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootBaseClassName = __resetStyles("rbsq19a", null, [".rbsq19a{background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);display:inline-flex;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".rbsq19a:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".rbsq19a:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"]);
+const useRootStyles = __styles({
+  darker: {
+    De3pzq: "f3vzo32",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    Jwef8y: "f14vf7cg",
+    iro3zm: "fho4vwd"
+  }
+}, {
+  d: [".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}"],
+  h: [".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}", ".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"]
+});
+/**
+ * Apply styling to the ReferenceOverflowButton slots based on the state
+ */
+export const useReferenceOverflowButtonStyles_unstable = state => {
+  const {
+    appearance
+  } = state;
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useReferenceOverflowButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceOverflowButtonStyles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n  root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  display: 'inline-flex',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  ...typographyStyles.caption1,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n});\n\nconst useRootStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n  state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(\n    referenceOverflowButtonClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceOverflowButtonClassNames","root","useRootBaseClassName","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","display","padding","spacingVerticalXXS","spacingHorizontalS","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","darker","colorNeutralBackground5","colorNeutralStroke1","colorNeutralBackground5Hover","colorNeutralBackground5Pressed","useReferenceOverflowButtonStyles_unstable","state","appearance","rootBaseClassName","rootStyles","className"],"mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBR,gBAAgB;IAC3CS,iBAAiBL,OAAOM,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEP,OAAOQ,eAAe,CAAC,OAAO,EAAER,OAAOS,mBAAmB,CAAC,CAAC;IACvEC,cAAcV,OAAOW,kBAAkB;IACvCC,OAAOZ,OAAOa,uBAAuB;IACrCC,SAAS;IACTC,SAAS,CAAC,EAAEf,OAAOgB,kBAAkB,CAAC,CAAC,EAAEhB,OAAOiB,kBAAkB,CAAC,CAAC;IACpE,GAAGhB,iBAAiBiB,QAAQ;IAE5B,UAAU;QACRb,iBAAiBL,OAAOmB,4BAA4B;QACpDC,aAAapB,OAAOqB,wBAAwB;QAC5CT,OAAOZ,OAAOsB,4BAA4B;IAC5C;IAEA,iBAAiB;QACfjB,iBAAiBL,OAAOuB,8BAA8B;QACtDH,aAAapB,OAAOwB,0BAA0B;QAC9CZ,OAAOZ,OAAOyB,8BAA8B;IAC9C;AACF;AAEA,MAAMC,gBAAgB7B,WAAW;IAC/B8B,QAAQ;QACNtB,iBAAiBL,OAAO4B,uBAAuB;QAC/C,GAAG7B,WAAWqB,WAAW,CAACpB,OAAO6B,mBAAmB,CAAC;QAErD,UAAU;YACRxB,iBAAiBL,OAAO8B,4BAA4B;QACtD;QAEA,iBAAiB;YACfzB,iBAAiBL,OAAO+B,8BAA8B;QACxD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,oBAAoB/B;IAC1B,MAAMgC,aAAaV;IAEnBO,MAAM9B,IAAI,CAACkC,SAAS,GAAGvC,aACrBI,kCAAkCC,IAAI,EACtCgC,mBACAD,eAAe,YAAYE,WAAWT,MAAM,EAC5CM,MAAM9B,IAAI,CAACkC,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

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

@@ -0,0 +1,4 @@
+export * from './Reference';
+export * from './ReferenceList';
+export * from './ReferenceOverflowButton';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Reference';\nexport * from './ReferenceList';\nexport * from './ReferenceOverflowButton';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,4BAA4B"}

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

@@ -0,0 +1,2 @@
+export * from './referenceListContext';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './referenceListContext';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB"}

package/lib/contexts/reference-v2/referenceListContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const ReferenceListContext = createContext(undefined);
+const referenceListContextDefaultValue = {
+  appearance: 'lighter',
+  areReferencesExpanded: false,
+  overflowButtonTriggeredViaKeyboard: {
+    current: false
+  },
+  previousOverflowCount: {
+    current: 0
+  },
+  shouldUseOverflow: false
+};
+export const ReferenceListContextProvider = ReferenceListContext.Provider;
+export const useReferenceListContext_unstable = selector => useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));
+//# sourceMappingURL=referenceListContext.js.map