@corva/ui 3.76.0-1 → 3.76.0-10

package/cjs-bundle/componentsV2/AppHeader/V3/useResponsivity.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsivity.js","sources":["../../../../../src/componentsV2/AppHeader/V3/useResponsivity.tsx"],"sourcesContent":["import { CSSProperties, RefObject, useEffect, useRef, useState } from 'react';\nimport { isEqual, throttle } from 'lodash';\n\nimport CssConstants from './constants.scss';\n\ntype Params = {\n  disabled?: boolean;\n  titleControlsLeft?: boolean;\n\n  rootRef: RefObject<HTMLElement>;\n  versionRef: RefObject<HTMLElement>;\n  padModeRef: RefObject<HTMLElement>;\n  additionalControlsRef: RefObject<HTMLElement>;\n  titleControlsRef: RefObject<HTMLElement>;\n  chipsRef: RefObject<HTMLElement>;\n  logoRef: RefObject<HTMLElement>;\n  actionsRef: RefObject<HTMLElement>;\n};\n\ntype ResponsivityDataItem = {\n  style?: CSSProperties & Record<`--${string}`, number | string>;\n  lastInLine?: boolean;\n};\n\ntype ResponsivityData = {\n  root?: ResponsivityDataItem;\n  padMode?: ResponsivityDataItem;\n  additionalControls?: ResponsivityDataItem;\n  titleControls?: ResponsivityDataItem;\n  chips?: ResponsivityDataItem;\n  actions?: ResponsivityDataItem;\n  title?: ResponsivityDataItem;\n\n  linebreaks?: CSSProperties[];\n};\n\nconst gap = parseInt(CssConstants.gap, 10);\nconst titleMinWidth = parseInt(CssConstants.titleMinWidth, 10) + gap;\n\nconst getRefWidth = (ref: RefObject<HTMLElement>) => {\n  // This causes a reflow, so if it lags too much - use the `ref.current?.offsetWidth + 1`\n  // `ref.current?.offsetWidth` rounds pixel fractions so it may produce incorrect results/need adjustment\n  return ref.current?.getBoundingClientRect().width || 0;\n};\n\nconst sumLineWidth = (titleMinWidth: number, ...lineRefs: RefObject<HTMLElement>[]) => {\n  const filteredRefs = lineRefs.filter(ref => !!ref.current && ref.current.offsetWidth > 0);\n  return (\n    titleMinWidth +\n    filteredRefs.reduce((acc, ref) => acc + getRefWidth(ref), 0) +\n    (filteredRefs.length > 1 ? (filteredRefs.length - 1) * gap : 0)\n  );\n};\n\n/**\n * Detects when child elements stop fitting in a single header line and returns CSS orders, linebreaks, & other info for header elements\n *\n * There are several possible layouts:\n *\n * 1. Everything fits in one line\n * 2. 2 lines:\n *    [logo] [title] [version] [asset chips] [actions]\n *    [title controls] [pad mode] [additional controls]\n *    and other variants that fit into 2 lines\n * 3. 3 lines:\n *    [logo] [title] [version]\n *    [title controls] [additional controls] [actions]\n *    [pad mode] [chips]\n */\nexport const useResponsivity = ({\n  disabled,\n  actionsRef,\n  chipsRef,\n  logoRef,\n  rootRef,\n  titleControlsRef,\n  additionalControlsRef,\n  versionRef,\n  padModeRef,\n  titleControlsLeft,\n}: Params) => {\n  const [value, setValue] = useState<ResponsivityData>({});\n  const previousWidthRef = useRef(-1);\n\n  useEffect(() => {\n    const calculateCss = throttle(\n      () => {\n        requestAnimationFrame(() => {\n          const rootWidth = rootRef.current?.offsetWidth || 0;\n\n          const setCss = (baseData: ResponsivityData) => {\n            // We need nowrap to properly handle title when app title is very long and we have title controls to the left\n            const isNowrap =\n              titleControlsLeft &&\n              sumLineWidth(\n                titleMinWidth,\n                logoRef,\n                versionRef,\n                chipsRef,\n                actionsRef,\n                titleControlsRef,\n                additionalControlsRef,\n                padModeRef\n              ) <= rootWidth;\n\n            const data = isNowrap\n              ? {\n                  ...baseData,\n                  root: {\n                    style: {\n                      ...baseData.root?.style,\n                      '--headerV3-responsivity-flexwrap': 'nowrap',\n                    },\n                  },\n                }\n              : baseData;\n\n            // Prevent unnecessary rerenders & rerender loop: recalc -> update values -> recalc -> update values to the same values\n            setValue(value => (isEqual(value, data) ? value : data));\n          };\n\n          const getTitleMaxWidthStyle = (...refs: RefObject<HTMLElement>[]) => {\n            if (!titleControlsLeft) {\n              return undefined;\n            }\n\n            const pixels = sumLineWidth(0, ...refs) + gap;\n            return { '--headerV3-responsivity-maxWidth': `calc(100% - ${pixels}px)` };\n          };\n\n          // Case 1 - everything fits\n          if (\n            sumLineWidth(\n              titleMinWidth,\n              logoRef,\n              versionRef,\n              chipsRef,\n              actionsRef,\n              titleControlsRef,\n              additionalControlsRef,\n              padModeRef\n            ) <= rootWidth\n          ) {\n            setCss({\n              title: { style: { '--headerV3-responsivity-marginRight': 0 } },\n            });\n          }\n          // 2 lines\n          // [logo] [title] [version] [asset chips] [actions]\n          // [title controls] [pad mode] [additional controls]\n          else if (\n            sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef, actionsRef) <= rootWidth\n          ) {\n            setCss({\n              linebreaks: [{ order: 100 }],\n              titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n              padMode: { style: { '--headerV3-responsivity-order': 120 } },\n              additionalControls: {\n                style: { '--headerV3-responsivity-order': 130 },\n                lastInLine: true,\n              },\n              title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef, actionsRef) },\n            });\n          }\n          // 2 lines - no padmode, has chips\n          // [logo] [title] [version] [asset chips]\n          // [title controls] [additional controls] [actions]\n          else if (\n            !padModeRef.current &&\n            sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef) <= rootWidth\n          ) {\n            setCss({\n              linebreaks: [{ order: 100 }],\n              titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n              additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n              actions: { style: { '--headerV3-responsivity-order': 130 }, lastInLine: true },\n\n              title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef) },\n            });\n          }\n          // 2 lines:\n          // [logo] [title] [version] [chips]\n          // [title controls] [additional controls] [pad mode] [actions]\n          else if (\n            sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef) <= rootWidth &&\n            sumLineWidth(0, titleControlsRef, additionalControlsRef, padModeRef, actionsRef) <=\n              rootWidth\n          ) {\n            setCss({\n              linebreaks: [{ order: 100 }],\n              titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n              additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n              padMode: { style: { '--headerV3-responsivity-order': 130 } },\n              actions: { style: { '--headerV3-responsivity-order': 140 }, lastInLine: true },\n\n              title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef) },\n            });\n          }\n          // 3 lines\n          // [logo] [title] [version]\n          // [title controls] [additional controls] [actions]\n          // [pad mode] [chips]\n          else {\n            setCss({\n              linebreaks: [{ order: 100 }, { order: 200 }],\n              titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n              additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n              actions: { style: { '--headerV3-responsivity-order': 130 }, lastInLine: true },\n              padMode: { style: { '--headerV3-responsivity-order': 210 } },\n              chips: { style: { '--headerV3-responsivity-order': 220 }, lastInLine: true },\n\n              title: { style: getTitleMaxWidthStyle(logoRef, versionRef) },\n            });\n          }\n        });\n      },\n      100,\n      { leading: true }\n    );\n\n    const resizeObserver = new ResizeObserver(() => {\n      const rootWidth = rootRef.current?.offsetWidth || 0;\n      if (rootWidth !== previousWidthRef.current) {\n        calculateCss();\n      }\n      previousWidthRef.current = rootWidth;\n    });\n    const mutationObserver = new MutationObserver(calculateCss);\n\n    if (rootRef.current && !disabled) {\n      resizeObserver.observe(rootRef.current);\n      mutationObserver.observe(rootRef.current, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n      calculateCss.cancel();\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, [\n    actionsRef,\n    chipsRef,\n    logoRef,\n    rootRef,\n    titleControlsRef,\n    additionalControlsRef,\n    versionRef,\n    padModeRef,\n    disabled,\n    titleControlsLeft,\n  ]);\n\n  return value;\n};\n"],"names":["gap","parseInt","CssConstants","titleMinWidth","getRefWidth","ref","_ref$current","current","getBoundingClientRect","width","sumLineWidth","_len","arguments","length","lineRefs","Array","_key","filteredRefs","filter","offsetWidth","reduce","acc","_ref","disabled","actionsRef","chipsRef","logoRef","rootRef","titleControlsRef","additionalControlsRef","versionRef","padModeRef","titleControlsLeft","_useState","useState","_useState2","_slicedToArray","value","setValue","previousWidthRef","useRef","useEffect","calculateCss","throttle","requestAnimationFrame","_rootRef$current","rootWidth","setCss","baseData","_baseData$root","data","_objectSpread","root","style","isEqual","getTitleMaxWidthStyle","_len2","refs","_key2","pixels","apply","title","linebreaks","order","titleControls","padMode","additionalControls","lastInLine","actions","chips","leading","resizeObserver","ResizeObserver","_rootRef$current2","mutationObserver","MutationObserver","observe","childList","subtree","characterData","cancel","disconnect"],"mappings":"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"}
+{"version":3,"file":"useResponsivity.js","sources":["../../../../../src/componentsV2/AppHeader/V3/useResponsivity.tsx"],"sourcesContent":["import { CSSProperties, RefObject, useEffect, useRef, useState } from 'react';\nimport { isEqual, throttle } from 'lodash';\n\nimport CssConstants from './constants.scss';\n\ntype Params = {\n  disabled?: boolean;\n  titleControlsLeft?: boolean;\n\n  rootRef: RefObject<HTMLElement>;\n  versionRef: RefObject<HTMLElement>;\n  padModeRef: RefObject<HTMLElement>;\n  additionalControlsRef: RefObject<HTMLElement>;\n  titleControlsRef: RefObject<HTMLElement>;\n  chipsRef: RefObject<HTMLElement>;\n  logoRef: RefObject<HTMLElement>;\n  actionsRef: RefObject<HTMLElement>;\n};\n\ntype ResponsivityDataItem = {\n  style?: CSSProperties & Record<`--${string}`, number | string>;\n  lastInLine?: boolean;\n};\n\ntype ResponsivityData = {\n  root?: ResponsivityDataItem;\n  padMode?: ResponsivityDataItem;\n  additionalControls?: ResponsivityDataItem;\n  titleControls?: ResponsivityDataItem;\n  chips?: ResponsivityDataItem;\n  actions?: ResponsivityDataItem;\n  title?: ResponsivityDataItem;\n\n  linebreaks?: CSSProperties[];\n};\n\nconst gap = parseInt(CssConstants.gap, 10);\nconst titleMinWidth = parseInt(CssConstants.titleMinWidth, 10) + gap;\n\nconst getRefWidth = (ref: RefObject<HTMLElement>) => {\n  // This causes a reflow, so if it lags too much - use the `ref.current?.offsetWidth + 1`\n  // `ref.current?.offsetWidth` rounds pixel fractions so it may produce incorrect results/need adjustment\n  return ref.current?.getBoundingClientRect().width || 0;\n};\n\nconst sumLineWidth = (titleMinWidth: number, ...lineRefs: RefObject<HTMLElement>[]) => {\n  const filteredRefs = lineRefs.filter(ref => !!ref.current && ref.current.offsetWidth > 0);\n  return (\n    titleMinWidth +\n    filteredRefs.reduce((acc, ref) => acc + getRefWidth(ref), 0) +\n    (filteredRefs.length > 1 ? (filteredRefs.length - 1) * gap : 0)\n  );\n};\n\n/**\n * Detects when child elements stop fitting in a single header line and returns CSS orders, linebreaks, & other info for header elements\n *\n * There are several possible layouts:\n *\n * 1. Everything fits in one line\n * 2. 2 lines:\n *    [logo] [title] [version] [asset chips] [actions]\n *    [title controls] [pad mode] [additional controls]\n *    and other variants that fit into 2 lines\n * 3. 3 lines:\n *    [logo] [title] [version]\n *    [title controls] [additional controls] [actions]\n *    [pad mode] [chips]\n */\nexport const useResponsivity = ({\n  disabled,\n  actionsRef,\n  chipsRef,\n  logoRef,\n  rootRef,\n  titleControlsRef,\n  additionalControlsRef,\n  versionRef,\n  padModeRef,\n  titleControlsLeft,\n}: Params) => {\n  const [value, setValue] = useState<ResponsivityData>({});\n  const previousWidthRef = useRef(-1);\n\n  useEffect(() => {\n    const calculateCss = throttle(\n      () => {\n        requestAnimationFrame(() => {\n          const rootWidth = rootRef.current?.offsetWidth || 0;\n\n          const setCss = (baseData: ResponsivityData) => {\n            // We need nowrap to properly handle title when app title is very long and we have title controls to the left\n            const isNowrap =\n              titleControlsLeft &&\n              sumLineWidth(\n                titleMinWidth,\n                logoRef,\n                versionRef,\n                chipsRef,\n                actionsRef,\n                titleControlsRef,\n                additionalControlsRef,\n                padModeRef\n              ) <= rootWidth;\n\n            const data = isNowrap\n              ? {\n                  ...baseData,\n                  root: {\n                    style: {\n                      ...baseData.root?.style,\n                      '--headerV3-responsivity-flexwrap': 'nowrap',\n                    },\n                  },\n                }\n              : baseData;\n\n            // Prevent unnecessary rerenders & rerender loop: recalc -> update values -> recalc -> update values to the same values\n            setValue(value => (isEqual(value, data) ? value : data));\n          };\n\n          const getTitleMaxWidthStyle = (...refs: RefObject<HTMLElement>[]) => {\n            if (!titleControlsLeft) {\n              return undefined;\n            }\n\n            const pixels = sumLineWidth(0, ...refs) + gap;\n            return { '--headerV3-responsivity-maxWidth': `calc(100% - ${pixels}px)` };\n          };\n\n          // Case 1 - everything fits\n          if (\n            sumLineWidth(\n              titleMinWidth,\n              logoRef,\n              versionRef,\n              chipsRef,\n              actionsRef,\n              titleControlsRef,\n              additionalControlsRef,\n              padModeRef\n            ) <= rootWidth\n          ) {\n            setCss({\n              title: { style: { '--headerV3-responsivity-marginRight': 0 } },\n            });\n          }\n          // 2 lines\n          // [logo] [title] [version] [asset chips] [actions]\n          // [title controls] [pad mode] [additional controls]\n          else if (\n            sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef, actionsRef) <= rootWidth\n          ) {\n            setCss({\n              linebreaks: [{ order: 100 }],\n              titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n              padMode: { style: { '--headerV3-responsivity-order': 120 } },\n              additionalControls: {\n                style: { '--headerV3-responsivity-order': 130 },\n                lastInLine: true,\n              },\n              title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef, actionsRef) },\n            });\n          }\n          // 2 lines - no padmode, has chips\n          // [logo] [title] [version] [asset chips]\n          // [title controls] [additional controls] [actions]\n          else if (\n            !padModeRef.current &&\n            sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef) <= rootWidth\n          ) {\n            setCss({\n              linebreaks: [{ order: 100 }],\n              titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n              additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n              actions: { style: { '--headerV3-responsivity-order': 130 }, lastInLine: true },\n\n              title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef) },\n            });\n          }\n          // 2 lines:\n          // [logo] [title] [version] [chips]\n          // [title controls] [additional controls] [pad mode] [actions]\n          else if (\n            sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef) <= rootWidth &&\n            sumLineWidth(0, titleControlsRef, additionalControlsRef, padModeRef, actionsRef) <=\n              rootWidth\n          ) {\n            setCss({\n              linebreaks: [{ order: 100 }],\n              titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n              additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n              padMode: { style: { '--headerV3-responsivity-order': 130 } },\n              actions: { style: { '--headerV3-responsivity-order': 140 }, lastInLine: true },\n\n              title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef) },\n            });\n          }\n          // 3 lines\n          // [logo] [title] [version]\n          // [title controls] [additional controls] [actions]\n          // [pad mode] [chips]\n          else {\n            setCss({\n              linebreaks: [{ order: 100 }, { order: 200 }],\n              titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n              additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n              actions: { style: { '--headerV3-responsivity-order': 130 }, lastInLine: true },\n              padMode: { style: { '--headerV3-responsivity-order': 210 } },\n              chips: { style: { '--headerV3-responsivity-order': 220 }, lastInLine: true },\n\n              title: { style: getTitleMaxWidthStyle(logoRef, versionRef) },\n            });\n          }\n        });\n      },\n      100,\n      { leading: true }\n    );\n\n    const resizeObserver = new ResizeObserver(() => {\n      const rootWidth = rootRef.current?.offsetWidth || 0;\n      if (rootWidth !== previousWidthRef.current) {\n        calculateCss();\n      }\n      previousWidthRef.current = rootWidth;\n    });\n    const mutationObserver = new MutationObserver(calculateCss);\n\n    if (rootRef.current && !disabled) {\n      resizeObserver.observe(rootRef.current);\n      mutationObserver.observe(rootRef.current, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n      calculateCss.cancel();\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, [\n    actionsRef,\n    chipsRef,\n    logoRef,\n    rootRef,\n    titleControlsRef,\n    additionalControlsRef,\n    versionRef,\n    padModeRef,\n    disabled,\n    titleControlsLeft,\n  ]);\n\n  return disabled ? {} : value;\n};\n"],"names":["gap","parseInt","CssConstants","titleMinWidth","getRefWidth","ref","_ref$current","current","getBoundingClientRect","width","sumLineWidth","_len","arguments","length","lineRefs","Array","_key","filteredRefs","filter","offsetWidth","reduce","acc","_ref","disabled","actionsRef","chipsRef","logoRef","rootRef","titleControlsRef","additionalControlsRef","versionRef","padModeRef","titleControlsLeft","_useState","useState","_useState2","_slicedToArray","value","setValue","previousWidthRef","useRef","useEffect","calculateCss","throttle","requestAnimationFrame","_rootRef$current","rootWidth","setCss","baseData","_baseData$root","data","_objectSpread","root","style","isEqual","getTitleMaxWidthStyle","_len2","refs","_key2","pixels","apply","title","linebreaks","order","titleControls","padMode","additionalControls","lastInLine","actions","chips","leading","resizeObserver","ResizeObserver","_rootRef$current2","mutationObserver","MutationObserver","observe","childList","subtree","characterData","cancel","disconnect"],"mappings":"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"}

package/components/AttachmentPreview/AttachmentPreview.d.ts

@@ -2,6 +2,7 @@ import { AttachmentPreviewProps } from './AttachmentPreview.types';
 /**
  * Picks the strip that fits — reorderable or plain — and gives it a lightbox. Rendering lives in
  * `AttachmentRow`, drag-and-drop in `SortableAttachments`, the modal in `useAttachmentLightbox`.
+ * The strip hides its scrollbar, so overflow arrows are the scroll affordance.
  */
 export declare const AttachmentPreview: import("react").ForwardRefExoticComponent<AttachmentPreviewProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=AttachmentPreview.d.ts.map

package/components/AttachmentPreview/AttachmentPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentPreview.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentPreview/AttachmentPreview.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mHA8B7B,CAAC"}
+{"version":3,"file":"AttachmentPreview.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentPreview/AttachmentPreview.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAkCnE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,mHA6C7B,CAAC"}

package/components/AttachmentPreview/AttachmentPreview.js

@@ -1,2 +1,2 @@
-import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/objectWithoutProperties";import{forwardRef as r}from"react";import{useAttachmentLightbox as o}from"../AttachmentLightbox/useAttachmentLightbox.js";import{AttachmentRow as n}from"./AttachmentRow.js";import{SortableAttachments as i}from"./SortableAttachments.js";import{jsx as c,jsxs as m,Fragment as p}from"react/jsx-runtime";var l=["onReorder","onItemClick","onShare"];function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function f(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?a(Object(o),!0).forEach((function(r){e(t,r,o[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):a(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}var b=r((function(e,r){var a=e.onReorder,b=e.onItemClick,s=e.onShare,h=t(e,l),u=o(h.items,{onShare:s}),O=u.openAttachment,j=u.lightbox;if(!h.items.length)return null;var g=!!a&&h.items.length>1?c(i,f(f({},h),{},{ref:r,onReorder:a,onItemClick:null!=b?b:O})):c(n,f(f({},h),{},{ref:r,onShare:s,onItemClick:null!=b?b:O}));return m(p,{children:[g,!b&&j]})}));export{b as AttachmentPreview};
+import o from"@babel/runtime/helpers/defineProperty";import s from"@babel/runtime/helpers/objectWithoutProperties";import{forwardRef as c,useRef as n,useCallback as i}from"react";import{ButtonIcon as t}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{Tooltip as r}from"../../componentsV2/Tooltip/Tooltip.js";import{RightIcon as e,LeftIcon as m}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/SearchOne.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/PinOne.js";import"../../icons/customIcons/icons/PinOneCrossed.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{useAttachmentLightbox as p}from"../AttachmentLightbox/useAttachmentLightbox.js";import{AttachmentRow as u}from"./AttachmentRow.js";import{SortableAttachments as l}from"./SortableAttachments.js";import{useScrollOverflow as a}from"./useScrollOverflow.js";import j from"./AttachmentPreview.scss.js";import{jsx as I,jsxs as d,Fragment as h}from"react/jsx-runtime";var f=["onReorder","onItemClick","onShare"];function C(o,s){var c=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),c.push.apply(c,n)}return c}function b(s){for(var c=1;c<arguments.length;c++){var n=null!=arguments[c]?arguments[c]:{};c%2?C(Object(n),!0).forEach((function(c){o(s,c,n[c])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(n)):C(Object(n)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(n,o))}))}return s}var O=function(o){return 1===o?"1 more attachment":"".concat(o," more attachments")},g=function(o){var s=o.direction,c=o.hiddenCount,n=o.onClick;if(!c)return null;var i=1===s;return I(r,{title:O(c),children:I("div",{className:i?j.scrollArrowRight:j.scrollArrowLeft,children:I(t,{size:"xs",type:"tertiaryBg",ariaLabel:O(c),onClick:function(){return n(s)},testId:i?"attachment-scroll-right":"attachment-scroll-left",children:I(i?e:m,{size:"small"})})})})},P=c((function(o,c){var t=o.onReorder,r=o.onItemClick,e=o.onShare,m=s(o,f),C=p(m.items,{onShare:e}),O=C.openAttachment,P=C.lightbox,v=n(null),y=i((function(o){v.current=o,"function"==typeof c?c(o):c&&(c.current=o)}),[c]),A=a(v,m.items),F=A.left,k=A.right,S=A.scrollByPage;if(!m.items.length)return null;var w=!!t&&m.items.length>1?I(l,b(b({},m),{},{ref:y,onReorder:t,onItemClick:null!=r?r:O})):I(u,b(b({},m),{},{ref:y,onShare:e,onItemClick:null!=r?r:O}));return d(h,{children:[d("div",{className:j.stripShell,children:[w,I(g,{direction:-1,hiddenCount:F.hiddenCount,onClick:S}),I(g,{direction:1,hiddenCount:k.hiddenCount,onClick:S})]}),!r&&P]})}));export{P as AttachmentPreview};
 //# sourceMappingURL=AttachmentPreview.js.map

package/components/AttachmentPreview/AttachmentPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentPreview.js","sources":["../../../src/components/AttachmentPreview/AttachmentPreview.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useAttachmentLightbox } from '../AttachmentLightbox/useAttachmentLightbox';\n\nimport { AttachmentRow } from './AttachmentRow';\nimport { SortableAttachments } from './SortableAttachments';\nimport { AttachmentPreviewProps } from './AttachmentPreview.types';\n\n/**\n * Picks the strip that fits — reorderable or plain — and gives it a lightbox. Rendering lives in\n * `AttachmentRow`, drag-and-drop in `SortableAttachments`, the modal in `useAttachmentLightbox`.\n */\nexport const AttachmentPreview = forwardRef<HTMLDivElement, AttachmentPreviewProps>(\n  ({ onReorder, onItemClick, onShare, ...props }, ref) => {\n    const { openAttachment, lightbox } = useAttachmentLightbox(props.items, { onShare });\n\n    if (!props.items.length) return null;\n\n    const isSortable = !!onReorder && props.items.length > 1;\n    const strip = isSortable ? (\n      <SortableAttachments\n        {...props}\n        ref={ref}\n        onReorder={onReorder}\n        onItemClick={onItemClick ?? openAttachment}\n      />\n    ) : (\n      <AttachmentRow\n        {...props}\n        ref={ref}\n        onShare={onShare}\n        onItemClick={onItemClick ?? openAttachment}\n      />\n    );\n\n    return (\n      <>\n        {strip}\n        {!onItemClick && lightbox}\n      </>\n    );\n  }\n);\n"],"names":["AttachmentPreview","forwardRef","_ref","ref","onReorder","onItemClick","onShare","props","_objectWithoutProperties","_excluded","_useAttachmentLightbo","useAttachmentLightbox","items","openAttachment","lightbox","length","strip","_jsx","SortableAttachments","AttachmentRow","_objectSpread","_jsxs","_Fragment","children"],"mappings":"8gCAYaA,EAAoBC,GAC/B,SAAAC,EAAgDC,GAAQ,IAArDC,IAAAA,UAAWC,IAAAA,YAAaC,IAAAA,QAAYC,EAAKC,EAAAN,EAAAO,GAC1CC,EAAqCC,EAAsBJ,EAAMK,MAAO,CAAEN,QAAAA,IAAlEO,IAAAA,eAAgBC,IAAAA,SAExB,IAAKP,EAAMK,MAAMG,OAAQ,OAAO,KAEhC,IACMC,IADeZ,GAAaG,EAAMK,MAAMG,OAAS,EAErDE,EAACC,SACKX,GAAK,GAAA,CACTJ,IAAKA,EACLC,UAAWA,EACXC,YAAaA,QAAAA,EAAeQ,KAG9BI,EAACE,EAAaC,EAAAA,EAAA,CAAA,EACRb,GAAK,GAAA,CACTJ,IAAKA,EACLG,QAASA,EACTD,YAAaA,QAAAA,EAAeQ,KAIhC,OACEQ,EAAAC,EAAA,CAAAC,SAAA,CACGP,GACCX,GAAeS,IAGvB"}
+{"version":3,"file":"AttachmentPreview.js","sources":["../../../src/components/AttachmentPreview/AttachmentPreview.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\n\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { Tooltip } from '../../componentsV2/Tooltip';\nimport { LeftIcon, RightIcon } from '../../icons';\nimport { useAttachmentLightbox } from '../AttachmentLightbox/useAttachmentLightbox';\n\nimport { AttachmentRow } from './AttachmentRow';\nimport { SortableAttachments } from './SortableAttachments';\nimport { useScrollOverflow } from './useScrollOverflow';\nimport { AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nconst moreLabel = (count: number) =>\n  count === 1 ? '1 more attachment' : `${count} more attachments`;\n\ntype ScrollArrowProps = {\n  direction: -1 | 1;\n  hiddenCount: number;\n  onClick: (direction: -1 | 1) => void;\n};\n\nconst ScrollArrow = ({ direction, hiddenCount, onClick }: ScrollArrowProps) => {\n  if (!hiddenCount) return null;\n\n  const isRight = direction === 1;\n  return (\n    <Tooltip title={moreLabel(hiddenCount)}>\n      <div className={isRight ? styles.scrollArrowRight : styles.scrollArrowLeft}>\n        <ButtonIcon\n          size=\"xs\"\n          type=\"tertiaryBg\"\n          ariaLabel={moreLabel(hiddenCount)}\n          onClick={() => onClick(direction)}\n          testId={isRight ? 'attachment-scroll-right' : 'attachment-scroll-left'}\n        >\n          {isRight ? <RightIcon size=\"small\" /> : <LeftIcon size=\"small\" />}\n        </ButtonIcon>\n      </div>\n    </Tooltip>\n  );\n};\n\n/**\n * Picks the strip that fits — reorderable or plain — and gives it a lightbox. Rendering lives in\n * `AttachmentRow`, drag-and-drop in `SortableAttachments`, the modal in `useAttachmentLightbox`.\n * The strip hides its scrollbar, so overflow arrows are the scroll affordance.\n */\nexport const AttachmentPreview = forwardRef<HTMLDivElement, AttachmentPreviewProps>(\n  ({ onReorder, onItemClick, onShare, ...props }, ref) => {\n    const { openAttachment, lightbox } = useAttachmentLightbox(props.items, { onShare });\n\n    const scrollerRef = useRef<HTMLDivElement | null>(null);\n    const setScrollerRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        scrollerRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref]\n    );\n    const { left, right, scrollByPage } = useScrollOverflow(scrollerRef, props.items);\n\n    if (!props.items.length) return null;\n\n    const isSortable = !!onReorder && props.items.length > 1;\n    const strip = isSortable ? (\n      <SortableAttachments\n        {...props}\n        ref={setScrollerRef}\n        onReorder={onReorder}\n        onItemClick={onItemClick ?? openAttachment}\n      />\n    ) : (\n      <AttachmentRow\n        {...props}\n        ref={setScrollerRef}\n        onShare={onShare}\n        onItemClick={onItemClick ?? openAttachment}\n      />\n    );\n\n    return (\n      <>\n        <div className={styles.stripShell}>\n          {strip}\n          <ScrollArrow direction={-1} hiddenCount={left.hiddenCount} onClick={scrollByPage} />\n          <ScrollArrow direction={1} hiddenCount={right.hiddenCount} onClick={scrollByPage} />\n        </div>\n        {!onItemClick && lightbox}\n      </>\n    );\n  }\n);\n"],"names":["moreLabel","count","concat","ScrollArrow","_ref","direction","hiddenCount","onClick","isRight","_jsx","Tooltip","title","children","className","styles","scrollArrowRight","scrollArrowLeft","ButtonIcon","size","type","ariaLabel","testId","RightIcon","LeftIcon","AttachmentPreview","forwardRef","_ref2","ref","onReorder","onItemClick","onShare","props","_objectWithoutProperties","_excluded","_useAttachmentLightbo","useAttachmentLightbox","items","openAttachment","lightbox","scrollerRef","useRef","setScrollerRef","useCallback","node","current","_useScrollOverflow","useScrollOverflow","left","right","scrollByPage","length","strip","SortableAttachments","AttachmentRow","_objectSpread","_jsxs","_Fragment","stripShell"],"mappings":"+nKAcA,IAAMA,EAAY,SAACC,GAAa,OACpB,IAAVA,EAAc,oBAAmB,GAAAC,OAAMD,EAAwB,oBAAA,EAQ3DE,EAAc,SAA2DC,GAAA,IAAxDC,IAAAA,UAAWC,IAAAA,YAAaC,IAAAA,QAC7C,IAAKD,EAAa,OAAO,KAEzB,IAAME,EAAwB,IAAdH,EAChB,OACEI,EAACC,EAAO,CAACC,MAAOX,EAAUM,GAAaM,SACrCH,EAAA,MAAA,CAAKI,UAAWL,EAAUM,EAAOC,iBAAmBD,EAAOE,gBAAgBJ,SACzEH,EAACQ,EAAU,CACTC,KAAK,KACLC,KAAK,aACLC,UAAWpB,EAAUM,GACrBC,QAAS,WAAA,OAAMA,EAAQF,EAAW,EAClCgB,OAAQb,EAAU,0BAA4B,yBAAyBI,SAE5DH,EAAVD,EAAWc,EAA6BC,EAApB,CAACL,KAAK,eAKrC,EAOaM,EAAoBC,GAC/B,SAAAC,EAAgDC,GAAQ,IAArDC,IAAAA,UAAWC,IAAAA,YAAaC,IAAAA,QAAYC,EAAKC,EAAAN,EAAAO,GAC1CC,EAAqCC,EAAsBJ,EAAMK,MAAO,CAAEN,QAAAA,IAAlEO,IAAAA,eAAgBC,IAAAA,SAElBC,EAAcC,EAA8B,MAC5CC,EAAiBC,GACrB,SAACC,GACCJ,EAAYK,QAAUD,EACH,mBAARhB,EAAoBA,EAAIgB,GAC1BhB,IAAKA,EAAIiB,QAAUD,EAC9B,GACA,CAAChB,IAEHkB,EAAsCC,EAAkBP,EAAaR,EAAMK,OAAnEW,IAAAA,KAAMC,IAAAA,MAAOC,IAAAA,aAErB,IAAKlB,EAAMK,MAAMc,OAAQ,OAAO,KAEhC,IACMC,IADevB,GAAaG,EAAMK,MAAMc,OAAS,EAErDzC,EAAC2C,SACKrB,GAAK,GAAA,CACTJ,IAAKc,EACLb,UAAWA,EACXC,YAAaA,QAAAA,EAAeQ,KAG9B5B,EAAC4C,EAAaC,EAAAA,EAAA,CAAA,EACRvB,GAAK,GAAA,CACTJ,IAAKc,EACLX,QAASA,EACTD,YAAaA,QAAAA,EAAeQ,KAIhC,OACEkB,EAAAC,EAAA,CAAA5C,SACE,CAAA2C,EAAA,MAAA,CAAK1C,UAAWC,EAAO2C,WAAW7C,SAC/BuC,CAAAA,EACD1C,EAACN,EAAW,CAACE,WAAY,EAAGC,YAAayC,EAAKzC,YAAaC,QAAS0C,IACpExC,EAACN,EAAW,CAACE,UAAW,EAAGC,YAAa0C,EAAM1C,YAAaC,QAAS0C,QAEpEpB,GAAeS,IAGvB"}

package/components/AttachmentPreview/AttachmentPreview.scss.js

@@ -1,2 +1,2 @@
-import t from'./../../ext-esm/style-inject/dist/style-inject.es.js';var e={spacing:"8",scroller:"AttachmentPreview_scroller__ZqYC8",slot:"AttachmentPreview_slot__ewKLo",slotDragging:"AttachmentPreview_slotDragging__hrfJX",slotContent:"AttachmentPreview_slotContent__GNuSu",insertion:"AttachmentPreview_insertion__iFqlp",insertionBefore:"AttachmentPreview_insertionBefore__jyWQM",insertionEdge:"AttachmentPreview_insertionEdge__Bjk1t",insertionAfter:"AttachmentPreview_insertionAfter__4NvhP",dragGhost:"AttachmentPreview_dragGhost__4aSzE",dragGhostHandle:"AttachmentPreview_dragGhostHandle__Gu2CP",thumbnail:"AttachmentPreview_thumbnail__ytI2L",clickable:"AttachmentPreview_clickable__BEXzK",selected:"AttachmentPreview_selected__JRuMO",thumbnailInner:"AttachmentPreview_thumbnailInner__9Ex4-",thumbnailImage:"AttachmentPreview_thumbnailImage__RQ4fL",videoOverlay:"AttachmentPreview_videoOverlay__5Lgi1",playIcon:"AttachmentPreview_playIcon__OOnql",fileCard:"AttachmentPreview_fileCard__oxDbD",fileCardLink:"AttachmentPreview_fileCardLink__TDpvh",fileCardContent:"AttachmentPreview_fileCardContent__c-99Q",fileInfo:"AttachmentPreview_fileInfo__eqJ-B",fileName:"AttachmentPreview_fileName__1Ccg0",fileType:"AttachmentPreview_fileType__0v6E4",tileActions:"AttachmentPreview_tileActions__2nLlw",tileActionLink:"AttachmentPreview_tileActionLink__aMyS4",removeButton:"AttachmentPreview_removeButton__aX-qu",removeButtonVisible:"AttachmentPreview_removeButtonVisible__BVjYB",thumbnailError:"AttachmentPreview_thumbnailError__yyH08",uploadingOverlay:"AttachmentPreview_uploadingOverlay__leV1D",uploadingSpinner:"AttachmentPreview_uploadingSpinner__u-t7d",loader:"AttachmentPreview_loader__HK5bZ",errorOverlay:"AttachmentPreview_errorOverlay__8sM1d",retryButton:"AttachmentPreview_retryButton__tKVV0"};t('.AttachmentPreview_scroller__ZqYC8{-ms-overflow-style:none;align-items:flex-start;display:flex;gap:12px;margin-left:-8px;overflow-x:auto;overflow-y:visible;padding-left:8px;padding-right:8px;padding-top:6px;scroll-behavior:smooth;scrollbar-width:none}.AttachmentPreview_scroller__ZqYC8::-webkit-scrollbar{display:none}.AttachmentPreview_slot__ewKLo{border-radius:8px;cursor:grab;flex-shrink:0;position:relative;touch-action:none}.AttachmentPreview_slot__ewKLo:focus-visible{outline:none}.AttachmentPreview_slot__ewKLo:focus-visible:before{border:2px solid var(--palette-primary-main);border-radius:8px;content:"";inset:0;pointer-events:none;position:absolute;z-index:5}.AttachmentPreview_slotDragging__hrfJX{cursor:grabbing}.AttachmentPreview_slotDragging__hrfJX .AttachmentPreview_slotContent__GNuSu{visibility:hidden}.AttachmentPreview_slotDragging__hrfJX:focus-visible:before{display:none}.AttachmentPreview_slotDragging__hrfJX:after{background:rgb(from var(--palette-primary-text-1) r g b/.04);border:1px dashed var(--palette-primary-text-6);border-radius:8px;content:"";inset:0;position:absolute}.AttachmentPreview_insertion__iFqlp{background:var(--palette-primary-main);border-radius:2px;bottom:0;box-shadow:0 0 6px rgb(from var(--palette-primary-main) r g b/.6);position:absolute;top:0;width:2px;z-index:4}.AttachmentPreview_insertionBefore__jyWQM,.AttachmentPreview_insertionEdge__Bjk1t{left:-7px}.AttachmentPreview_insertionAfter__4NvhP{right:-7px}.AttachmentPreview_dragGhost__4aSzE{background:var(--palette-background-b-6);border-radius:8px;box-shadow:0 10px 20px rgb(from var(--palette-background-b-1) r g b/.45);cursor:grabbing;opacity:.9;position:relative;transform:rotate(4deg)}.AttachmentPreview_dragGhostHandle__Gu2CP{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute;z-index:2}.AttachmentPreview_dragGhostHandle__Gu2CP button{backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.16)!important;color:var(--palette-primary-text-1)!important}.AttachmentPreview_dragGhostHandle__Gu2CP svg{color:var(--palette-primary-text-1)}.AttachmentPreview_thumbnail__ytI2L{border-radius:8px;flex-shrink:0;height:64px;overflow:visible;position:relative;width:64px}.AttachmentPreview_clickable__BEXzK{cursor:pointer}.AttachmentPreview_clickable__BEXzK:hover{opacity:.9}.AttachmentPreview_selected__JRuMO:after{border:1px solid var(--palette-primary-main);border-radius:8px;content:"";inset:0;pointer-events:none;position:absolute;z-index:4}.AttachmentPreview_thumbnailInner__9Ex4-{border-radius:8px;inset:0;overflow:hidden;pointer-events:none;position:absolute}.AttachmentPreview_thumbnailImage__RQ4fL{height:100%;left:50%;max-width:none;min-width:100%;object-fit:cover;pointer-events:none;position:absolute;top:0;transform:translateX(-50%);width:auto}.AttachmentPreview_videoOverlay__5Lgi1{align-items:center;background:rgb(from var(--palette-background-b-1) r g b/.5);border-radius:8px;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.AttachmentPreview_playIcon__OOnql{color:var(--palette-primary-text-1);font-size:32px}.AttachmentPreview_fileCard__oxDbD{align-items:flex-start;border:1px solid rgb(from var(--palette-primary-text-1) r g b/.08);border-radius:8px;display:flex;flex-direction:column;flex-shrink:0;height:64px;justify-content:center;padding:8px 16px;position:relative;width:142px}.AttachmentPreview_fileCardLink__TDpvh{color:inherit;cursor:pointer;text-decoration:none}.AttachmentPreview_fileCardLink__TDpvh:hover{border-color:rgb(from var(--palette-primary-text-1) r g b/.16)}.AttachmentPreview_fileCardContent__c-99Q{align-items:center;display:flex;gap:8px;width:100%}.AttachmentPreview_fileInfo__eqJ-B{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;justify-content:center;min-width:0}.AttachmentPreview_fileName__1Ccg0{color:var(--palette-primary-text-1)}.AttachmentPreview_fileName__1Ccg0,.AttachmentPreview_fileType__0v6E4{font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.AttachmentPreview_fileType__0v6E4{color:var(--palette-primary-text-6);text-transform:uppercase}.AttachmentPreview_tileActions__2nLlw{display:flex;gap:4px;opacity:0;position:absolute;right:-6px;top:-6px;transition:opacity .2s;z-index:3}.AttachmentPreview_tileActions__2nLlw button{backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.08)!important}.AttachmentPreview_tileActions__2nLlw button:hover{background-color:rgb(from var(--palette-primary-text-1) r g b/.15)!important}.AttachmentPreview_fileCard__oxDbD .AttachmentPreview_tileActions__2nLlw:focus-within,.AttachmentPreview_fileCard__oxDbD:hover .AttachmentPreview_tileActions__2nLlw,.AttachmentPreview_thumbnail__ytI2L .AttachmentPreview_tileActions__2nLlw:focus-within,.AttachmentPreview_thumbnail__ytI2L:hover .AttachmentPreview_tileActions__2nLlw{opacity:1}.AttachmentPreview_tileActionLink__aMyS4{display:inline-flex}.AttachmentPreview_removeButton__aX-qu{opacity:0;position:absolute;right:-6px;top:-6px;transition:opacity .2s;z-index:3}.AttachmentPreview_removeButton__aX-qu button{backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.08)!important}.AttachmentPreview_removeButton__aX-qu button:hover{background-color:rgb(from var(--palette-primary-text-1) r g b/.15)!important}.AttachmentPreview_fileCard__oxDbD:hover .AttachmentPreview_removeButton__aX-qu,.AttachmentPreview_removeButtonVisible__BVjYB,.AttachmentPreview_thumbnail__ytI2L:hover .AttachmentPreview_removeButton__aX-qu{opacity:1}.AttachmentPreview_thumbnailError__yyH08{border:1px solid rgb(from var(--palette-error-main) r g b/.4)}.AttachmentPreview_uploadingOverlay__leV1D{background:rgb(from var(--palette-background-b-1) r g b/.5);border-radius:8px;inset:0;pointer-events:none;position:absolute}.AttachmentPreview_uploadingSpinner__u-t7d{align-items:center;backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.08);border-radius:6px;display:flex;height:24px;justify-content:center;position:absolute;right:-6px;top:-6px;width:24px;z-index:2}.AttachmentPreview_loader__HK5bZ{color:var(--palette-primary-text-6)!important;height:14px!important;width:14px!important}.AttachmentPreview_errorOverlay__8sM1d{background:rgb(from var(--palette-error-main) r g b/.08);border-radius:8px;inset:0;pointer-events:none;position:absolute}.AttachmentPreview_retryButton__tKVV0{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.AttachmentPreview_retryButton__tKVV0 button{backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.08)!important}.AttachmentPreview_retryButton__tKVV0 button:hover{background-color:rgb(from var(--palette-primary-text-1) r g b/.15)!important}');export{e as default};
+import t from'./../../ext-esm/style-inject/dist/style-inject.es.js';var e={spacing:"8",scroller:"AttachmentPreview_scroller__ZqYC8",stripShell:"AttachmentPreview_stripShell__ndNiE",scrollArrowRight:"AttachmentPreview_scrollArrowRight__aGmVR",scrollArrowLeft:"AttachmentPreview_scrollArrowLeft__wpsRM",slot:"AttachmentPreview_slot__ewKLo",slotDragging:"AttachmentPreview_slotDragging__hrfJX",slotContent:"AttachmentPreview_slotContent__GNuSu",insertion:"AttachmentPreview_insertion__iFqlp",insertionBefore:"AttachmentPreview_insertionBefore__jyWQM",insertionEdge:"AttachmentPreview_insertionEdge__Bjk1t",insertionAfter:"AttachmentPreview_insertionAfter__4NvhP",dragGhost:"AttachmentPreview_dragGhost__4aSzE",dragGhostHandle:"AttachmentPreview_dragGhostHandle__Gu2CP",thumbnail:"AttachmentPreview_thumbnail__ytI2L",clickable:"AttachmentPreview_clickable__BEXzK",selected:"AttachmentPreview_selected__JRuMO",thumbnailInner:"AttachmentPreview_thumbnailInner__9Ex4-",thumbnailImage:"AttachmentPreview_thumbnailImage__RQ4fL",videoOverlay:"AttachmentPreview_videoOverlay__5Lgi1",playIcon:"AttachmentPreview_playIcon__OOnql",fileCard:"AttachmentPreview_fileCard__oxDbD",fileCardLink:"AttachmentPreview_fileCardLink__TDpvh",fileCardContent:"AttachmentPreview_fileCardContent__c-99Q",fileInfo:"AttachmentPreview_fileInfo__eqJ-B",fileName:"AttachmentPreview_fileName__1Ccg0",fileType:"AttachmentPreview_fileType__0v6E4",tileActions:"AttachmentPreview_tileActions__2nLlw",tileActionLink:"AttachmentPreview_tileActionLink__aMyS4",removeButton:"AttachmentPreview_removeButton__aX-qu",removeButtonVisible:"AttachmentPreview_removeButtonVisible__BVjYB",thumbnailError:"AttachmentPreview_thumbnailError__yyH08",uploadingOverlay:"AttachmentPreview_uploadingOverlay__leV1D",uploadingSpinner:"AttachmentPreview_uploadingSpinner__u-t7d",loader:"AttachmentPreview_loader__HK5bZ",errorOverlay:"AttachmentPreview_errorOverlay__8sM1d",retryButton:"AttachmentPreview_retryButton__tKVV0"};t('.AttachmentPreview_scroller__ZqYC8{-ms-overflow-style:none;align-items:flex-start;display:flex;gap:12px;margin-left:-8px;overflow-x:auto;overflow-y:visible;padding-left:8px;padding-right:8px;padding-top:6px;scroll-behavior:smooth;scrollbar-width:none}.AttachmentPreview_scroller__ZqYC8::-webkit-scrollbar{display:none}.AttachmentPreview_stripShell__ndNiE{max-width:100%;min-width:0;position:relative}.AttachmentPreview_scrollArrowLeft__wpsRM,.AttachmentPreview_scrollArrowRight__aGmVR{pointer-events:auto;position:absolute;top:calc(50% + 3px);transform:translateY(-50%);z-index:6}.AttachmentPreview_scrollArrowLeft__wpsRM button,.AttachmentPreview_scrollArrowRight__aGmVR button{backdrop-filter:blur(8px)}.AttachmentPreview_scrollArrowLeft__wpsRM{left:calc(-12px - var(--attachment-arrow-outset, 0px))}.AttachmentPreview_scrollArrowRight__aGmVR{right:calc(-12px - var(--attachment-arrow-outset, 0px))}@supports not (overflow-clip-margin:12px){.AttachmentPreview_scrollArrowLeft__wpsRM{left:0}.AttachmentPreview_scrollArrowRight__aGmVR{right:0}}.AttachmentPreview_slot__ewKLo{border-radius:8px;cursor:grab;flex-shrink:0;position:relative;touch-action:none}.AttachmentPreview_slot__ewKLo:focus-visible{outline:none}.AttachmentPreview_slot__ewKLo:focus-visible:before{border:2px solid var(--palette-primary-main);border-radius:8px;content:"";inset:0;pointer-events:none;position:absolute;z-index:5}.AttachmentPreview_slotDragging__hrfJX{cursor:grabbing}.AttachmentPreview_slotDragging__hrfJX .AttachmentPreview_slotContent__GNuSu{visibility:hidden}.AttachmentPreview_slotDragging__hrfJX:focus-visible:before{display:none}.AttachmentPreview_slotDragging__hrfJX:after{background:rgb(from var(--palette-primary-text-1) r g b/.04);border:1px dashed var(--palette-primary-text-6);border-radius:8px;content:"";inset:0;position:absolute}.AttachmentPreview_insertion__iFqlp{background:var(--palette-primary-main);border-radius:2px;bottom:0;box-shadow:0 0 6px rgb(from var(--palette-primary-main) r g b/.6);position:absolute;top:0;width:2px;z-index:4}.AttachmentPreview_insertionBefore__jyWQM,.AttachmentPreview_insertionEdge__Bjk1t{left:-7px}.AttachmentPreview_insertionAfter__4NvhP{right:-7px}.AttachmentPreview_dragGhost__4aSzE{background:var(--palette-background-b-6);border-radius:8px;box-shadow:0 10px 20px rgb(from var(--palette-background-b-1) r g b/.45);cursor:grabbing;opacity:.9;position:relative;transform:rotate(4deg)}.AttachmentPreview_dragGhostHandle__Gu2CP{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute;z-index:2}.AttachmentPreview_dragGhostHandle__Gu2CP button{backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.16)!important;color:var(--palette-primary-text-1)!important}.AttachmentPreview_dragGhostHandle__Gu2CP svg{color:var(--palette-primary-text-1)}.AttachmentPreview_thumbnail__ytI2L{border-radius:8px;flex-shrink:0;height:64px;overflow:visible;position:relative;width:64px}.AttachmentPreview_clickable__BEXzK{cursor:pointer}.AttachmentPreview_clickable__BEXzK:hover{opacity:.9}.AttachmentPreview_selected__JRuMO:after{border:1px solid var(--palette-primary-main);border-radius:8px;content:"";inset:0;pointer-events:none;position:absolute;z-index:4}.AttachmentPreview_thumbnailInner__9Ex4-{border-radius:8px;inset:0;overflow:hidden;pointer-events:none;position:absolute}.AttachmentPreview_thumbnailImage__RQ4fL{height:100%;left:50%;max-width:none;min-width:100%;object-fit:cover;pointer-events:none;position:absolute;top:0;transform:translateX(-50%);width:auto}.AttachmentPreview_videoOverlay__5Lgi1{align-items:center;background:rgb(from var(--palette-background-b-1) r g b/.5);border-radius:8px;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.AttachmentPreview_playIcon__OOnql{color:var(--palette-primary-text-1);font-size:32px}.AttachmentPreview_fileCard__oxDbD{align-items:flex-start;border:1px solid rgb(from var(--palette-primary-text-1) r g b/.08);border-radius:8px;display:flex;flex-direction:column;flex-shrink:0;height:64px;justify-content:center;padding:8px 16px;position:relative;width:142px}.AttachmentPreview_fileCardLink__TDpvh{color:inherit;cursor:pointer;text-decoration:none}.AttachmentPreview_fileCardLink__TDpvh:hover{border-color:rgb(from var(--palette-primary-text-1) r g b/.16)}.AttachmentPreview_fileCardContent__c-99Q{align-items:center;display:flex;gap:8px;width:100%}.AttachmentPreview_fileInfo__eqJ-B{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;justify-content:center;min-width:0}.AttachmentPreview_fileName__1Ccg0{color:var(--palette-primary-text-1)}.AttachmentPreview_fileName__1Ccg0,.AttachmentPreview_fileType__0v6E4{font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.AttachmentPreview_fileType__0v6E4{color:var(--palette-primary-text-6);text-transform:uppercase}.AttachmentPreview_tileActions__2nLlw{display:flex;gap:4px;opacity:0;position:absolute;right:-6px;top:-6px;transition:opacity .2s;z-index:3}.AttachmentPreview_tileActions__2nLlw button{backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.08)!important}.AttachmentPreview_tileActions__2nLlw button:hover{background-color:rgb(from var(--palette-primary-text-1) r g b/.15)!important}.AttachmentPreview_fileCard__oxDbD .AttachmentPreview_tileActions__2nLlw:focus-within,.AttachmentPreview_fileCard__oxDbD:hover .AttachmentPreview_tileActions__2nLlw,.AttachmentPreview_thumbnail__ytI2L .AttachmentPreview_tileActions__2nLlw:focus-within,.AttachmentPreview_thumbnail__ytI2L:hover .AttachmentPreview_tileActions__2nLlw{opacity:1}.AttachmentPreview_tileActionLink__aMyS4{display:inline-flex}.AttachmentPreview_removeButton__aX-qu{opacity:0;position:absolute;right:-6px;top:-6px;transition:opacity .2s;z-index:3}.AttachmentPreview_removeButton__aX-qu button{backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.08)!important}.AttachmentPreview_removeButton__aX-qu button:hover{background-color:rgb(from var(--palette-primary-text-1) r g b/.15)!important}.AttachmentPreview_fileCard__oxDbD:hover .AttachmentPreview_removeButton__aX-qu,.AttachmentPreview_removeButtonVisible__BVjYB,.AttachmentPreview_thumbnail__ytI2L:hover .AttachmentPreview_removeButton__aX-qu{opacity:1}.AttachmentPreview_thumbnailError__yyH08{border:1px solid rgb(from var(--palette-error-main) r g b/.4)}.AttachmentPreview_uploadingOverlay__leV1D{background:rgb(from var(--palette-background-b-1) r g b/.5);border-radius:8px;inset:0;pointer-events:none;position:absolute}.AttachmentPreview_uploadingSpinner__u-t7d{align-items:center;backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.08);border-radius:6px;display:flex;height:24px;justify-content:center;position:absolute;right:-6px;top:-6px;width:24px;z-index:2}.AttachmentPreview_loader__HK5bZ{color:var(--palette-primary-text-6)!important;height:14px!important;width:14px!important}.AttachmentPreview_errorOverlay__8sM1d{background:rgb(from var(--palette-error-main) r g b/.08);border-radius:8px;inset:0;pointer-events:none;position:absolute}.AttachmentPreview_retryButton__tKVV0{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.AttachmentPreview_retryButton__tKVV0 button{backdrop-filter:blur(4px);background-color:rgb(from var(--palette-primary-text-1) r g b/.08)!important}.AttachmentPreview_retryButton__tKVV0 button:hover{background-color:rgb(from var(--palette-primary-text-1) r g b/.15)!important}');export{e as default};
 //# sourceMappingURL=AttachmentPreview.scss.js.map

package/components/AttachmentPreview/__tests__/AttachmentPreview.overflow.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AttachmentPreview.overflow.test.d.ts.map

package/components/AttachmentPreview/__tests__/AttachmentPreview.overflow.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentPreview.overflow.test.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentPreview/__tests__/AttachmentPreview.overflow.test.tsx"],"names":[],"mappings":""}

package/components/AttachmentPreview/useScrollOverflow.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+export type OverflowEdge = {
+    /** How many tiles are not fully in view past this edge. Zero means no arrow. */
+    hiddenCount: number;
+};
+export type ScrollOverflow = {
+    left: OverflowEdge;
+    right: OverflowEdge;
+    scrollByPage: (direction: -1 | 1) => void;
+};
+/**
+ * Tracks which attachment tiles are scrolled out of view. The strip hides its scrollbar, so
+ * these counts are the only overflow signal the arrows (and their tooltips) have.
+ */
+export declare const useScrollOverflow: (scrollerRef: RefObject<HTMLElement>, items: readonly unknown[]) => ScrollOverflow;
+//# sourceMappingURL=useScrollOverflow.d.ts.map

package/components/AttachmentPreview/useScrollOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentPreview/useScrollOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA0C,MAAM,OAAO,CAAC;AAK1E,MAAM,MAAM,YAAY,GAAG;IACzB,gFAAgF;IAChF,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,YAAY,CAAC;IACpB,YAAY,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC3C,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,gBACf,SAAS,CAAC,WAAW,CAAC,SAG5B,SAAS,OAAO,EAAE,KACxB,cAoDF,CAAC"}

package/components/AttachmentPreview/useScrollOverflow.js

@@ -0,0 +1,2 @@
+import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{useState as t,useCallback as n,useLayoutEffect as i}from"react";function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function c(r){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){e(r,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}))}return r}var f=function(e,o){var f=t({left:{hiddenCount:0},right:{hiddenCount:0}}),l=r(f,2),u=l[0],a=l[1],d=n((function(){var r=e.current;if(r){var t=function(e){for(var r=e.getBoundingClientRect(),t=0,n=0,i=0,o=Array.from(e.children);i<o.length;i++){var c=o[i].getBoundingClientRect();c.left<r.left-1&&(t+=1),c.right>r.right+1&&(n+=1)}return{left:t,right:n}}(r);a((function(e){return e.left.hiddenCount===t.left&&e.right.hiddenCount===t.right?e:{left:{hiddenCount:t.left},right:{hiddenCount:t.right}}}))}}),[e]);i((function(){d();var r=e.current;if(r){r.addEventListener("scroll",d);var t="undefined"==typeof ResizeObserver?void 0:new ResizeObserver(d);return null==t||t.observe(r),function(){r.removeEventListener("scroll",d),null==t||t.disconnect()}}}),[d,e,o]);var s=n((function(r){var t=e.current;if(t){var n=Math.max(t.clientWidth-64,64);t.scrollBy({left:r*n})}}),[e]);return c(c({},u),{},{scrollByPage:s})};export{f as useScrollOverflow};
+//# sourceMappingURL=useScrollOverflow.js.map

package/components/AttachmentPreview/useScrollOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollOverflow.js","sources":["../../../src/components/AttachmentPreview/useScrollOverflow.ts"],"sourcesContent":["import { RefObject, useCallback, useLayoutEffect, useState } from 'react';\n\n// Sub-pixel scroll positions and the strip's edge padding must not count as overflow.\nconst EDGE_TOLERANCE_PX = 1;\n\nexport type OverflowEdge = {\n  /** How many tiles are not fully in view past this edge. Zero means no arrow. */\n  hiddenCount: number;\n};\n\nexport type ScrollOverflow = {\n  left: OverflowEdge;\n  right: OverflowEdge;\n  scrollByPage: (direction: -1 | 1) => void;\n};\n\nconst countHidden = (scroller: HTMLElement) => {\n  const bounds = scroller.getBoundingClientRect();\n  let left = 0;\n  let right = 0;\n\n  for (const tile of Array.from(scroller.children)) {\n    const rect = tile.getBoundingClientRect();\n    // Not else-if: a tile wider than the viewport can be hidden past both edges at once.\n    if (rect.left < bounds.left - EDGE_TOLERANCE_PX) left += 1;\n    if (rect.right > bounds.right + EDGE_TOLERANCE_PX) right += 1;\n  }\n\n  return { left, right };\n};\n\n/**\n * Tracks which attachment tiles are scrolled out of view. The strip hides its scrollbar, so\n * these counts are the only overflow signal the arrows (and their tooltips) have.\n */\nexport const useScrollOverflow = (\n  scrollerRef: RefObject<HTMLElement>,\n  // The array itself, not its length: a drag-reorder of mixed-width tiles shifts what fits\n  // without changing the count or firing a scroll event.\n  items: readonly unknown[]\n): ScrollOverflow => {\n  const [edges, setEdges] = useState({\n    left: { hiddenCount: 0 },\n    right: { hiddenCount: 0 },\n  });\n\n  const update = useCallback(() => {\n    const scroller = scrollerRef.current;\n    if (!scroller) return;\n\n    const counts = countHidden(scroller);\n    // Keep the previous state object when nothing changed, or every scroll event re-renders\n    // the whole strip.\n    setEdges(prev =>\n      prev.left.hiddenCount === counts.left && prev.right.hiddenCount === counts.right\n        ? prev\n        : { left: { hiddenCount: counts.left }, right: { hiddenCount: counts.right } }\n    );\n  }, [scrollerRef]);\n\n  // Layout effect so a strip that mounts already overflowing shows its arrow on first paint.\n  useLayoutEffect(() => {\n    update();\n\n    const scroller = scrollerRef.current;\n    if (!scroller) return undefined;\n\n    scroller.addEventListener('scroll', update);\n    // Guarded: jsdom has no ResizeObserver.\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);\n    observer?.observe(scroller);\n\n    return () => {\n      scroller.removeEventListener('scroll', update);\n      observer?.disconnect();\n    };\n  }, [update, scrollerRef, items]);\n\n  const scrollByPage = useCallback(\n    (direction: -1 | 1) => {\n      const scroller = scrollerRef.current;\n      if (!scroller) return;\n\n      // Almost a full viewport, so one tile carries over as the reader's anchor. Smoothness\n      // comes from the scroller's own scroll-behavior.\n      const page = Math.max(scroller.clientWidth - 64, 64);\n      scroller.scrollBy({ left: direction * page });\n    },\n    [scrollerRef]\n  );\n\n  return { ...edges, scrollByPage };\n};\n"],"names":["useScrollOverflow","scrollerRef","items","_useState","useState","left","hiddenCount","right","_useState2","_slicedToArray","edges","setEdges","update","useCallback","scroller","current","counts","bounds","getBoundingClientRect","Array","from","children","_i","_Array$from","length","rect","countHidden","prev","useLayoutEffect","addEventListener","observer","ResizeObserver","undefined","observe","removeEventListener","disconnect","scrollByPage","direction","page","Math","max","clientWidth","scrollBy","_objectSpread"],"mappings":"+uBAGA,IAgCaA,EAAoB,SAC/BC,EAGAC,GAEA,IAAAC,EAA0BC,EAAS,CACjCC,KAAM,CAAEC,YAAa,GACrBC,MAAO,CAAED,YAAa,KACtBE,EAAAC,EAAAN,EAAA,GAHKO,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAKhBI,EAASC,GAAY,WACzB,IAAMC,EAAWb,EAAYc,QAC7B,GAAKD,EAAL,CAEA,IAAME,EAlCU,SAACF,GAKnB,IAJA,IAAMG,EAASH,EAASI,wBACpBb,EAAO,EACPE,EAAQ,EAEOY,EAAAA,EAAAA,EAAAA,MAAMC,KAAKN,EAASO,UAAWC,EAAAC,EAAAC,OAAAF,IAAA,CAA7C,IACGG,EADOF,EAAAD,GACKJ,wBAEdO,EAAKpB,KAAOY,EAAOZ,KArBD,IAqB2BA,GAAQ,GACrDoB,EAAKlB,MAAQU,EAAOV,MAtBF,IAsB6BA,GAAS,EAC9D,CAEA,MAAO,CAAEF,KAAAA,EAAME,MAAAA,EACjB,CAqBmBmB,CAAYZ,GAG3BH,GAAS,SAAAgB,GAAI,OACXA,EAAKtB,KAAKC,cAAgBU,EAAOX,MAAQsB,EAAKpB,MAAMD,cAAgBU,EAAOT,MACvEoB,EACA,CAAEtB,KAAM,CAAEC,YAAaU,EAAOX,MAAQE,MAAO,CAAED,YAAaU,EAAOT,UAR1D,CAUjB,GAAG,CAACN,IAGJ2B,GAAgB,WACdhB,IAEA,IAAME,EAAWb,EAAYc,QAC7B,GAAKD,EAAL,CAEAA,EAASe,iBAAiB,SAAUjB,GAEpC,IAAMkB,EAAqC,oBAAnBC,oBAAiCC,EAAY,IAAID,eAAenB,GAGxF,OAFAkB,SAAAA,EAAUG,QAAQnB,GAEX,WACLA,EAASoB,oBAAoB,SAAUtB,GACvCkB,SAAAA,EAAUK,aATmB,CAWhC,GAAE,CAACvB,EAAQX,EAAaC,IAEzB,IAAMkC,EAAevB,GACnB,SAACwB,GACC,IAAMvB,EAAWb,EAAYc,QAC7B,GAAKD,EAAL,CAIA,IAAMwB,EAAOC,KAAKC,IAAI1B,EAAS2B,YAAc,GAAI,IACjD3B,EAAS4B,SAAS,CAAErC,KAAMgC,EAAYC,GALvB,CAMjB,GACA,CAACrC,IAGH,OAAA0C,EAAAA,EAAA,CAAA,EAAYjC,GAAK,CAAA,EAAA,CAAE0B,aAAAA,GACrB"}

package/components/Comment/__tests__/useComment.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useComment.test.d.ts.map

package/components/Comment/__tests__/useComment.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComment.test.d.ts","sourceRoot":"","sources":["../../../../src/components/Comment/__tests__/useComment.test.js"],"names":[],"mappings":""}

package/components/Comment/index.d.ts

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-declare const _default: import("react").ComponentType<Pick<Pick<PropTypes.InferProps<{
+declare const _default: import("react").ComponentType<Pick<PropTypes.InferProps<{
     comment: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
     showOnMount: PropTypes.Requireable<boolean>;
     spaceAround: PropTypes.Requireable<boolean>;
@@ -11,26 +11,6 @@ declare const _default: import("react").ComponentType<Pick<Pick<PropTypes.InferP
     currentUser: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     classes: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
     isNative: PropTypes.Requireable<boolean>;
-}>, PropTypes.RequiredKeys<{
-    comment: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
-    showOnMount: PropTypes.Requireable<boolean>;
-    spaceAround: PropTypes.Requireable<boolean>;
-    handleShowOnMount: PropTypes.Requireable<(...args: any[]) => any>;
-    handleEdit: PropTypes.Requireable<(...args: any[]) => any>;
-    handleDeleteCallback: PropTypes.Validator<(...args: any[]) => any>;
-    patchCommentCallback: PropTypes.Validator<(...args: any[]) => any>;
-    companyId: PropTypes.Requireable<number>;
-    currentUser: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
-    classes: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
-    isNative: PropTypes.Requireable<boolean>;
-}>> & {
-    showOnMount?: boolean | null | undefined;
-    spaceAround?: boolean | null | undefined;
-    handleShowOnMount?: ((...args: any[]) => any) | null | undefined;
-    handleEdit?: ((...args: any[]) => any) | null | undefined;
-    companyId?: number | null | undefined;
-    currentUser?: PropTypes.InferProps<PropTypes.ValidationMap<any>> | null | undefined;
-    isNative?: boolean | null | undefined;
-} & {}, "comment" | "companyId" | "currentUser" | "handleDeleteCallback" | "handleEdit" | "handleShowOnMount" | "isNative" | "patchCommentCallback" | "showOnMount" | "spaceAround"> & import("@material-ui/styles").StyledComponentProps<"commentWrapper" | "iconButtonRoot" | "textRoot" | "timeRoot" | "userName">>;
+}>, "comment" | "companyId" | "currentUser" | "handleDeleteCallback" | "handleEdit" | "handleShowOnMount" | "isNative" | "patchCommentCallback" | "showOnMount" | "spaceAround"> & import("@material-ui/styles").StyledComponentProps<"commentWrapper" | "iconButtonRoot" | "textRoot" | "timeRoot" | "userName">>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/components/Comment/index.js

@@ -1,2 +1,2 @@
-import e from"@babel/runtime/helpers/asyncToGenerator";import t from"@babel/runtime/helpers/classCallCheck";import n from"@babel/runtime/helpers/createClass";import r from"@babel/runtime/helpers/assertThisInitialized";import o from"@babel/runtime/helpers/inherits";import i from"@babel/runtime/helpers/possibleConstructorReturn";import a from"@babel/runtime/helpers/getPrototypeOf";import s from"@babel/runtime/helpers/defineProperty";import c from"@babel/runtime/regenerator";import{createRef as l,PureComponent as m}from"react";import p from"prop-types";import u from"moment";import{get as d,includes as h,noop as f}from"lodash";import v from"classnames";import{withStyles as y}from"@material-ui/core/styles";import b from"@material-ui/core/Typography";import g from"@material-ui/core/Menu";import C from"@material-ui/core/MenuItem";import M from"@material-ui/icons/MoreVert";import{deleteFeedItemComment as D}from"../../clients/jsonApi/index.js";import E from"./styles.css.js";import w from"../CommentWrapper.js";import O from"../CommentLoader.js";import I from"../CommentInput/index.js";import{AvatarComponent as j}from"../Avatar/index.js";import k from"../Attachment/index.js";import x from"../IconButton/index.js";import A from"../ConfirmationDialog.js";import N from"../UserCardPopover.js";import{formatMentionText as _}from"../UserMention/utils/index.js";import{isNativeDetected as S}from"../../utils/mobileDetect.js";import R from"../../utils/main.js";import{jsxs as P,jsx as U}from"react/jsx-runtime";function z(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function L(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=a(e);if(t){var o=a(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return i(this,n)}}var W={chatAvatarWrapper:{paddingTop:2,position:"absolute",top:6,left:0},commentInfoContainer:{display:"inline-flex",alignItems:"center",width:"100%",paddingTop:5},userNameWrapper:{overflow:"hidden"},infoContainer:{display:"inline-block",verticalAlign:"top",width:"100%",paddingLeft:33}},T=function(i){o(p,m);var a=L(p);function p(n){var o,i;return t(this,p),o=a.call(this,n),s(r(o),"deleteComment",(i=e(c.mark((function e(t,n){var r;return c.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,D(t,n);case 3:r=e.sent,e.next=9;break;case 6:e.prev=6,e.t0=e.catch(0),console.error(e.t0);case 9:return e.abrupt("return",r);case 10:case"end":return e.stop()}}),e,null,[[0,6]])}))),function(e,t){return i.apply(this,arguments)})),s(r(o),"showIntoView",(function(){o.props.handleShowOnMount(),o.commentEl.current.scrollIntoView({block:"end"})})),s(r(o),"handleOpenActionsMenu",(function(e){e.stopPropagation(),o.setState({actionsMenuAnchorEl:e.currentTarget})})),s(r(o),"handleCloseActionsMenu",(function(e){e.stopPropagation(),o.setState({actionsMenuAnchorEl:null})})),s(r(o),"handleKeyDown",(function(e){27===e.keyCode&&o.setState({isEditing:!1}),document.removeEventListener("keydown",o.handleKeyDown,!1)})),s(r(o),"handleEditMenuItem",(function(){document.addEventListener("keydown",o.handleKeyDown,!1),o.setState({isEditing:!0},(function(){o.inputEl.current&&o.inputEl.current.focus()}))})),s(r(o),"getEditCommentProps",(function(){var e=o.props.comment,t=e.id,n=e.body,r=e.attachment;return{editFeedItemId:e.feed_activity_id,editCommentId:t,editComment:n,editAttachment:r}})),s(r(o),"onEditFinish",(function(){o.setState({isEditing:!1,isLoading:!1})})),s(r(o),"handleDeleteMenuItem",(function(){o.setState({openDeleteDialog:!0})})),s(r(o),"handleDelete",e(c.mark((function e(){var t,n,r;return c.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=o.props.comment.id,n=o.props.comment.feed_activity_id,o.setState({isLoading:!0}),e.next=5,o.deleteComment(n,t);case 5:r=e.sent,o.setState({isLoading:!1,openDeleteDialog:!1}),r&&o.props.handleDeleteCallback(t);case 8:case"end":return e.stop()}}),e)})))),o.state={actionsMenuAnchorEl:null,isLoading:!1,isEditing:!1,openDeleteDialog:!1},o.inputEl=l(),o.commentEl=l(),o}return n(p,[{key:"componentDidMount",value:function(){this.props.showOnMount&&this.showIntoView()}},{key:"isCurrentUserCommentCreator",get:function(){return Number(d(this.props.comment,["user","id"]))===Number(this.props.currentUser.id)}},{key:"renderMenuIcon",value:function(){var e=this.isCurrentUserCommentCreator,t=this.isCurrentUserCommentCreator||h(this.props.comment.allowed_actions,"destroy");return t||e?P("div",{className:E.cCommentMenu,children:[U(x,{"data-testid":"".concat("comment","_menuButton"),"aria-label":"Actions","aria-owns":this.state.actionsMenuAnchorEl?"c-comment__actions-menu":void 0,"aria-haspopup":"true",className:this.props.classes.iconButtonRoot,size:"small",onClick:this.handleOpenActionsMenu,children:U(M,{})}),P(g,{id:"c-comment__actions-menu",anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},anchorEl:this.state.actionsMenuAnchorEl,open:!!this.state.actionsMenuAnchorEl,onClick:this.handleCloseActionsMenu,onClose:this.handleCloseActionsMenu,children:[e&&U(C,{"data-testid":"".concat("comment","_editMenuItem"),onClick:this.handleEditMenuItem,children:"Edit"}),t&&U(C,{"data-testid":"".concat("comment","_deleteMenuItem"),onClick:this.handleDeleteMenuItem,children:"Delete"})]})]}):null}},{key:"render",value:function(){var e,t,n=this,r=this.state,o=r.isLoading,i=r.isEditing;if(o){var a=this.props.spaceAround;return U(O,{spaceAround:a})}var c=this.props,l=c.comment,m=c.classes,p=c.spaceAround,h=c.isNative,y=c.patchCommentCallback,g=c.companyId;if(i)return U(I,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?z(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):z(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({inputRef:this.inputEl,postComment:f,exitEditMode:this.onEditFinish,setIsEditting:function(){return n.setState({isLoading:!0})},patchCommentCallback:y,companyId:g,currentUser:this.props.currentUser},this.getEditCommentProps()));var C=R.getUserFullName(l.user),M=h?"MM/DD HH:mm":"MM/DD/YY HH:mm",D=u(l.created_at).format(M),x=(null==l||null===(e=l.attachment)||void 0===e?void 0:e.signed_url)||(null==l||null===(t=l.attachment)||void 0===t?void 0:t.url),S=d(l,["attachment","size"]),L=d(l,["attachment","file_name"]);return P("div",{"data-testid":"".concat("comment","_commentItem_").concat(l.body),className:v(E.cComment,s({},E.cCommentNative,h)),ref:this.commentEl,children:[P(w,{spaceAround:p,className:this.props.classes.commentWrapper,children:[U("div",{style:W.chatAvatarWrapper,children:h?U(j,{size:24,displayName:C,imgSrc:d(l,["user","profile_photo"]),className:this.props.classes.avatar}):U(N,{user:l.user,currentUser:this.props.currentUser,children:U(j,{size:24,displayName:C,imgSrc:d(l,["user","profile_photo"]),className:this.props.classes.avatar})})}),P("div",{style:W.infoContainer,children:[U("div",{children:P("div",{style:W.commentInfoContainer,children:[U("div",{style:W.userNameWrapper,children:U(b,{"data-testid":"".concat("comment","_userName"),variant:"subtitle2",noWrap:!0,className:m.userName,children:C})}),U("div",{style:W.timeWrapper,children:U(b,{"data-testid":"".concat("comment","_addTime"),variant:"caption",classes:{root:m.timeRoot},children:D})})]})}),P("div",{className:E.cCommentBody,children:[this.renderMenuIcon(),U(b,{"data-testid":"".concat("comment","_commentMessage"),variant:"body1",classes:{root:m.textRoot},children:_(l.body,l.mentioned_users,h,"#00bcd4",this.props.currentUser)}),x&&U(k,{attachmentUrl:x,attachmentSize:S,size:"small",fileName:L})]})]})]}),this.state.openDeleteDialog&&U(A,{open:this.state.openDeleteDialog,text:"Do you really want to delete comment?",handleClose:function(){return n.setState({openDeleteDialog:!1})},handleOk:this.handleDelete,okText:"Delete"})]})}}]),p}();T.propTypes={comment:p.shape({}).isRequired,showOnMount:p.bool,spaceAround:p.bool,handleShowOnMount:p.func,handleEdit:p.func,handleDeleteCallback:p.func.isRequired,patchCommentCallback:p.func.isRequired,companyId:p.number,currentUser:p.shape(),classes:p.shape({}).isRequired,isNative:p.bool},T.defaultProps={showOnMount:!1,spaceAround:!1,handleShowOnMount:f,handleEdit:f,companyId:null,isNative:S,currentUser:{}};var B=y((function(e){return{commentWrapper:{width:"100%"},timeRoot:{color:e.palette.primary.text7,float:"right",marginRight:5,marginLeft:8,fontSize:"12px"},textRoot:{marginTop:5,color:"#CCC",fontWeight:"normal",fontSize:"14px"},iconButtonRoot:{float:"right",visibility:"hidden",color:e.palette.primary.text7},userName:{fontSize:"12px",fontWeight:"bold"}}}))(T);export{B as default};
+import e from"@babel/runtime/helpers/defineProperty";import{memo as t}from"react";import o from"prop-types";import i from"moment";import{get as n,noop as a,includes as r}from"lodash";import m from"classnames";import{withStyles as l}from"@material-ui/core/styles";import s from"@material-ui/core/Typography";import c from"@material-ui/core/Menu";import d from"@material-ui/core/MenuItem";import p from"@material-ui/icons/MoreVert";import u from"./useComment.js";import h from"./styles.css.js";import f from"../CommentWrapper.js";import v from"../CommentLoader.js";import C from"../CommentInput/index.js";import{AvatarComponent as y}from"../Avatar/index.js";import g from"../Attachment/index.js";import b from"../IconButton/index.js";import M from"../ConfirmationDialog.js";import N from"../UserCardPopover.js";import{formatMentionText as _}from"../UserMention/utils/index.js";import{isNativeDetected as I}from"../../utils/mobileDetect.js";import x from"../../utils/main.js";import{jsx as D,jsxs as j}from"react/jsx-runtime";var A={chatAvatarWrapper:{paddingTop:2,position:"absolute",top:6,left:0},commentInfoContainer:{display:"inline-flex",alignItems:"center",width:"100%",paddingTop:5},userNameWrapper:{overflow:"hidden"},infoContainer:{display:"inline-block",verticalAlign:"top",width:"100%",paddingLeft:33}},k={};function w(t){var o,l,w=t.comment,E=t.showOnMount,R=void 0!==E&&E,z=t.spaceAround,W=void 0!==z&&z,O=t.handleShowOnMount,S=void 0===O?a:O,U=t.handleDeleteCallback,T=t.patchCommentCallback,B=t.companyId,q=void 0===B?null:B,H=t.currentUser,L=void 0===H?k:H,F=t.classes,P=t.isNative,Y=void 0===P?I:P,V=u({comment:w,showOnMount:R,handleShowOnMount:S,handleDeleteCallback:U}),G=V.actionsMenuAnchorEl,J=V.isLoading,K=V.isEditing,Q=V.openDeleteDialog,X=V.inputEl,Z=V.commentEl,$=V.handleOpenActionsMenu,ee=V.handleCloseActionsMenu,te=V.handleEditMenuItem,oe=V.onEditFinish,ie=V.setIsEditting,ne=V.handleDeleteMenuItem,ae=V.handleCloseDeleteDialog,re=V.handleDelete,me=Number(n(w,["user","id"]))===Number(L.id);if(J)return D(v,{spaceAround:W});if(K)return D(C,{inputRef:X,postComment:a,exitEditMode:oe,setIsEditting:ie,patchCommentCallback:T,companyId:q,currentUser:L,editFeedItemId:w.feed_activity_id,editCommentId:w.id,editComment:w.body,editAttachment:w.attachment});var le,se,ce=x.getUserFullName(w.user),de=Y?"MM/DD HH:mm":"MM/DD/YY HH:mm",pe=i(w.created_at).format(de),ue=(null==w||null===(o=w.attachment)||void 0===o?void 0:o.signed_url)||(null==w||null===(l=w.attachment)||void 0===l?void 0:l.url),he=n(w,["attachment","size"]),fe=n(w,["attachment","file_name"]);return j("div",{"data-testid":"".concat("comment","_commentItem_").concat(w.body),className:m(h.cComment,e({},h.cCommentNative,Y)),ref:Z,children:[j(f,{spaceAround:W,className:F.commentWrapper,children:[D("div",{style:A.chatAvatarWrapper,children:Y?D(y,{size:24,displayName:ce,imgSrc:n(w,["user","profile_photo"]),className:F.avatar}):D(N,{user:w.user,currentUser:L,children:D(y,{size:24,displayName:ce,imgSrc:n(w,["user","profile_photo"]),className:F.avatar})})}),j("div",{style:A.infoContainer,children:[D("div",{children:j("div",{style:A.commentInfoContainer,children:[D("div",{style:A.userNameWrapper,children:D(s,{"data-testid":"".concat("comment","_userName"),variant:"subtitle2",noWrap:!0,className:F.userName,children:ce})}),D("div",{style:A.timeWrapper,children:D(s,{"data-testid":"".concat("comment","_addTime"),variant:"caption",classes:{root:F.timeRoot},children:pe})})]})}),j("div",{className:h.cCommentBody,children:[(le=me,se=me||r(w.allowed_actions,"destroy"),se||le?j("div",{className:h.cCommentMenu,children:[D(b,{"data-testid":"".concat("comment","_menuButton"),"aria-label":"Actions","aria-owns":G?"c-comment__actions-menu":void 0,"aria-haspopup":"true",className:F.iconButtonRoot,size:"small",onClick:$,children:D(p,{})}),j(c,{id:"c-comment__actions-menu",anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},anchorEl:G,open:!!G,onClick:ee,onClose:ee,children:[le&&D(d,{"data-testid":"".concat("comment","_editMenuItem"),onClick:te,children:"Edit"}),se&&D(d,{"data-testid":"".concat("comment","_deleteMenuItem"),onClick:ne,children:"Delete"})]})]}):null),D(s,{"data-testid":"".concat("comment","_commentMessage"),variant:"body1",classes:{root:F.textRoot},children:_(w.body,w.mentioned_users,Y,"#00bcd4",L)}),ue&&D(g,{attachmentUrl:ue,attachmentSize:he,size:"small",fileName:fe})]})]})]}),Q&&D(M,{open:Q,text:"Do you really want to delete comment?",handleClose:ae,handleOk:re,okText:"Delete"})]})}w.propTypes={comment:o.shape({}).isRequired,showOnMount:o.bool,spaceAround:o.bool,handleShowOnMount:o.func,handleEdit:o.func,handleDeleteCallback:o.func.isRequired,patchCommentCallback:o.func.isRequired,companyId:o.number,currentUser:o.shape(),classes:o.shape({}).isRequired,isNative:o.bool};var E=l((function(e){return{commentWrapper:{width:"100%"},timeRoot:{color:e.palette.primary.text7,float:"right",marginRight:5,marginLeft:8,fontSize:"12px"},textRoot:{marginTop:5,color:"#CCC",fontWeight:"normal",fontSize:"14px"},iconButtonRoot:{float:"right",visibility:"hidden",color:e.palette.primary.text7},userName:{fontSize:"12px",fontWeight:"bold"}}}))(t(w));export{E as default};
 //# sourceMappingURL=index.js.map

package/components/Comment/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Comment/index.js"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport { createRef, PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { get, noop, includes } from 'lodash';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\n\nimport { deleteFeedItemComment } from '../../clients/jsonApi';\n\nimport styles from './styles.css';\n\nimport CommentWrapper from '~components/CommentWrapper';\nimport CommentLoader from '~components/CommentLoader';\nimport CommentInput from '~components/CommentInput';\nimport Avatar from '~components/Avatar';\nimport Attachment from '~components/Attachment';\nimport IconButton from '~components/IconButton';\nimport ConfirmationDialog from '~components/ConfirmationDialog';\nimport UserCardPopover from '~components/UserCardPopover';\nimport { formatMentionText } from '~components/UserMention/utils';\nimport { isNativeDetected } from '~/utils/mobileDetect';\nimport utils from '~utils/main';\n\nconst PAGE_NAME = 'comment';\n\nconst CREATED_AT_FORMAT = 'MM/DD/YY HH:mm';\nconst CREATED_AT_FORMAT_NATIVE = 'MM/DD HH:mm';\n\nconst style = {\n  chatAvatarWrapper: {\n    paddingTop: 2,\n    position: 'absolute',\n    top: 6,\n    left: 0,\n  },\n  commentInfoContainer: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    width: '100%',\n    paddingTop: 5,\n  },\n  userNameWrapper: { overflow: 'hidden' },\n  infoContainer: {\n    display: 'inline-block',\n    verticalAlign: 'top',\n    width: '100%',\n    paddingLeft: 33,\n  },\n};\n\nconst muiStyles = theme => ({\n  commentWrapper: { width: '100%' },\n  timeRoot: {\n    color: theme.palette.primary.text7,\n    float: 'right',\n    marginRight: 5,\n    marginLeft: 8,\n    fontSize: '12px',\n  },\n  textRoot: {\n    marginTop: 5,\n    color: '#CCC',\n    fontWeight: 'normal',\n    fontSize: '14px',\n  },\n  iconButtonRoot: {\n    float: 'right',\n    visibility: 'hidden',\n    color: theme.palette.primary.text7,\n  },\n  userName: {\n    fontSize: '12px',\n    fontWeight: 'bold',\n  },\n});\n\nclass Comment extends PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      actionsMenuAnchorEl: null,\n      isLoading: false,\n      isEditing: false,\n      openDeleteDialog: false,\n    };\n    this.inputEl = createRef();\n    this.commentEl = createRef();\n  }\n\n  componentDidMount() {\n    if (this.props.showOnMount) {\n      this.showIntoView();\n    }\n  }\n\n  get isCurrentUserCommentCreator() {\n    return Number(get(this.props.comment, ['user', 'id'])) === Number(this.props.currentUser.id);\n  }\n\n  deleteComment = async (feedItemId, commentId) => {\n    let commentResponse;\n\n    try {\n      commentResponse = await deleteFeedItemComment(feedItemId, commentId);\n    } catch (e) {\n      console.error(e);\n    }\n\n    return commentResponse;\n  };\n\n  showIntoView = () => {\n    this.props.handleShowOnMount();\n    this.commentEl.current.scrollIntoView({ block: 'end' });\n  };\n\n  handleOpenActionsMenu = event => {\n    event.stopPropagation();\n    this.setState({ actionsMenuAnchorEl: event.currentTarget });\n  };\n\n  handleCloseActionsMenu = event => {\n    event.stopPropagation();\n    this.setState({ actionsMenuAnchorEl: null });\n  };\n\n  handleKeyDown = event => {\n    if (event.keyCode === 27) {\n      this.setState({\n        isEditing: false,\n      });\n    }\n    document.removeEventListener('keydown', this.handleKeyDown, false);\n  };\n\n  handleEditMenuItem = () => {\n    document.addEventListener('keydown', this.handleKeyDown, false);\n    this.setState(\n      {\n        isEditing: true,\n      },\n      () => {\n        if (this.inputEl.current) this.inputEl.current.focus();\n      }\n    );\n  };\n\n  // TODO: move to one prop, not multiple\n  getEditCommentProps = () => {\n    const { comment } = this.props;\n    const editCommentId = comment.id;\n    const editComment = comment.body;\n    const editAttachment = comment.attachment;\n    const editFeedItemId = comment.feed_activity_id;\n    return {\n      editFeedItemId,\n      editCommentId,\n      editComment,\n      editAttachment,\n    };\n  };\n\n  onEditFinish = () => {\n    this.setState({ isEditing: false, isLoading: false });\n  };\n\n  handleDeleteMenuItem = () => {\n    this.setState({ openDeleteDialog: true });\n  };\n\n  handleDelete = async () => {\n    const { id } = this.props.comment;\n    const feedItemId = this.props.comment.feed_activity_id;\n\n    this.setState({ isLoading: true });\n\n    const response = await this.deleteComment(feedItemId, id);\n\n    this.setState({ isLoading: false, openDeleteDialog: false });\n    if (response) this.props.handleDeleteCallback(id);\n  };\n\n  renderMenuIcon() {\n    const showEdit = this.isCurrentUserCommentCreator;\n\n    const showDelete =\n      this.isCurrentUserCommentCreator || includes(this.props.comment.allowed_actions, 'destroy');\n\n    if (!(showDelete || showEdit)) return null;\n\n    return (\n      <div className={styles.cCommentMenu}>\n        <IconButton\n          data-testid={`${PAGE_NAME}_menuButton`}\n          aria-label=\"Actions\"\n          aria-owns={this.state.actionsMenuAnchorEl ? 'c-comment__actions-menu' : undefined}\n          aria-haspopup=\"true\"\n          className={this.props.classes.iconButtonRoot}\n          size=\"small\"\n          onClick={this.handleOpenActionsMenu}\n        >\n          <MoreVertIcon />\n        </IconButton>\n\n        <Menu\n          id=\"c-comment__actions-menu\"\n          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n          transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n          anchorEl={this.state.actionsMenuAnchorEl}\n          open={!!this.state.actionsMenuAnchorEl}\n          onClick={this.handleCloseActionsMenu}\n          onClose={this.handleCloseActionsMenu}\n        >\n          {showEdit && (\n            <MenuItem data-testid={`${PAGE_NAME}_editMenuItem`} onClick={this.handleEditMenuItem}>\n              Edit\n            </MenuItem>\n          )}\n\n          {showDelete && (\n            <MenuItem\n              data-testid={`${PAGE_NAME}_deleteMenuItem`}\n              onClick={this.handleDeleteMenuItem}\n            >\n              Delete\n            </MenuItem>\n          )}\n        </Menu>\n      </div>\n    );\n  }\n\n  render() {\n    const { isLoading, isEditing } = this.state;\n\n    if (isLoading) {\n      const { spaceAround } = this.props;\n      return <CommentLoader spaceAround={spaceAround} />;\n    }\n\n    const { comment, classes, spaceAround, isNative, patchCommentCallback, companyId } = this.props;\n\n    if (isEditing) {\n      return (\n        <CommentInput\n          inputRef={this.inputEl}\n          postComment={noop}\n          exitEditMode={this.onEditFinish}\n          setIsEditting={() => this.setState({ isLoading: true })}\n          patchCommentCallback={patchCommentCallback}\n          companyId={companyId}\n          currentUser={this.props.currentUser}\n          {...this.getEditCommentProps()}\n        />\n      );\n    }\n\n    const userFullName = utils.getUserFullName(comment.user);\n\n    const format = isNative ? CREATED_AT_FORMAT_NATIVE : CREATED_AT_FORMAT;\n    const time = moment(comment.created_at).format(format);\n\n    const attachmentUrl = comment?.attachment?.signed_url || comment?.attachment?.url;\n    const attachmentSize = get(comment, ['attachment', 'size']);\n    const attachmentFileName = get(comment, ['attachment', 'file_name']);\n\n    return (\n      <div\n        data-testid={`${PAGE_NAME}_commentItem_${comment.body}`}\n        className={classNames(styles.cComment, { [styles.cCommentNative]: isNative })}\n        ref={this.commentEl}\n      >\n        <CommentWrapper spaceAround={spaceAround} className={this.props.classes.commentWrapper}>\n          <div style={style.chatAvatarWrapper}>\n            {isNative ? (\n              <Avatar\n                size={24}\n                displayName={userFullName}\n                imgSrc={get(comment, ['user', 'profile_photo'])}\n                className={this.props.classes.avatar}\n              />\n            ) : (\n              <UserCardPopover user={comment.user} currentUser={this.props.currentUser}>\n                <Avatar\n                  size={24}\n                  displayName={userFullName}\n                  imgSrc={get(comment, ['user', 'profile_photo'])}\n                  className={this.props.classes.avatar}\n                />\n              </UserCardPopover>\n            )}\n          </div>\n\n          <div style={style.infoContainer}>\n            <div>\n              <div style={style.commentInfoContainer}>\n                <div style={style.userNameWrapper}>\n                  <Typography\n                    data-testid={`${PAGE_NAME}_userName`}\n                    variant=\"subtitle2\"\n                    noWrap\n                    className={classes.userName}\n                  >\n                    {userFullName}\n                  </Typography>\n                </div>\n\n                <div style={style.timeWrapper}>\n                  <Typography\n                    data-testid={`${PAGE_NAME}_addTime`}\n                    variant=\"caption\"\n                    classes={{ root: classes.timeRoot }}\n                  >\n                    {time}\n                  </Typography>\n                </div>\n              </div>\n            </div>\n\n            <div className={styles.cCommentBody}>\n              {this.renderMenuIcon()}\n              <Typography\n                data-testid={`${PAGE_NAME}_commentMessage`}\n                variant=\"body1\"\n                classes={{ root: classes.textRoot }}\n              >\n                {formatMentionText(\n                  comment.body,\n                  comment.mentioned_users,\n                  isNative,\n                  '#00bcd4',\n                  this.props.currentUser\n                )}\n              </Typography>\n\n              {attachmentUrl && (\n                <Attachment\n                  attachmentUrl={attachmentUrl}\n                  attachmentSize={attachmentSize}\n                  size=\"small\"\n                  fileName={attachmentFileName}\n                />\n              )}\n            </div>\n          </div>\n        </CommentWrapper>\n\n        {this.state.openDeleteDialog && (\n          <ConfirmationDialog\n            open={this.state.openDeleteDialog}\n            text=\"Do you really want to delete comment?\"\n            handleClose={() => this.setState({ openDeleteDialog: false })}\n            handleOk={this.handleDelete}\n            okText=\"Delete\"\n          />\n        )}\n      </div>\n    );\n  }\n}\n\nComment.propTypes = {\n  comment: PropTypes.shape({}).isRequired,\n  showOnMount: PropTypes.bool,\n  spaceAround: PropTypes.bool,\n  handleShowOnMount: PropTypes.func,\n  handleEdit: PropTypes.func,\n  handleDeleteCallback: PropTypes.func.isRequired,\n  patchCommentCallback: PropTypes.func.isRequired,\n  companyId: PropTypes.number,\n  currentUser: PropTypes.shape(),\n\n  classes: PropTypes.shape({}).isRequired,\n  isNative: PropTypes.bool,\n};\n\nComment.defaultProps = {\n  showOnMount: false,\n  spaceAround: false,\n  handleShowOnMount: noop,\n  handleEdit: noop,\n  companyId: null,\n\n  isNative: isNativeDetected,\n\n  currentUser: {},\n};\n\nexport default withStyles(muiStyles)(Comment);\n"],"names":["style","chatAvatarWrapper","paddingTop","position","top","left","commentInfoContainer","display","alignItems","width","userNameWrapper","overflow","infoContainer","verticalAlign","paddingLeft","Comment","_PureComponent","_inherits","PureComponent","_super","_createSuper","props","_this","_ref","_classCallCheck","this","call","_defineProperty","_assertThisInitialized","_asyncToGenerator","_regeneratorRuntime","mark","_callee","feedItemId","commentId","commentResponse","wrap","_context","prev","next","deleteFeedItemComment","sent","t0","console","error","abrupt","stop","_x","_x2","apply","arguments","handleShowOnMount","commentEl","current","scrollIntoView","block","event","stopPropagation","setState","actionsMenuAnchorEl","currentTarget","keyCode","isEditing","document","removeEventListener","handleKeyDown","addEventListener","inputEl","focus","comment","editCommentId","id","editComment","body","editAttachment","attachment","editFeedItemId","feed_activity_id","isLoading","openDeleteDialog","_callee2","response","_context2","deleteComment","handleDeleteCallback","state","createRef","_createClass","key","value","showOnMount","showIntoView","get","Number","currentUser","showEdit","isCurrentUserCommentCreator","showDelete","includes","allowed_actions","_jsxs","className","styles","cCommentMenu","children","_jsx","IconButton","concat","undefined","classes","iconButtonRoot","size","onClick","handleOpenActionsMenu","MoreVertIcon","Menu","anchorOrigin","vertical","horizontal","transformOrigin","anchorEl","open","handleCloseActionsMenu","onClose","MenuItem","handleEditMenuItem","handleDeleteMenuItem","_comment$attachment","_comment$attachment2","_this2","_this$state","spaceAround","CommentLoader","_this$props","isNative","patchCommentCallback","companyId","CommentInput","_objectSpread","inputRef","postComment","noop","exitEditMode","onEditFinish","setIsEditting","getEditCommentProps","userFullName","utils","getUserFullName","user","format","time","moment","created_at","attachmentUrl","signed_url","url","attachmentSize","attachmentFileName","classNames","cComment","cCommentNative","ref","CommentWrapper","commentWrapper","Avatar","displayName","imgSrc","avatar","UserCardPopover","Typography","variant","noWrap","userName","timeWrapper","root","timeRoot","cCommentBody","renderMenuIcon","textRoot","formatMentionText","mentioned_users","Attachment","fileName","ConfirmationDialog","text","handleClose","handleOk","handleDelete","okText","propTypes","PropTypes","shape","isRequired","bool","func","handleEdit","number","defaultProps","isNativeDetected","Comment$1","withStyles","theme","color","palette","primary","text7","float","marginRight","marginLeft","fontSize","marginTop","fontWeight","visibility"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Comment/index.js"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { get, noop, includes } from 'lodash';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\n\nimport useComment from './useComment';\n\nimport styles from './styles.css';\n\nimport CommentWrapper from '~components/CommentWrapper';\nimport CommentLoader from '~components/CommentLoader';\nimport CommentInput from '~components/CommentInput';\nimport Avatar from '~components/Avatar';\nimport Attachment from '~components/Attachment';\nimport IconButton from '~components/IconButton';\nimport ConfirmationDialog from '~components/ConfirmationDialog';\nimport UserCardPopover from '~components/UserCardPopover';\nimport { formatMentionText } from '~components/UserMention/utils';\nimport { isNativeDetected } from '~/utils/mobileDetect';\nimport utils from '~utils/main';\n\nconst PAGE_NAME = 'comment';\n\nconst CREATED_AT_FORMAT = 'MM/DD/YY HH:mm';\nconst CREATED_AT_FORMAT_NATIVE = 'MM/DD HH:mm';\n\nconst style = {\n  chatAvatarWrapper: {\n    paddingTop: 2,\n    position: 'absolute',\n    top: 6,\n    left: 0,\n  },\n  commentInfoContainer: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    width: '100%',\n    paddingTop: 5,\n  },\n  userNameWrapper: { overflow: 'hidden' },\n  infoContainer: {\n    display: 'inline-block',\n    verticalAlign: 'top',\n    width: '100%',\n    paddingLeft: 33,\n  },\n};\n\nconst muiStyles = theme => ({\n  commentWrapper: { width: '100%' },\n  timeRoot: {\n    color: theme.palette.primary.text7,\n    float: 'right',\n    marginRight: 5,\n    marginLeft: 8,\n    fontSize: '12px',\n  },\n  textRoot: {\n    marginTop: 5,\n    color: '#CCC',\n    fontWeight: 'normal',\n    fontSize: '14px',\n  },\n  iconButtonRoot: {\n    float: 'right',\n    visibility: 'hidden',\n    color: theme.palette.primary.text7,\n  },\n  userName: {\n    fontSize: '12px',\n    fontWeight: 'bold',\n  },\n});\n\nconst emptyUser = {};\n\n/** @param {any} props Preserve the legacy component's public prop type. */\nfunction Comment({\n  comment,\n  showOnMount = false,\n  spaceAround = false,\n  handleShowOnMount = noop,\n  handleDeleteCallback,\n  patchCommentCallback,\n  companyId = null,\n  currentUser = emptyUser,\n  classes,\n  isNative = isNativeDetected,\n}) {\n  const {\n    actionsMenuAnchorEl,\n    isLoading,\n    isEditing,\n    openDeleteDialog,\n    inputEl,\n    commentEl,\n    handleOpenActionsMenu,\n    handleCloseActionsMenu,\n    handleEditMenuItem,\n    onEditFinish,\n    setIsEditting,\n    handleDeleteMenuItem,\n    handleCloseDeleteDialog,\n    handleDelete,\n  } = useComment({ comment, showOnMount, handleShowOnMount, handleDeleteCallback });\n  const isCurrentUserCommentCreator =\n    Number(get(comment, ['user', 'id'])) === Number(currentUser.id);\n\n  const renderMenuIcon = () => {\n    const showEdit = isCurrentUserCommentCreator;\n\n    const showDelete = isCurrentUserCommentCreator || includes(comment.allowed_actions, 'destroy');\n\n    if (!(showDelete || showEdit)) return null;\n\n    return (\n      <div className={styles.cCommentMenu}>\n        <IconButton\n          data-testid={`${PAGE_NAME}_menuButton`}\n          aria-label=\"Actions\"\n          aria-owns={actionsMenuAnchorEl ? 'c-comment__actions-menu' : undefined}\n          aria-haspopup=\"true\"\n          className={classes.iconButtonRoot}\n          size=\"small\"\n          onClick={handleOpenActionsMenu}\n        >\n          <MoreVertIcon />\n        </IconButton>\n\n        <Menu\n          id=\"c-comment__actions-menu\"\n          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n          transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n          anchorEl={actionsMenuAnchorEl}\n          open={!!actionsMenuAnchorEl}\n          onClick={handleCloseActionsMenu}\n          onClose={handleCloseActionsMenu}\n        >\n          {showEdit && (\n            <MenuItem data-testid={`${PAGE_NAME}_editMenuItem`} onClick={handleEditMenuItem}>\n              Edit\n            </MenuItem>\n          )}\n\n          {showDelete && (\n            <MenuItem data-testid={`${PAGE_NAME}_deleteMenuItem`} onClick={handleDeleteMenuItem}>\n              Delete\n            </MenuItem>\n          )}\n        </Menu>\n      </div>\n    );\n  };\n\n  if (isLoading) {\n    return <CommentLoader spaceAround={spaceAround} />;\n  }\n\n  if (isEditing) {\n    return (\n      <CommentInput\n        inputRef={inputEl}\n        postComment={noop}\n        exitEditMode={onEditFinish}\n        setIsEditting={setIsEditting}\n        patchCommentCallback={patchCommentCallback}\n        companyId={companyId}\n        currentUser={currentUser}\n        editFeedItemId={comment.feed_activity_id}\n        editCommentId={comment.id}\n        editComment={comment.body}\n        editAttachment={comment.attachment}\n      />\n    );\n  }\n\n  const userFullName = utils.getUserFullName(comment.user);\n\n  const format = isNative ? CREATED_AT_FORMAT_NATIVE : CREATED_AT_FORMAT;\n  const time = moment(comment.created_at).format(format);\n\n  const attachmentUrl = comment?.attachment?.signed_url || comment?.attachment?.url;\n  const attachmentSize = get(comment, ['attachment', 'size']);\n  const attachmentFileName = get(comment, ['attachment', 'file_name']);\n\n  return (\n    <div\n      data-testid={`${PAGE_NAME}_commentItem_${comment.body}`}\n      className={classNames(styles.cComment, { [styles.cCommentNative]: isNative })}\n      ref={commentEl}\n    >\n      <CommentWrapper spaceAround={spaceAround} className={classes.commentWrapper}>\n        <div style={style.chatAvatarWrapper}>\n          {isNative ? (\n            <Avatar\n              size={24}\n              displayName={userFullName}\n              imgSrc={get(comment, ['user', 'profile_photo'])}\n              className={classes.avatar}\n            />\n          ) : (\n            <UserCardPopover user={comment.user} currentUser={currentUser}>\n              <Avatar\n                size={24}\n                displayName={userFullName}\n                imgSrc={get(comment, ['user', 'profile_photo'])}\n                className={classes.avatar}\n              />\n            </UserCardPopover>\n          )}\n        </div>\n\n        <div style={style.infoContainer}>\n          <div>\n            <div style={style.commentInfoContainer}>\n              <div style={style.userNameWrapper}>\n                <Typography\n                  data-testid={`${PAGE_NAME}_userName`}\n                  variant=\"subtitle2\"\n                  noWrap\n                  className={classes.userName}\n                >\n                  {userFullName}\n                </Typography>\n              </div>\n\n              <div style={style.timeWrapper}>\n                <Typography\n                  data-testid={`${PAGE_NAME}_addTime`}\n                  variant=\"caption\"\n                  classes={{ root: classes.timeRoot }}\n                >\n                  {time}\n                </Typography>\n              </div>\n            </div>\n          </div>\n\n          <div className={styles.cCommentBody}>\n            {renderMenuIcon()}\n            <Typography\n              data-testid={`${PAGE_NAME}_commentMessage`}\n              variant=\"body1\"\n              classes={{ root: classes.textRoot }}\n            >\n              {formatMentionText(\n                comment.body,\n                comment.mentioned_users,\n                isNative,\n                '#00bcd4',\n                currentUser\n              )}\n            </Typography>\n\n            {attachmentUrl && (\n              <Attachment\n                attachmentUrl={attachmentUrl}\n                attachmentSize={attachmentSize}\n                size=\"small\"\n                fileName={attachmentFileName}\n              />\n            )}\n          </div>\n        </div>\n      </CommentWrapper>\n\n      {openDeleteDialog && (\n        <ConfirmationDialog\n          open={openDeleteDialog}\n          text=\"Do you really want to delete comment?\"\n          handleClose={handleCloseDeleteDialog}\n          handleOk={handleDelete}\n          okText=\"Delete\"\n        />\n      )}\n    </div>\n  );\n}\n\nComment.propTypes = {\n  comment: PropTypes.shape({}).isRequired,\n  showOnMount: PropTypes.bool,\n  spaceAround: PropTypes.bool,\n  handleShowOnMount: PropTypes.func,\n  handleEdit: PropTypes.func,\n  handleDeleteCallback: PropTypes.func.isRequired,\n  patchCommentCallback: PropTypes.func.isRequired,\n  companyId: PropTypes.number,\n  currentUser: PropTypes.shape(),\n\n  classes: PropTypes.shape({}).isRequired,\n  isNative: PropTypes.bool,\n};\n\nexport default withStyles(muiStyles)(memo(Comment));\n"],"names":["style","chatAvatarWrapper","paddingTop","position","top","left","commentInfoContainer","display","alignItems","width","userNameWrapper","overflow","infoContainer","verticalAlign","paddingLeft","emptyUser","Comment","_ref","_comment$attachment","_comment$attachment2","comment","_ref$showOnMount","showOnMount","_ref$spaceAround","spaceAround","_ref$handleShowOnMoun","handleShowOnMount","noop","handleDeleteCallback","patchCommentCallback","_ref$companyId","companyId","_ref$currentUser","currentUser","classes","_ref$isNative","isNative","isNativeDetected","_useComment","useComment","actionsMenuAnchorEl","isLoading","isEditing","openDeleteDialog","inputEl","commentEl","handleOpenActionsMenu","handleCloseActionsMenu","handleEditMenuItem","onEditFinish","setIsEditting","handleDeleteMenuItem","handleCloseDeleteDialog","handleDelete","isCurrentUserCommentCreator","Number","get","id","_jsx","CommentLoader","CommentInput","inputRef","postComment","exitEditMode","editFeedItemId","feed_activity_id","editCommentId","editComment","body","editAttachment","attachment","showEdit","showDelete","userFullName","utils","getUserFullName","user","format","time","moment","created_at","attachmentUrl","signed_url","url","attachmentSize","attachmentFileName","_jsxs","concat","className","classNames","styles","cComment","cCommentNative","ref","children","CommentWrapper","commentWrapper","Avatar","size","displayName","imgSrc","avatar","UserCardPopover","Typography","variant","noWrap","userName","timeWrapper","root","timeRoot","cCommentBody","includes","allowed_actions","cCommentMenu","IconButton","undefined","iconButtonRoot","onClick","MoreVertIcon","Menu","anchorOrigin","vertical","horizontal","transformOrigin","anchorEl","open","onClose","MenuItem","textRoot","formatMentionText","mentioned_users","Attachment","fileName","ConfirmationDialog","text","handleClose","handleOk","okText","propTypes","PropTypes","shape","isRequired","bool","func","handleEdit","number","withStyles","theme","color","palette","primary","text7","float","marginRight","marginLeft","fontSize","marginTop","fontWeight","visibility","memo"],"mappings":"+/BA4BA,IAKMA,EAAQ,CACZC,kBAAmB,CACjBC,WAAY,EACZC,SAAU,WACVC,IAAK,EACLC,KAAM,GAERC,qBAAsB,CACpBC,QAAS,cACTC,WAAY,SACZC,MAAO,OACPP,WAAY,GAEdQ,gBAAiB,CAAEC,SAAU,UAC7BC,cAAe,CACbL,QAAS,eACTM,cAAe,MACfJ,MAAO,OACPK,YAAa,KA8BXC,EAAY,CAAA,EAGlB,SAASC,EAWNC,GAAA,IAAAC,EAAAC,EAVDC,IAAAA,QAAOC,EAAAJ,EACPK,YAAAA,cAAmBD,EAAAE,EAAAN,EACnBO,YAAAA,cAAmBD,EAAAE,EAAAR,EACnBS,kBAAAA,aAAoBC,EAAIF,EACxBG,IAAAA,qBACAC,IAAAA,qBAAoBC,EAAAb,EACpBc,UAAAA,aAAY,KAAID,EAAAE,EAAAf,EAChBgB,YAAAA,aAAclB,EAASiB,EACvBE,IAAAA,QAAOC,EAAAlB,EACPmB,SAAAA,aAAWC,EAAgBF,EAE3BG,EAeIC,EAAW,CAAEnB,QAAAA,EAASE,YAAAA,EAAaI,kBAAAA,EAAmBE,qBAAAA,IAdxDY,IAAAA,oBACAC,IAAAA,UACAC,IAAAA,UACAC,IAAAA,iBACAC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,sBACAC,KAAAA,uBACAC,KAAAA,mBACAC,KAAAA,aACAC,KAAAA,cACAC,KAAAA,qBACAC,KAAAA,wBACAC,KAAAA,aAEIC,GACJC,OAAOC,EAAIpC,EAAS,CAAC,OAAQ,UAAYmC,OAAOtB,EAAYwB,IAgD9D,GAAIhB,EACF,OAAOiB,EAACC,EAAa,CAACnC,YAAaA,IAGrC,GAAIkB,EACF,OACEgB,EAACE,EAAY,CACXC,SAAUjB,EACVkB,YAAanC,EACboC,aAAcd,GACdC,cAAeA,GACfrB,qBAAsBA,EACtBE,UAAWA,EACXE,YAAaA,EACb+B,eAAgB5C,EAAQ6C,iBACxBC,cAAe9C,EAAQqC,GACvBU,YAAa/C,EAAQgD,KACrBC,eAAgBjD,EAAQkD,aAK9B,IAnEQC,GAEAC,GAiEFC,GAAeC,EAAMC,gBAAgBvD,EAAQwD,MAE7CC,GAASzC,EA1JgB,cADP,iBA4JlB0C,GAAOC,EAAO3D,EAAQ4D,YAAYH,OAAOA,IAEzCI,IAAgB7D,SAAmB,QAAZF,EAAPE,EAASkD,kBAAU,IAAApD,OAAZ,EAAPA,EAAqBgE,cAAc9D,SAAA,QAAOD,EAAPC,EAASkD,kBAAT,IAAAnD,OAAO,EAAPA,EAAqBgE,KACxEC,GAAiB5B,EAAIpC,EAAS,CAAC,aAAc,SAC7CiE,GAAqB7B,EAAIpC,EAAS,CAAC,aAAc,cAEvD,OACEkE,EAAA,MAAA,CACE,cAAA,GAAAC,OAtKY,UAsKa,iBAAAA,OAAgBnE,EAAQgD,MACjDoB,UAAWC,EAAWC,EAAOC,SAAaD,EAAAA,CAAAA,EAAAA,EAAOE,eAAiBxD,IAClEyD,IAAKhD,EAAUiD,SAAA,CAEfR,EAACS,EAAc,CAACvE,YAAaA,EAAagE,UAAWtD,EAAQ8D,eAAeF,SAC1E,CAAApC,EAAA,MAAA,CAAK1D,MAAOA,EAAMC,kBAAkB6F,SACjC1D,EACCsB,EAACuC,EAAM,CACLC,KAAM,GACNC,YAAa1B,GACb2B,OAAQ5C,EAAIpC,EAAS,CAAC,OAAQ,kBAC9BoE,UAAWtD,EAAQmE,SAGrB3C,EAAC4C,EAAe,CAAC1B,KAAMxD,EAAQwD,KAAM3C,YAAaA,EAAY6D,SAC5DpC,EAACuC,EAAM,CACLC,KAAM,GACNC,YAAa1B,GACb2B,OAAQ5C,EAAIpC,EAAS,CAAC,OAAQ,kBAC9BoE,UAAWtD,EAAQmE,aAM3Bf,EAAA,MAAA,CAAKtF,MAAOA,EAAMY,cAAckF,SAC9B,CAAApC,EAAA,MAAA,CAAAoC,SACER,EAAA,MAAA,CAAKtF,MAAOA,EAAMM,qBAAqBwF,SACrC,CAAApC,EAAA,MAAA,CAAK1D,MAAOA,EAAMU,gBAAgBoF,SAChCpC,EAAC6C,EAAU,CACT,cAAA,GAAAhB,OApMA,UAoMqC,aACrCiB,QAAQ,YACRC,QAAM,EACNjB,UAAWtD,EAAQwE,SAASZ,SAE3BrB,OAILf,EAAA,MAAA,CAAK1D,MAAOA,EAAM2G,YAAYb,SAC5BpC,EAAC6C,EAAU,CACT,cAAA,GAAAhB,OA/MA,UA+MoC,YACpCiB,QAAQ,UACRtE,QAAS,CAAE0E,KAAM1E,EAAQ2E,UAAWf,SAEnChB,YAMTQ,EAAA,MAAA,CAAKE,UAAWE,EAAOoB,aAAahB,SAAA,EAjIpCvB,GAAWjB,GAEXkB,GAAalB,IAA+ByD,EAAS3F,EAAQ4F,gBAAiB,WAE9ExC,IAAcD,GAGlBe,EAAA,MAAA,CAAKE,UAAWE,EAAOuB,aAAanB,SAAA,CAClCpC,EAACwD,EAAU,CACT,cAAA,GAAA3B,OAjGQ,UAiG+B,eACvC,aAAW,UACX,YAAW/C,EAAsB,+BAA4B2E,EAC7D,gBAAc,OACd3B,UAAWtD,EAAQkF,eACnBlB,KAAK,QACLmB,QAASvE,EAAsBgD,SAE/BpC,EAAC4D,EAAY,MAGfhC,EAACiC,EAAI,CACH9D,GAAG,0BACH+D,aAAc,CAAEC,SAAU,MAAOC,WAAY,SAC7CC,gBAAiB,CAAEF,SAAU,MAAOC,WAAY,SAChDE,SAAUpF,EACVqF,OAAQrF,EACR6E,QAAStE,GACT+E,QAAS/E,GAAuB+C,SAE/BvB,CAAAA,IACCb,EAACqE,EAAQ,CAAC,cAAA,GAAAxC,OAtHJ,UAsH6C,iBAAC8B,QAASrE,GAAmB8C,SAAA,SAKjFtB,IACCd,EAACqE,EAAQ,CAAC,cAAA,GAAAxC,OA5HJ,UA4H+C,mBAAC8B,QAASlE,GAAqB2C,SAAA,iBAhCtD,MA+H9BpC,EAAC6C,EAAU,CACT,cAAA,GAAAhB,OA5NI,UA4NuC,mBAC3CiB,QAAQ,QACRtE,QAAS,CAAE0E,KAAM1E,EAAQ8F,UAAWlC,SAEnCmC,EACC7G,EAAQgD,KACRhD,EAAQ8G,gBACR9F,EACA,UACAH,KAIHgD,IACCvB,EAACyE,EAAU,CACTlD,cAAeA,GACfG,eAAgBA,GAChBc,KAAK,QACLkC,SAAU/C,cAOnB1C,GACCe,EAAC2E,EAAkB,CACjBR,KAAMlF,EACN2F,KAAK,wCACLC,YAAanF,GACboF,SAAUnF,GACVoF,OAAO,aAKjB,CAEAzH,EAAQ0H,UAAY,CAClBtH,QAASuH,EAAUC,MAAM,CAAA,GAAIC,WAC7BvH,YAAaqH,EAAUG,KACvBtH,YAAamH,EAAUG,KACvBpH,kBAAmBiH,EAAUI,KAC7BC,WAAYL,EAAUI,KACtBnH,qBAAsB+G,EAAUI,KAAKF,WACrChH,qBAAsB8G,EAAUI,KAAKF,WACrC9G,UAAW4G,EAAUM,OACrBhH,YAAa0G,EAAUC,QAEvB1G,QAASyG,EAAUC,MAAM,CAAA,GAAIC,WAC7BzG,SAAUuG,EAAUG,MAGtB,IAAeI,EAAAA,GAtPG,SAAAC,GAAK,MAAK,CAC1BnD,eAAgB,CAAEvF,MAAO,QACzBoG,SAAU,CACRuC,MAAOD,EAAME,QAAQC,QAAQC,MAC7BC,MAAO,QACPC,YAAa,EACbC,WAAY,EACZC,SAAU,QAEZ3B,SAAU,CACR4B,UAAW,EACXR,MAAO,OACPS,WAAY,SACZF,SAAU,QAEZvC,eAAgB,CACdoC,MAAO,QACPM,WAAY,SACZV,MAAOD,EAAME,QAAQC,QAAQC,OAE/B7C,SAAU,CACRiD,SAAU,OACVE,WAAY,QAEf,GA8NcX,CAAsBa,EAAK/I"}

package/components/Comment/useComment.d.ts

@@ -0,0 +1,22 @@
+export default function useComment({ comment, showOnMount, handleShowOnMount, handleDeleteCallback, }: {
+    comment: any;
+    handleDeleteCallback: any;
+    handleShowOnMount: any;
+    showOnMount: any;
+}): {
+    actionsMenuAnchorEl: null;
+    isLoading: boolean;
+    isEditing: boolean;
+    openDeleteDialog: boolean;
+    inputEl: import("react").MutableRefObject<null>;
+    commentEl: import("react").MutableRefObject<null>;
+    handleOpenActionsMenu: (event: any) => void;
+    handleCloseActionsMenu: (event: any) => void;
+    handleEditMenuItem: () => void;
+    onEditFinish: () => void;
+    setIsEditting: () => void;
+    handleDeleteMenuItem: () => void;
+    handleCloseDeleteDialog: () => void;
+    handleDelete: () => Promise<void>;
+};
+//# sourceMappingURL=useComment.d.ts.map

package/components/Comment/useComment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComment.d.ts","sourceRoot":"","sources":["../../../src/components/Comment/useComment.js"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,oBAAoB,GACrB;;;;;CAAA;;;;;;;;;;;;;;;EA+EA"}

package/components/Comment/useComment.js

@@ -0,0 +1,2 @@
+import n from"@babel/runtime/helpers/asyncToGenerator";import e from"@babel/runtime/helpers/slicedToArray";import t from"@babel/runtime/regenerator";import{useState as r,useRef as o,useLayoutEffect as u,useCallback as i}from"react";import{deleteFeedItemComment as c}from"../../clients/jsonApi/index.js";function a(a){var l=a.comment,s=a.showOnMount,d=a.handleShowOnMount,f=a.handleDeleteCallback,m=r(null),h=e(m,2),p=h[0],v=h[1],w=r(!1),M=e(w,2),E=M[0],b=M[1],g=r(!1),k=e(g,2),y=k[0],D=k[1],O=r(!1),x=e(O,2),A=x[0],C=x[1],I=o(null),L=o(null),S=o({showOnMount:s,handleShowOnMount:d}),T=o(f);u((function(){T.current=f}),[f]),u((function(){S.current.showOnMount&&(S.current.handleShowOnMount(),L.current.scrollIntoView({block:"end"}))}),[]),u((function(){y&&I.current&&I.current.focus()}),[y]);var j=i((function(n){27===n.keyCode&&D(!1),document.removeEventListener("keydown",j,!1)}),[]);u((function(){return function(){return document.removeEventListener("keydown",j,!1)}}),[j]);var P,_=(P=n(t.mark((function n(){var e,r,o;return t.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return e=l.id,r=l.feed_activity_id,b(!0),n.prev=2,n.next=5,c(r,e);case 5:o=n.sent,n.next=11;break;case 8:n.prev=8,n.t0=n.catch(2),console.error(n.t0);case 11:b(!1),C(!1),o&&T.current(e);case 14:case"end":return n.stop()}}),n,null,[[2,8]])}))),function(){return P.apply(this,arguments)});return{actionsMenuAnchorEl:p,isLoading:E,isEditing:y,openDeleteDialog:A,inputEl:I,commentEl:L,handleOpenActionsMenu:function(n){n.stopPropagation(),v(n.currentTarget)},handleCloseActionsMenu:function(n){n.stopPropagation(),v(null)},handleEditMenuItem:function(){document.addEventListener("keydown",j,!1),D(!0)},onEditFinish:function(){D(!1),b(!1)},setIsEditting:function(){return b(!0)},handleDeleteMenuItem:function(){return C(!0)},handleCloseDeleteDialog:function(){return C(!1)},handleDelete:_}}export{a as default};
+//# sourceMappingURL=useComment.js.map

package/components/Comment/useComment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComment.js","sources":["../../../src/components/Comment/useComment.js"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { deleteFeedItemComment } from '../../clients/jsonApi';\n\nexport default function useComment({\n  comment,\n  showOnMount,\n  handleShowOnMount,\n  handleDeleteCallback,\n}) {\n  const [actionsMenuAnchorEl, setActionsMenuAnchorEl] = useState(null);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isEditing, setIsEditing] = useState(false);\n  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);\n  const inputEl = useRef(null);\n  const commentEl = useRef(null);\n  const initialMount = useRef({ showOnMount, handleShowOnMount });\n  const deleteCallback = useRef(handleDeleteCallback);\n\n  useLayoutEffect(() => {\n    deleteCallback.current = handleDeleteCallback;\n  }, [handleDeleteCallback]);\n\n  useLayoutEffect(() => {\n    if (initialMount.current.showOnMount) {\n      initialMount.current.handleShowOnMount();\n      commentEl.current.scrollIntoView({ block: 'end' });\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isEditing && inputEl.current) inputEl.current.focus();\n  }, [isEditing]);\n\n  const handleKeyDown = useCallback(event => {\n    if (event.keyCode === 27) setIsEditing(false);\n    document.removeEventListener('keydown', handleKeyDown, false);\n  }, []);\n\n  useLayoutEffect(\n    () => () => document.removeEventListener('keydown', handleKeyDown, false),\n    [handleKeyDown]\n  );\n\n  const handleEditMenuItem = () => {\n    document.addEventListener('keydown', handleKeyDown, false);\n    setIsEditing(true);\n  };\n\n  const handleDelete = async () => {\n    const { id, feed_activity_id: feedItemId } = comment;\n    setIsLoading(true);\n    let response;\n    try {\n      response = await deleteFeedItemComment(feedItemId, id);\n    } catch (error) {\n      console.error(error);\n    }\n    setIsLoading(false);\n    setOpenDeleteDialog(false);\n    if (response) deleteCallback.current(id);\n  };\n\n  return {\n    actionsMenuAnchorEl,\n    isLoading,\n    isEditing,\n    openDeleteDialog,\n    inputEl,\n    commentEl,\n    handleOpenActionsMenu: event => {\n      event.stopPropagation();\n      setActionsMenuAnchorEl(event.currentTarget);\n    },\n    handleCloseActionsMenu: event => {\n      event.stopPropagation();\n      setActionsMenuAnchorEl(null);\n    },\n    handleEditMenuItem,\n    onEditFinish: () => {\n      setIsEditing(false);\n      setIsLoading(false);\n    },\n    setIsEditting: () => setIsLoading(true),\n    handleDeleteMenuItem: () => setOpenDeleteDialog(true),\n    handleCloseDeleteDialog: () => setOpenDeleteDialog(false),\n    handleDelete,\n  };\n}\n"],"names":["useComment","_ref","comment","showOnMount","handleShowOnMount","handleDeleteCallback","useState","_useState2","_slicedToArray","_useState","actionsMenuAnchorEl","setActionsMenuAnchorEl","_useState4","_useState3","isLoading","setIsLoading","_useState6","_useState5","isEditing","setIsEditing","_useState8","_useState7","openDeleteDialog","setOpenDeleteDialog","inputEl","useRef","commentEl","initialMount","deleteCallback","useLayoutEffect","current","scrollIntoView","block","focus","handleKeyDown","useCallback","event","keyCode","document","removeEventListener","_ref2","handleDelete","_asyncToGenerator","_regeneratorRuntime","mark","_callee","id","feedItemId","response","wrap","_context","prev","next","feed_activity_id","deleteFeedItemComment","sent","t0","console","error","stop","apply","this","arguments","handleOpenActionsMenu","stopPropagation","currentTarget","handleCloseActionsMenu","handleEditMenuItem","addEventListener","onEditFinish","setIsEditting","handleDeleteMenuItem","handleCloseDeleteDialog"],"mappings":"+SAGe,SAASA,EAKrBC,GAAA,IAJDC,IAAAA,QACAC,IAAAA,YACAC,IAAAA,kBACAC,IAAAA,qBAEsDC,EAAAA,EAAS,MAAKC,EAAAC,EAAAC,EAAA,GAA7DC,EAAmBH,EAAA,GAAEI,EAAsBJ,EAAA,GAChBD,EAAAA,GAAS,GAAMM,EAAAJ,EAAAK,EAAA,GAA1CC,EAASF,EAAA,GAAEG,EAAYH,EAAA,GACIN,EAAAA,GAAS,GAAMU,EAAAR,EAAAS,EAAA,GAA1CC,EAASF,EAAA,GAAEG,EAAYH,EAAA,GACkBV,EAAAA,GAAS,GAAMc,EAAAZ,EAAAa,EAAA,GAAxDC,EAAgBF,EAAA,GAAEG,EAAmBH,EAAA,GACtCI,EAAUC,EAAO,MACjBC,EAAYD,EAAO,MACnBE,EAAeF,EAAO,CAAEtB,YAAAA,EAAaC,kBAAAA,IACrCwB,EAAiBH,EAAOpB,GAE9BwB,GAAgB,WACdD,EAAeE,QAAUzB,CAC3B,GAAG,CAACA,IAEJwB,GAAgB,WACVF,EAAaG,QAAQ3B,cACvBwB,EAAaG,QAAQ1B,oBACrBsB,EAAUI,QAAQC,eAAe,CAAEC,MAAO,QAE7C,GAAE,IAEHH,GAAgB,WACVX,GAAaM,EAAQM,SAASN,EAAQM,QAAQG,OACpD,GAAG,CAACf,IAEJ,IAAMgB,EAAgBC,GAAY,SAAAC,GACV,KAAlBA,EAAMC,SAAgBlB,GAAa,GACvCmB,SAASC,oBAAoB,UAAWL,GAAe,EACxD,GAAE,IAEHL,GACE,WAAA,OAAM,WAAA,OAAMS,SAASC,oBAAoB,UAAWL,GAAe,EAAM,IACzE,CAACA,IAGH,IAKqBM,EAAfC,GAAeD,EAAAE,EAAAC,EAAAC,MAAA,SAAAC,IAAA,IAAAC,EAAAC,EAAAC,EAAA,OAAAL,EAAAM,MAAA,SAAAC,GAAA,OAAA,OAAAA,EAAAC,KAAAD,EAAAE,MAAA,KAAA,EAEA,OADXN,EAAqC5C,EAArC4C,GAAsBC,EAAe7C,EAAjCmD,iBACZtC,GAAa,GAAMmC,EAAAC,KAAA,EAAAD,EAAAE,KAAA,EAGAE,EAAsBP,EAAYD,GAAG,KAAA,EAAtDE,EAAQE,EAAAK,KAAAL,EAAAE,KAAA,GAAA,MAAA,KAAA,EAAAF,EAAAC,KAAA,EAAAD,EAAAM,GAAAN,EAAA,MAAA,GAERO,QAAQC,MAAYR,EAAAM,IAAC,KAAA,GAEvBzC,GAAa,GACbQ,GAAoB,GAChByB,GAAUpB,EAAeE,QAAQgB,GAAI,KAAA,GAAA,IAAA,MAAA,OAAAI,EAAAS,OAAA,GAAAd,EAAA,KAAA,CAAA,CAAA,EAAA,IAC1C,KAAA,WAZiB,OAAAL,EAAAoB,MAAAC,KAAAC,UAAA,GAclB,MAAO,CACLpD,oBAAAA,EACAI,UAAAA,EACAI,UAAAA,EACAI,iBAAAA,EACAE,QAAAA,EACAE,UAAAA,EACAqC,sBAAuB,SAAA3B,GACrBA,EAAM4B,kBACNrD,EAAuByB,EAAM6B,cAC9B,EACDC,uBAAwB,SAAA9B,GACtBA,EAAM4B,kBACNrD,EAAuB,KACxB,EACDwD,mBAlCyB,WACzB7B,SAAS8B,iBAAiB,UAAWlC,GAAe,GACpDf,GAAa,IAiCbkD,aAAc,WACZlD,GAAa,GACbJ,GAAa,EACd,EACDuD,cAAe,WAAA,OAAMvD,GAAa,EAAK,EACvCwD,qBAAsB,WAAA,OAAMhD,GAAoB,EAAK,EACrDiD,wBAAyB,WAAA,OAAMjD,GAAoB,EAAM,EACzDkB,aAAAA,EAEJ"}

package/components/CommentCard/CommentCard.scss.js

@@ -1,2 +1,2 @@
-import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var t={spacing:"8",capped:"CommentCard_capped__izWBZ",bodySurface:"CommentCard_bodySurface__scobR",editHeader:"CommentCard_editHeader__8aUBt",scrollBody:"CommentCard_scrollBody__CIun9",footer:"CommentCard_footer__z3-CY",repliesSection:"CommentCard_repliesSection__iE7QO",compactBody:"CommentCard_compactBody__zM10O",compactTop:"CommentCard_compactTop__LpiQi",compactTime:"CommentCard_compactTime__JzVQR",compactFooter:"CommentCard_compactFooter__rgB4D",header:"CommentCard_header__T1SH8",headerText:"CommentCard_headerText__DRsQG",nameRow:"CommentCard_nameRow__Or1c0",timestamp:"CommentCard_timestamp__EbJCO",subtitle:"CommentCard_subtitle__d-XRe",avatar:"CommentCard_avatar__NA2ZA",name:"CommentCard_name__9-e7A",chip:"CommentCard_chip__4NUrf",chipAccented:"CommentCard_chipAccented__Xl8ek",bodyRow:"CommentCard_bodyRow__ZUufY",text:"CommentCard_text__eAIZM",attachment:"CommentCard_attachment__KktIn",infoButton:"CommentCard_infoButton__gqcvK",metadataTooltip:"CommentCard_metadataTooltip__AL0xt",metadataRows:"CommentCard_metadataRows__c-kqf",metadataRow:"CommentCard_metadataRow__BqcII",metadataLabel:"CommentCard_metadataLabel__WRWl7",metadataValue:"CommentCard_metadataValue__Xwf7S",metadataUnit:"CommentCard_metadataUnit__Bxeps",contextLine:"CommentCard_contextLine__Jyoui",contextItem:"CommentCard_contextItem__2Xmql",actionsRow:"CommentCard_actionsRow__1Ftxn",actions:"CommentCard_actions__mUmsV",trailingActions:"CommentCard_trailingActions__uGt-3",action:"CommentCard_action__ZfyBP",count:"CommentCard_count__stfpY",liked:"CommentCard_liked__zsBqe",replies:"CommentCard_replies__nRRYo",reply:"CommentCard_reply__7-U7Q",replyHeader:"CommentCard_replyHeader__sWnLA",replyNameRow:"CommentCard_replyNameRow__bs7h2",replyName:"CommentCard_replyName__C8tst",replyTimestamp:"CommentCard_replyTimestamp__YzuW1",replyText:"CommentCard_replyText__8JPKK"};e(".CommentCard_capped__izWBZ{display:flex;flex-direction:column;overflow:hidden}.CommentCard_bodySurface__scobR{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-height:0;overflow:hidden;padding:8px 12px}.CommentCard_editHeader__8aUBt{padding:8px 12px 0}.CommentCard_scrollBody__CIun9{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-height:0;overflow-x:hidden;overflow-y:auto}.CommentCard_footer__z3-CY{border-top:1px solid var(--palette-background-b-4);display:flex;flex-direction:column;flex-shrink:0;padding:4px 12px 8px}.CommentCard_repliesSection__iE7QO{padding:8px 12px 12px}.CommentCard_compactBody__zM10O{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-height:0;overflow:hidden;padding:8px 12px}.CommentCard_compactTop__LpiQi{align-items:center;display:flex;flex-shrink:0;gap:8px}.CommentCard_compactTime__JzVQR{color:var(--palette-primary-text-7);font-size:12px;line-height:16px;margin-left:auto;white-space:nowrap}.CommentCard_compactFooter__rgB4D{border-top:1px solid var(--palette-background-b-4);flex-shrink:0;padding:4px 12px 8px}.CommentCard_header__T1SH8{align-items:center;display:flex;flex-shrink:0;gap:8px}.CommentCard_headerText__DRsQG{display:flex;flex:1 0 0;flex-direction:column;min-width:0;word-break:break-word}.CommentCard_nameRow__Or1c0{align-items:center;display:flex;gap:8px;width:100%}.CommentCard_nameRow__Or1c0 .CommentCard_timestamp__EbJCO{margin-left:auto}.CommentCard_subtitle__d-XRe{color:var(--palette-primary-main);font-size:12px;line-height:16px}.CommentCard_avatar__NA2ZA{flex-shrink:0}.CommentCard_name__9-e7A{color:var(--palette-primary-text-1);flex:0 1 auto;font-size:14px;line-height:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.CommentCard_timestamp__EbJCO{color:var(--palette-primary-text-7)}.CommentCard_chip__4NUrf,.CommentCard_timestamp__EbJCO{flex-shrink:0;font-size:12px;line-height:16px;white-space:nowrap}.CommentCard_chip__4NUrf{align-items:center;background:rgb(from var(--palette-primary-text-1) r g b/.04);border-radius:8px;color:var(--palette-primary-text-6);display:flex;height:24px;padding:6px 8px}.CommentCard_chipAccented__Xl8ek{border-left:2px solid transparent}.CommentCard_bodyRow__ZUufY{align-items:center;display:flex;gap:8px}.CommentCard_text__eAIZM{color:var(--palette-primary-text-1);flex:1 1 auto;font-size:12px;line-height:16px;min-width:0;white-space:pre-wrap;word-break:break-word}.CommentCard_text__eAIZM a,.CommentCard_text__eAIZM button{font:inherit;padding:0;vertical-align:baseline}.CommentCard_attachment__KktIn{display:flex;flex-direction:column;gap:8px}.CommentCard_infoButton__gqcvK{align-items:center;color:var(--palette-primary-text-6);cursor:default;display:inline-flex}.CommentCard_infoButton__gqcvK:hover{color:var(--palette-primary-text-1)}.CommentCard_metadataTooltip__AL0xt .MuiTooltip-tooltip{max-width:none!important}.CommentCard_metadataRows__c-kqf{display:flex;flex-direction:column;gap:4px;padding:4px 0}.CommentCard_metadataRow__BqcII{align-items:baseline;display:flex;font-size:14px;gap:4px;line-height:20px;white-space:nowrap}.CommentCard_metadataLabel__WRWl7{color:var(--palette-primary-text-6)}.CommentCard_metadataValue__Xwf7S{color:var(--palette-primary-text-1)}.CommentCard_metadataUnit__Bxeps{color:var(--palette-primary-text-6);font-size:12px}.CommentCard_contextLine__Jyoui{align-items:center;color:var(--palette-primary-text-7);column-gap:16px;display:flex;flex-wrap:wrap;font-size:12px;line-height:16px;row-gap:4px}.CommentCard_contextItem__2Xmql{white-space:nowrap}.CommentCard_actionsRow__1Ftxn{align-items:center;display:flex;justify-content:space-between;width:100%}.CommentCard_actions__mUmsV{align-items:center;display:flex;gap:8px}.CommentCard_trailingActions__uGt-3{align-items:center;display:flex;gap:4px}.CommentCard_action__ZfyBP{align-items:center;display:flex;gap:2px}.CommentCard_count__stfpY{color:var(--palette-primary-text-6);font-size:12px;line-height:16px}.CommentCard_liked__zsBqe svg{color:var(--palette-primary-main)}.CommentCard_replies__nRRYo{display:flex;flex-direction:column;gap:8px}.CommentCard_reply__7-U7Q{display:flex;flex-direction:column;gap:4px}.CommentCard_replyHeader__sWnLA{align-items:center;display:flex;gap:8px}.CommentCard_replyNameRow__bs7h2{align-items:center;display:flex;flex:1 0 0;gap:12px;min-width:0}.CommentCard_replyName__C8tst{color:var(--palette-primary-text-1);font-size:14px;line-height:20px;white-space:nowrap}.CommentCard_replyTimestamp__YzuW1{color:var(--palette-primary-text-7);flex:1 0 0;font-size:12px;line-height:16px;min-width:0}.CommentCard_replyText__8JPKK{color:var(--palette-primary-text-1);font-size:12px;line-height:16px;padding-left:40px;white-space:pre-wrap;word-break:break-word}.CommentCard_replyText__8JPKK a,.CommentCard_replyText__8JPKK button{font:inherit;padding:0;vertical-align:baseline}");export{t as default};
+import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var t={spacing:"8",capped:"CommentCard_capped__izWBZ",bodySurface:"CommentCard_bodySurface__scobR",editHeader:"CommentCard_editHeader__8aUBt",scrollBody:"CommentCard_scrollBody__CIun9",footer:"CommentCard_footer__z3-CY",repliesSection:"CommentCard_repliesSection__iE7QO",compactBody:"CommentCard_compactBody__zM10O",compactTop:"CommentCard_compactTop__LpiQi",compactTime:"CommentCard_compactTime__JzVQR",compactFooter:"CommentCard_compactFooter__rgB4D",header:"CommentCard_header__T1SH8",headerText:"CommentCard_headerText__DRsQG",nameRow:"CommentCard_nameRow__Or1c0",timestamp:"CommentCard_timestamp__EbJCO",subtitle:"CommentCard_subtitle__d-XRe",avatar:"CommentCard_avatar__NA2ZA",name:"CommentCard_name__9-e7A",chip:"CommentCard_chip__4NUrf",chipAccented:"CommentCard_chipAccented__Xl8ek",bodyRow:"CommentCard_bodyRow__ZUufY",text:"CommentCard_text__eAIZM",attachment:"CommentCard_attachment__KktIn",infoButton:"CommentCard_infoButton__gqcvK",metadataTooltip:"CommentCard_metadataTooltip__AL0xt",metadataRows:"CommentCard_metadataRows__c-kqf",metadataRow:"CommentCard_metadataRow__BqcII",metadataLabel:"CommentCard_metadataLabel__WRWl7",metadataValue:"CommentCard_metadataValue__Xwf7S",metadataUnit:"CommentCard_metadataUnit__Bxeps",contextLine:"CommentCard_contextLine__Jyoui",contextItem:"CommentCard_contextItem__2Xmql",actionsRow:"CommentCard_actionsRow__1Ftxn",actions:"CommentCard_actions__mUmsV",trailingActions:"CommentCard_trailingActions__uGt-3",action:"CommentCard_action__ZfyBP",count:"CommentCard_count__stfpY",liked:"CommentCard_liked__zsBqe",replies:"CommentCard_replies__nRRYo",reply:"CommentCard_reply__7-U7Q",replyHeader:"CommentCard_replyHeader__sWnLA",replyNameRow:"CommentCard_replyNameRow__bs7h2",replyName:"CommentCard_replyName__C8tst",replyTimestamp:"CommentCard_replyTimestamp__YzuW1",replyText:"CommentCard_replyText__8JPKK"};e(".CommentCard_capped__izWBZ{flex-direction:column}.CommentCard_bodySurface__scobR,.CommentCard_capped__izWBZ{overflow-clip-margin:12px;display:flex;overflow:hidden;overflow:clip}.CommentCard_bodySurface__scobR{flex:1 1 auto;flex-direction:column;gap:8px;min-height:0;padding:8px 12px}.CommentCard_editHeader__8aUBt{padding:8px 12px 0}.CommentCard_scrollBody__CIun9{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;margin:0 -24px;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0 24px}.CommentCard_footer__z3-CY{border-top:1px solid var(--palette-background-b-4);display:flex;flex-direction:column;flex-shrink:0;padding:4px 12px 8px}.CommentCard_repliesSection__iE7QO{padding:8px 12px 12px}.CommentCard_compactBody__zM10O{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-height:0;overflow:hidden;padding:8px 12px}.CommentCard_compactTop__LpiQi{align-items:center;display:flex;flex-shrink:0;gap:8px}.CommentCard_compactTime__JzVQR{color:var(--palette-primary-text-7);font-size:12px;line-height:16px;margin-left:auto;white-space:nowrap}.CommentCard_compactFooter__rgB4D{border-top:1px solid var(--palette-background-b-4);flex-shrink:0;padding:4px 12px 8px}.CommentCard_header__T1SH8{align-items:center;display:flex;flex-shrink:0;gap:8px}.CommentCard_headerText__DRsQG{display:flex;flex:1 0 0;flex-direction:column;min-width:0;word-break:break-word}.CommentCard_nameRow__Or1c0{align-items:center;display:flex;gap:8px;width:100%}.CommentCard_nameRow__Or1c0 .CommentCard_timestamp__EbJCO{margin-left:auto}.CommentCard_subtitle__d-XRe{color:var(--palette-primary-main);font-size:12px;line-height:16px}.CommentCard_avatar__NA2ZA{flex-shrink:0}.CommentCard_name__9-e7A{color:var(--palette-primary-text-1);flex:0 1 auto;font-size:14px;line-height:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.CommentCard_timestamp__EbJCO{color:var(--palette-primary-text-7)}.CommentCard_chip__4NUrf,.CommentCard_timestamp__EbJCO{flex-shrink:0;font-size:12px;line-height:16px;white-space:nowrap}.CommentCard_chip__4NUrf{align-items:center;background:rgb(from var(--palette-primary-text-1) r g b/.04);border-radius:8px;color:var(--palette-primary-text-6);display:flex;height:24px;padding:6px 8px}.CommentCard_chipAccented__Xl8ek{border-left:2px solid transparent}.CommentCard_bodyRow__ZUufY{align-items:center;display:flex;gap:8px}.CommentCard_text__eAIZM{color:var(--palette-primary-text-1);flex:1 1 auto;font-size:12px;line-height:16px;min-width:0;white-space:pre-wrap;word-break:break-word}.CommentCard_text__eAIZM a,.CommentCard_text__eAIZM button{font:inherit;padding:0;vertical-align:baseline}.CommentCard_attachment__KktIn{--attachment-arrow-outset:12px;display:flex;flex-direction:column;gap:8px}.CommentCard_infoButton__gqcvK{align-items:center;color:var(--palette-primary-text-6);cursor:default;display:inline-flex}.CommentCard_infoButton__gqcvK:hover{color:var(--palette-primary-text-1)}.CommentCard_metadataTooltip__AL0xt .MuiTooltip-tooltip{max-width:none!important}.CommentCard_metadataRows__c-kqf{display:flex;flex-direction:column;gap:4px;padding:4px 0}.CommentCard_metadataRow__BqcII{align-items:baseline;display:flex;font-size:14px;gap:4px;line-height:20px;white-space:nowrap}.CommentCard_metadataLabel__WRWl7{color:var(--palette-primary-text-6)}.CommentCard_metadataValue__Xwf7S{color:var(--palette-primary-text-1)}.CommentCard_metadataUnit__Bxeps{color:var(--palette-primary-text-6);font-size:12px}.CommentCard_contextLine__Jyoui{align-items:center;color:var(--palette-primary-text-7);column-gap:16px;display:flex;flex-wrap:wrap;font-size:12px;line-height:16px;row-gap:4px}.CommentCard_contextItem__2Xmql{white-space:nowrap}.CommentCard_actionsRow__1Ftxn{align-items:center;display:flex;justify-content:space-between;width:100%}.CommentCard_actions__mUmsV{align-items:center;display:flex;gap:8px}.CommentCard_trailingActions__uGt-3{align-items:center;display:flex;gap:4px}.CommentCard_action__ZfyBP{align-items:center;display:flex;gap:2px}.CommentCard_count__stfpY{color:var(--palette-primary-text-6);font-size:12px;line-height:16px}.CommentCard_liked__zsBqe svg{color:var(--palette-primary-main)}.CommentCard_replies__nRRYo{display:flex;flex-direction:column;gap:8px}.CommentCard_reply__7-U7Q{display:flex;flex-direction:column;gap:4px}.CommentCard_replyHeader__sWnLA{align-items:center;display:flex;gap:8px}.CommentCard_replyNameRow__bs7h2{align-items:center;display:flex;flex:1 0 0;gap:12px;min-width:0}.CommentCard_replyName__C8tst{color:var(--palette-primary-text-1);font-size:14px;line-height:20px;white-space:nowrap}.CommentCard_replyTimestamp__YzuW1{color:var(--palette-primary-text-7);flex:1 0 0;font-size:12px;line-height:16px;min-width:0}.CommentCard_replyText__8JPKK{color:var(--palette-primary-text-1);font-size:12px;line-height:16px;padding-left:40px;white-space:pre-wrap;word-break:break-word}.CommentCard_replyText__8JPKK a,.CommentCard_replyText__8JPKK button{font:inherit;padding:0;vertical-align:baseline}");export{t as default};
 //# sourceMappingURL=CommentCard.scss.js.map

package/components/CommentInput/__tests__/useCommentInput.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useCommentInput.test.d.ts.map

package/components/CommentInput/__tests__/useCommentInput.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCommentInput.test.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentInput/__tests__/useCommentInput.test.js"],"names":[],"mappings":""}