@fluentui-copilot/react-attachments 0.9.3 → 0.9.4

package/lib/components/AttachmentList/useAttachmentList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  slot,\n  useArrowNavigationGroup,\n  useEventCallback,\n  useFocusFinders,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useOverflowContext } from '@fluentui/react-overflow';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n  props: AttachmentListProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n  const { onAttachmentDismiss } = props;\n\n  const attachmentsVisibilityStatus: Record<string, boolean> = useOverflowContext(context => context.itemVisibility);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n    if (!onAttachmentDismiss) {\n      return;\n    }\n\n    onAttachmentDismiss(e, data);\n\n    // Remove attachment from overflow context\n    delete attachmentsVisibilityStatus?.[data.id];\n\n    // set focus after attachment dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next attachment only if the active element is within the current attachment list\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n\n      if (next) {\n        next.focus();\n        return;\n      } else {\n        const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    onAttachmentDismiss: handleAttachmentDismiss,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        'aria-label': 'Attachments',\n        ref: useMergedRefs(ref, innerRef),\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useOverflowContext","useAttachmentList_unstable","props","ref","onAttachmentDismiss","attachmentsVisibilityStatus","context","itemVisibility","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleAttachmentDismiss","e","data","id","activeElement","current","contains","next","container","focus","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,IAAI,EACJC,uBAAuB,EACvBC,gBAAgB,EAChBC,eAAe,EACfC,aAAa,QACR,6BAA6B;AACpC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,mBAAmB,EAAE,GAAGF;IAEhC,MAAMG,8BAAuDL,mBAAmBM,CAAAA,UAAWA,QAAQC,cAAc;IAEjH,MAAMC,WAAWjB,MAAMkB,MAAM,CAAiB;IAC9C,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAM,EAAEY,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGhB;IAEjD,MAAMiB,0BAAsElB,iBAAiB,CAACmB,GAAGC;YAY3FP;QAXJ,IAAI,CAACJ,qBAAqB;YACxB;QACF;QAEAA,oBAAoBU,GAAGC;QAEvB,0CAA0C;QACnCV,wCAAAA,uDAAAA,2BAA6B,CAACU,KAAKC,EAAE,CAAC;QAE7C,qCAAqC;QACrC,MAAMC,gBAAgBP,2BAAAA,qCAAAA,eAAgBO,aAAa;QACnD,KAAIT,oBAAAA,SAASU,OAAO,cAAhBV,wCAAAA,kBAAkBW,QAAQ,CAACF,gBAA+B;YAC5D,4FAA4F;YAC5F,MAAMG,OAAOT,kBAAkBM,eAA8B;gBAAEI,WAAWb,SAASU,OAAO;YAAC;YAE3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF,OAAO;gBACL,MAAMC,OAAOX,kBAAkBK,0BAAAA,oCAAAA,cAAeO,aAAa,EAAiB;oBAAEH,WAAWb,SAASU,OAAO;gBAAC;gBAC1GK,iBAAAA,2BAAAA,KAAMD,KAAK;YACb;QACF;IACF;IAEA,MAAMG,uBAAuB/B,wBAAwB;QACnDgC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLxB,qBAAqBS;QACrBgB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMrC,KAAKsC,MAAM,CACfvC,yBAAyB,OAAO;YAC9B,cAAc;YACdW,KAAKN,cAAcM,KAAKK;YACxBwB,MAAM;YACN,GAAGP,oBAAoB;YACvB,GAAGvB,KAAK;QACV,IACA;YAAE+B,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeClasses,\n  slot,\n  useArrowNavigationGroup,\n  useEventCallback,\n  useFocusFinders,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowStyles as useAttachmentOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n  props: AttachmentListProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n  const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const [setTimeout] = useTimeout();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n  const [attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\n  const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n    if (!onAttachmentDismiss) {\n      return;\n    }\n\n    onAttachmentDismiss(e, data);\n\n    // set focus after attachment dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next attachment only if the active element is within the current attachment list\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        // focus on the overflow button if the next focusable element is the overflow button.\n        // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n        if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n          setTimeout(() => {\n            findLastFocusable(innerRef.current as HTMLElement)?.focus();\n          }, 0);\n        } else {\n          next.focus();\n        }\n      } else {\n        const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    } else {\n      // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n      setTimeout(() => {\n        findLastFocusable(innerRef.current as HTMLElement)?.focus();\n      }, 0);\n    }\n  });\n\n  const attachmentOverflowClassName = useAttachmentOverflowStyles().overflow;\n  const resolvedChildren = React.useMemo(() => {\n    if (maxVisibleAttachments !== undefined) {\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 >= maxVisibleAttachments && React.isValidElement<any>(child)) {\n          results.push(\n            React.cloneElement(child, {\n              ...child.props,\n              className: mergeClasses(child.props.className, attachmentOverflowClassName),\n            }),\n          );\n        } else {\n          results.push(child);\n        }\n      }\n\n      return results;\n    }\n    return children;\n  }, [attachmentOverflowClassName, children, maxVisibleAttachments]);\n\n  React.useEffect(() => {\n    if (resolvedChildren && Array.isArray(resolvedChildren)) {\n      setAttachments(resolvedChildren.map(child => child.props));\n    }\n  }, [resolvedChildren]);\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n  return {\n    attachments,\n    onAttachmentDismiss: handleAttachmentDismiss,\n    shouldUseOverflow,\n    overflowMenuProps,\n    components: {\n      root: 'div',\n      overflowMenuButton: 'span',\n      overflowMenuItem: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        'aria-label': 'Attachments',\n        ref: useMergedRefs(ref, innerRef),\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    overflowMenuButton: slot.optional(props.overflowMenuButton, {\n      defaultProps: { children: <AttachmentOverflowMenuButton /> },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    overflowMenuItem: slot.optional(props.overflowMenuItem, {\n      defaultProps: { children: <AttachmentOverflowMenuItem /> },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowStyles","useAttachmentOverflowStyles","AttachmentOverflowMenuButton","AttachmentOverflowMenuItem","attachmentOverflowMenuButtonClassNames","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","findNextFocusable","findPrevFocusable","findLastFocusable","attachments","setAttachments","useState","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","attachmentOverflowClassName","overflow","resolvedChildren","useMemo","undefined","results","childrenArray","Children","toArray","index","length","child","isValidElement","push","cloneElement","className","useEffect","Array","isArray","map","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","components","overflowMenuButton","overflowMenuItem","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/AttachmentList/useAttachmentListContextValues.js

@@ -1,10 +1,12 @@
 export function useAttachmentListContextValues_unstable(state) {
   const {
-    onAttachmentDismiss
+    onAttachmentDismiss,
+    shouldUseOverflow
   } = state;
   // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
   const attachmentList = {
-    onAttachmentDismiss
+    onAttachmentDismiss,
+    shouldUseOverflow
   };
   return {
     attachmentList

package/lib/components/AttachmentList/useAttachmentListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentListContextValues.ts"],"sourcesContent":["import type { AttachmentListContextValues, AttachmentListState } from './AttachmentList.types';\n\nexport function useAttachmentListContextValues_unstable(state: AttachmentListState): AttachmentListContextValues {\n  const { onAttachmentDismiss } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const attachmentList = {\n    onAttachmentDismiss,\n  };\n\n  return { attachmentList };\n}\n"],"names":["useAttachmentListContextValues_unstable","state","onAttachmentDismiss","attachmentList"],"rangeMappings":";;;;;;;;;","mappings":"AAEA,OAAO,SAASA,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,mBAAmB,EAAE,GAAGD;IAEhC,mGAAmG;IACnG,MAAME,iBAAiB;QACrBD;IACF;IAEA,OAAO;QAAEC;IAAe;AAC1B"}
+{"version":3,"sources":["useAttachmentListContextValues.ts"],"sourcesContent":["import type { AttachmentListContextValues, AttachmentListState } from './AttachmentList.types';\n\nexport function useAttachmentListContextValues_unstable(state: AttachmentListState): AttachmentListContextValues {\n  const { onAttachmentDismiss, shouldUseOverflow } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const attachmentList = {\n    onAttachmentDismiss,\n    shouldUseOverflow,\n  };\n\n  return { attachmentList };\n}\n"],"names":["useAttachmentListContextValues_unstable","state","onAttachmentDismiss","shouldUseOverflow","attachmentList"],"rangeMappings":";;;;;;;;;;","mappings":"AAEA,OAAO,SAASA,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGF;IAEnD,mGAAmG;IACnG,MAAMG,iBAAiB;QACrBF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAe;AAC1B"}

package/lib/components/AttachmentList/useAttachmentListStyles.js

@@ -1,6 +1,8 @@
 import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';
 export const attachmentListClassNames = {
-  root: 'fai-AttachmentList'
+  root: 'fai-AttachmentList',
+  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',
+  overflowMenuItem: 'fai-AttachmentList__overflowMenuItem'
 };
 const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"]);
 /**
@@ -9,6 +11,12 @@ const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-
 export const useAttachmentListStyles_unstable = state => {
   const rootBaseClassName = useRootBaseClassName();
   state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+  if (state.overflowMenuButton) {
+    state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, state.overflowMenuButton.className);
+  }
+  if (state.overflowMenuItem) {
+    state.overflowMenuItem.className = mergeClasses(attachmentListClassNames.overflowMenuItem, state.overflowMenuItem.className);
+  }
   return state;
 };
 //# sourceMappingURL=useAttachmentListStyles.js.map

package/lib/components/AttachmentList/useAttachmentListStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentListStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n  root: 'fai-AttachmentList',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'flex',\n  flexDirection: 'row',\n  flexShrink: 0,\n  flexWrap: 'wrap',\n  rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentListStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBL,gBAAgB;IAC3CM,WAAWJ,OAAOK,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQV,OAAOW,iBAAiB;AAClC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,oBAAoBX;IAE1BU,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,yBAAyBC,IAAI,EAAEY,mBAAmBD,MAAMX,IAAI,CAACa,SAAS;IAE1G,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentListStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n  root: 'fai-AttachmentList',\n  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n  overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'flex',\n  flexDirection: 'row',\n  flexShrink: 0,\n  flexWrap: 'wrap',\n  rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.overflowMenuButton) {\n    state.overflowMenuButton.className = mergeClasses(\n      attachmentListClassNames.overflowMenuButton,\n      state.overflowMenuButton.className,\n    );\n  }\n\n  if (state.overflowMenuItem) {\n    state.overflowMenuItem.className = mergeClasses(\n      attachmentListClassNames.overflowMenuItem,\n      state.overflowMenuItem.className,\n    );\n  }\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentListStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,oBAAoB;IACpBC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,WAAWN,OAAOO,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;AAClC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,oBAAoBX;IAC1BU,MAAMb,IAAI,CAACe,SAAS,GAAGlB,aAAaE,yBAAyBC,IAAI,EAAEc,mBAAmBD,MAAMb,IAAI,CAACe,SAAS;IAE1G,IAAIF,MAAMZ,kBAAkB,EAAE;QAC5BY,MAAMZ,kBAAkB,CAACc,SAAS,GAAGlB,aACnCE,yBAAyBE,kBAAkB,EAC3CY,MAAMZ,kBAAkB,CAACc,SAAS;IAEtC;IAEA,IAAIF,MAAMX,gBAAgB,EAAE;QAC1BW,MAAMX,gBAAgB,CAACa,SAAS,GAAGlB,aACjCE,yBAAyBG,gBAAgB,EACzCW,MAAMX,gBAAgB,CAACa,SAAS;IAEpC;IACA,OAAOF;AACT,EAAE"}

package/lib/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuState } from '../AttachmentOverflowMenu';\n\nexport type AttachmentOverflowMenuButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n  progress: NonNullable<Slot<typeof ProgressBar>>;\n};\n\n/**\n * AttachmentOverflowMenuButton Props\n */\nexport type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>> & {\n  /**\n   * Toggle prop to indicate that there are Attachments in the overflow menu that's currently loading.\n   * Setting this to true will show an indeterminate progress bar on the button.\n   * @default false\n   */\n  isLoading?: boolean;\n};\n\n/**\n * State used in rendering AttachmentOverflowMenuButton\n */\nexport type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> &\n  Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'> &\n  Pick<AttachmentOverflowMenuButtonProps, 'isLoading'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC,GACD,WAEuD"}
+{"version":3,"sources":["AttachmentOverflowMenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuState } from '../AttachmentOverflowMenu';\n\nexport type AttachmentOverflowMenuButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n  progress: NonNullable<Slot<typeof ProgressBar>>;\n};\n\n/**\n * AttachmentOverflowMenuButton Props\n */\nexport type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>> & {\n  /**\n   * Toggle prop to indicate that there are Attachments in the overflow menu that's currently loading.\n   * Setting this to true will show an indeterminate progress bar on the button.\n   * @default false\n   */\n  isLoading?: boolean;\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering AttachmentOverflowMenuButton\n */\nexport type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> &\n  Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'> &\n  Pick<AttachmentOverflowMenuButtonProps, 'isLoading'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAqBA;;CAEC,GACD,WAEuD"}

package/lib/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js

@@ -7,7 +7,7 @@ export const renderAttachmentOverflowMenuButton_unstable = state => {
   assertSlots(state);
   return state.isOverflowing ? /*#__PURE__*/_jsx(MenuTrigger, {
     children: /*#__PURE__*/_jsxs(state.root, {
-      children: ["+", state.overflowCount, state.isLoading && /*#__PURE__*/_jsx(state.progress, {})]
+      children: [state.root.children, state.isLoading && /*#__PURE__*/_jsx(state.progress, {})]
     })
   }) : null;
 };

package/lib/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentOverflowMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuTrigger, assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuButtonState,\n  AttachmentOverflowMenuButtonSlots,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuButton\n */\nexport const renderAttachmentOverflowMenuButton_unstable = (state: AttachmentOverflowMenuButtonState) => {\n  assertSlots<AttachmentOverflowMenuButtonSlots>(state);\n\n  return state.isOverflowing ? (\n    <MenuTrigger>\n      <state.root>\n        +{state.overflowCount}\n        {state.isLoading && <state.progress />}\n      </state.root>\n    </MenuTrigger>\n  ) : null;\n};\n"],"names":["MenuTrigger","assertSlots","renderAttachmentOverflowMenuButton_unstable","state","isOverflowing","root","overflowCount","isLoading","progress"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,WAAW,QAAQ,6BAA6B;AAMtE;;CAEC,GACD,OAAO,MAAMC,8CAA8C,CAACC;IAC1DF,YAA+CE;IAE/C,OAAOA,MAAMC,aAAa,iBACxB,KAACJ;kBACC,cAAA,MAACG,MAAME,IAAI;;gBAAC;gBACRF,MAAMG,aAAa;gBACpBH,MAAMI,SAAS,kBAAI,KAACJ,MAAMK,QAAQ;;;SAGrC;AACN,EAAE"}
+{"version":3,"sources":["renderAttachmentOverflowMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuTrigger, assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuButtonState,\n  AttachmentOverflowMenuButtonSlots,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuButton\n */\nexport const renderAttachmentOverflowMenuButton_unstable = (state: AttachmentOverflowMenuButtonState) => {\n  assertSlots<AttachmentOverflowMenuButtonSlots>(state);\n\n  return state.isOverflowing ? (\n    <MenuTrigger>\n      <state.root>\n        {state.root.children}\n        {state.isLoading && <state.progress />}\n      </state.root>\n    </MenuTrigger>\n  ) : null;\n};\n"],"names":["MenuTrigger","assertSlots","renderAttachmentOverflowMenuButton_unstable","state","isOverflowing","root","children","isLoading","progress"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,WAAW,QAAQ,6BAA6B;AAMtE;;CAEC,GACD,OAAO,MAAMC,8CAA8C,CAACC;IAC1DF,YAA+CE;IAE/C,OAAOA,MAAMC,aAAa,iBACxB,KAACJ;kBACC,cAAA,MAACG,MAAME,IAAI;;gBACRF,MAAME,IAAI,CAACC,QAAQ;gBACnBH,MAAMI,SAAS,kBAAI,KAACJ,MAAMK,QAAQ;;;SAGrC;AACN,EAAE"}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js

@@ -10,12 +10,17 @@ import { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attach
  * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton
  */
 export const useAttachmentOverflowMenuButton_unstable = (props, ref) => {
+  const {
+    children,
+    text
+  } = props;
   const {
     isOverflowing,
     overflowCount,
     overflowButtonRef
   } = useAttachmentOverflowMenuContext_unstable(context => context);
   const isLoading = !!props.isLoading;
+  const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
   return {
     components: {
       root: 'button',
@@ -25,6 +30,9 @@ export const useAttachmentOverflowMenuButton_unstable = (props, ref) => {
       ref: useMergedRefs(ref, overflowButtonRef),
       ...props
     }), {
+      defaultProps: {
+        children: processedText !== null && processedText !== void 0 ? processedText : `+${overflowCount}`
+      },
       elementType: 'button'
     }),
     progress: slot.always(props.progress, {

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuButton.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n  props: AttachmentOverflowMenuButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n  const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n  const isLoading = !!props.isLoading;\n\n  return {\n    components: {\n      root: 'button',\n      progress: ProgressBar,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n    progress: slot.always(props.progress, {\n      defaultProps: { value: undefined, shape: 'square', thickness: 'large', 'aria-label': 'Loading' },\n      elementType: ProgressBar,\n    }),\n    isOverflowing,\n    overflowCount,\n    isLoading,\n  };\n};\n"],"names":["ProgressBar","getIntrinsicElementProps","slot","useMergedRefs","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuButton_unstable","props","ref","isOverflowing","overflowCount","overflowButtonRef","context","isLoading","components","root","progress","always","elementType","defaultProps","value","undefined","shape","thickness"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,WAAW,EAAEC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AACxG,SAASC,yCAAyC,QAAQ,+CAA+C;AAMzG;;;;;;;;CAQC,GACD,OAAO,MAAMC,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGN,0CAC1DO,CAAAA,UAAWA;IAEb,MAAMC,YAAY,CAAC,CAACN,MAAMM,SAAS;IAEnC,OAAO;QACLC,YAAY;YACVC,MAAM;YACNC,UAAUf;QACZ;QACAc,MAAMZ,KAAKc,MAAM,CACff,yBAAyB,UAAU;YACjCM,KAAKJ,cAAcI,KAAKG;YACxB,GAAGJ,KAAK;QACV,IACA;YAAEW,aAAa;QAAS;QAE1BF,UAAUb,KAAKc,MAAM,CAACV,MAAMS,QAAQ,EAAE;YACpCG,cAAc;gBAAEC,OAAOC;gBAAWC,OAAO;gBAAUC,WAAW;gBAAS,cAAc;YAAU;YAC/FL,aAAajB;QACf;QACAQ;QACAC;QACAG;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuButton.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n  props: AttachmentOverflowMenuButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n  const { children, text } = props;\n  const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n  const isLoading = !!props.isLoading;\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n  return {\n    components: {\n      root: 'button',\n      progress: ProgressBar,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      { defaultProps: { children: processedText ?? `+${overflowCount}` }, elementType: 'button' },\n    ),\n    progress: slot.always(props.progress, {\n      defaultProps: { value: undefined, shape: 'square', thickness: 'large', 'aria-label': 'Loading' },\n      elementType: ProgressBar,\n    }),\n    isOverflowing,\n    overflowCount,\n    isLoading,\n  };\n};\n"],"names":["ProgressBar","getIntrinsicElementProps","slot","useMergedRefs","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuButton_unstable","props","ref","children","text","isOverflowing","overflowCount","overflowButtonRef","context","isLoading","processedText","components","root","progress","always","defaultProps","elementType","value","undefined","shape","thickness"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,WAAW,EAAEC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AACxG,SAASC,yCAAyC,QAAQ,+CAA+C;AAMzG;;;;;;;;CAQC,GACD,OAAO,MAAMC,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGH;IAC3B,MAAM,EAAEI,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGR,0CAC1DS,CAAAA,UAAWA;IAEb,MAAMC,YAAY,CAAC,CAACR,MAAMQ,SAAS;IAEnC,MAAMC,gBAAgBP,qBAAAA,sBAAAA,WAAa,OAAOC,SAAS,aAAaA,KAAKE,iBAAiBF;IACtF,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAUlB;QACZ;QACAiB,MAAMf,KAAKiB,MAAM,CACflB,yBAAyB,UAAU;YACjCM,KAAKJ,cAAcI,KAAKK;YACxB,GAAGN,KAAK;QACV,IACA;YAAEc,cAAc;gBAAEZ,UAAUO,0BAAAA,2BAAAA,gBAAiB,CAAC,CAAC,EAAEJ,cAAc,CAAC;YAAC;YAAGU,aAAa;QAAS;QAE5FH,UAAUhB,KAAKiB,MAAM,CAACb,MAAMY,QAAQ,EAAE;YACpCE,cAAc;gBAAEE,OAAOC;gBAAWC,OAAO;gBAAUC,WAAW;gBAAS,cAAc;YAAU;YAC/FJ,aAAarB;QACf;QACAU;QACAC;QACAG;IACF;AACF,EAAE"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { MenuItem, ProgressBar, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';
+import { MenuItem, ProgressBar, mergeCallbacks, slot, useId, useIsOverflowItemVisible } from '@fluentui/react-components';
 import { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';
+import { useOverflowContext } from '@fluentui/react-overflow';
 import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
  * Create the state required to render AttachmentOverflowMenuItem.
@@ -13,24 +14,36 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
  */
 export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
   const {
-    id,
     imageOnly,
     media
   } = props;
   const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
-  const isVisible = useIsOverflowItemVisible(id);
-  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);
+  const menuItemId = useId('attachment-', props.id);
+  const isVisible = useIsOverflowItemVisible(menuItemId);
+  const {
+    onAttachmentDismiss,
+    shouldUseOverflow
+  } = useAttachmentListContext_unstable(context => context);
+  const attachmentsVisibilityStatus = useOverflowContext(context => context.itemVisibility);
   const root = slot.always({
     ref,
     icon: media,
     secondaryContent: /*#__PURE__*/React.createElement(DismissIcon, null),
-    ...props
+    ...props,
+    id: menuItemId
   }, {
     elementType: MenuItem
   });
-  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
-    id
-  }));
+  root.onClick = mergeCallbacks(root.onClick, ev => {
+    onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+      content: props.children,
+      media,
+      id: menuItemId
+    });
+    if (shouldUseOverflow) {
+      delete attachmentsVisibilityStatus[menuItemId];
+    }
+  });
   const progress = slot.optional(props.progress, {
     defaultProps: {
       shape: 'square',

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, ProgressBar, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  const { id, imageOnly, media } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const isVisible = useIsOverflowItemVisible(id);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <DismissIcon />, ...props },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev =>\n    onAttachmentDismiss?.(ev, {\n      id,\n    }),\n  );\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  return {\n    components: {\n      root: MenuItem,\n      progress: ProgressBar,\n    },\n    root,\n    progress,\n    isVisible,\n    imageOnly,\n  };\n};\n"],"names":["React","MenuItem","ProgressBar","mergeCallbacks","slot","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","id","imageOnly","media","DismissIcon","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","progress","optional","defaultProps","shape","thickness","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,EAAEC,WAAW,EAAEC,cAAc,EAAEC,IAAI,EAAEC,wBAAwB,QAAQ,6BAA6B;AACnH,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGJ;IACjC,MAAMK,cAAcR,WAAWF,iBAAiBC;IAChD,MAAMU,YAAYZ,yBAAyBQ;IAE3C,MAAMK,sBAAsBT,kCAAkCU,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOhB,KAAKiB,MAAM,CACtB;QAAET;QAAKU,MAAMP;QAAOQ,gCAAkB,oBAACP;QAAgB,GAAGL,KAAK;IAAC,GAChE;QAAEa,aAAavB;IAAS;IAE1BmB,KAAKK,OAAO,GAAGtB,eAAeiB,KAAKK,OAAO,EAAEC,CAAAA,KAC1CR,gCAAAA,0CAAAA,oBAAsBQ,IAAI;YACxBb;QACF;IAGF,MAAMc,WAAWvB,KAAKwB,QAAQ,CAACjB,MAAMgB,QAAQ,EAAE;QAC7CE,cAAc;YACZC,OAAO;YACPC,WAAW;YACX,mBAAmBpB,MAAME,EAAE;QAC7B;QACAW,aAAatB;IACf;IAEA,OAAO;QACL8B,YAAY;YACVZ,MAAMnB;YACN0B,UAAUzB;QACZ;QACAkB;QACAO;QACAV;QACAH;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MenuItem,\n  ProgressBar,\n  mergeCallbacks,\n  slot,\n  useId,\n  useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useOverflowContext } from '@fluentui/react-overflow';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  const { imageOnly, media } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const menuItemId = useId('attachment-', props.id);\n  const isVisible = useIsOverflowItemVisible(menuItemId);\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n\n  const attachmentsVisibilityStatus: Record<string, boolean> = useOverflowContext(context => context.itemVisibility);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <DismissIcon />, ...props, id: menuItemId },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev => {\n    onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n    if (shouldUseOverflow) {\n      delete attachmentsVisibilityStatus[menuItemId];\n    }\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  return {\n    components: {\n      root: MenuItem,\n      progress: ProgressBar,\n    },\n    root,\n    progress,\n    isVisible,\n    imageOnly,\n  };\n};\n"],"names":["React","MenuItem","ProgressBar","mergeCallbacks","slot","useId","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useOverflowContext","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","media","DismissIcon","menuItemId","id","isVisible","onAttachmentDismiss","shouldUseOverflow","context","attachmentsVisibilityStatus","itemVisibility","root","always","icon","secondaryContent","elementType","onClick","ev","content","children","progress","optional","defaultProps","shape","thickness","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,KAAK,EACLC,wBAAwB,QACnB,6BAA6B;AACpC,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IAC7B,MAAMI,cAAcR,WAAWF,iBAAiBC;IAChD,MAAMU,aAAab,MAAM,eAAeQ,MAAMM,EAAE;IAChD,MAAMC,YAAYd,yBAAyBY;IAC3C,MAAM,EAAEG,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGX,kCAAkCY,CAAAA,UAAWA;IAEhG,MAAMC,8BAAuDd,mBAAmBa,CAAAA,UAAWA,QAAQE,cAAc;IAEjH,MAAMC,OAAOtB,KAAKuB,MAAM,CACtB;QAAEb;QAAKc,MAAMZ;QAAOa,gCAAkB,oBAACZ;QAAgB,GAAGJ,KAAK;QAAEM,IAAID;IAAW,GAChF;QAAEY,aAAa7B;IAAS;IAE1ByB,KAAKK,OAAO,GAAG5B,eAAeuB,KAAKK,OAAO,EAAEC,CAAAA;QAC1CX,gCAAAA,0CAAAA,oBAAsBW,IAAI;YAAEC,SAASpB,MAAMqB,QAAQ;YAAElB;YAAOG,IAAID;QAAW;QAC3E,IAAII,mBAAmB;YACrB,OAAOE,2BAA2B,CAACN,WAAW;QAChD;IACF;IAEA,MAAMiB,WAAW/B,KAAKgC,QAAQ,CAACvB,MAAMsB,QAAQ,EAAE;QAC7CE,cAAc;YACZC,OAAO;YACPC,WAAW;YACX,mBAAmB1B,MAAMM,EAAE;QAC7B;QACAW,aAAa5B;IACf;IAEA,OAAO;QACLsC,YAAY;YACVd,MAAMzB;YACNkC,UAAUjC;QACZ;QACAwB;QACAS;QACAf;QACAL;IACF;AACF,EAAE"}

package/lib/contexts/attachmentListContext.js

@@ -1,7 +1,8 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const AttachmentListContext = createContext(undefined);
 const attachmentListContextDefaultValue = {
-  onAttachmentDismiss: () => null
+  onAttachmentDismiss: () => null,
+  shouldUseOverflow: false
 };
 export const AttachmentListProvider = AttachmentListContext.Provider;
 export const useAttachmentListContext_unstable = selector => useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));

package/lib/contexts/attachmentListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["attachmentListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AttachmentListProps } from '../components/index';\n\nexport const AttachmentListContext: Context<AttachmentListContextValue> = createContext<\n  AttachmentListContextValue | undefined\n>(undefined) as Context<AttachmentListContextValue>;\n\nconst attachmentListContextDefaultValue: AttachmentListContextValue = {\n  onAttachmentDismiss: () => null,\n};\n\n/**\n * Context shared between AttachmentList and its children components\n */\nexport type AttachmentListContextValue = Pick<AttachmentListProps, 'onAttachmentDismiss'>;\n\nexport const AttachmentListProvider = AttachmentListContext.Provider;\n\nexport const useAttachmentListContext_unstable = <T>(selector: ContextSelector<AttachmentListContextValue, T>) =>\n  useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AttachmentListContext","undefined","attachmentListContextDefaultValue","onAttachmentDismiss","AttachmentListProvider","Provider","useAttachmentListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,wBAA6DF,cAExEG,WAAkD;AAEpD,MAAMC,oCAAgE;IACpEC,qBAAqB,IAAM;AAC7B;AAOA,OAAO,MAAMC,yBAAyBJ,sBAAsBK,QAAQ,CAAC;AAErE,OAAO,MAAMC,oCAAoC,CAAIC,WACnDR,mBAAmBC,uBAAuB,CAACQ,MAAMN,iCAAiC,GAAKK,SAASC,MAAM"}
+{"version":3,"sources":["attachmentListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AttachmentListState } from '../components/index';\n\nexport const AttachmentListContext: Context<AttachmentListContextValue> = createContext<\n  AttachmentListContextValue | undefined\n>(undefined) as Context<AttachmentListContextValue>;\n\nconst attachmentListContextDefaultValue: AttachmentListContextValue = {\n  onAttachmentDismiss: () => null,\n  shouldUseOverflow: false,\n};\n\n/**\n * Context shared between AttachmentList and its children components\n */\nexport type AttachmentListContextValue = Pick<AttachmentListState, 'onAttachmentDismiss' | 'shouldUseOverflow'>;\n\nexport const AttachmentListProvider = AttachmentListContext.Provider;\n\nexport const useAttachmentListContext_unstable = <T>(selector: ContextSelector<AttachmentListContextValue, T>) =>\n  useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AttachmentListContext","undefined","attachmentListContextDefaultValue","onAttachmentDismiss","shouldUseOverflow","AttachmentListProvider","Provider","useAttachmentListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,wBAA6DF,cAExEG,WAAkD;AAEpD,MAAMC,oCAAgE;IACpEC,qBAAqB,IAAM;IAC3BC,mBAAmB;AACrB;AAOA,OAAO,MAAMC,yBAAyBL,sBAAsBM,QAAQ,CAAC;AAErE,OAAO,MAAMC,oCAAoC,CAAIC,WACnDT,mBAAmBC,uBAAuB,CAACS,MAAMP,iCAAiC,GAAKM,SAASC,MAAM"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { AttachmentTagProps, AttachmentTagSlots, AttachmentTagState } from './AttachmentTag';\nexport {\n  AttachmentTag,\n  attachmentTagClassNames,\n  renderAttachmentTag_unstable,\n  useAttachmentTagStyles_unstable,\n  useAttachmentTag_unstable,\n} from './AttachmentTag';\nexport type {\n  AttachmentTagDismissedData,\n  AttachmentTagListProps,\n  AttachmentTagListSlots,\n  AttachmentTagListState,\n} from './AttachmentTagList';\nexport {\n  AttachmentTagList,\n  attachmentTagListClassNames,\n  renderAttachmentTagList_unstable,\n  useAttachmentTagListStyles_unstable,\n  useAttachmentTagList_unstable,\n} from './AttachmentTagList';\n\nexport type { AttachmentTagItemProps, AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem';\nexport {\n  AttachmentTagItem,\n  attachmentTagItemClassNames,\n  renderAttachmentTagItem_unstable,\n  useAttachmentTagItemStyles_unstable,\n  useAttachmentTagItem_unstable,\n} from './AttachmentTagItem';\n\nexport type { AttachmentListProps, AttachmentListSlots, AttachmentListState } from './AttachmentList';\nexport {\n  AttachmentList,\n  attachmentListClassNames,\n  renderAttachmentList_unstable,\n  useAttachmentListStyles_unstable,\n  useAttachmentList_unstable,\n} from './AttachmentList';\nexport type { AttachmentListContextValue } from './contexts/attachmentListContext';\nexport {\n  AttachmentListContext,\n  AttachmentListProvider,\n  useAttachmentListContext_unstable,\n} from './contexts/attachmentListContext';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment';\nexport {\n  Attachment,\n  attachmentClassNames,\n  renderAttachment_unstable,\n  useAttachmentStyles_unstable,\n  useAttachment_unstable,\n} from './Attachment';\n\nexport type {\n  AttachmentOverflowMenuProps,\n  AttachmentOverflowMenuSlots,\n  AttachmentOverflowMenuState,\n} from './AttachmentOverflowMenu';\nexport {\n  AttachmentOverflowMenu,\n  renderAttachmentOverflowMenu_unstable,\n  useAttachmentOverflowMenu_unstable,\n} from './AttachmentOverflowMenu';\n\nexport type { AttachmentOverflowMenuContextValue } from './contexts/attachmentOverflowMenuContext';\nexport {\n  AttachmentOverflowMenuContext,\n  AttachmentOverflowMenuProvider,\n  useAttachmentOverflowMenuContext_unstable,\n} from './contexts/attachmentOverflowMenuContext';\n\nexport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton';\nexport {\n  AttachmentOverflowMenuButton,\n  attachmentOverflowMenuButtonClassNames,\n  renderAttachmentOverflowMenuButton_unstable,\n  useAttachmentOverflowMenuButtonStyles_unstable,\n  useAttachmentOverflowMenuButton_unstable,\n} from './AttachmentOverflowMenuButton';\n\nexport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem';\nexport {\n  AttachmentOverflowMenuItem,\n  attachmentOverflowMenuItemClassNames,\n  renderAttachmentOverflowMenuItem_unstable,\n  useAttachmentOverflowMenuItemStyles_unstable,\n  useAttachmentOverflowMenuItem_unstable,\n} from './AttachmentOverflowMenuItem';\n"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","AttachmentList","attachmentListClassNames","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentList_unstable","AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable","AttachmentOverflowMenu","renderAttachmentOverflowMenu_unstable","useAttachmentOverflowMenu_unstable","AttachmentOverflowMenuContext","AttachmentOverflowMenuProvider","useAttachmentOverflowMenuContext_unstable","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","renderAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","useAttachmentOverflowMenuButton_unstable","AttachmentOverflowMenuItem","attachmentOverflowMenuItemClassNames","renderAttachmentOverflowMenuItem_unstable","useAttachmentOverflowMenuItemStyles_unstable","useAttachmentOverflowMenuItem_unstable"],"rangeMappings":";;;;;;;;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,mCAAmC;AAE1C,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAOtB,SACEC,sBAAsB,EACtBC,qCAAqC,EACrCC,kCAAkC,QAC7B,2BAA2B;AAGlC,SACEC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,yCAAyC,QACpC,2CAA2C;AAOlD,SACEC,4BAA4B,EAC5BC,sCAAsC,EACtCC,2CAA2C,EAC3CC,8CAA8C,EAC9CC,wCAAwC,QACnC,iCAAiC;AAOxC,SACEC,0BAA0B,EAC1BC,oCAAoC,EACpCC,yCAAyC,EACzCC,4CAA4C,EAC5CC,sCAAsC,QACjC,+BAA+B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { AttachmentTagProps, AttachmentTagSlots, AttachmentTagState } from './AttachmentTag';\nexport {\n  AttachmentTag,\n  attachmentTagClassNames,\n  renderAttachmentTag_unstable,\n  useAttachmentTagStyles_unstable,\n  useAttachmentTag_unstable,\n} from './AttachmentTag';\nexport type {\n  AttachmentTagDismissedData,\n  AttachmentTagListProps,\n  AttachmentTagListSlots,\n  AttachmentTagListState,\n} from './AttachmentTagList';\nexport {\n  AttachmentTagList,\n  attachmentTagListClassNames,\n  renderAttachmentTagList_unstable,\n  useAttachmentTagListStyles_unstable,\n  useAttachmentTagList_unstable,\n} from './AttachmentTagList';\n\nexport type { AttachmentTagItemProps, AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem';\nexport {\n  AttachmentTagItem,\n  attachmentTagItemClassNames,\n  renderAttachmentTagItem_unstable,\n  useAttachmentTagItemStyles_unstable,\n  useAttachmentTagItem_unstable,\n} from './AttachmentTagItem';\n\nexport type {\n  AttachmentListProps,\n  AttachmentListSlots,\n  AttachmentListState,\n  AttachmentDismissedData,\n} from './AttachmentList';\nexport {\n  AttachmentList,\n  attachmentListClassNames,\n  renderAttachmentList_unstable,\n  useAttachmentListStyles_unstable,\n  useAttachmentList_unstable,\n} from './AttachmentList';\nexport type { AttachmentListContextValue } from './contexts/attachmentListContext';\nexport {\n  AttachmentListContext,\n  AttachmentListProvider,\n  useAttachmentListContext_unstable,\n} from './contexts/attachmentListContext';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment';\nexport {\n  Attachment,\n  attachmentClassNames,\n  renderAttachment_unstable,\n  useAttachmentStyles_unstable,\n  useAttachment_unstable,\n} from './Attachment';\n\nexport type {\n  AttachmentOverflowMenuProps,\n  AttachmentOverflowMenuSlots,\n  AttachmentOverflowMenuState,\n} from './AttachmentOverflowMenu';\nexport {\n  AttachmentOverflowMenu,\n  renderAttachmentOverflowMenu_unstable,\n  useAttachmentOverflowMenu_unstable,\n} from './AttachmentOverflowMenu';\n\nexport type { AttachmentOverflowMenuContextValue } from './contexts/attachmentOverflowMenuContext';\nexport {\n  AttachmentOverflowMenuContext,\n  AttachmentOverflowMenuProvider,\n  useAttachmentOverflowMenuContext_unstable,\n} from './contexts/attachmentOverflowMenuContext';\n\nexport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton';\nexport {\n  AttachmentOverflowMenuButton,\n  attachmentOverflowMenuButtonClassNames,\n  renderAttachmentOverflowMenuButton_unstable,\n  useAttachmentOverflowMenuButtonStyles_unstable,\n  useAttachmentOverflowMenuButton_unstable,\n} from './AttachmentOverflowMenuButton';\n\nexport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem';\nexport {\n  AttachmentOverflowMenuItem,\n  attachmentOverflowMenuItemClassNames,\n  renderAttachmentOverflowMenuItem_unstable,\n  useAttachmentOverflowMenuItemStyles_unstable,\n  useAttachmentOverflowMenuItem_unstable,\n} from './AttachmentOverflowMenuItem';\n"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","AttachmentList","attachmentListClassNames","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentList_unstable","AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable","AttachmentOverflowMenu","renderAttachmentOverflowMenu_unstable","useAttachmentOverflowMenu_unstable","AttachmentOverflowMenuContext","AttachmentOverflowMenuProvider","useAttachmentOverflowMenuContext_unstable","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","renderAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","useAttachmentOverflowMenuButton_unstable","AttachmentOverflowMenuItem","attachmentOverflowMenuItemClassNames","renderAttachmentOverflowMenuItem_unstable","useAttachmentOverflowMenuItemStyles_unstable","useAttachmentOverflowMenuItem_unstable"],"rangeMappings":";;;;;;;;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAQ7B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,mCAAmC;AAE1C,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAOtB,SACEC,sBAAsB,EACtBC,qCAAqC,EACrCC,kCAAkC,QAC7B,2BAA2B;AAGlC,SACEC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,yCAAyC,QACpC,2CAA2C;AAOlD,SACEC,4BAA4B,EAC5BC,sCAAsC,EACtCC,2CAA2C,EAC3CC,8CAA8C,EAC9CC,wCAAwC,QACnC,iCAAiC;AAOxC,SACEC,0BAA0B,EAC1BC,oCAAoC,EACpCC,yCAAyC,EACzCC,4CAA4C,EAC5CC,sCAAsC,QACjC,+BAA+B"}

package/lib-commonjs/components/Attachment/Attachment.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  id: string;\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC"}
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}

package/lib-commonjs/components/Attachment/renderAttachment.js

@@ -12,7 +12,8 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactcomponents = require("@fluentui/react-components");
 const renderAttachment_unstable = (state)=>{
     (0, _reactcomponents.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+    const { id, shouldUseOverflow } = state;
+    const attachment = /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.primaryAction, {
                 children: [
@@ -26,4 +27,8 @@ const renderAttachment_unstable = (state)=>{
             })
         ]
     });
+    return shouldUseOverflow ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.OverflowItem, {
+        id: id,
+        children: attachment
+    }, id) : attachment;
 }; //# sourceMappingURL=renderAttachment.js.map

package/lib-commonjs/components/Attachment/renderAttachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","state","_jsxs","primaryAction","media","dismissButton","imageOnly","content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BATF;iCAE4B;AAO1BA,MAAAA,4BAA6BC,CAAAA;oCAE7B,EAAAA;;;uBAEI,GAAAC,IAAAA,gBAACD,EAAAA,MAAME,aAAa,EAAA;;;;;;;0BACjBF,IAAAA,eAAAA,EAAMG,MAAKC,aAAWC,EAAAA;6DACvBL,MAACA,WAAMM,EAAO,CAAA;;;;+CAGTF"}
+{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n  const { id, shouldUseOverflow } = state;\n\n  const attachment = (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n  return shouldUseOverflow ? (\n    <OverflowItem id={id} key={id}>\n      {attachment}\n    </OverflowItem>\n  ) : (\n    attachment\n  );\n};\n"],"names":["assertSlots","state","id","_jsxs","imageOnly","progress","media","_jsx","content","shouldUseOverflow","attachment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BATF;iCAE0C;AAOxCA,MAAAA,4BAA6BC,CAAAA;oCACrBC,EAAED;UAEV;uBAGOA,WAAW,GAAAE,IAAAA,gBAAKF,EAAAA,MAAMG,IAAAA,EAAS;;gDAChCH,MAACA,aAAa,EAAA;;0BACbA,KAAMI,IAAAA,CAAAA,MAAQD,SAAA,IAAI,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,MAAQC,KAAA,EAAA,CAAA;oBAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAN,MAAAO,OAAA,EAAA,CAAA;oBAAAP,MAAAI,QAAA,IAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAN,MAAAI,QAAA,EAAA,CAAA;iBAAA;;;;;;;;;;OAOxCH,MAAOO;+CAEFC"}

package/lib-commonjs/components/Attachment/useAttachment.js

@@ -14,13 +14,15 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
 const _attachmentListContext = require("../../contexts/attachmentListContext");
 const useAttachment_unstable = (props, ref)=>{
-    const { imageOnly } = props;
+    const { children, imageOnly } = props;
     const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
-    const onAttachmentDismiss = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context.onAttachmentDismiss);
+    const { onAttachmentDismiss, shouldUseOverflow } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
+    const attachmentId = (0, _reactcomponents.useId)('attachment-', props.id);
     const isLoading = !!props.progress;
     const root = _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
         ref,
-        ...props
+        ...props,
+        id: attachmentId
     }), {
         elementType: 'div'
     });
@@ -33,9 +35,13 @@ const useAttachment_unstable = (props, ref)=>{
         },
         elementType: 'button'
     });
-    dismissButton.onClick = (0, _reactcomponents.mergeCallbacks)(dismissButton.onClick, (ev)=>onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
-            id: props.id
-        }));
+    dismissButton.onClick = (0, _reactcomponents.mergeCallbacks)(dismissButton.onClick, (ev)=>{
+        onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+            content: children,
+            media,
+            id: attachmentId
+        });
+    });
     const media = _reactcomponents.slot.optional(props.media, {
         elementType: 'span'
     });
@@ -60,6 +66,7 @@ const useAttachment_unstable = (props, ref)=>{
         elementType: _reactcomponents.ProgressBar
     });
     const state = {
+        id: attachmentId,
         components: {
             root: 'div',
             primaryAction: 'button',
@@ -77,7 +84,8 @@ const useAttachment_unstable = (props, ref)=>{
         dismissIcon,
         progress,
         imageOnly,
-        isLoading
+        isLoading,
+        shouldUseOverflow
     };
     if (state.primaryAction.as === 'span') {
         state.components.primaryAction = 'span';

package/lib-commonjs/components/Attachment/useAttachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { imageOnly } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n  const isLoading = !!props.progress;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Dismiss' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => onAttachmentDismiss?.(ev, { id: props.id }),\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  const state: AttachmentState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n      progress: ProgressBar,\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    progress,\n    imageOnly,\n    isLoading,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["imageOnly","props","onAttachmentDismiss","DismissIcon","always","getIntrinsicElementProps","ref","isLoading","progress","root","slot","elementType","primaryAction","dismissButton","defaultProps","media","optional","onClick","ev","content","children","dismissIcon","React","createElement","thickness","id","components","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCACqD;4BACd;uCACZ;AAahD,MAAQA,yBAAcC,CAAAA,OAAAA;UACtB,EACAD,SAAME,KACND;UAEAE,cAAkBC,IAAAA,sBAChBC,EAAAA,2BAAAA,EAAAA,4BAAgC;UAC9BC,sBAAAA,IAAAA,wDAAAA,EAAAA,CAAAA,UAAAA,QAAAA,mBAAAA;UACAC,YAAQ,CAAA,CAAAN,MAAAO,QAAA;UAEVC,OAAAC,qBAAA,CAAAN,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;;QAAqB,GAAAJ,KAAA;QAGvB;qBACEU;;UAGFC,gBAAMC,qBAAgBH,CAAAA,MAAKN,CAAAA,MAAOH,aAAMY,EAAa;qBACnDC;;UAAwCD,gBAAAH,qBAAA,CAAAN,MAAA,CAAAH,MAAAY,aAAA,EAAA;sBACxCF;YACF,cAAA;QAEAE;qBAEmGZ;;kBAG7Fc,OAAaC,GAAAA,IAAAA,+BAAeD,EAAAA,cAAOE,OAAA,EAAAC,CAAAA,KAAAhB,wBAAA,QAAAA,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAgB,IAAA;gBAAEP,MAAAA,EAAAA;;UAE3CI,QAAMI,qBAAUT,CAAAA,QAAKN,CAAAA,MAAOH,KAAMkB,EAAAA;qBAChCL;;UAEAK,UAAAT,qBAAA,CAAAN,MAAA,CAAAH,MAAAkB,OAAA,EAAA;sBACAR;YACFS,UAAAnB,MAAAmB,QAAA;QAEA;qBACEN;;UAEAO,cAAAX,qBAAA,CAAAN,MAAA,CAAAH,MAAAoB,WAAA,EAAA;sBACAV;YACFS,UAAA,WAAA,GAAAE,OAAAC,aAAA,CAAApB,aAAA;QAEA;qBACEW;;qBAEEU,qBAAW,CAAAR,QAAA,CAAAf,MAAAO,QAAA,EAAA;sBACX;mBACF;uBACAG;YACF,mBAAAV,MAAAwB,EAAA;QAEA;qBACEC,4BAAY;;kBAEVd;oBACAC;kBACAE;2BACS;2BACTM;mBACAb;qBACF;yBAEAC;sBACAG,4BAAAA;;;;;;;;QAQFJ;QAEAR;;;QAIA2B,MAAOA,aAAAA,CAAAA,EAAAA,KAAAA,QAAAA;QACPA,MAAAD,UAAA,CAAAd,aAAA,GAAA"}
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { children, imageOnly } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n      id: attachmentId,\n    }),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Dismiss' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n      onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n    },\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  const state: AttachmentState = {\n    id: attachmentId,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n      progress: ProgressBar,\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    progress,\n    imageOnly,\n    isLoading,\n    shouldUseOverflow,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["children","props","onAttachmentDismiss","imageOnly","attachmentId","DismissIcon","always","getIntrinsicElementProps","ref","useAttachmentListContext_unstable","context","elementType","useId","id","isLoading","progress","root","primaryAction","slot","content","media","optional","onClick","ev","defaultProps","dismissIcon","shape","thickness","React","createElement","components","dismissButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCAC4D;4BACrB;uCACZ;AAahD,MAAQA,yBAAwBC,CAAAA,OAAAA;UAChC,EACAD,QAAQE,EACRC,SAAMC,KACNH;UAEAI,cAAkBC,IAAAA,sBAChBC,EAAAA,2BAAAA,EAAAA,4BAAgC;UAC9BC,qBACQ,mBACJJ,KACNK,IAAAA,wDACA,EAAAC,CAAAA,UAAAA;UAAEC,eAAaC,IAAAA,sBAAA,EAAA,eAAAX,MAAAY,EAAA;UAAMC,YAAA,CAAA,CAAAb,MAAAc,QAAA;UAGvBC,OAAMC,qBAAAA,CAAAA,MAAgBC,CAAAA,IAAAA,yCAAkBD,EAAAA,OAAe;;QAEvD,GAAAhB,KAAA;QAEAY,IAAAT;;qBACkB;;UAChBO,gBAAaO,qBAAA,CAAAZ,MAAA,CAAAL,MAAAgB,aAAA,EAAA;QACfN,aAAA;;UAKIT,gBAAAA,qBAAAA,CAAAA,MAAAA,CAAAA,MAAAA,aAAAA,EAAAA;sBAA4BiB;0BAAmBC;;qBAAwB;;kBAIrEA,OAAaC,GAAAA,IAAAA,+BAAeD,EAAAA,cAAOE,OAAA,EAAAC,CAAAA;gCAAe,QAAArB,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAqB,IAAA;YAAOJ,SAAAnB;YAE/DoB;gBACEI;;;UAGAb,QAAAA,qBAAAA,CAAaU,QAAA,CAAApB,MAAAmB,KAAA,EAAA;QACfT,aAAA;;UAGEa,UAAAA,qBAAc,CAAAlB,MAAA,CAAAL,MAAAkB,OAAA,EAAA;sBACZnB;sBACFC,MAAAD,QAAA;;QAEFW,aAAA;;UAGEa,cAAcN,qBAAA,CAAAZ,MAAA,CAAAL,MAAAwB,WAAA,EAAA;sBACZC;sBACAC,WAAW,GAAAC,OAAAC,aAAA,CAAAxB,aAAA;;qBAEb;;UAEFU,WAAAG,qBAAA,CAAAG,QAAA,CAAApB,MAAAc,QAAA,EAAA;QAEAS,cAA+B;mBACzBpB;uBACJ0B;+BACQ7B,MAAAY,EAAA;;qBAENkB,4BAAe;;kBAEfZ;;oBAEAJ;kBACF;2BAEAC;2BACAC;mBACAc;qBACAX;yBACAD;sBACAM,4BAAAA;;;;;QAKFL;QAEAD;;QAEAJ;QAEAZ;QACAW"}

package/lib-commonjs/components/Attachment/useAttachmentStyles.js

@@ -14,6 +14,9 @@ _export(exports, {
     },
     useAttachmentStyles_unstable: function() {
         return useAttachmentStyles_unstable;
+    },
+    useOverflowStyles: function() {
+        return useOverflowStyles;
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
@@ -145,6 +148,15 @@ const useImageOnlyStyles = (0, _reactcomponents.__styles)({
         ".fez10in{line-height:0;}"
     ]
 });
+const useOverflowStyles = (0, _reactcomponents.__styles)({
+    overflow: {
+        a9b677: "fly5x3f"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}"
+    ]
+});
 const useAttachmentStyles_unstable = (state)=>{
     const rootBaseClassName = useRootBaseClassName();
     const primaryActionBaseClassName = usePrimaryActionBaseClassName();

package/lib-commonjs/components/Attachment/useAttachmentStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  slot,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon',\n  progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n  position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  color: tokens.colorNeutralForeground1,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  ...createCustomFocusIndicatorStyle({\n    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  ':focus': {\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    ...shorthands.padding(0),\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const { imageOnly, primaryAction } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentClassNames","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","outline","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","shorthands","zIndex","Bi91k9c","verticalAlign","lj723h","Bqrx1nm","usePrimaryActionBaseClassName","kx9iu6","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","borderTopLeftRadius","borderBottomLeftRadius","borderRadiusNone","borderTopRightRadius","borderBottomRightRadius","contentBaseClassName","useContentBaseClassName","useDismissIconBaseClassName","colorNeutralForeground2BrandHover","imageOnlyStyles","state","rootBaseClassName","className","colorNeutralForeground2BrandPressed","primaryActionBaseClassName","as","isLoading","primaryActionStyles","imageOnly","mergeClasses","dismissButtonBaseClassName","mediaBaseClassName","dismissIconBaseClassName","progressBarStyles","bar","value","undefined","indeterminateProgressBar","useMediaBaseClassName","regularProgressBar","fontSize","height","lineHeight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  slot,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon',\n  progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n  position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  color: tokens.colorNeutralForeground1,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  ...createCustomFocusIndicatorStyle({\n    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  ':focus': {\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    ...shorthands.padding(0),\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\nexport const useOverflowStyles = makeStyles({\n  overflow: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const { imageOnly, primaryAction } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentClassNames","backgroundColor","colorNeutralBackground3Hover","maxWidth","ATTACHMENT_SIZE","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","borderRadius","outline","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","shorthands","zIndex","Bi91k9c","verticalAlign","lj723h","Bqrx1nm","usePrimaryActionBaseClassName","kx9iu6","borderRightStyle","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","a9b677","borderBottomLeftRadius","colorNeutralForeground2BrandHover","primaryActionBaseClassName","colorBrandForegroundLinkHover","mediaBaseClassName","useMediaBaseClassName","contentBaseClassName","useContentBaseClassName","dismissIconBaseClassName","useDismissIconBaseClassName","colorNeutralForeground2BrandPressed","imageOnlyStyles","useImageOnlyStyles","className","mergeClasses","rootBaseClassName","state","as","isLoading","primaryActionStyles","imageOnly","dismissButtonBaseClassName","progressBarStyles","fontSize","height","lineHeight","width","bar","indeterminateProgressBar","overflowX","regularProgressBar","textOverflow","whiteSpace"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/AttachmentList/AttachmentList.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\n\nexport type AttachmentListSlots = {\n  root: Slot<'div'>;\n};\n\nexport type AttachmentDismissedData = {\n  id: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n  onAttachmentDismiss?: (\n    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n    data: AttachmentDismissedData,\n  ) => void;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n  Pick<AttachmentListProps, 'onAttachmentDismiss'>;\n\nexport type AttachmentListContextValues = {\n  attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n  root: Slot<'div'>;\n  overflowMenuButton: Slot<'span'>;\n  overflowMenuItem: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n  content?: AttachmentProps['children'];\n  media?: AttachmentProps['media'];\n  id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n  onAttachmentDismiss?: (\n    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n    data: AttachmentDismissedData,\n  ) => void;\n  overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n  /**\n   * The maximum number of attachments 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  maxVisibleAttachments?: number;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n  Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {\n    attachments: AttachmentProps[];\n    shouldUseOverflow: boolean;\n  };\n\nexport type AttachmentListContextValues = {\n  attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}