{"version":3,"file":"DetailsPanel.mjs","sources":["../../../../src/lib/nextGenComponents/components/DetailsPanel/DetailsPanel.tsx"],"sourcesContent":["import { ComponentType, ReactNode, useMemo } from 'react'\n\nimport Close from '../../../images/close.svg?react'\nimport EllipsisTooltip from '@/components/EllipsisTooltip/EllipsisTooltip'\nimport { Button } from '@/components/ui/button'\nimport { DETAILS_FALLBACK_TITLE } from '@/constants'\n\ntype DetailsPanelProps<TData extends object> = {\n  row: TData\n  content: ComponentType<TData>\n  titleAccessorKey?: keyof TData\n  titleAccessorFn?: (row: TData) => string | ReactNode\n  onClose: () => void\n}\n\nconst DetailsPanel = <TData extends object>({\n  row,\n  content: Content,\n  titleAccessorKey,\n  titleAccessorFn,\n  onClose\n}: DetailsPanelProps<TData>) => {\n  const title = useMemo((): string | ReactNode => {\n    if (titleAccessorFn) {\n      return titleAccessorFn(row)\n    }\n    if (titleAccessorKey && row[titleAccessorKey]) {\n      return String(row[titleAccessorKey])\n    }\n    return DETAILS_FALLBACK_TITLE\n  }, [row, titleAccessorFn, titleAccessorKey])\n\n  return (\n    <aside\n      data-testid=\"details-panel\"\n      className=\"absolute rounded-r-lg flex flex-col inset-y-0 right-0 w-[calc(100%-250px)] border border-[#e6e6e6] bg-white z-30\"\n      style={{ boxShadow: '-4px 0 6px -4px rgba(0,0,0,0.15)' }}\n    >\n      <div\n        className=\"flex items-center justify-between gap-3 px-6 pr-10 py-4\"\n        data-testid=\"details-panel-title\"\n      >\n        {typeof title === 'string' ? (\n          <EllipsisTooltip className=\"min-w-0 text-[24px] font-extrabold leading-tight text-[#3a3650]\">\n            {title}\n          </EllipsisTooltip>\n        ) : (\n          title\n        )}\n        <Button\n          variant=\"rounded\"\n          size=\"icon\"\n          onClick={onClose}\n          className=\"absolute top-3.5 right-3\"\n          aria-label=\"Close\"\n          tooltip=\"Close\"\n          data-testid=\"details-panel-close-button\"\n        >\n          <Close className=\"w-6 h-6\" />\n        </Button>\n      </div>\n\n      <div className=\"overflow-auto h-full px-6 py-4\" data-testid=\"details-panel-content\">\n        <Content {...row} />\n      </div>\n    </aside>\n  )\n}\n\nexport default DetailsPanel\n"],"names":["DetailsPanel","row","Content","titleAccessorKey","titleAccessorFn","onClose","title","useMemo","DETAILS_FALLBACK_TITLE","jsxs","jsx","EllipsisTooltip","Button","Close"],"mappings":";;;;;;AAeA,MAAMA,IAAe,CAAuB;AAAA,EAC1C,KAAAC;AAAA,EACA,SAASC;AAAA,EACT,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,SAAAC;AACF,MAAgC;AAC9B,QAAMC,IAAQC,EAAQ,MAChBH,IACKA,EAAgBH,CAAG,IAExBE,KAAoBF,EAAIE,CAAgB,IACnC,OAAOF,EAAIE,CAAgB,CAAC,IAE9BK,GACN,CAACP,GAAKG,GAAiBD,CAAgB,CAAC;AAE3C,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,OAAO,EAAE,WAAW,mCAAA;AAAA,MAEpB,UAAA;AAAA,QAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEX,UAAA;AAAA,cAAA,OAAOH,KAAU,WAChB,gBAAAI,EAACC,KAAgB,WAAU,mEACxB,aACH,IAEAL;AAAA,cAEF,gBAAAI;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,SAASP;AAAA,kBACT,WAAU;AAAA,kBACV,cAAW;AAAA,kBACX,SAAQ;AAAA,kBACR,eAAY;AAAA,kBAEZ,UAAA,gBAAAK,EAACG,GAAA,EAAM,WAAU,UAAA,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC7B;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,gBAAAH,EAAC,OAAA,EAAI,WAAU,kCAAiC,eAAY,yBAC1D,UAAA,gBAAAA,EAACR,GAAA,EAAS,GAAGD,EAAA,CAAK,EAAA,CACpB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}