npm - @flipdish/portal-library - Versions diffs - 8.0.2 → 8.0.3 - Mend

@flipdish/portal-library 8.0.2 → 8.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/dist/components/molecules/FlipdishStaffContainer/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as t}from"react/jsx-runtime";import"react";import r from"@mui/material/Box";import{styled as e}from"@mui/material/styles";import m from"@mui/material/Typography";import a from"../../../icons/CustomerSupport/index.js";import o from"@mui/material/Grid2";const n=e(r)((({theme:i})=>({backgroundColor:i.palette.grey[200],borderRadius:"4px",padding:i.spacing(2)}))),l=e(o)((({theme:i})=>({alignItems:"center",display:"flex",marginBottom:i.spacing(1.5)}))),p=e(m)((({theme:i})=>({fontWeight:500,marginLeft:i.spacing(1)}))),s=({title:r,children:e,isFlipdishStaff:m})=>m?i(n,{"data-testid":"flipdish-staff-only-container",children:[i(l,{children:[t(a,{}),t(p,{children:r})]}),e]}):null;export{s as default};
+import{jsxs as i,jsx as r}from"react/jsx-runtime";import"react";import t from"@mui/material/Box";import{styled as e}from"@mui/material/styles";import m from"@mui/material/Typography";import a from"../../../icons/CustomerSupport/index.js";import o from"@mui/material/Grid2";const n=e(t)((({theme:i})=>({backgroundColor:i.palette.grey[200],borderRadius:"4px",padding:i.spacing(2)}))),l=e(o)((({theme:i})=>({alignItems:"center",display:"flex",marginBottom:i.spacing(1.5)}))),p=e(m)((({theme:i})=>({fontWeight:500,marginLeft:i.spacing(1)}))),s=({title:t,children:e,isFlipdishStaff:m})=>m?i(n,{"data-fd":"flipdish-staff-only-container",children:[i(l,{children:[r(a,{}),r(p,{children:t})]}),e]}):null;export{s as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/FlipdishStaffContainer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/FlipdishStaffContainer/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport SupportAgentOutlinedIcon from '../../../icons/CustomerSupport';\nimport Grid from '../../atoms/Grid';\n\nconst StyledContainer = styled(Box)(({ theme }) => ({\n backgroundColor: theme.palette.grey[200],\n borderRadius: '4px',\n padding: theme.spacing(2),\n}));\n\nconst TitleContainer = styled(Grid)(({ theme }) => ({\n alignItems: 'center',\n display: 'flex',\n marginBottom: theme.spacing(1.5),\n}));\n\nconst Title = styled(Typography)(({ theme }) => ({\n fontWeight: 500,\n marginLeft: theme.spacing(1),\n}));\n\ninterface Props {\n title: string;\n children: ReactNode;\n isFlipdishStaff: boolean;\n}\n\nconst FlipdishStaffContainer = ({ title, children, isFlipdishStaff }: Props): React.ReactNode => {\n return ~~(\n~~ isFlipdishStaff ? <StyledContainer data-~~testid~~=\"flipdish-staff-only-container\">\n <TitleContainer>\n <SupportAgentOutlinedIcon />\n <Title>{title}</Title>\n </TitleContainer>\n\n {children}\n </StyledContainer> : null~~\n )~~;\n};\n\nexport default FlipdishStaffContainer;\n"],"names":["StyledContainer","styled","Box","theme","backgroundColor","palette","grey","borderRadius","padding","spacing","TitleContainer","Grid","alignItems","display","marginBottom","Title","Typography","fontWeight","marginLeft","FlipdishStaffContainer","title","children","isFlipdishStaff","_jsxs","_jsx","SupportAgentOutlinedIcon"],"mappings":"iRASA,MAAMA,EAAkBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,~~CAC1CC~~,gBAAiBD,EAAME,QAAQC,KAAK,KACpCC,aAAc,MACdC,QAASL,EAAMM,QAAQ,~~OAGrBC~~,EAAiBT,EAAOU,EAAPV,EAAa,EAAGE,YAAO,~~CAC1CS~~,WAAY,SACZC,QAAS,OACTC,aAAcX,EAAMM,QAAQ,~~SAG1BM~~,EAAQd,EAAOe,EAAPf,EAAmB,EAAGE,YAAO,~~CACvCc~~,WAAY,IACZC,WAAYf,EAAMM,QAAQ,~~OASxBU~~,EAAyB,EAAGC,QAAOC,WAAUC,~~qBAE3CA~~,~~EAAkBC~~,EAACvB,EAAe,CAAA,~~cAAa~~,gCAA+BqB,SAAA,~~CAC1EE~~,EAACb,~~aACGc~~,EAACC,EAAwB,IACzBD,EAACT,EAAK,CAAAM,SAAED,~~OAGXC~~,~~KACgB~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/FlipdishStaffContainer/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport SupportAgentOutlinedIcon from '../../../icons/CustomerSupport';\nimport Grid from '../../atoms/Grid';\n\nconst StyledContainer = styled(Box)(({ theme }) => ({\n backgroundColor: theme.palette.grey[200],\n borderRadius: '4px',\n padding: theme.spacing(2),\n}));\n\nconst TitleContainer = styled(Grid)(({ theme }) => ({\n alignItems: 'center',\n display: 'flex',\n marginBottom: theme.spacing(1.5),\n}));\n\nconst Title = styled(Typography)(({ theme }) => ({\n fontWeight: 500,\n marginLeft: theme.spacing(1),\n}));\n\ninterface Props {\n title: string;\n children: ReactNode;\n isFlipdishStaff: boolean;\n}\n\nconst FlipdishStaffContainer = ({ title, children, isFlipdishStaff }: Props): React.ReactNode => {\n return isFlipdishStaff ? (\n <StyledContainer data-fd=\"flipdish-staff-only-container\">\n <TitleContainer>\n <SupportAgentOutlinedIcon />\n <Title>{title}</Title>\n </TitleContainer>\n\n {children}\n </StyledContainer>\n ) : null;\n};\n\nexport default FlipdishStaffContainer;\n"],"names":["StyledContainer","styled","Box","theme","backgroundColor","palette","grey","borderRadius","padding","spacing","TitleContainer","Grid","alignItems","display","marginBottom","Title","Typography","fontWeight","marginLeft","FlipdishStaffContainer","title","children","isFlipdishStaff","_jsxs","_jsx","SupportAgentOutlinedIcon"],"mappings":"iRASA,MAAMA,EAAkBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAC5CC,gBAAiBD,EAAME,QAAQC,KAAK,KACpCC,aAAc,MACdC,QAASL,EAAMM,QAAQ,OAGnBC,EAAiBT,EAAOU,EAAPV,EAAa,EAAGE,YAAO,CAC5CS,WAAY,SACZC,QAAS,OACTC,aAAcX,EAAMM,QAAQ,SAGxBM,EAAQd,EAAOe,EAAPf,EAAmB,EAAGE,YAAO,CACzCc,WAAY,IACZC,WAAYf,EAAMM,QAAQ,OAStBU,EAAyB,EAAGC,QAAOC,WAAUC,qBAC1CA,EACLC,EAACvB,EAAe,CAAA,UAAS,gCAA+BqB,SAAA,CACtDE,EAACb,aACCc,EAACC,EAAwB,IACzBD,EAACT,EAAK,CAAAM,SAAED,OAGTC,KAED"}

package/dist/components/molecules/GenericTable/GenericTableBody/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("react"),t=require("@mui/material/Skeleton"),r=require("@mui/material/styles"),l=require("@mui/material/TableBody"),a=require("@mui/material/TableCell"),o=require("@mui/material/TableRow"),n=require("../GenericTableBodyRow/index.cjs.js");const s=r.styled(a,{shouldForwardProp:e=>"align"!==e&&"titleCell"!==e&&"warning"!==e&&"sticky"!==e&&"isTitleRow"!==e})((({align:e,titleCell:i,warning:t,sticky:r,isTitleRow:l})=>({textAlign:e,fontWeight:i||l?"bold":"normal",backgroundColor:t?"#ffcccb":"inherit",position:r?"sticky":"static"}))),c=({colIdx:t,colName:r,hasWarning:l,hasTitle:a,meta:o,row:n,type:c})=>{const d=n[r],m=o[r]?.align??"left",u=o[r]?.hideWhenEmpty??!1?"":"-",w={align:m,warning:l??!1,titleCell:a??!1,sticky:"sticky"===c&&0===t,"data-testid":`col-${r}`,isTitleRow:n.isTitleRow??!1};if(i.isValidElement(d))return e.jsx(s,{...w,children:d});switch(o[r]?.columnType){case"String":default:return e.jsx(s,{...w,children:d??u});case"Custom":return e.jsx(s,{...w,children:d?o[r]?.customComponent?.(d,n):u})}};module.exports=({columns:i,data:r,loading:a,type:d,onRowClick:m,meta:u})=>e.jsx(l,{children:a?Array.from(Array(5)).map(((r,l)=>e.jsx(o,{"data-testid":"row-loader",children:Array.from(i).map(((i,r)=>e.jsx(s,{align:"left","data-testid":`col-${i}`,isTitleRow:!1,sticky:!1,titleCell:!1,warning:!1,children:e.jsx(t,{height:22,width:"90%"})},`col-${i}-loader-${r}`)))},`row-loader-${l}`))):r?.map(((t,r)=>e.jsx(n,{onRowClick:m,row:t,tableRowTestKey:r.toString(),children:Array.from(i).map(((i,r)=>e.jsx(c,{colIdx:r,colName:i,meta:u??{},row:t,type:d},`cell-${i}-${r}`)))},`row-${r}`)))});
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("@mui/material/Skeleton"),l=require("@mui/material/styles"),t=require("@mui/material/TableBody"),a=require("@mui/material/TableCell"),o=require("@mui/material/TableRow"),n=require("../GenericTableBodyRow/index.cjs.js");const s=l.styled(a,{shouldForwardProp:e=>"align"!==e&&"titleCell"!==e&&"warning"!==e&&"sticky"!==e&&"isTitleRow"!==e})((({align:e,titleCell:i,warning:r,sticky:l,isTitleRow:t})=>({textAlign:e,fontWeight:i||t?"bold":"normal",backgroundColor:r?"#ffcccb":"inherit",position:l?"sticky":"static"}))),c=({colIdx:r,colName:l,hasWarning:t,hasTitle:a,meta:o,row:n,type:c})=>{const d=n[l],m=o[l]?.align??"left",u=o[l]?.hideWhenEmpty??!1?"":"-",w={align:m,warning:t??!1,titleCell:a??!1,sticky:"sticky"===c&&0===r,"data-fd":`col-${l}`,isTitleRow:n.isTitleRow??!1};if(i.isValidElement(d))return e.jsx(s,{...w,children:d});switch(o[l]?.columnType){case"String":default:return e.jsx(s,{...w,children:d??u});case"Custom":return e.jsx(s,{...w,children:d?o[l]?.customComponent?.(d,n):u})}};module.exports=({columns:i,data:l,loading:a,type:d,onRowClick:m,meta:u})=>e.jsx(t,{children:a?Array.from(Array(5)).map(((l,t)=>e.jsx(o,{"data-fd":"row-loader",children:Array.from(i).map(((i,l)=>e.jsx(s,{align:"left","data-fd":`col-${i}`,isTitleRow:!1,sticky:!1,titleCell:!1,warning:!1,children:e.jsx(r,{height:22,width:"90%"})},`col-${i}-loader-${l}`)))},`row-loader-${t}`))):l?.map(((r,l)=>e.jsx(n,{onRowClick:m,row:r,tableRowTestKey:l.toString(),children:Array.from(i).map(((i,l)=>e.jsx(c,{colIdx:l,colName:i,meta:u??{},row:r,type:d},`cell-${i}-${l}`)))},`row-${l}`)))});
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/GenericTable/GenericTableBody/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/molecules/GenericTable/GenericTableBody/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport Skeleton from '@mui/material/Skeleton';\nimport { styled } from '@mui/material/styles';\nimport MuiTableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableRow from '@mui/material/TableRow';\n\nimport GenericTableBodyRow from '../GenericTableBodyRow';\n\nexport interface GenericTableColumns {\n columnName: string;\n columnTitle: string;\n columnType: 'Custom' \| 'String';\n align?: 'left' \| 'right';\n isVisible: boolean;\n ordinal: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n customComponent?: (data: any, row: any) => JSX.Element;\n tooltip?: string;\n hideWhenEmpty?: boolean;\n}\n\nconst StyledTableCell = styled(TableCell, {\n shouldForwardProp: (prop) =>\n prop !== 'align' &&\n prop !== 'titleCell' &&\n prop !== 'warning' &&\n prop !== 'sticky' &&\n prop !== 'isTitleRow',\n})<{ align: string; titleCell: boolean; warning: boolean; sticky: boolean; isTitleRow: boolean }>(\n ({ align, titleCell, warning, sticky, isTitleRow }) => ({\n textAlign: align,\n fontWeight: titleCell \|\| isTitleRow ? 'bold' : 'normal',\n backgroundColor: warning ? '#ffcccb' : 'inherit',\n position: sticky ? 'sticky' : 'static',\n }),\n);\n\nexport interface TableCellProps {\n colIdx: number;\n colName: string;\n hasWarning?: boolean;\n hasTitle?: boolean;\n meta: { [key: string]: GenericTableColumns };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row: Record<string, any>;\n type: 'normal' \| 'sticky';\n}\n\nconst RenderTableCell: React.FC<TableCellProps> = ({\n colIdx,\n colName,\n hasWarning,\n hasTitle,\n meta,\n row,\n type,\n}) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const prop = row[colName];\n const align = meta[colName]?.align ?? 'left';\n const hideWhenEmpty = meta[colName]?.hideWhenEmpty ?? false;\n const fallbackValue = hideWhenEmpty ? '' : '-';\n const tableCellProps = {\n align,\n warning: hasWarning ?? false,\n titleCell: hasTitle ?? false,\n sticky: type === 'sticky' && colIdx === 0,\n 'data-~~testid~~': `col-${colName}`,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n isTitleRow: row['isTitleRow'] ?? false,\n };\n\n // When prop is a React element render it as is\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n if (React.isValidElement(prop)) {\n return <StyledTableCell {...tableCellProps}>{prop}</StyledTableCell>;\n }\n\n switch (meta[colName]?.columnType) {\n case 'String':\n return <StyledTableCell {...tableCellProps}>{prop ?? fallbackValue}</StyledTableCell>;\n case 'Custom':\n return (\n <StyledTableCell {...tableCellProps}>\n {prop ? meta[colName]?.customComponent?.(prop, row) : fallbackValue}\n </StyledTableCell>\n );\n default:\n return <StyledTableCell {...tableCellProps}>{prop ?? fallbackValue}</StyledTableCell>;\n }\n};\n\ninterface TableBodyProps {\n columns: Set<string>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n data?: any[];\n loading?: boolean;\n meta?: { [key: string]: GenericTableColumns };\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n type: 'normal' \| 'sticky';\n}\n\nconst GenericTableBody: React.FC<TableBodyProps> = ({ columns, data, loading, type, onRowClick, meta }) => {\n const rowsPerPage = 5;\n return (\n <MuiTableBody>\n {loading\n ? Array.from(Array(rowsPerPage)).map((_, idx) => (\n // eslint-disable-next-line react/no-array-index-key\n <TableRow key={`row-loader-${idx}`} data-~~testid~~=\"row-loader\">\n {Array.from(columns).map((columnName, colIdx) => (\n <StyledTableCell\n // eslint-disable-next-line react/no-array-index-key\n key={`col-${columnName}-loader-${colIdx}`}\n align={'left'}\n data-~~testid~~={`col-${columnName}`}\n isTitleRow={false}\n sticky={false}\n titleCell={false}\n warning={false}\n >\n <Skeleton height={22} width=\"90%\" />\n </StyledTableCell>\n ))}\n </TableRow>\n ))\n : data?.map((row, rowIdx) => (\n <GenericTableBodyRow\n // eslint-disable-next-line react/no-array-index-key\n key={`row-${rowIdx}`}\n onRowClick={onRowClick}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n row={row}\n tableRowTestKey={rowIdx.toString()}\n >\n {Array.from(columns).map((colName, colIdx) => (\n <RenderTableCell\n // eslint-disable-next-line react/no-array-index-key\n key={`cell-${colName}-${colIdx}`}\n colIdx={colIdx}\n colName={colName}\n meta={meta ?? {}}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n row={row}\n type={type}\n />\n ))}\n </GenericTableBodyRow>\n ))}\n </MuiTableBody>\n );\n};\n\nexport default GenericTableBody;\n"],"names":["StyledTableCell","styled","TableCell","shouldForwardProp","prop","align","titleCell","warning","sticky","isTitleRow","textAlign","fontWeight","backgroundColor","position","RenderTableCell","colIdx","colName","hasWarning","hasTitle","meta","row","type","fallbackValue","hideWhenEmpty","tableCellProps","React","isValidElement","_jsx","children","columnType","customComponent","columns","data","loading","onRowClick","MuiTableBody","Array","from","map","_","idx","TableRow","columnName","Skeleton","height","width","rowIdx","GenericTableBodyRow","tableRowTestKey","toString"],"mappings":"wSAuBA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAW,CACxCC,kBAAoBC,GACT,UAATA,GACS,cAATA,GACS,YAATA,GACS,WAATA,GACS,eAATA,GANoBH,EAQtB,EAAGI,QAAOC,YAAWC,UAASC,SAAQC,iBAAY,CAChDC,UAAWL,EACXM,WAAYL,GAAaG,EAAa,OAAS,SAC/CG,gBAAiBL,EAAU,UAAY,UACvCM,SAAUL,EAAS,SAAW,aAe5BM,EAA4C,EAChDC,SACAC,UACAC,aACAC,WACAC,OACAC,MACAC,WAGA,MAAMjB,EAAOgB,EAAIJ,GACXX,EAAQc,EAAKH,IAAUX,OAAS,OAEhCiB,EADgBH,EAAKH,IAAUO,gBAAiB,EAChB,GAAK,IACrCC,EAAiB,CACrBnB,QACAE,QAASU,IAAc,EACvBX,UAAWY,IAAY,EACvBV,OAAiB,WAATa,GAAgC,IAAXN,EAC7B,~~cAAe~~,OAAOC,~~IAEtBP~~,WAAYW,EAAgB,aAAK,GAKnC,GAAIK,EAAMC,eAAetB,GACvB,OAAOuB,EAAAA,IAAC3B,EAAe,IAAKwB,EAAcI,SAAGxB,IAG/C,OAAQe,EAAKH,IAAUa,YACrB,IAAK,SAQL,QACE,OAAOF,EAAAA,IAAC3B,EAAe,IAAKwB,WAAiBpB,GAAQkB,IAPvD,IAAK,SACH,OACEK,EAAAA,IAAC3B,EAAe,IAAKwB,EAAcI,SAChCxB,EAAOe,EAAKH,IAAUc,kBAAkB1B,EAAMgB,GAAOE,qBAmBb,EAAGS,UAASC,OAAMC,UAASZ,OAAMa,aAAYf,UAG5FQ,EAAAA,IAACQ,EAAY,CAAAP,SACVK,EACGG,MAAMC,KAAKD,MAJC,IAImBE,KAAI,CAACC,EAAGC,IAErCb,EAAAA,IAACc,~~iBAA+C~~,aAAYb,~~SACzDQ~~,MAAMC,KAAKN,GAASO,KAAI,CAACI,EAAY3B,IACpCY,EAAAA,IAAC3B,GAGCK,MAAO,OAAM,~~cACA~~,OAAOqC,~~IACpBjC~~,YAAY,EACZD,QAAQ,EACRF,WAAW,EACXC,SAAS,EAAKqB,SAEdD,MAACgB,EAAQ,CAACC,OAAQ,GAAIC,MAAM,SARvB,OAAOH,YAAqB3B,QAJxB,cAAcyB,OAiB/BR,GAAMM,KAAI,CAAClB,EAAK0B,IACdnB,EAAAA,IAACoB,EAGC,CAAAb,WAAYA,EAEZd,IAAKA,EACL4B,gBAAiBF,EAAOG,WAAUrB,SAEjCQ,MAAMC,KAAKN,GAASO,KAAI,CAACtB,EAASD,IACjCY,EAAAA,IAACb,GAGCC,OAAQA,EACRC,QAASA,EACTG,KAAMA,GAAQ,CAAA,EAEdC,IAAKA,EACLC,KAAMA,GAND,QAAQL,KAAWD,QATvB,OAAO+B"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/molecules/GenericTable/GenericTableBody/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport Skeleton from '@mui/material/Skeleton';\nimport { styled } from '@mui/material/styles';\nimport MuiTableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableRow from '@mui/material/TableRow';\n\nimport GenericTableBodyRow from '../GenericTableBodyRow';\n\nexport interface GenericTableColumns {\n columnName: string;\n columnTitle: string;\n columnType: 'Custom' \| 'String';\n align?: 'left' \| 'right';\n isVisible: boolean;\n ordinal: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n customComponent?: (data: any, row: any) => JSX.Element;\n tooltip?: string;\n hideWhenEmpty?: boolean;\n}\n\nconst StyledTableCell = styled(TableCell, {\n shouldForwardProp: (prop) =>\n prop !== 'align' &&\n prop !== 'titleCell' &&\n prop !== 'warning' &&\n prop !== 'sticky' &&\n prop !== 'isTitleRow',\n})<{ align: string; titleCell: boolean; warning: boolean; sticky: boolean; isTitleRow: boolean }>(\n ({ align, titleCell, warning, sticky, isTitleRow }) => ({\n textAlign: align,\n fontWeight: titleCell \|\| isTitleRow ? 'bold' : 'normal',\n backgroundColor: warning ? '#ffcccb' : 'inherit',\n position: sticky ? 'sticky' : 'static',\n }),\n);\n\nexport interface TableCellProps {\n colIdx: number;\n colName: string;\n hasWarning?: boolean;\n hasTitle?: boolean;\n meta: { [key: string]: GenericTableColumns };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row: Record<string, any>;\n type: 'normal' \| 'sticky';\n}\n\nconst RenderTableCell: React.FC<TableCellProps> = ({\n colIdx,\n colName,\n hasWarning,\n hasTitle,\n meta,\n row,\n type,\n}) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const prop = row[colName];\n const align = meta[colName]?.align ?? 'left';\n const hideWhenEmpty = meta[colName]?.hideWhenEmpty ?? false;\n const fallbackValue = hideWhenEmpty ? '' : '-';\n const tableCellProps = {\n align,\n warning: hasWarning ?? false,\n titleCell: hasTitle ?? false,\n sticky: type === 'sticky' && colIdx === 0,\n 'data-fd': `col-${colName}`,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n isTitleRow: row['isTitleRow'] ?? false,\n };\n\n // When prop is a React element render it as is\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n if (React.isValidElement(prop)) {\n return <StyledTableCell {...tableCellProps}>{prop}</StyledTableCell>;\n }\n\n switch (meta[colName]?.columnType) {\n case 'String':\n return <StyledTableCell {...tableCellProps}>{prop ?? fallbackValue}</StyledTableCell>;\n case 'Custom':\n return (\n <StyledTableCell {...tableCellProps}>\n {prop ? meta[colName]?.customComponent?.(prop, row) : fallbackValue}\n </StyledTableCell>\n );\n default:\n return <StyledTableCell {...tableCellProps}>{prop ?? fallbackValue}</StyledTableCell>;\n }\n};\n\ninterface TableBodyProps {\n columns: Set<string>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n data?: any[];\n loading?: boolean;\n meta?: { [key: string]: GenericTableColumns };\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n type: 'normal' \| 'sticky';\n}\n\nconst GenericTableBody: React.FC<TableBodyProps> = ({ columns, data, loading, type, onRowClick, meta }) => {\n const rowsPerPage = 5;\n return (\n <MuiTableBody>\n {loading\n ? Array.from(Array(rowsPerPage)).map((_, idx) => (\n // eslint-disable-next-line react/no-array-index-key\n <TableRow key={`row-loader-${idx}`} data-fd=\"row-loader\">\n {Array.from(columns).map((columnName, colIdx) => (\n <StyledTableCell\n // eslint-disable-next-line react/no-array-index-key\n key={`col-${columnName}-loader-${colIdx}`}\n align={'left'}\n data-fd={`col-${columnName}`}\n isTitleRow={false}\n sticky={false}\n titleCell={false}\n warning={false}\n >\n <Skeleton height={22} width=\"90%\" />\n </StyledTableCell>\n ))}\n </TableRow>\n ))\n : data?.map((row, rowIdx) => (\n <GenericTableBodyRow\n // eslint-disable-next-line react/no-array-index-key\n key={`row-${rowIdx}`}\n onRowClick={onRowClick}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n row={row}\n tableRowTestKey={rowIdx.toString()}\n >\n {Array.from(columns).map((colName, colIdx) => (\n <RenderTableCell\n // eslint-disable-next-line react/no-array-index-key\n key={`cell-${colName}-${colIdx}`}\n colIdx={colIdx}\n colName={colName}\n meta={meta ?? {}}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n row={row}\n type={type}\n />\n ))}\n </GenericTableBodyRow>\n ))}\n </MuiTableBody>\n );\n};\n\nexport default GenericTableBody;\n"],"names":["StyledTableCell","styled","TableCell","shouldForwardProp","prop","align","titleCell","warning","sticky","isTitleRow","textAlign","fontWeight","backgroundColor","position","RenderTableCell","colIdx","colName","hasWarning","hasTitle","meta","row","type","fallbackValue","hideWhenEmpty","tableCellProps","React","isValidElement","_jsx","children","columnType","customComponent","columns","data","loading","onRowClick","MuiTableBody","Array","from","map","_","idx","TableRow","columnName","Skeleton","height","width","rowIdx","GenericTableBodyRow","tableRowTestKey","toString"],"mappings":"wSAuBA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAW,CACxCC,kBAAoBC,GACT,UAATA,GACS,cAATA,GACS,YAATA,GACS,WAATA,GACS,eAATA,GANoBH,EAQtB,EAAGI,QAAOC,YAAWC,UAASC,SAAQC,iBAAY,CAChDC,UAAWL,EACXM,WAAYL,GAAaG,EAAa,OAAS,SAC/CG,gBAAiBL,EAAU,UAAY,UACvCM,SAAUL,EAAS,SAAW,aAe5BM,EAA4C,EAChDC,SACAC,UACAC,aACAC,WACAC,OACAC,MACAC,WAGA,MAAMjB,EAAOgB,EAAIJ,GACXX,EAAQc,EAAKH,IAAUX,OAAS,OAEhCiB,EADgBH,EAAKH,IAAUO,gBAAiB,EAChB,GAAK,IACrCC,EAAiB,CACrBnB,QACAE,QAASU,IAAc,EACvBX,UAAWY,IAAY,EACvBV,OAAiB,WAATa,GAAgC,IAAXN,EAC7B,UAAW,OAAOC,IAElBP,WAAYW,EAAgB,aAAK,GAKnC,GAAIK,EAAMC,eAAetB,GACvB,OAAOuB,EAAAA,IAAC3B,EAAe,IAAKwB,EAAcI,SAAGxB,IAG/C,OAAQe,EAAKH,IAAUa,YACrB,IAAK,SAQL,QACE,OAAOF,EAAAA,IAAC3B,EAAe,IAAKwB,WAAiBpB,GAAQkB,IAPvD,IAAK,SACH,OACEK,EAAAA,IAAC3B,EAAe,IAAKwB,EAAcI,SAChCxB,EAAOe,EAAKH,IAAUc,kBAAkB1B,EAAMgB,GAAOE,qBAmBb,EAAGS,UAASC,OAAMC,UAASZ,OAAMa,aAAYf,UAG5FQ,EAAAA,IAACQ,EAAY,CAAAP,SACVK,EACGG,MAAMC,KAAKD,MAJC,IAImBE,KAAI,CAACC,EAAGC,IAErCb,EAAAA,IAACc,aAA2C,aAAYb,SACrDQ,MAAMC,KAAKN,GAASO,KAAI,CAACI,EAAY3B,IACpCY,EAAAA,IAAC3B,GAGCK,MAAO,OAAM,UACJ,OAAOqC,IAChBjC,YAAY,EACZD,QAAQ,EACRF,WAAW,EACXC,SAAS,EAAKqB,SAEdD,MAACgB,EAAQ,CAACC,OAAQ,GAAIC,MAAM,SARvB,OAAOH,YAAqB3B,QAJxB,cAAcyB,OAiB/BR,GAAMM,KAAI,CAAClB,EAAK0B,IACdnB,EAAAA,IAACoB,EAGC,CAAAb,WAAYA,EAEZd,IAAKA,EACL4B,gBAAiBF,EAAOG,WAAUrB,SAEjCQ,MAAMC,KAAKN,GAASO,KAAI,CAACtB,EAASD,IACjCY,EAAAA,IAACb,GAGCC,OAAQA,EACRC,QAASA,EACTG,KAAMA,GAAQ,CAAA,EAEdC,IAAKA,EACLC,KAAMA,GAND,QAAQL,KAAWD,QATvB,OAAO+B"}

package/dist/components/molecules/GenericTable/GenericTableBody/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import i from"react";import e from"@mui/material/Skeleton";import{styled as r}from"@mui/material/styles";import l from"@mui/material/TableBody";import o from"@mui/material/TableCell";import a from"@mui/material/TableRow";import n from"../GenericTableBodyRow/index.js";const m=r(o,{shouldForwardProp:t=>"align"!==t&&"titleCell"!==t&&"warning"!==t&&"sticky"!==t&&"isTitleRow"!==t})((({align:t,titleCell:i,warning:e,sticky:r,isTitleRow:l})=>({textAlign:t,fontWeight:i||l?"bold":"normal",backgroundColor:e?"#ffcccb":"inherit",position:r?"sticky":"static"}))),c=({colIdx:e,colName:r,hasWarning:l,hasTitle:o,meta:a,row:n,type:c})=>{const s=n[r],d=a[r]?.align??"left",w=a[r]?.hideWhenEmpty??!1?"":"-",p={align:d,warning:l??!1,titleCell:o??!1,sticky:"sticky"===c&&0===e,"data-testid":`col-${r}`,isTitleRow:n.isTitleRow??!1};if(i.isValidElement(s))return t(m,{...p,children:s});switch(a[r]?.columnType){case"String":default:return t(m,{...p,children:s??w});case"Custom":return t(m,{...p,children:s?a[r]?.customComponent?.(s,n):w})}},s=({columns:i,data:r,loading:o,type:s,onRowClick:d,meta:w})=>t(l,{children:o?Array.from(Array(5)).map(((r,l)=>t(a,{"data-testid":"row-loader",children:Array.from(i).map(((i,r)=>t(m,{align:"left","data-testid":`col-${i}`,isTitleRow:!1,sticky:!1,titleCell:!1,warning:!1,children:t(e,{height:22,width:"90%"})},`col-${i}-loader-${r}`)))},`row-loader-${l}`))):r?.map(((e,r)=>t(n,{onRowClick:d,row:e,tableRowTestKey:r.toString(),children:Array.from(i).map(((i,r)=>t(c,{colIdx:r,colName:i,meta:w??{},row:e,type:s},`cell-${i}-${r}`)))},`row-${r}`)))});export{s as default};
+import{jsx as t}from"react/jsx-runtime";import i from"react";import e from"@mui/material/Skeleton";import{styled as r}from"@mui/material/styles";import l from"@mui/material/TableBody";import o from"@mui/material/TableCell";import a from"@mui/material/TableRow";import n from"../GenericTableBodyRow/index.js";const m=r(o,{shouldForwardProp:t=>"align"!==t&&"titleCell"!==t&&"warning"!==t&&"sticky"!==t&&"isTitleRow"!==t})((({align:t,titleCell:i,warning:e,sticky:r,isTitleRow:l})=>({textAlign:t,fontWeight:i||l?"bold":"normal",backgroundColor:e?"#ffcccb":"inherit",position:r?"sticky":"static"}))),c=({colIdx:e,colName:r,hasWarning:l,hasTitle:o,meta:a,row:n,type:c})=>{const d=n[r],s=a[r]?.align??"left",w=a[r]?.hideWhenEmpty??!1?"":"-",f={align:s,warning:l??!1,titleCell:o??!1,sticky:"sticky"===c&&0===e,"data-fd":`col-${r}`,isTitleRow:n.isTitleRow??!1};if(i.isValidElement(d))return t(m,{...f,children:d});switch(a[r]?.columnType){case"String":default:return t(m,{...f,children:d??w});case"Custom":return t(m,{...f,children:d?a[r]?.customComponent?.(d,n):w})}},d=({columns:i,data:r,loading:o,type:d,onRowClick:s,meta:w})=>t(l,{children:o?Array.from(Array(5)).map(((r,l)=>t(a,{"data-fd":"row-loader",children:Array.from(i).map(((i,r)=>t(m,{align:"left","data-fd":`col-${i}`,isTitleRow:!1,sticky:!1,titleCell:!1,warning:!1,children:t(e,{height:22,width:"90%"})},`col-${i}-loader-${r}`)))},`row-loader-${l}`))):r?.map(((e,r)=>t(n,{onRowClick:s,row:e,tableRowTestKey:r.toString(),children:Array.from(i).map(((i,r)=>t(c,{colIdx:r,colName:i,meta:w??{},row:e,type:d},`cell-${i}-${r}`)))},`row-${r}`)))});export{d as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/GenericTable/GenericTableBody/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/GenericTable/GenericTableBody/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport Skeleton from '@mui/material/Skeleton';\nimport { styled } from '@mui/material/styles';\nimport MuiTableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableRow from '@mui/material/TableRow';\n\nimport GenericTableBodyRow from '../GenericTableBodyRow';\n\nexport interface GenericTableColumns {\n columnName: string;\n columnTitle: string;\n columnType: 'Custom' \| 'String';\n align?: 'left' \| 'right';\n isVisible: boolean;\n ordinal: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n customComponent?: (data: any, row: any) => JSX.Element;\n tooltip?: string;\n hideWhenEmpty?: boolean;\n}\n\nconst StyledTableCell = styled(TableCell, {\n shouldForwardProp: (prop) =>\n prop !== 'align' &&\n prop !== 'titleCell' &&\n prop !== 'warning' &&\n prop !== 'sticky' &&\n prop !== 'isTitleRow',\n})<{ align: string; titleCell: boolean; warning: boolean; sticky: boolean; isTitleRow: boolean }>(\n ({ align, titleCell, warning, sticky, isTitleRow }) => ({\n textAlign: align,\n fontWeight: titleCell \|\| isTitleRow ? 'bold' : 'normal',\n backgroundColor: warning ? '#ffcccb' : 'inherit',\n position: sticky ? 'sticky' : 'static',\n }),\n);\n\nexport interface TableCellProps {\n colIdx: number;\n colName: string;\n hasWarning?: boolean;\n hasTitle?: boolean;\n meta: { [key: string]: GenericTableColumns };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row: Record<string, any>;\n type: 'normal' \| 'sticky';\n}\n\nconst RenderTableCell: React.FC<TableCellProps> = ({\n colIdx,\n colName,\n hasWarning,\n hasTitle,\n meta,\n row,\n type,\n}) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const prop = row[colName];\n const align = meta[colName]?.align ?? 'left';\n const hideWhenEmpty = meta[colName]?.hideWhenEmpty ?? false;\n const fallbackValue = hideWhenEmpty ? '' : '-';\n const tableCellProps = {\n align,\n warning: hasWarning ?? false,\n titleCell: hasTitle ?? false,\n sticky: type === 'sticky' && colIdx === 0,\n 'data-~~testid~~': `col-${colName}`,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n isTitleRow: row['isTitleRow'] ?? false,\n };\n\n // When prop is a React element render it as is\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n if (React.isValidElement(prop)) {\n return <StyledTableCell {...tableCellProps}>{prop}</StyledTableCell>;\n }\n\n switch (meta[colName]?.columnType) {\n case 'String':\n return <StyledTableCell {...tableCellProps}>{prop ?? fallbackValue}</StyledTableCell>;\n case 'Custom':\n return (\n <StyledTableCell {...tableCellProps}>\n {prop ? meta[colName]?.customComponent?.(prop, row) : fallbackValue}\n </StyledTableCell>\n );\n default:\n return <StyledTableCell {...tableCellProps}>{prop ?? fallbackValue}</StyledTableCell>;\n }\n};\n\ninterface TableBodyProps {\n columns: Set<string>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n data?: any[];\n loading?: boolean;\n meta?: { [key: string]: GenericTableColumns };\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n type: 'normal' \| 'sticky';\n}\n\nconst GenericTableBody: React.FC<TableBodyProps> = ({ columns, data, loading, type, onRowClick, meta }) => {\n const rowsPerPage = 5;\n return (\n <MuiTableBody>\n {loading\n ? Array.from(Array(rowsPerPage)).map((_, idx) => (\n // eslint-disable-next-line react/no-array-index-key\n <TableRow key={`row-loader-${idx}`} data-~~testid~~=\"row-loader\">\n {Array.from(columns).map((columnName, colIdx) => (\n <StyledTableCell\n // eslint-disable-next-line react/no-array-index-key\n key={`col-${columnName}-loader-${colIdx}`}\n align={'left'}\n data-~~testid~~={`col-${columnName}`}\n isTitleRow={false}\n sticky={false}\n titleCell={false}\n warning={false}\n >\n <Skeleton height={22} width=\"90%\" />\n </StyledTableCell>\n ))}\n </TableRow>\n ))\n : data?.map((row, rowIdx) => (\n <GenericTableBodyRow\n // eslint-disable-next-line react/no-array-index-key\n key={`row-${rowIdx}`}\n onRowClick={onRowClick}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n row={row}\n tableRowTestKey={rowIdx.toString()}\n >\n {Array.from(columns).map((colName, colIdx) => (\n <RenderTableCell\n // eslint-disable-next-line react/no-array-index-key\n key={`cell-${colName}-${colIdx}`}\n colIdx={colIdx}\n colName={colName}\n meta={meta ?? {}}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n row={row}\n type={type}\n />\n ))}\n </GenericTableBodyRow>\n ))}\n </MuiTableBody>\n );\n};\n\nexport default GenericTableBody;\n"],"names":["StyledTableCell","styled","TableCell","shouldForwardProp","prop","align","titleCell","warning","sticky","isTitleRow","textAlign","fontWeight","backgroundColor","position","RenderTableCell","colIdx","colName","hasWarning","hasTitle","meta","row","type","fallbackValue","hideWhenEmpty","tableCellProps","React","isValidElement","_jsx","children","columnType","customComponent","GenericTableBody","columns","data","loading","onRowClick","MuiTableBody","Array","from","map","_","idx","TableRow","columnName","Skeleton","height","width","rowIdx","GenericTableBodyRow","tableRowTestKey","toString"],"mappings":"oTAuBA,MAAMA,EAAkBC,EAAOC,EAAW,CACxCC,kBAAoBC,GACT,UAATA,GACS,cAATA,GACS,YAATA,GACS,WAATA,GACS,eAATA,GANoBH,EAQtB,EAAGI,QAAOC,YAAWC,UAASC,SAAQC,iBAAY,CAChDC,UAAWL,EACXM,WAAYL,GAAaG,EAAa,OAAS,SAC/CG,gBAAiBL,EAAU,UAAY,UACvCM,SAAUL,EAAS,SAAW,aAe5BM,EAA4C,EAChDC,SACAC,UACAC,aACAC,WACAC,OACAC,MACAC,WAGA,MAAMjB,EAAOgB,EAAIJ,GACXX,EAAQc,EAAKH,IAAUX,OAAS,OAEhCiB,EADgBH,EAAKH,IAAUO,gBAAiB,EAChB,GAAK,IACrCC,EAAiB,CACrBnB,QACAE,QAASU,IAAc,EACvBX,UAAWY,IAAY,EACvBV,OAAiB,WAATa,GAAgC,IAAXN,EAC7B,~~cAAe~~,OAAOC,~~IAEtBP~~,WAAYW,EAAgB,aAAK,GAKnC,GAAIK,EAAMC,eAAetB,GACvB,OAAOuB,EAAC3B,EAAe,IAAKwB,EAAcI,SAAGxB,IAG/C,OAAQe,EAAKH,IAAUa,YACrB,IAAK,SAQL,QACE,OAAOF,EAAC3B,EAAe,IAAKwB,WAAiBpB,GAAQkB,IAPvD,IAAK,SACH,OACEK,EAAC3B,EAAe,IAAKwB,EAAcI,SAChCxB,EAAOe,EAAKH,IAAUc,kBAAkB1B,EAAMgB,GAAOE,MAmB1DS,EAA6C,EAAGC,UAASC,OAAMC,UAASb,OAAMc,aAAYhB,UAG5FQ,EAACS,EAAY,CAAAR,SACVM,EACGG,MAAMC,KAAKD,MAJC,IAImBE,KAAI,CAACC,EAAGC,IAErCd,EAACe,~~iBAA+C~~,aAAYd,~~SACzDS~~,MAAMC,KAAKN,GAASO,KAAI,CAACI,EAAY5B,IACpCY,EAAC3B,GAGCK,MAAO,OAAM,~~cACA~~,OAAOsC,~~IACpBlC~~,YAAY,EACZD,QAAQ,EACRF,WAAW,EACXC,SAAS,EAAKqB,SAEdD,EAACiB,EAAQ,CAACC,OAAQ,GAAIC,MAAM,SARvB,OAAOH,YAAqB5B,QAJxB,cAAc0B,OAiB/BR,GAAMM,KAAI,CAACnB,EAAK2B,IACdpB,EAACqB,EAGC,CAAAb,WAAYA,EAEZf,IAAKA,EACL6B,gBAAiBF,EAAOG,WAAUtB,SAEjCS,MAAMC,KAAKN,GAASO,KAAI,CAACvB,EAASD,IACjCY,EAACb,GAGCC,OAAQA,EACRC,QAASA,EACTG,KAAMA,GAAQ,CAAA,EAEdC,IAAKA,EACLC,KAAMA,GAND,QAAQL,KAAWD,QATvB,OAAOgC"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/GenericTable/GenericTableBody/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport Skeleton from '@mui/material/Skeleton';\nimport { styled } from '@mui/material/styles';\nimport MuiTableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableRow from '@mui/material/TableRow';\n\nimport GenericTableBodyRow from '../GenericTableBodyRow';\n\nexport interface GenericTableColumns {\n columnName: string;\n columnTitle: string;\n columnType: 'Custom' \| 'String';\n align?: 'left' \| 'right';\n isVisible: boolean;\n ordinal: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n customComponent?: (data: any, row: any) => JSX.Element;\n tooltip?: string;\n hideWhenEmpty?: boolean;\n}\n\nconst StyledTableCell = styled(TableCell, {\n shouldForwardProp: (prop) =>\n prop !== 'align' &&\n prop !== 'titleCell' &&\n prop !== 'warning' &&\n prop !== 'sticky' &&\n prop !== 'isTitleRow',\n})<{ align: string; titleCell: boolean; warning: boolean; sticky: boolean; isTitleRow: boolean }>(\n ({ align, titleCell, warning, sticky, isTitleRow }) => ({\n textAlign: align,\n fontWeight: titleCell \|\| isTitleRow ? 'bold' : 'normal',\n backgroundColor: warning ? '#ffcccb' : 'inherit',\n position: sticky ? 'sticky' : 'static',\n }),\n);\n\nexport interface TableCellProps {\n colIdx: number;\n colName: string;\n hasWarning?: boolean;\n hasTitle?: boolean;\n meta: { [key: string]: GenericTableColumns };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row: Record<string, any>;\n type: 'normal' \| 'sticky';\n}\n\nconst RenderTableCell: React.FC<TableCellProps> = ({\n colIdx,\n colName,\n hasWarning,\n hasTitle,\n meta,\n row,\n type,\n}) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const prop = row[colName];\n const align = meta[colName]?.align ?? 'left';\n const hideWhenEmpty = meta[colName]?.hideWhenEmpty ?? false;\n const fallbackValue = hideWhenEmpty ? '' : '-';\n const tableCellProps = {\n align,\n warning: hasWarning ?? false,\n titleCell: hasTitle ?? false,\n sticky: type === 'sticky' && colIdx === 0,\n 'data-fd': `col-${colName}`,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n isTitleRow: row['isTitleRow'] ?? false,\n };\n\n // When prop is a React element render it as is\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n if (React.isValidElement(prop)) {\n return <StyledTableCell {...tableCellProps}>{prop}</StyledTableCell>;\n }\n\n switch (meta[colName]?.columnType) {\n case 'String':\n return <StyledTableCell {...tableCellProps}>{prop ?? fallbackValue}</StyledTableCell>;\n case 'Custom':\n return (\n <StyledTableCell {...tableCellProps}>\n {prop ? meta[colName]?.customComponent?.(prop, row) : fallbackValue}\n </StyledTableCell>\n );\n default:\n return <StyledTableCell {...tableCellProps}>{prop ?? fallbackValue}</StyledTableCell>;\n }\n};\n\ninterface TableBodyProps {\n columns: Set<string>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n data?: any[];\n loading?: boolean;\n meta?: { [key: string]: GenericTableColumns };\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n type: 'normal' \| 'sticky';\n}\n\nconst GenericTableBody: React.FC<TableBodyProps> = ({ columns, data, loading, type, onRowClick, meta }) => {\n const rowsPerPage = 5;\n return (\n <MuiTableBody>\n {loading\n ? Array.from(Array(rowsPerPage)).map((_, idx) => (\n // eslint-disable-next-line react/no-array-index-key\n <TableRow key={`row-loader-${idx}`} data-fd=\"row-loader\">\n {Array.from(columns).map((columnName, colIdx) => (\n <StyledTableCell\n // eslint-disable-next-line react/no-array-index-key\n key={`col-${columnName}-loader-${colIdx}`}\n align={'left'}\n data-fd={`col-${columnName}`}\n isTitleRow={false}\n sticky={false}\n titleCell={false}\n warning={false}\n >\n <Skeleton height={22} width=\"90%\" />\n </StyledTableCell>\n ))}\n </TableRow>\n ))\n : data?.map((row, rowIdx) => (\n <GenericTableBodyRow\n // eslint-disable-next-line react/no-array-index-key\n key={`row-${rowIdx}`}\n onRowClick={onRowClick}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n row={row}\n tableRowTestKey={rowIdx.toString()}\n >\n {Array.from(columns).map((colName, colIdx) => (\n <RenderTableCell\n // eslint-disable-next-line react/no-array-index-key\n key={`cell-${colName}-${colIdx}`}\n colIdx={colIdx}\n colName={colName}\n meta={meta ?? {}}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n row={row}\n type={type}\n />\n ))}\n </GenericTableBodyRow>\n ))}\n </MuiTableBody>\n );\n};\n\nexport default GenericTableBody;\n"],"names":["StyledTableCell","styled","TableCell","shouldForwardProp","prop","align","titleCell","warning","sticky","isTitleRow","textAlign","fontWeight","backgroundColor","position","RenderTableCell","colIdx","colName","hasWarning","hasTitle","meta","row","type","fallbackValue","hideWhenEmpty","tableCellProps","React","isValidElement","_jsx","children","columnType","customComponent","GenericTableBody","columns","data","loading","onRowClick","MuiTableBody","Array","from","map","_","idx","TableRow","columnName","Skeleton","height","width","rowIdx","GenericTableBodyRow","tableRowTestKey","toString"],"mappings":"oTAuBA,MAAMA,EAAkBC,EAAOC,EAAW,CACxCC,kBAAoBC,GACT,UAATA,GACS,cAATA,GACS,YAATA,GACS,WAATA,GACS,eAATA,GANoBH,EAQtB,EAAGI,QAAOC,YAAWC,UAASC,SAAQC,iBAAY,CAChDC,UAAWL,EACXM,WAAYL,GAAaG,EAAa,OAAS,SAC/CG,gBAAiBL,EAAU,UAAY,UACvCM,SAAUL,EAAS,SAAW,aAe5BM,EAA4C,EAChDC,SACAC,UACAC,aACAC,WACAC,OACAC,MACAC,WAGA,MAAMjB,EAAOgB,EAAIJ,GACXX,EAAQc,EAAKH,IAAUX,OAAS,OAEhCiB,EADgBH,EAAKH,IAAUO,gBAAiB,EAChB,GAAK,IACrCC,EAAiB,CACrBnB,QACAE,QAASU,IAAc,EACvBX,UAAWY,IAAY,EACvBV,OAAiB,WAATa,GAAgC,IAAXN,EAC7B,UAAW,OAAOC,IAElBP,WAAYW,EAAgB,aAAK,GAKnC,GAAIK,EAAMC,eAAetB,GACvB,OAAOuB,EAAC3B,EAAe,IAAKwB,EAAcI,SAAGxB,IAG/C,OAAQe,EAAKH,IAAUa,YACrB,IAAK,SAQL,QACE,OAAOF,EAAC3B,EAAe,IAAKwB,WAAiBpB,GAAQkB,IAPvD,IAAK,SACH,OACEK,EAAC3B,EAAe,IAAKwB,EAAcI,SAChCxB,EAAOe,EAAKH,IAAUc,kBAAkB1B,EAAMgB,GAAOE,MAmB1DS,EAA6C,EAAGC,UAASC,OAAMC,UAASb,OAAMc,aAAYhB,UAG5FQ,EAACS,EAAY,CAAAR,SACVM,EACGG,MAAMC,KAAKD,MAJC,IAImBE,KAAI,CAACC,EAAGC,IAErCd,EAACe,aAA2C,aAAYd,SACrDS,MAAMC,KAAKN,GAASO,KAAI,CAACI,EAAY5B,IACpCY,EAAC3B,GAGCK,MAAO,OAAM,UACJ,OAAOsC,IAChBlC,YAAY,EACZD,QAAQ,EACRF,WAAW,EACXC,SAAS,EAAKqB,SAEdD,EAACiB,EAAQ,CAACC,OAAQ,GAAIC,MAAM,SARvB,OAAOH,YAAqB5B,QAJxB,cAAc0B,OAiB/BR,GAAMM,KAAI,CAACnB,EAAK2B,IACdpB,EAACqB,EAGC,CAAAb,WAAYA,EAEZf,IAAKA,EACL6B,gBAAiBF,EAAOG,WAAUtB,SAEjCS,MAAMC,KAAKN,GAASO,KAAI,CAACvB,EAASD,IACjCY,EAACb,GAGCC,OAAQA,EACRC,QAASA,EACTG,KAAMA,GAAQ,CAAA,EAEdC,IAAKA,EACLC,KAAMA,GAND,QAAQL,KAAWD,QATvB,OAAOgC"}

package/dist/components/molecules/GenericTable/GenericTableBodyRow/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("react");var r=require("@mui/material/styles"),t=require("@mui/material/TableRow");const i=r.styled(t,{shouldForwardProp:e=>"isTitleRow"!==e})((({theme:e,isTitleRow:r})=>r?{backgroundColor:e.palette.semantic.background["background-sunken"]}:{}));module.exports=r=>{const{onRowClick:o,row:a,children:l,tableRowTestKey:s}=r,c=e=>{e.preventDefault(),o?.(a)};return o?e.jsx(i,{"data-testid":`row-clickable-${s}`,hover:void 0!==c,isTitleRow:a.isTitleRow??!1,onClick:c,children:l}):e.jsx(t,{"data-testid":`row-${s}`,children:l})};
+"use strict";var e=require("react/jsx-runtime");require("react");var r=require("@mui/material/styles"),t=require("@mui/material/TableRow");const i=r.styled(t,{shouldForwardProp:e=>"isTitleRow"!==e})((({theme:e,isTitleRow:r})=>r?{backgroundColor:e.palette.semantic.background["background-sunken"]}:{}));module.exports=r=>{const{onRowClick:o,row:a,children:l,tableRowTestKey:s}=r,c=e=>{e.preventDefault(),o?.(a)};return o?e.jsx(i,{"data-fd":`row-clickable-${s}`,hover:void 0!==c,isTitleRow:a.isTitleRow??!1,onClick:c,children:l}):e.jsx(t,{"data-fd":`row-${s}`,children:l})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/GenericTable/GenericTableBodyRow/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/molecules/GenericTable/GenericTableBodyRow/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\nimport TableRow from '@mui/material/TableRow';\n\nexport interface TableBodyRowProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row: any;\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n tableRowTestKey: string;\n}\n\nconst StyledTableRow = styled(TableRow, {\n shouldForwardProp: (prop) => prop !== 'isTitleRow',\n})<{ isTitleRow: boolean }>(({ theme, isTitleRow }) => {\n if (!isTitleRow) {\n return {};\n }\n\n return {\n backgroundColor: theme.palette.semantic.background['background-sunken'],\n };\n});\n\ntype TableBodyRowProp = TableBodyRowProps & { children: React.ReactNode };\n\nconst GenericTableBodyRow: React.FC<React.PropsWithChildren<TableBodyRowProp>> = (props) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { onRowClick, row, children, tableRowTestKey } = props;\n\n const onClick = (event: React.MouseEvent<HTMLTableRowElement>): void => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n event.preventDefault();\n onRowClick?.(row);\n };\n\n if (onRowClick) {\n return (\n <StyledTableRow\n data-~~testid~~={`row-clickable-${tableRowTestKey}`}\n hover={onClick !== undefined}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n isTitleRow={row['isTitleRow'] ?? false}\n onClick={onClick}\n >\n {children}\n </StyledTableRow>\n );\n }\n\n return <TableRow data-~~testid~~={`row-${tableRowTestKey}`}>{children}</TableRow>;\n};\n\nexport default GenericTableBodyRow;\n"],"names":["StyledTableRow","styled","TableRow","shouldForwardProp","prop","theme","isTitleRow","backgroundColor","palette","semantic","background","props","onRowClick","row","children","tableRowTestKey","onClick","event","preventDefault","_jsx","hover","undefined"],"mappings":"2IAaA,MAAMA,EAAiBC,EAAAA,OAAOC,EAAU,CACtCC,kBAAoBC,GAAkB,eAATA,GADRH,EAEK,EAAGI,QAAOC,gBAC/BA,EAIE,CACLC,gBAAiBF,EAAMG,QAAQC,SAASC,WAAW,sBAJ5C,CAAA,mBAUuEC,IAEhF,MAAMC,WAAEA,EAAUC,IAAEA,EAAGC,SAAEA,EAAQC,gBAAEA,GAAoBJ,EAEjDK,EAAWC,IAEfA,EAAMC,iBACNN,IAAaC,IAGf,OAAID,EAEAO,EAAAA,IAACnB,EAAc,CAAA,~~cACA~~,iBAAiBe,~~IAC9BK~~,WAAmBC,IAAZL,EAEPV,WAAYO,EAAgB,aAAK,EACjCG,QAASA,EAAOF,SAEfA,IAKAK,EAAAA,IAACjB,EAAQ,CAAA,~~cAAc~~,OAAOa,IAAiBD,SAAGA"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/molecules/GenericTable/GenericTableBodyRow/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\nimport TableRow from '@mui/material/TableRow';\n\nexport interface TableBodyRowProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row: any;\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n tableRowTestKey: string;\n}\n\nconst StyledTableRow = styled(TableRow, {\n shouldForwardProp: (prop) => prop !== 'isTitleRow',\n})<{ isTitleRow: boolean }>(({ theme, isTitleRow }) => {\n if (!isTitleRow) {\n return {};\n }\n\n return {\n backgroundColor: theme.palette.semantic.background['background-sunken'],\n };\n});\n\ntype TableBodyRowProp = TableBodyRowProps & { children: React.ReactNode };\n\nconst GenericTableBodyRow: React.FC<React.PropsWithChildren<TableBodyRowProp>> = (props) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { onRowClick, row, children, tableRowTestKey } = props;\n\n const onClick = (event: React.MouseEvent<HTMLTableRowElement>): void => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n event.preventDefault();\n onRowClick?.(row);\n };\n\n if (onRowClick) {\n return (\n <StyledTableRow\n data-fd={`row-clickable-${tableRowTestKey}`}\n hover={onClick !== undefined}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n isTitleRow={row['isTitleRow'] ?? false}\n onClick={onClick}\n >\n {children}\n </StyledTableRow>\n );\n }\n\n return <TableRow data-fd={`row-${tableRowTestKey}`}>{children}</TableRow>;\n};\n\nexport default GenericTableBodyRow;\n"],"names":["StyledTableRow","styled","TableRow","shouldForwardProp","prop","theme","isTitleRow","backgroundColor","palette","semantic","background","props","onRowClick","row","children","tableRowTestKey","onClick","event","preventDefault","_jsx","hover","undefined"],"mappings":"2IAaA,MAAMA,EAAiBC,EAAAA,OAAOC,EAAU,CACtCC,kBAAoBC,GAAkB,eAATA,GADRH,EAEK,EAAGI,QAAOC,gBAC/BA,EAIE,CACLC,gBAAiBF,EAAMG,QAAQC,SAASC,WAAW,sBAJ5C,CAAA,mBAUuEC,IAEhF,MAAMC,WAAEA,EAAUC,IAAEA,EAAGC,SAAEA,EAAQC,gBAAEA,GAAoBJ,EAEjDK,EAAWC,IAEfA,EAAMC,iBACNN,IAAaC,IAGf,OAAID,EAEAO,EAAAA,IAACnB,EAAc,CAAA,UACJ,iBAAiBe,IAC1BK,WAAmBC,IAAZL,EAEPV,WAAYO,EAAgB,aAAK,EACjCG,QAASA,EAAOF,SAEfA,IAKAK,EAAAA,IAACjB,EAAQ,CAAA,UAAU,OAAOa,IAAiBD,SAAGA"}

package/dist/components/molecules/GenericTable/GenericTableBodyRow/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import"react";import{styled as t}from"@mui/material/styles";import o from"@mui/material/TableRow";const r=t(o,{shouldForwardProp:e=>"isTitleRow"!==e})((({theme:e,isTitleRow:t})=>t?{backgroundColor:e.palette.semantic.background["background-sunken"]}:{})),i=t=>{const{onRowClick:i,row:a,children:l,tableRowTestKey:n}=t,s=e=>{e.preventDefault(),i?.(a)};return i?e(r,{"data-testid":`row-clickable-${n}`,hover:void 0!==s,isTitleRow:a.isTitleRow??!1,onClick:s,children:l}):e(o,{"data-testid":`row-${n}`,children:l})};export{i as default};
+import{jsx as o}from"react/jsx-runtime";import"react";import{styled as e}from"@mui/material/styles";import r from"@mui/material/TableRow";const t=e(r,{shouldForwardProp:o=>"isTitleRow"!==o})((({theme:o,isTitleRow:e})=>e?{backgroundColor:o.palette.semantic.background["background-sunken"]}:{})),i=e=>{const{onRowClick:i,row:a,children:l,tableRowTestKey:n}=e,c=o=>{o.preventDefault(),i?.(a)};return i?o(t,{"data-fd":`row-clickable-${n}`,hover:void 0!==c,isTitleRow:a.isTitleRow??!1,onClick:c,children:l}):o(r,{"data-fd":`row-${n}`,children:l})};export{i as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/GenericTable/GenericTableBodyRow/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/GenericTable/GenericTableBodyRow/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\nimport TableRow from '@mui/material/TableRow';\n\nexport interface TableBodyRowProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row: any;\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n tableRowTestKey: string;\n}\n\nconst StyledTableRow = styled(TableRow, {\n shouldForwardProp: (prop) => prop !== 'isTitleRow',\n})<{ isTitleRow: boolean }>(({ theme, isTitleRow }) => {\n if (!isTitleRow) {\n return {};\n }\n\n return {\n backgroundColor: theme.palette.semantic.background['background-sunken'],\n };\n});\n\ntype TableBodyRowProp = TableBodyRowProps & { children: React.ReactNode };\n\nconst GenericTableBodyRow: React.FC<React.PropsWithChildren<TableBodyRowProp>> = (props) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { onRowClick, row, children, tableRowTestKey } = props;\n\n const onClick = (event: React.MouseEvent<HTMLTableRowElement>): void => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n event.preventDefault();\n onRowClick?.(row);\n };\n\n if (onRowClick) {\n return (\n <StyledTableRow\n data-~~testid~~={`row-clickable-${tableRowTestKey}`}\n hover={onClick !== undefined}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n isTitleRow={row['isTitleRow'] ?? false}\n onClick={onClick}\n >\n {children}\n </StyledTableRow>\n );\n }\n\n return <TableRow data-~~testid~~={`row-${tableRowTestKey}`}>{children}</TableRow>;\n};\n\nexport default GenericTableBodyRow;\n"],"names":["StyledTableRow","styled","TableRow","shouldForwardProp","prop","theme","isTitleRow","backgroundColor","palette","semantic","background","GenericTableBodyRow","props","onRowClick","row","children","tableRowTestKey","onClick","event","preventDefault","_jsx","hover","undefined"],"mappings":"0IAaA,MAAMA,EAAiBC,EAAOC,EAAU,CACtCC,kBAAoBC,GAAkB,eAATA,GADRH,EAEK,EAAGI,QAAOC,gBAC/BA,EAIE,CACLC,gBAAiBF,EAAMG,QAAQC,SAASC,WAAW,sBAJ5C,CAAA,IAULC,EAA4EC,IAEhF,MAAMC,WAAEA,EAAUC,IAAEA,EAAGC,SAAEA,EAAQC,gBAAEA,GAAoBJ,EAEjDK,EAAWC,IAEfA,EAAMC,iBACNN,IAAaC,IAGf,OAAID,EAEAO,EAACpB,EAAc,CAAA,~~cACA~~,iBAAiBgB,~~IAC9BK~~,WAAmBC,IAAZL,EAEPX,WAAYQ,EAAgB,aAAK,EACjCG,QAASA,EAAOF,SAEfA,IAKAK,EAAClB,EAAQ,CAAA,~~cAAc~~,OAAOc,IAAiBD,SAAGA"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/GenericTable/GenericTableBodyRow/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\nimport TableRow from '@mui/material/TableRow';\n\nexport interface TableBodyRowProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row: any;\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n tableRowTestKey: string;\n}\n\nconst StyledTableRow = styled(TableRow, {\n shouldForwardProp: (prop) => prop !== 'isTitleRow',\n})<{ isTitleRow: boolean }>(({ theme, isTitleRow }) => {\n if (!isTitleRow) {\n return {};\n }\n\n return {\n backgroundColor: theme.palette.semantic.background['background-sunken'],\n };\n});\n\ntype TableBodyRowProp = TableBodyRowProps & { children: React.ReactNode };\n\nconst GenericTableBodyRow: React.FC<React.PropsWithChildren<TableBodyRowProp>> = (props) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { onRowClick, row, children, tableRowTestKey } = props;\n\n const onClick = (event: React.MouseEvent<HTMLTableRowElement>): void => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n event.preventDefault();\n onRowClick?.(row);\n };\n\n if (onRowClick) {\n return (\n <StyledTableRow\n data-fd={`row-clickable-${tableRowTestKey}`}\n hover={onClick !== undefined}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n isTitleRow={row['isTitleRow'] ?? false}\n onClick={onClick}\n >\n {children}\n </StyledTableRow>\n );\n }\n\n return <TableRow data-fd={`row-${tableRowTestKey}`}>{children}</TableRow>;\n};\n\nexport default GenericTableBodyRow;\n"],"names":["StyledTableRow","styled","TableRow","shouldForwardProp","prop","theme","isTitleRow","backgroundColor","palette","semantic","background","GenericTableBodyRow","props","onRowClick","row","children","tableRowTestKey","onClick","event","preventDefault","_jsx","hover","undefined"],"mappings":"0IAaA,MAAMA,EAAiBC,EAAOC,EAAU,CACtCC,kBAAoBC,GAAkB,eAATA,GADRH,EAEK,EAAGI,QAAOC,gBAC/BA,EAIE,CACLC,gBAAiBF,EAAMG,QAAQC,SAASC,WAAW,sBAJ5C,CAAA,IAULC,EAA4EC,IAEhF,MAAMC,WAAEA,EAAUC,IAAEA,EAAGC,SAAEA,EAAQC,gBAAEA,GAAoBJ,EAEjDK,EAAWC,IAEfA,EAAMC,iBACNN,IAAaC,IAGf,OAAID,EAEAO,EAACpB,EAAc,CAAA,UACJ,iBAAiBgB,IAC1BK,WAAmBC,IAAZL,EAEPX,WAAYQ,EAAgB,aAAK,EACjCG,QAASA,EAAOF,SAEfA,IAKAK,EAAClB,EAAQ,CAAA,UAAU,OAAOc,IAAiBD,SAAGA"}

package/dist/components/molecules/GenericTable/index.cjs.js CHANGED Viewed

@@ -14,5 +14,5 @@
   }
 `,p=n.styled(t,{shouldForwardProp:e=>"isSticky"!==e&&"titleVariant"!==e})((({theme:e,isSticky:i,titleVariant:t})=>({fontSize:13,fontWeight:"light"===t?400:e.typography.fontWeightMedium,color:"light"===t?e.palette.semantic.text["text-weak"]:e.palette.semantic.text["text-strong"],padding:e.spacing(1.25,2),whiteSpace:"nowrap",position:i?"sticky":"relative",zIndex:i?1:"auto"}))),b=n.styled("div")`
   overflow: hidden;
-`,g=n.styled(l)((({theme:e})=>({marginLeft:e.spacing(.5),svg:{fontSize:e.typography.body1.fontSize}})));module.exports=({data:t,title:l,subTitle:n,showTitle:j=!0,onRowClick:f,loading:y,metadata:k,titleVariant:w="default"})=>{const q=new Set(k.filter((e=>e.isVisible)).sort(((e,i)=>e.ordinal-i.ordinal)).map((e=>e.columnName))),T=k.reduce(((e,i)=>(e[i.columnName]=i,e)),{}),v=d(),S=!s(v.breakpoints.up("tablet")),I=S?"normal":"sticky";return e.jsxs(x,{children:[j&&e.jsx(m,{subTitle:n,title:l}),e.jsx(b,{children:e.jsx(h,{children:e.jsxs(i,{"aria-label":l,"data-testid":"generic-table"+(j?`-${l?.replace(" ","-").toLowerCase()}`:""),sx:{borderTop:"1px solid #e0e0e0",height:"10vh"},children:[e.jsx(r,{children:e.jsx(a,{children:Array.from(q).map(((i,t)=>{const{columnName:r,columnTitle:a,align:l="left",tooltip:s}=T[i]||{};return e.jsx(p,{align:l,isSticky:0===t&&!S,titleVariant:w,children:e.jsxs("div",{children:[e.jsx("span",{children:a}),s&&e.jsx(g,{placement:"right-start",title:s,children:e.jsx(o.IconButton,{"aria-label":"Info",size:"small",children:e.jsx(c,{"data-testid":"InfoOutlinedIcon",size:"sm"})})})]})},r)}))})}),e.jsx(u,{columns:q,data:t,loading:y,meta:T,onRowClick:f,type:I})]})})})]})};
+`,g=n.styled(l)((({theme:e})=>({marginLeft:e.spacing(.5),svg:{fontSize:e.typography.body1.fontSize}})));module.exports=({data:t,title:l,subTitle:n,showTitle:j=!0,onRowClick:f,loading:y,metadata:k,titleVariant:w="default"})=>{const q=new Set(k.filter((e=>e.isVisible)).sort(((e,i)=>e.ordinal-i.ordinal)).map((e=>e.columnName))),T=k.reduce(((e,i)=>(e[i.columnName]=i,e)),{}),v=d(),S=!s(v.breakpoints.up("tablet")),I=S?"normal":"sticky";return e.jsxs(x,{children:[j&&e.jsx(m,{subTitle:n,title:l}),e.jsx(b,{children:e.jsx(h,{children:e.jsxs(i,{"aria-label":l,"data-fd":"generic-table"+(j?`-${l?.replace(" ","-").toLowerCase()}`:""),sx:{borderTop:"1px solid #e0e0e0",height:"10vh"},children:[e.jsx(r,{children:e.jsx(a,{children:Array.from(q).map(((i,t)=>{const{columnName:r,columnTitle:a,align:l="left",tooltip:s}=T[i]||{};return e.jsx(p,{align:l,isSticky:0===t&&!S,titleVariant:w,children:e.jsxs("div",{children:[e.jsx("span",{children:a}),s&&e.jsx(g,{placement:"right-start",title:s,children:e.jsx(o.IconButton,{"aria-label":"Info",size:"small",children:e.jsx(c,{"data-fd":"InfoOutlinedIcon",size:"sm"})})})]})},r)}))})}),e.jsx(u,{columns:q,data:t,loading:y,meta:T,onRowClick:f,type:I})]})})})]})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/GenericTable/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/GenericTable/index.tsx"],"sourcesContent":["import Table from '@mui/material/Table';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport IconButton from '@fd/components/atoms/IconButton';\nimport styled from '@fd/utilities/styledUtilities';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport InfoOutlinedIcon from '../../../icons/InformationCircle';\nimport GenericTableBody, { type GenericTableColumns } from './GenericTableBody';\nimport GenericTableTitle from './GenericTableTitle';\nimport HighlightScrollbar from './HighlightScrollbar';\n\ninterface GenericTableProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n data?: any[];\n loading?: boolean;\n metadata: GenericTableColumns[];\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n showTitle?: boolean;\n subTitle?: string;\n title?: string;\n titleVariant?: 'default' \| 'light';\n}\n\nconst StyledContainer = styled('div')`\n overflow-x: auto;\n &::-webkit-scrollbar {\n padding: 2px 0;\n height: 6px;\n border: 1px solid #d5d5d5;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n &::-webkit-scrollbar-thumb {\n background: #f5f5f5;\n border-radius: 3px;\n }\n`;\n\nconst StyledTableCell = styled(TableCell, {\n shouldForwardProp: (prop) => prop !== 'isSticky' && prop !== 'titleVariant',\n})<{ isSticky: boolean; titleVariant: 'default' \| 'light' }>(({ theme, isSticky, titleVariant }) => ({\n fontSize: 13,\n fontWeight: titleVariant === 'light' ? 400 : theme.typography.fontWeightMedium,\n color:\n titleVariant === 'light'\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n padding: theme.spacing(1.25, 2),\n whiteSpace: 'nowrap',\n position: isSticky ? 'sticky' : 'relative',\n zIndex: isSticky ? 1 : 'auto',\n}));\n\nconst StyledSpacingContainer = styled('div')`\n overflow: hidden;\n`;\n\nconst StyledTooltip = styled(Tooltip)(({ theme }) => ({\n marginLeft: theme.spacing(0.5),\n svg: {\n fontSize: theme.typography.body1.fontSize,\n },\n}));\n\nconst GenericTable = ({\n data,\n title,\n subTitle,\n showTitle = true,\n onRowClick,\n loading,\n metadata,\n titleVariant = 'default',\n}: GenericTableProps) => {\n const columns = new Set(\n metadata\n .filter((m) => m.isVisible)\n .sort((a, b) => a.ordinal - b.ordinal)\n .map((m) => m.columnName),\n );\n const tableMeta = metadata.reduce<{ [key: string]: GenericTableColumns }>((obj, mData) => {\n obj[mData.columnName] = mData;\n return obj;\n }, {});\n\n const theme = useTheme();\n const isMobile = !useMediaQuery(theme.breakpoints.up('tablet'));\n\n // We never want sticky on mobile - only on desktop\n const firstColumnStylePosition = isMobile ? 'normal' : 'sticky';\n\n const renderTableHeader = () => (\n <TableHead>\n <TableRow>\n {Array.from(columns).map((prop, idx) => {\n const { columnName, columnTitle, align = 'left', tooltip } = tableMeta[prop] \|\| {};\n\n return (\n <StyledTableCell\n key={columnName}\n align={align}\n isSticky={idx === 0 && !isMobile}\n titleVariant={titleVariant}\n >\n <div>\n <span>{columnTitle}</span>\n {tooltip && (\n <StyledTooltip placement=\"right-start\" title={tooltip}>\n <IconButton aria-label=\"Info\" size=\"small\">\n <InfoOutlinedIcon data-~~testid~~=\"InfoOutlinedIcon\" size=\"sm\" />\n </IconButton>\n </StyledTooltip>\n )}\n </div>\n </StyledTableCell>\n );\n })}\n </TableRow>\n </TableHead>\n );\n\n return (\n <StyledContainer>\n {showTitle && <GenericTableTitle subTitle={subTitle} title={title}></GenericTableTitle>}\n <StyledSpacingContainer>\n <HighlightScrollbar>\n <Table\n aria-label={title}\n data-~~testid~~={`generic-table` + (showTitle ? `-${title?.replace(' ', '-').toLowerCase()}` : '')}\n sx={{\n borderTop: '1px solid #e0e0e0',\n height: '10vh',\n }}\n >\n {renderTableHeader()}\n <GenericTableBody\n columns={columns}\n data={data}\n loading={loading}\n meta={tableMeta}\n onRowClick={onRowClick}\n type={firstColumnStylePosition}\n />\n </Table>\n </HighlightScrollbar>\n </StyledSpacingContainer>\n </StyledContainer>\n );\n};\n\nexport default GenericTable;\n"],"names":["StyledContainer","styled","StyledTableCell","TableCell","shouldForwardProp","prop","theme","isSticky","titleVariant","fontSize","fontWeight","typography","fontWeightMedium","color","palette","semantic","text","padding","spacing","whiteSpace","position","zIndex","StyledSpacingContainer","StyledTooltip","Tooltip","marginLeft","svg","body1","data","title","subTitle","showTitle","onRowClick","loading","metadata","columns","Set","filter","m","isVisible","sort","a","b","ordinal","map","columnName","tableMeta","reduce","obj","mData","useTheme","isMobile","useMediaQuery","breakpoints","up","firstColumnStylePosition","_jsxs","children","_jsx","GenericTableTitle","HighlightScrollbar","Table","replace","toLowerCase","sx","borderTop","height","TableHead","TableRow","Array","from","idx","columnTitle","align","tooltip","placement","IconButton","size","InfoOutlinedIcon","GenericTableBody","meta","type"],"mappings":"wkBA6BA,MAAMA,EAAkBC,EAAAA,OAAO,MAAM;;;;;;;;;;;;;;EAgB/BC,EAAkBD,EAAAA,OAAOE,EAAW,CACxCC,kBAAoBC,GAAkB,aAATA,GAAgC,iBAATA,GAD9BJ,EAEqC,EAAGK,QAAOC,WAAUC,mBAAc,CAC7FC,SAAU,GACVC,WAA6B,UAAjBF,EAA2B,IAAMF,EAAMK,WAAWC,iBAC9DC,MACmB,UAAjBL,EACIF,EAAMQ,QAAQC,SAASC,KAAK,aAC5BV,EAAMQ,QAAQC,SAASC,KAAK,eAClCC,QAASX,EAAMY,QAAQ,KAAM,GAC7BC,WAAY,SACZC,SAAUb,EAAW,SAAW,WAChCc,OAAQd,EAAW,EAAI,WAGnBe,EAAyBrB,EAAAA,OAAO,MAAM;;EAItCsB,EAAgBtB,EAAAA,OAAOuB,EAAPvB,EAAgB,EAAGK,YAAO,CAC9CmB,WAAYnB,EAAMY,QAAQ,IAC1BQ,IAAK,CACHjB,SAAUH,EAAMK,WAAWgB,MAAMlB,6BAIhB,EACnBmB,OACAC,QACAC,WACAC,aAAY,EACZC,aACAC,UACAC,WACA1B,eAAe,cAEf,MAAM2B,EAAU,IAAIC,IAClBF,EACGG,QAAQC,GAAMA,EAAEC,YAChBC,MAAK,CAACC,EAAGC,IAAMD,EAAEE,QAAUD,EAAEC,UAC7BC,KAAKN,GAAMA,EAAEO,cAEZC,EAAYZ,EAASa,QAA+C,CAACC,EAAKC,KAC9ED,EAAIC,EAAMJ,YAAcI,EACjBD,IACN,CAAA,GAEG1C,EAAQ4C,IACRC,GAAYC,EAAc9C,EAAM+C,YAAYC,GAAG,WAG/CC,EAA2BJ,EAAW,SAAW,SAgCvD,OACEK,EAAAA,KAACxD,EAAe,CAAAyD,SAAA,CACb1B,GAAa2B,EAAAA,IAACC,EAAiB,CAAC7B,SAAUA,EAAUD,MAAOA,IAC5D6B,EAAAA,IAACpC,EAAsB,CAAAmC,SACrBC,MAACE,EAAkB,CAAAH,SACjBD,EAAAA,KAACK,EAAK,CAAA,aACQhC,~~gBACC~~,iBAAmBE,EAAY,IAAIF,GAAOiC,QAAQ,IAAK,KAAKC,gBAAkB,~~IAC3FC~~,GAAI,CACFC,UAAW,oBACXC,OAAQ,QACTT,SAAA,CAxCTC,EAAAA,IAACS,EAAS,CAAAV,SACRC,EAAAA,IAACU,EAAQ,CAAAX,SACNY,MAAMC,KAAKnC,GAASS,KAAI,CAACvC,EAAMkE,KAC9B,MAAM1B,WAAEA,EAAU2B,YAAEA,EAAWC,MAAEA,EAAQ,OAAMC,QAAEA,GAAY5B,EAAUzC,IAAS,CAAA,EAEhF,OACEqD,MAACxD,EAAe,CAEduE,MAAOA,EACPlE,SAAkB,IAARgE,IAAcpB,EACxB3C,aAAcA,EAAYiD,SAE1BD,EAAAA,sBACEE,EAAAA,IAAA,OAAA,CAAAD,SAAOe,IACNE,GACChB,EAAAA,IAACnC,EAAa,CAACoD,UAAU,cAAc9C,MAAO6C,EAAOjB,SACnDC,EAAAA,IAACkB,aAAU,CAAA,aAAY,OAAOC,KAAK,QAAOpB,SACxCC,MAACoB,EAAgB,CAAA,~~cAAa~~,mBAAmBD,KAAK,~~eAVzDhC~~,UAoCPa,MAACqB,EAAgB,CACf5C,QAASA,EACTP,KAAMA,EACNK,QAASA,EACT+C,KAAMlC,EACNd,WAAYA,EACZiD,KAAM1B"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/GenericTable/index.tsx"],"sourcesContent":["import Table from '@mui/material/Table';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport IconButton from '@fd/components/atoms/IconButton';\nimport styled from '@fd/utilities/styledUtilities';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport InfoOutlinedIcon from '../../../icons/InformationCircle';\nimport GenericTableBody, { type GenericTableColumns } from './GenericTableBody';\nimport GenericTableTitle from './GenericTableTitle';\nimport HighlightScrollbar from './HighlightScrollbar';\n\ninterface GenericTableProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n data?: any[];\n loading?: boolean;\n metadata: GenericTableColumns[];\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n showTitle?: boolean;\n subTitle?: string;\n title?: string;\n titleVariant?: 'default' \| 'light';\n}\n\nconst StyledContainer = styled('div')`\n overflow-x: auto;\n &::-webkit-scrollbar {\n padding: 2px 0;\n height: 6px;\n border: 1px solid #d5d5d5;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n &::-webkit-scrollbar-thumb {\n background: #f5f5f5;\n border-radius: 3px;\n }\n`;\n\nconst StyledTableCell = styled(TableCell, {\n shouldForwardProp: (prop) => prop !== 'isSticky' && prop !== 'titleVariant',\n})<{ isSticky: boolean; titleVariant: 'default' \| 'light' }>(({ theme, isSticky, titleVariant }) => ({\n fontSize: 13,\n fontWeight: titleVariant === 'light' ? 400 : theme.typography.fontWeightMedium,\n color:\n titleVariant === 'light'\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n padding: theme.spacing(1.25, 2),\n whiteSpace: 'nowrap',\n position: isSticky ? 'sticky' : 'relative',\n zIndex: isSticky ? 1 : 'auto',\n}));\n\nconst StyledSpacingContainer = styled('div')`\n overflow: hidden;\n`;\n\nconst StyledTooltip = styled(Tooltip)(({ theme }) => ({\n marginLeft: theme.spacing(0.5),\n svg: {\n fontSize: theme.typography.body1.fontSize,\n },\n}));\n\nconst GenericTable = ({\n data,\n title,\n subTitle,\n showTitle = true,\n onRowClick,\n loading,\n metadata,\n titleVariant = 'default',\n}: GenericTableProps) => {\n const columns = new Set(\n metadata\n .filter((m) => m.isVisible)\n .sort((a, b) => a.ordinal - b.ordinal)\n .map((m) => m.columnName),\n );\n const tableMeta = metadata.reduce<{ [key: string]: GenericTableColumns }>((obj, mData) => {\n obj[mData.columnName] = mData;\n return obj;\n }, {});\n\n const theme = useTheme();\n const isMobile = !useMediaQuery(theme.breakpoints.up('tablet'));\n\n // We never want sticky on mobile - only on desktop\n const firstColumnStylePosition = isMobile ? 'normal' : 'sticky';\n\n const renderTableHeader = () => (\n <TableHead>\n <TableRow>\n {Array.from(columns).map((prop, idx) => {\n const { columnName, columnTitle, align = 'left', tooltip } = tableMeta[prop] \|\| {};\n\n return (\n <StyledTableCell\n key={columnName}\n align={align}\n isSticky={idx === 0 && !isMobile}\n titleVariant={titleVariant}\n >\n <div>\n <span>{columnTitle}</span>\n {tooltip && (\n <StyledTooltip placement=\"right-start\" title={tooltip}>\n <IconButton aria-label=\"Info\" size=\"small\">\n <InfoOutlinedIcon data-fd=\"InfoOutlinedIcon\" size=\"sm\" />\n </IconButton>\n </StyledTooltip>\n )}\n </div>\n </StyledTableCell>\n );\n })}\n </TableRow>\n </TableHead>\n );\n\n return (\n <StyledContainer>\n {showTitle && <GenericTableTitle subTitle={subTitle} title={title}></GenericTableTitle>}\n <StyledSpacingContainer>\n <HighlightScrollbar>\n <Table\n aria-label={title}\n data-fd={`generic-table` + (showTitle ? `-${title?.replace(' ', '-').toLowerCase()}` : '')}\n sx={{\n borderTop: '1px solid #e0e0e0',\n height: '10vh',\n }}\n >\n {renderTableHeader()}\n <GenericTableBody\n columns={columns}\n data={data}\n loading={loading}\n meta={tableMeta}\n onRowClick={onRowClick}\n type={firstColumnStylePosition}\n />\n </Table>\n </HighlightScrollbar>\n </StyledSpacingContainer>\n </StyledContainer>\n );\n};\n\nexport default GenericTable;\n"],"names":["StyledContainer","styled","StyledTableCell","TableCell","shouldForwardProp","prop","theme","isSticky","titleVariant","fontSize","fontWeight","typography","fontWeightMedium","color","palette","semantic","text","padding","spacing","whiteSpace","position","zIndex","StyledSpacingContainer","StyledTooltip","Tooltip","marginLeft","svg","body1","data","title","subTitle","showTitle","onRowClick","loading","metadata","columns","Set","filter","m","isVisible","sort","a","b","ordinal","map","columnName","tableMeta","reduce","obj","mData","useTheme","isMobile","useMediaQuery","breakpoints","up","firstColumnStylePosition","_jsxs","children","_jsx","GenericTableTitle","HighlightScrollbar","Table","replace","toLowerCase","sx","borderTop","height","TableHead","TableRow","Array","from","idx","columnTitle","align","tooltip","placement","IconButton","size","InfoOutlinedIcon","GenericTableBody","meta","type"],"mappings":"wkBA6BA,MAAMA,EAAkBC,EAAAA,OAAO,MAAM;;;;;;;;;;;;;;EAgB/BC,EAAkBD,EAAAA,OAAOE,EAAW,CACxCC,kBAAoBC,GAAkB,aAATA,GAAgC,iBAATA,GAD9BJ,EAEqC,EAAGK,QAAOC,WAAUC,mBAAc,CAC7FC,SAAU,GACVC,WAA6B,UAAjBF,EAA2B,IAAMF,EAAMK,WAAWC,iBAC9DC,MACmB,UAAjBL,EACIF,EAAMQ,QAAQC,SAASC,KAAK,aAC5BV,EAAMQ,QAAQC,SAASC,KAAK,eAClCC,QAASX,EAAMY,QAAQ,KAAM,GAC7BC,WAAY,SACZC,SAAUb,EAAW,SAAW,WAChCc,OAAQd,EAAW,EAAI,WAGnBe,EAAyBrB,EAAAA,OAAO,MAAM;;EAItCsB,EAAgBtB,EAAAA,OAAOuB,EAAPvB,EAAgB,EAAGK,YAAO,CAC9CmB,WAAYnB,EAAMY,QAAQ,IAC1BQ,IAAK,CACHjB,SAAUH,EAAMK,WAAWgB,MAAMlB,6BAIhB,EACnBmB,OACAC,QACAC,WACAC,aAAY,EACZC,aACAC,UACAC,WACA1B,eAAe,cAEf,MAAM2B,EAAU,IAAIC,IAClBF,EACGG,QAAQC,GAAMA,EAAEC,YAChBC,MAAK,CAACC,EAAGC,IAAMD,EAAEE,QAAUD,EAAEC,UAC7BC,KAAKN,GAAMA,EAAEO,cAEZC,EAAYZ,EAASa,QAA+C,CAACC,EAAKC,KAC9ED,EAAIC,EAAMJ,YAAcI,EACjBD,IACN,CAAA,GAEG1C,EAAQ4C,IACRC,GAAYC,EAAc9C,EAAM+C,YAAYC,GAAG,WAG/CC,EAA2BJ,EAAW,SAAW,SAgCvD,OACEK,EAAAA,KAACxD,EAAe,CAAAyD,SAAA,CACb1B,GAAa2B,EAAAA,IAACC,EAAiB,CAAC7B,SAAUA,EAAUD,MAAOA,IAC5D6B,EAAAA,IAACpC,EAAsB,CAAAmC,SACrBC,MAACE,EAAkB,CAAAH,SACjBD,EAAAA,KAACK,EAAK,CAAA,aACQhC,YACH,iBAAmBE,EAAY,IAAIF,GAAOiC,QAAQ,IAAK,KAAKC,gBAAkB,IACvFC,GAAI,CACFC,UAAW,oBACXC,OAAQ,QACTT,SAAA,CAxCTC,EAAAA,IAACS,EAAS,CAAAV,SACRC,EAAAA,IAACU,EAAQ,CAAAX,SACNY,MAAMC,KAAKnC,GAASS,KAAI,CAACvC,EAAMkE,KAC9B,MAAM1B,WAAEA,EAAU2B,YAAEA,EAAWC,MAAEA,EAAQ,OAAMC,QAAEA,GAAY5B,EAAUzC,IAAS,CAAA,EAEhF,OACEqD,MAACxD,EAAe,CAEduE,MAAOA,EACPlE,SAAkB,IAARgE,IAAcpB,EACxB3C,aAAcA,EAAYiD,SAE1BD,EAAAA,sBACEE,EAAAA,IAAA,OAAA,CAAAD,SAAOe,IACNE,GACChB,EAAAA,IAACnC,EAAa,CAACoD,UAAU,cAAc9C,MAAO6C,EAAOjB,SACnDC,EAAAA,IAACkB,aAAU,CAAA,aAAY,OAAOC,KAAK,QAAOpB,SACxCC,MAACoB,EAAgB,CAAA,UAAS,mBAAmBD,KAAK,eAVrDhC,UAoCPa,MAACqB,EAAgB,CACf5C,QAASA,EACTP,KAAMA,EACNK,QAASA,EACT+C,KAAMlC,EACNd,WAAYA,EACZiD,KAAM1B"}

package/dist/components/molecules/GenericTable/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import i from"@mui/material/Table";import r from"@mui/material/TableCell";import a from"@mui/material/TableHead";import o from"@mui/material/TableRow";import l from"@mui/material/Tooltip";import n from"@mui/material/useMediaQuery";import{IconButton as m}from"../../atoms/IconButton/index.js";import{styled as d}from"@mui/material/styles";import s from"@mui/material/styles/useTheme";import c from"../../../icons/InformationCircle/index.js";import p from"./GenericTableBody/index.js";import f from"./GenericTableTitle/index.js";import u from"./HighlightScrollbar.js";const h=d("div")`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import i from"@mui/material/Table";import r from"@mui/material/TableCell";import a from"@mui/material/TableHead";import o from"@mui/material/TableRow";import l from"@mui/material/Tooltip";import n from"@mui/material/useMediaQuery";import{IconButton as m}from"../../atoms/IconButton/index.js";import{styled as d}from"@mui/material/styles";import s from"@mui/material/styles/useTheme";import c from"../../../icons/InformationCircle/index.js";import p from"./GenericTableBody/index.js";import f from"./GenericTableTitle/index.js";import u from"./HighlightScrollbar.js";const h=d("div")`
   overflow-x: auto;
   &::-webkit-scrollbar {
     padding: 2px 0;
@@ -12,7 +12,7 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import i from"@mui/material/Ta
     background: #f5f5f5;
     border-radius: 3px;
   }
-`,b=d(r,{shouldForwardProp:t=>"isSticky"!==t&&"titleVariant"!==t})((({theme:t,isSticky:e,titleVariant:i})=>({fontSize:13,fontWeight:"light"===i?400:t.typography.fontWeightMedium,color:"light"===i?t.palette.semantic.text["text-weak"]:t.palette.semantic.text["text-strong"],padding:t.spacing(1.25,2),whiteSpace:"nowrap",position:e?"sticky":"relative",zIndex:e?1:"auto"}))),g=d("div")`
+`,b=d(r,{shouldForwardProp:e=>"isSticky"!==e&&"titleVariant"!==e})((({theme:e,isSticky:t,titleVariant:i})=>({fontSize:13,fontWeight:"light"===i?400:e.typography.fontWeightMedium,color:"light"===i?e.palette.semantic.text["text-weak"]:e.palette.semantic.text["text-strong"],padding:e.spacing(1.25,2),whiteSpace:"nowrap",position:t?"sticky":"relative",zIndex:t?1:"auto"}))),g=d("div")`
   overflow: hidden;
-`,x=d(l)((({theme:t})=>({marginLeft:t.spacing(.5),svg:{fontSize:t.typography.body1.fontSize}}))),y=({data:r,title:l,subTitle:d,showTitle:y=!0,onRowClick:k,loading:w,metadata:T,titleVariant:S="default"})=>{const v=new Set(T.filter((t=>t.isVisible)).sort(((t,e)=>t.ordinal-e.ordinal)).map((t=>t.columnName))),j=T.reduce(((t,e)=>(t[e.columnName]=e,t)),{}),z=s(),I=!n(z.breakpoints.up("tablet")),C=I?"normal":"sticky";return t(h,{children:[y&&e(f,{subTitle:d,title:l}),e(g,{children:e(u,{children:t(i,{"aria-label":l,"data-testid":"generic-table"+(y?`-${l?.replace(" ","-").toLowerCase()}`:""),sx:{borderTop:"1px solid #e0e0e0",height:"10vh"},children:[e(a,{children:e(o,{children:Array.from(v).map(((i,r)=>{const{columnName:a,columnTitle:o,align:l="left",tooltip:n}=j[i]||{};return e(b,{align:l,isSticky:0===r&&!I,titleVariant:S,children:t("div",{children:[e("span",{children:o}),n&&e(x,{placement:"right-start",title:n,children:e(m,{"aria-label":"Info",size:"small",children:e(c,{"data-testid":"InfoOutlinedIcon",size:"sm"})})})]})},a)}))})}),e(p,{columns:v,data:r,loading:w,meta:j,onRowClick:k,type:C})]})})})]})};export{y as default};
+`,x=d(l)((({theme:e})=>({marginLeft:e.spacing(.5),svg:{fontSize:e.typography.body1.fontSize}}))),y=({data:r,title:l,subTitle:d,showTitle:y=!0,onRowClick:k,loading:w,metadata:T,titleVariant:S="default"})=>{const v=new Set(T.filter((e=>e.isVisible)).sort(((e,t)=>e.ordinal-t.ordinal)).map((e=>e.columnName))),j=T.reduce(((e,t)=>(e[t.columnName]=t,e)),{}),z=s(),I=!n(z.breakpoints.up("tablet")),C=I?"normal":"sticky";return e(h,{children:[y&&t(f,{subTitle:d,title:l}),t(g,{children:t(u,{children:e(i,{"aria-label":l,"data-fd":"generic-table"+(y?`-${l?.replace(" ","-").toLowerCase()}`:""),sx:{borderTop:"1px solid #e0e0e0",height:"10vh"},children:[t(a,{children:t(o,{children:Array.from(v).map(((i,r)=>{const{columnName:a,columnTitle:o,align:l="left",tooltip:n}=j[i]||{};return t(b,{align:l,isSticky:0===r&&!I,titleVariant:S,children:e("div",{children:[t("span",{children:o}),n&&t(x,{placement:"right-start",title:n,children:t(m,{"aria-label":"Info",size:"small",children:t(c,{"data-fd":"InfoOutlinedIcon",size:"sm"})})})]})},a)}))})}),t(p,{columns:v,data:r,loading:w,meta:j,onRowClick:k,type:C})]})})})]})};export{y as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/GenericTable/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/GenericTable/index.tsx"],"sourcesContent":["import Table from '@mui/material/Table';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport IconButton from '@fd/components/atoms/IconButton';\nimport styled from '@fd/utilities/styledUtilities';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport InfoOutlinedIcon from '../../../icons/InformationCircle';\nimport GenericTableBody, { type GenericTableColumns } from './GenericTableBody';\nimport GenericTableTitle from './GenericTableTitle';\nimport HighlightScrollbar from './HighlightScrollbar';\n\ninterface GenericTableProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n data?: any[];\n loading?: boolean;\n metadata: GenericTableColumns[];\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n showTitle?: boolean;\n subTitle?: string;\n title?: string;\n titleVariant?: 'default' \| 'light';\n}\n\nconst StyledContainer = styled('div')`\n overflow-x: auto;\n &::-webkit-scrollbar {\n padding: 2px 0;\n height: 6px;\n border: 1px solid #d5d5d5;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n &::-webkit-scrollbar-thumb {\n background: #f5f5f5;\n border-radius: 3px;\n }\n`;\n\nconst StyledTableCell = styled(TableCell, {\n shouldForwardProp: (prop) => prop !== 'isSticky' && prop !== 'titleVariant',\n})<{ isSticky: boolean; titleVariant: 'default' \| 'light' }>(({ theme, isSticky, titleVariant }) => ({\n fontSize: 13,\n fontWeight: titleVariant === 'light' ? 400 : theme.typography.fontWeightMedium,\n color:\n titleVariant === 'light'\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n padding: theme.spacing(1.25, 2),\n whiteSpace: 'nowrap',\n position: isSticky ? 'sticky' : 'relative',\n zIndex: isSticky ? 1 : 'auto',\n}));\n\nconst StyledSpacingContainer = styled('div')`\n overflow: hidden;\n`;\n\nconst StyledTooltip = styled(Tooltip)(({ theme }) => ({\n marginLeft: theme.spacing(0.5),\n svg: {\n fontSize: theme.typography.body1.fontSize,\n },\n}));\n\nconst GenericTable = ({\n data,\n title,\n subTitle,\n showTitle = true,\n onRowClick,\n loading,\n metadata,\n titleVariant = 'default',\n}: GenericTableProps) => {\n const columns = new Set(\n metadata\n .filter((m) => m.isVisible)\n .sort((a, b) => a.ordinal - b.ordinal)\n .map((m) => m.columnName),\n );\n const tableMeta = metadata.reduce<{ [key: string]: GenericTableColumns }>((obj, mData) => {\n obj[mData.columnName] = mData;\n return obj;\n }, {});\n\n const theme = useTheme();\n const isMobile = !useMediaQuery(theme.breakpoints.up('tablet'));\n\n // We never want sticky on mobile - only on desktop\n const firstColumnStylePosition = isMobile ? 'normal' : 'sticky';\n\n const renderTableHeader = () => (\n <TableHead>\n <TableRow>\n {Array.from(columns).map((prop, idx) => {\n const { columnName, columnTitle, align = 'left', tooltip } = tableMeta[prop] \|\| {};\n\n return (\n <StyledTableCell\n key={columnName}\n align={align}\n isSticky={idx === 0 && !isMobile}\n titleVariant={titleVariant}\n >\n <div>\n <span>{columnTitle}</span>\n {tooltip && (\n <StyledTooltip placement=\"right-start\" title={tooltip}>\n <IconButton aria-label=\"Info\" size=\"small\">\n <InfoOutlinedIcon data-~~testid~~=\"InfoOutlinedIcon\" size=\"sm\" />\n </IconButton>\n </StyledTooltip>\n )}\n </div>\n </StyledTableCell>\n );\n })}\n </TableRow>\n </TableHead>\n );\n\n return (\n <StyledContainer>\n {showTitle && <GenericTableTitle subTitle={subTitle} title={title}></GenericTableTitle>}\n <StyledSpacingContainer>\n <HighlightScrollbar>\n <Table\n aria-label={title}\n data-~~testid~~={`generic-table` + (showTitle ? `-${title?.replace(' ', '-').toLowerCase()}` : '')}\n sx={{\n borderTop: '1px solid #e0e0e0',\n height: '10vh',\n }}\n >\n {renderTableHeader()}\n <GenericTableBody\n columns={columns}\n data={data}\n loading={loading}\n meta={tableMeta}\n onRowClick={onRowClick}\n type={firstColumnStylePosition}\n />\n </Table>\n </HighlightScrollbar>\n </StyledSpacingContainer>\n </StyledContainer>\n );\n};\n\nexport default GenericTable;\n"],"names":["StyledContainer","styled","StyledTableCell","TableCell","shouldForwardProp","prop","theme","isSticky","titleVariant","fontSize","fontWeight","typography","fontWeightMedium","color","palette","semantic","text","padding","spacing","whiteSpace","position","zIndex","StyledSpacingContainer","StyledTooltip","Tooltip","marginLeft","svg","body1","GenericTable","data","title","subTitle","showTitle","onRowClick","loading","metadata","columns","Set","filter","m","isVisible","sort","a","b","ordinal","map","columnName","tableMeta","reduce","obj","mData","useTheme","isMobile","useMediaQuery","breakpoints","up","firstColumnStylePosition","_jsxs","children","_jsx","GenericTableTitle","HighlightScrollbar","Table","replace","toLowerCase","sx","borderTop","height","TableHead","TableRow","Array","from","idx","columnTitle","align","tooltip","placement","IconButton","size","InfoOutlinedIcon","GenericTableBody","meta","type"],"mappings":"wmBA6BA,MAAMA,EAAkBC,EAAO,MAAM;;;;;;;;;;;;;;EAgB/BC,EAAkBD,EAAOE,EAAW,CACxCC,kBAAoBC,GAAkB,aAATA,GAAgC,iBAATA,GAD9BJ,EAEqC,EAAGK,QAAOC,WAAUC,mBAAc,CAC7FC,SAAU,GACVC,WAA6B,UAAjBF,EAA2B,IAAMF,EAAMK,WAAWC,iBAC9DC,MACmB,UAAjBL,EACIF,EAAMQ,QAAQC,SAASC,KAAK,aAC5BV,EAAMQ,QAAQC,SAASC,KAAK,eAClCC,QAASX,EAAMY,QAAQ,KAAM,GAC7BC,WAAY,SACZC,SAAUb,EAAW,SAAW,WAChCc,OAAQd,EAAW,EAAI,WAGnBe,EAAyBrB,EAAO,MAAM;;EAItCsB,EAAgBtB,EAAOuB,EAAPvB,EAAgB,EAAGK,YAAO,CAC9CmB,WAAYnB,EAAMY,QAAQ,IAC1BQ,IAAK,CACHjB,SAAUH,EAAMK,WAAWgB,MAAMlB,cAI/BmB,EAAe,EACnBC,OACAC,QACAC,WACAC,aAAY,EACZC,aACAC,UACAC,WACA3B,eAAe,cAEf,MAAM4B,EAAU,IAAIC,IAClBF,EACGG,QAAQC,GAAMA,EAAEC,YAChBC,MAAK,CAACC,EAAGC,IAAMD,EAAEE,QAAUD,EAAEC,UAC7BC,KAAKN,GAAMA,EAAEO,cAEZC,EAAYZ,EAASa,QAA+C,CAACC,EAAKC,KAC9ED,EAAIC,EAAMJ,YAAcI,EACjBD,IACN,CAAA,GAEG3C,EAAQ6C,IACRC,GAAYC,EAAc/C,EAAMgD,YAAYC,GAAG,WAG/CC,EAA2BJ,EAAW,SAAW,SAgCvD,OACEK,EAACzD,EAAe,CAAA0D,SAAA,CACb1B,GAAa2B,EAACC,EAAiB,CAAC7B,SAAUA,EAAUD,MAAOA,IAC5D6B,EAACrC,EAAsB,CAAAoC,SACrBC,EAACE,EAAkB,CAAAH,SACjBD,EAACK,EAAK,CAAA,aACQhC,~~gBACC~~,iBAAmBE,EAAY,IAAIF,GAAOiC,QAAQ,IAAK,KAAKC,gBAAkB,~~IAC3FC~~,GAAI,CACFC,UAAW,oBACXC,OAAQ,QACTT,SAAA,CAxCTC,EAACS,EAAS,CAAAV,SACRC,EAACU,EAAQ,CAAAX,SACNY,MAAMC,KAAKnC,GAASS,KAAI,CAACxC,EAAMmE,KAC9B,MAAM1B,WAAEA,EAAU2B,YAAEA,EAAWC,MAAEA,EAAQ,OAAMC,QAAEA,GAAY5B,EAAU1C,IAAS,CAAA,EAEhF,OACEsD,EAACzD,EAAe,CAEdwE,MAAOA,EACPnE,SAAkB,IAARiE,IAAcpB,EACxB5C,aAAcA,EAAYkD,SAE1BD,mBACEE,EAAA,OAAA,CAAAD,SAAOe,IACNE,GACChB,EAACpC,EAAa,CAACqD,UAAU,cAAc9C,MAAO6C,EAAOjB,SACnDC,EAACkB,EAAU,CAAA,aAAY,OAAOC,KAAK,QAAOpB,SACxCC,EAACoB,EAAgB,CAAA,~~cAAa~~,mBAAmBD,KAAK,~~eAVzDhC~~,UAoCPa,EAACqB,EAAgB,CACf5C,QAASA,EACTP,KAAMA,EACNK,QAASA,EACT+C,KAAMlC,EACNd,WAAYA,EACZiD,KAAM1B"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/GenericTable/index.tsx"],"sourcesContent":["import Table from '@mui/material/Table';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport IconButton from '@fd/components/atoms/IconButton';\nimport styled from '@fd/utilities/styledUtilities';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport InfoOutlinedIcon from '../../../icons/InformationCircle';\nimport GenericTableBody, { type GenericTableColumns } from './GenericTableBody';\nimport GenericTableTitle from './GenericTableTitle';\nimport HighlightScrollbar from './HighlightScrollbar';\n\ninterface GenericTableProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n data?: any[];\n loading?: boolean;\n metadata: GenericTableColumns[];\n // eslint-disable-next-line @typescript-eslint/ban-types\n onRowClick?: Function;\n showTitle?: boolean;\n subTitle?: string;\n title?: string;\n titleVariant?: 'default' \| 'light';\n}\n\nconst StyledContainer = styled('div')`\n overflow-x: auto;\n &::-webkit-scrollbar {\n padding: 2px 0;\n height: 6px;\n border: 1px solid #d5d5d5;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n &::-webkit-scrollbar-thumb {\n background: #f5f5f5;\n border-radius: 3px;\n }\n`;\n\nconst StyledTableCell = styled(TableCell, {\n shouldForwardProp: (prop) => prop !== 'isSticky' && prop !== 'titleVariant',\n})<{ isSticky: boolean; titleVariant: 'default' \| 'light' }>(({ theme, isSticky, titleVariant }) => ({\n fontSize: 13,\n fontWeight: titleVariant === 'light' ? 400 : theme.typography.fontWeightMedium,\n color:\n titleVariant === 'light'\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n padding: theme.spacing(1.25, 2),\n whiteSpace: 'nowrap',\n position: isSticky ? 'sticky' : 'relative',\n zIndex: isSticky ? 1 : 'auto',\n}));\n\nconst StyledSpacingContainer = styled('div')`\n overflow: hidden;\n`;\n\nconst StyledTooltip = styled(Tooltip)(({ theme }) => ({\n marginLeft: theme.spacing(0.5),\n svg: {\n fontSize: theme.typography.body1.fontSize,\n },\n}));\n\nconst GenericTable = ({\n data,\n title,\n subTitle,\n showTitle = true,\n onRowClick,\n loading,\n metadata,\n titleVariant = 'default',\n}: GenericTableProps) => {\n const columns = new Set(\n metadata\n .filter((m) => m.isVisible)\n .sort((a, b) => a.ordinal - b.ordinal)\n .map((m) => m.columnName),\n );\n const tableMeta = metadata.reduce<{ [key: string]: GenericTableColumns }>((obj, mData) => {\n obj[mData.columnName] = mData;\n return obj;\n }, {});\n\n const theme = useTheme();\n const isMobile = !useMediaQuery(theme.breakpoints.up('tablet'));\n\n // We never want sticky on mobile - only on desktop\n const firstColumnStylePosition = isMobile ? 'normal' : 'sticky';\n\n const renderTableHeader = () => (\n <TableHead>\n <TableRow>\n {Array.from(columns).map((prop, idx) => {\n const { columnName, columnTitle, align = 'left', tooltip } = tableMeta[prop] \|\| {};\n\n return (\n <StyledTableCell\n key={columnName}\n align={align}\n isSticky={idx === 0 && !isMobile}\n titleVariant={titleVariant}\n >\n <div>\n <span>{columnTitle}</span>\n {tooltip && (\n <StyledTooltip placement=\"right-start\" title={tooltip}>\n <IconButton aria-label=\"Info\" size=\"small\">\n <InfoOutlinedIcon data-fd=\"InfoOutlinedIcon\" size=\"sm\" />\n </IconButton>\n </StyledTooltip>\n )}\n </div>\n </StyledTableCell>\n );\n })}\n </TableRow>\n </TableHead>\n );\n\n return (\n <StyledContainer>\n {showTitle && <GenericTableTitle subTitle={subTitle} title={title}></GenericTableTitle>}\n <StyledSpacingContainer>\n <HighlightScrollbar>\n <Table\n aria-label={title}\n data-fd={`generic-table` + (showTitle ? `-${title?.replace(' ', '-').toLowerCase()}` : '')}\n sx={{\n borderTop: '1px solid #e0e0e0',\n height: '10vh',\n }}\n >\n {renderTableHeader()}\n <GenericTableBody\n columns={columns}\n data={data}\n loading={loading}\n meta={tableMeta}\n onRowClick={onRowClick}\n type={firstColumnStylePosition}\n />\n </Table>\n </HighlightScrollbar>\n </StyledSpacingContainer>\n </StyledContainer>\n );\n};\n\nexport default GenericTable;\n"],"names":["StyledContainer","styled","StyledTableCell","TableCell","shouldForwardProp","prop","theme","isSticky","titleVariant","fontSize","fontWeight","typography","fontWeightMedium","color","palette","semantic","text","padding","spacing","whiteSpace","position","zIndex","StyledSpacingContainer","StyledTooltip","Tooltip","marginLeft","svg","body1","GenericTable","data","title","subTitle","showTitle","onRowClick","loading","metadata","columns","Set","filter","m","isVisible","sort","a","b","ordinal","map","columnName","tableMeta","reduce","obj","mData","useTheme","isMobile","useMediaQuery","breakpoints","up","firstColumnStylePosition","_jsxs","children","_jsx","GenericTableTitle","HighlightScrollbar","Table","replace","toLowerCase","sx","borderTop","height","TableHead","TableRow","Array","from","idx","columnTitle","align","tooltip","placement","IconButton","size","InfoOutlinedIcon","GenericTableBody","meta","type"],"mappings":"wmBA6BA,MAAMA,EAAkBC,EAAO,MAAM;;;;;;;;;;;;;;EAgB/BC,EAAkBD,EAAOE,EAAW,CACxCC,kBAAoBC,GAAkB,aAATA,GAAgC,iBAATA,GAD9BJ,EAEqC,EAAGK,QAAOC,WAAUC,mBAAc,CAC7FC,SAAU,GACVC,WAA6B,UAAjBF,EAA2B,IAAMF,EAAMK,WAAWC,iBAC9DC,MACmB,UAAjBL,EACIF,EAAMQ,QAAQC,SAASC,KAAK,aAC5BV,EAAMQ,QAAQC,SAASC,KAAK,eAClCC,QAASX,EAAMY,QAAQ,KAAM,GAC7BC,WAAY,SACZC,SAAUb,EAAW,SAAW,WAChCc,OAAQd,EAAW,EAAI,WAGnBe,EAAyBrB,EAAO,MAAM;;EAItCsB,EAAgBtB,EAAOuB,EAAPvB,EAAgB,EAAGK,YAAO,CAC9CmB,WAAYnB,EAAMY,QAAQ,IAC1BQ,IAAK,CACHjB,SAAUH,EAAMK,WAAWgB,MAAMlB,cAI/BmB,EAAe,EACnBC,OACAC,QACAC,WACAC,aAAY,EACZC,aACAC,UACAC,WACA3B,eAAe,cAEf,MAAM4B,EAAU,IAAIC,IAClBF,EACGG,QAAQC,GAAMA,EAAEC,YAChBC,MAAK,CAACC,EAAGC,IAAMD,EAAEE,QAAUD,EAAEC,UAC7BC,KAAKN,GAAMA,EAAEO,cAEZC,EAAYZ,EAASa,QAA+C,CAACC,EAAKC,KAC9ED,EAAIC,EAAMJ,YAAcI,EACjBD,IACN,CAAA,GAEG3C,EAAQ6C,IACRC,GAAYC,EAAc/C,EAAMgD,YAAYC,GAAG,WAG/CC,EAA2BJ,EAAW,SAAW,SAgCvD,OACEK,EAACzD,EAAe,CAAA0D,SAAA,CACb1B,GAAa2B,EAACC,EAAiB,CAAC7B,SAAUA,EAAUD,MAAOA,IAC5D6B,EAACrC,EAAsB,CAAAoC,SACrBC,EAACE,EAAkB,CAAAH,SACjBD,EAACK,EAAK,CAAA,aACQhC,YACH,iBAAmBE,EAAY,IAAIF,GAAOiC,QAAQ,IAAK,KAAKC,gBAAkB,IACvFC,GAAI,CACFC,UAAW,oBACXC,OAAQ,QACTT,SAAA,CAxCTC,EAACS,EAAS,CAAAV,SACRC,EAACU,EAAQ,CAAAX,SACNY,MAAMC,KAAKnC,GAASS,KAAI,CAACxC,EAAMmE,KAC9B,MAAM1B,WAAEA,EAAU2B,YAAEA,EAAWC,MAAEA,EAAQ,OAAMC,QAAEA,GAAY5B,EAAU1C,IAAS,CAAA,EAEhF,OACEsD,EAACzD,EAAe,CAEdwE,MAAOA,EACPnE,SAAkB,IAARiE,IAAcpB,EACxB5C,aAAcA,EAAYkD,SAE1BD,mBACEE,EAAA,OAAA,CAAAD,SAAOe,IACNE,GACChB,EAACpC,EAAa,CAACqD,UAAU,cAAc9C,MAAO6C,EAAOjB,SACnDC,EAACkB,EAAU,CAAA,aAAY,OAAOC,KAAK,QAAOpB,SACxCC,EAACoB,EAAgB,CAAA,UAAS,mBAAmBD,KAAK,eAVrDhC,UAoCPa,EAACqB,EAAgB,CACf5C,QAASA,EACTP,KAAMA,EACNK,QAASA,EACT+C,KAAMlC,EACNd,WAAYA,EACZiD,KAAM1B"}

package/dist/components/molecules/Modal/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Modal"),i=require("@mui/material/Box"),r=require("../../atoms/Button/index.cjs.js"),o=require("@mui/material/Typography"),n=require("@mui/material/Stack"),s=require("@mui/material/styles"),l=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),c=require("../../../themes/tokens/breakpoints/breakpoints.cjs.js"),u=require("../../atoms/IconContainer/index.cjs.js"),m=require("../../Spacer/index.cjs.js");const p={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"}},x=e=>p.iconContainer[e](),h=s.styled(i,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(c.breakpointValues.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),g=s.styled("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),b=s.styled(n)({justifyContent:"flex-start",alignItems:"center"}),f=s.styled(i)((({theme:e})=>({[e.breakpoints.down(c.breakpointValues.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),j=t.memo((({open:t,onClose:i,tone:n="default",size:s="large",title:p,description:j,property:y,actions:w=[],className:v,"data-testid":k,children:q})=>{const z=d(),$=l(z.breakpoints.down(c.breakpointValues.tablet)),C="string"==typeof y,B=w.length>0;return e.jsx(a,{"aria-describedby":`modal-description-${k??"default"}`,"aria-labelledby":`modal-title-${k??"default"}`,className:v,"data-testid":k,onClose:i,open:t,children:e.jsxs(h,{size:s,tone:n,children:[e.jsxs(f,{children:[y&&e.jsxs(e.Fragment,{children:[C?e.jsx(g,{alt:p??"Modal image",src:y}):e.jsx(u,{icon:y,style:"filled",tone:x(n)}),e.jsx(m,{size:16,variant:"horizontal"})]}),p&&e.jsx(o,{component:"h2",id:`modal-title-${k??"default"}`,variant:"h3Strong",children:p}),p&&j&&e.jsx(m,{size:8,variant:"horizontal"}),j&&e.jsx(o,{color:z.palette.semantic.text["text-weak"],id:`modal-description-${k??"default"}`,variant:"b1Weak",children:j}),q&&e.jsxs(e.Fragment,{children:[e.jsx(m,{size:24,variant:"horizontal"}),q]})]}),B&&e.jsxs(e.Fragment,{children:[e.jsx(m,{size:24,variant:"horizontal"}),e.jsx(b,{direction:$?"column":"row-reverse",spacing:2,children:e.jsx(b,{direction:$?"column-reverse":"row",spacing:2,width:$?"100%":"fit-content",children:w.map(((t,a)=>{const{label:i,id:o,...n}=t;return e.jsx(r.Button,{fdKey:o??`modal-action-${i.replace(/\s+/g,"-").toLowerCase()}`,fullWidth:$,...n,children:i},o??`modal-action-${a}-${i.replace(/\s+/g,"-").toLowerCase()}`)}))})})]})]})})}));j.displayName="Modal",module.exports=j;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Modal"),i=require("@mui/material/Box"),r=require("../../atoms/Button/index.cjs.js"),o=require("@mui/material/Typography"),n=require("@mui/material/Stack"),s=require("@mui/material/styles"),l=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),c=require("../../../themes/tokens/breakpoints/breakpoints.cjs.js"),u=require("../../atoms/IconContainer/index.cjs.js"),m=require("../../Spacer/index.cjs.js");const p={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"}},x=e=>p.iconContainer[e](),h=s.styled(i,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(c.breakpointValues.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),g=s.styled("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),f=s.styled(n)({justifyContent:"flex-start",alignItems:"center"}),b=s.styled(i)((({theme:e})=>({[e.breakpoints.down(c.breakpointValues.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),j=t.memo((({open:t,onClose:i,tone:n="default",size:s="large",title:p,description:j,property:y,actions:w=[],className:v,fdKey:k,children:q})=>{const z=d(),$=l(z.breakpoints.down(c.breakpointValues.tablet)),C="string"==typeof y,B=w.length>0;return e.jsx(a,{"aria-describedby":`modal-description-${k??"default"}`,"aria-labelledby":`modal-title-${k??"default"}`,className:v,"data-fd":k,onClose:i,open:t,children:e.jsxs(h,{size:s,tone:n,children:[e.jsxs(b,{children:[y&&e.jsxs(e.Fragment,{children:[C?e.jsx(g,{alt:p??"Modal image",src:y}):e.jsx(u,{icon:y,style:"filled",tone:x(n)}),e.jsx(m,{size:16,variant:"horizontal"})]}),p&&e.jsx(o,{component:"h2",id:`modal-title-${k??"default"}`,variant:"h3Strong",children:p}),p&&j&&e.jsx(m,{size:8,variant:"horizontal"}),j&&e.jsx(o,{color:z.palette.semantic.text["text-weak"],id:`modal-description-${k??"default"}`,variant:"b1Weak",children:j}),q&&e.jsxs(e.Fragment,{children:[e.jsx(m,{size:24,variant:"horizontal"}),q]})]}),B&&e.jsxs(e.Fragment,{children:[e.jsx(m,{size:24,variant:"horizontal"}),e.jsx(f,{direction:$?"column":"row-reverse",spacing:2,children:e.jsx(f,{direction:$?"column-reverse":"row",spacing:2,width:$?"100%":"fit-content",children:w.map(((t,a)=>{const{label:i,id:o,...n}=t;return e.jsx(r.Button,{fdKey:o??`modal-action-${i.replace(/\s+/g,"-").toLowerCase()}`,fullWidth:$,...n,children:i},o??`modal-action-${a}-${i.replace(/\s+/g,"-").toLowerCase()}`)}))})})]})]})})}));j.displayName="Modal",module.exports=j;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/Modal/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type /\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/* Visual tone of the modal /\nexport type ModalTones = 'default' \| 'destructive';\n\n/* Size variants for the modal /\nexport type ModalSizes = 'large' \| 'small';\n\n/* Action button configuration for Modal /\nexport interface ModalAction extends Omit<ButtonProps, 'children' \| 'fdKey' \| 'fullWidth'> {\n /* Label text for the button /\n label: string;\n /* Optional unique identifier for the button /\n id?: string;\n}\n\n/* Props for the Modal component /\nexport interface ModalProps {\n /* Whether the modal is open /\n open: boolean;\n /* Callback function when the modal is closed /\n onClose: () => void;\n /* Visual tone of the modal /\n tone?: ModalTones;\n /* Size variant of the modal /\n size?: ModalSizes;\n /* Main heading text of the modal /\n title?: string;\n /* Detailed description text of the modal /\n description?: string;\n /* Property element to display - can be an image URL (string) or an icon component (ReactNode) /\n property?: React.ReactNode \| string;\n /* Array of action buttons to display /\n actions?: ModalAction[];\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n 'data-testid'?: string;\n /* Content to display in the modal /\n children?: React.ReactNode;\n}\n\nconst COLOURS = {\n iconContainer: {\n default: (): IconContainerTones => 'neutral',\n destructive: (): IconContainerTones => 'destructive',\n },\n button: {\n default: (): ButtonProps['color'] => 'primary',\n destructive: (): ButtonProps['color'] => 'error',\n },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n tone: ModalTones;\n size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n position: 'absolute',\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n border: 'none',\n borderRadius: theme.radius['radius-16'],\n padding: theme.spacing(4),\n boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n outline: 'none',\n maxHeight: '90vh',\n overflowY: 'auto',\n\n // Desktop styles (default)\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n maxWidth: size === 'large' ? '700px' : '500px',\n width: `calc(100% - ${theme.spacing(4)})`,\n\n // Tablet & Mobile styles\n [theme.breakpoints.down(breakpointValues.tablet)]: {\n // Small size at bottom of screen\n ...(size === 'small' && {\n maxWidth: `calc(100% - ${theme.spacing(4)})`,\n width: `calc(100% - ${theme.spacing(4)})`,\n top: 'auto',\n bottom: theme.spacing(2),\n left: theme.spacing(2),\n right: theme.spacing(2),\n transform: 'none',\n maxHeight: '70vh',\n overflowY: 'auto',\n // Flex layout to push buttons to bottom when content is small\n display: 'flex',\n flexDirection: 'column',\n }),\n\n // Large size takes full screen\n ...(size === 'large' && {\n height: `calc(100% - ${theme.spacing(4)})`,\n maxHeight: `calc(100% - ${theme.spacing(4)})`,\n overflowY: 'auto',\n // Flex layout to push buttons to bottom when content is small\n display: 'flex',\n flexDirection: 'column',\n }),\n },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n width: '100%',\n height: 'auto',\n borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n justifyContent: 'flex-start',\n alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n [theme.breakpoints.down(breakpointValues.tablet)]: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n minHeight: 'min-content',\n paddingBottom: theme.spacing(3),\n },\n}));\n\n/\n Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n ({\n open,\n onClose,\n tone = 'default',\n size = 'large',\n title,\n description,\n property,\n actions = [],\n className,\n 'data-testid': dataTestId,\n children,\n }: ModalProps) => {\n const theme = useTheme();\n const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n const isImageUrl = typeof property === 'string';\n const showButtonSection = actions.length > 0;\n\n return (\n <MuiModal\n aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n className={className}\n data-testid={dataTestId}\n onClose={onClose}\n open={open}\n >\n <StyledModalBox size={size} tone={tone}>\n <StyledContentContainer>\n {property && (\n <>\n {isImageUrl ? (\n <StyledImage alt={title ?? 'Modal image'} src={property} />\n ) : (\n <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n )}\n <Spacer size={16} variant=\"horizontal\" />\n </>\n )}\n {title && (\n <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n {title}\n </Typography>\n )}\n {title && description && <Spacer size={8} variant=\"horizontal\" />}\n {description && (\n <Typography\n color={theme.palette.semantic.text['text-weak']}\n id={`modal-description-${dataTestId ?? 'default'}`}\n variant=\"b1Weak\"\n >\n {description}\n </Typography>\n )}\n {children && (\n <>\n <Spacer size={24} variant=\"horizontal\" />\n {children}\n </>\n )}\n </StyledContentContainer>\n {showButtonSection && (\n <>\n <Spacer size={24} variant=\"horizontal\" />\n <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n <StyledButtonStack\n direction={isTabletOrMobile ? 'column-reverse' : 'row'}\n spacing={2}\n width={isTabletOrMobile ? '100%' : 'fit-content'}\n >\n {actions.map((action, index) => {\n const { label, id, ...buttonProps } = action;\n return (\n <Button\n key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n fullWidth={isTabletOrMobile}\n {...buttonProps}\n >\n {label}\n </Button>\n );\n })}\n </StyledButtonStack>\n </StyledButtonStack>\n </>\n )}\n </StyledModalBox>\n </MuiModal>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","fdKey","replace","toLowerCase","fullWidth","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type /\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/* Visual tone of the modal /\nexport type ModalTones = 'default' \| 'destructive';\n\n/* Size variants for the modal /\nexport type ModalSizes = 'large' \| 'small';\n\n/* Action button configuration for Modal /\nexport interface ModalAction extends Omit<ButtonProps, 'children' \| 'fdKey' \| 'fullWidth'> {\n /* Label text for the button /\n label: string;\n /* Optional unique identifier for the button /\n id?: string;\n}\n\n/* Props for the Modal component /\nexport interface ModalProps {\n /* Whether the modal is open /\n open: boolean;\n /* Callback function when the modal is closed /\n onClose: () => void;\n /* Visual tone of the modal /\n tone?: ModalTones;\n /* Size variant of the modal /\n size?: ModalSizes;\n /* Main heading text of the modal /\n title?: string;\n /* Detailed description text of the modal /\n description?: string;\n /* Property element to display - can be an image URL (string) or an icon component (ReactNode) /\n property?: React.ReactNode \| string;\n /* Array of action buttons to display /\n actions?: ModalAction[];\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Content to display in the modal /\n children?: React.ReactNode;\n}\n\nconst COLOURS = {\n iconContainer: {\n default: (): IconContainerTones => 'neutral',\n destructive: (): IconContainerTones => 'destructive',\n },\n button: {\n default: (): ButtonProps['color'] => 'primary',\n destructive: (): ButtonProps['color'] => 'error',\n },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n tone: ModalTones;\n size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n position: 'absolute',\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n border: 'none',\n borderRadius: theme.radius['radius-16'],\n padding: theme.spacing(4),\n boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n outline: 'none',\n maxHeight: '90vh',\n overflowY: 'auto',\n\n // Desktop styles (default)\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n maxWidth: size === 'large' ? '700px' : '500px',\n width: `calc(100% - ${theme.spacing(4)})`,\n\n // Tablet & Mobile styles\n [theme.breakpoints.down(breakpointValues.tablet)]: {\n // Small size at bottom of screen\n ...(size === 'small' && {\n maxWidth: `calc(100% - ${theme.spacing(4)})`,\n width: `calc(100% - ${theme.spacing(4)})`,\n top: 'auto',\n bottom: theme.spacing(2),\n left: theme.spacing(2),\n right: theme.spacing(2),\n transform: 'none',\n maxHeight: '70vh',\n overflowY: 'auto',\n // Flex layout to push buttons to bottom when content is small\n display: 'flex',\n flexDirection: 'column',\n }),\n\n // Large size takes full screen\n ...(size === 'large' && {\n height: `calc(100% - ${theme.spacing(4)})`,\n maxHeight: `calc(100% - ${theme.spacing(4)})`,\n overflowY: 'auto',\n // Flex layout to push buttons to bottom when content is small\n display: 'flex',\n flexDirection: 'column',\n }),\n },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n width: '100%',\n height: 'auto',\n borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n justifyContent: 'flex-start',\n alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n [theme.breakpoints.down(breakpointValues.tablet)]: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n minHeight: 'min-content',\n paddingBottom: theme.spacing(3),\n },\n}));\n\n/\n Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n ({\n open,\n onClose,\n tone = 'default',\n size = 'large',\n title,\n description,\n property,\n actions = [],\n className,\n fdKey,\n children,\n }: ModalProps) => {\n const theme = useTheme();\n const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n const isImageUrl = typeof property === 'string';\n const showButtonSection = actions.length > 0;\n\n return (\n <MuiModal\n aria-describedby={`modal-description-${fdKey ?? 'default'}`}\n aria-labelledby={`modal-title-${fdKey ?? 'default'}`}\n className={className}\n data-fd={fdKey}\n onClose={onClose}\n open={open}\n >\n <StyledModalBox size={size} tone={tone}>\n <StyledContentContainer>\n {property && (\n <>\n {isImageUrl ? (\n <StyledImage alt={title ?? 'Modal image'} src={property} />\n ) : (\n <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n )}\n <Spacer size={16} variant=\"horizontal\" />\n </>\n )}\n {title && (\n <Typography component=\"h2\" id={`modal-title-${fdKey ?? 'default'}`} variant=\"h3Strong\">\n {title}\n </Typography>\n )}\n {title && description && <Spacer size={8} variant=\"horizontal\" />}\n {description && (\n <Typography\n color={theme.palette.semantic.text['text-weak']}\n id={`modal-description-${fdKey ?? 'default'}`}\n variant=\"b1Weak\"\n >\n {description}\n </Typography>\n )}\n {children && (\n <>\n <Spacer size={24} variant=\"horizontal\" />\n {children}\n </>\n )}\n </StyledContentContainer>\n {showButtonSection && (\n <>\n <Spacer size={24} variant=\"horizontal\" />\n <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n <StyledButtonStack\n direction={isTabletOrMobile ? 'column-reverse' : 'row'}\n spacing={2}\n width={isTabletOrMobile ? '100%' : 'fit-content'}\n >\n {actions.map((action, index) => {\n const { label, id, ...buttonProps } = action;\n return (\n <Button\n key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n fullWidth={isTabletOrMobile}\n {...buttonProps}\n >\n {label}\n </Button>\n );\n })}\n </StyledButtonStack>\n </StyledButtonStack>\n </>\n )}\n </StyledModalBox>\n </MuiModal>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","fdKey","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","replace","toLowerCase","fullWidth","displayName"],"mappings":"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"}

package/dist/components/molecules/Modal/index.d.ts CHANGED Viewed

@@ -34,7 +34,7 @@ interface ModalProps {
     /** Additional CSS class names */
     className?: string;
     /** Test ID for testing and automation */
-    'data-testid'?: string;
+    fdKey?: string;
     /** Content to display in the modal */
     children?: React.ReactNode;
 }
@@ -45,7 +45,7 @@ interface ModalProps {
  * The component is wrapped with React.memo to optimize performance by preventing unnecessary
  * re-renders when the component's props haven't changed.
  */
-declare const Modal: react.MemoExoticComponent<({ open, onClose, tone, size, title, description, property, actions, className, "data-testid": dataTestId, children, }: ModalProps) => react_jsx_runtime.JSX.Element>;
+declare const Modal: react.MemoExoticComponent<({ open, onClose, tone, size, title, description, property, actions, className, fdKey, children, }: ModalProps) => react_jsx_runtime.JSX.Element>;
 export { Modal as default };
 export type { ModalAction, ModalProps, ModalSizes, ModalTones };

package/dist/components/molecules/Modal/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{memo as a}from"react";import o from"@mui/material/Modal";import r from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import l from"@mui/material/Typography";import s from"@mui/material/Stack";import{styled as d}from"@mui/material/styles";import m from"@mui/material/useMediaQuery";import c from"@mui/material/styles/useTheme";import{breakpointValues as p}from"../../../themes/tokens/breakpoints/breakpoints.js";import u from"../../atoms/IconContainer/index.js";import h from"../../Spacer/index.js";const f={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"}},g=e=>f.iconContainer[e](),x=d(r,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(p.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),b=d("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),w=d(s)({justifyContent:"flex-start",alignItems:"center"}),y=d(r)((({theme:e})=>({[e.breakpoints.down(p.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),v=a((({open:a,onClose:r,tone:s="default",size:d="large",title:f,description:v,property:k,actions:z=[],className:$,"data-testid":C,children:j})=>{const H=c(),M=m(H.breakpoints.down(p.tablet)),S="string"==typeof k,W=z.length>0;return e(o,{"aria-describedby":`modal-description-${C??"default"}`,"aria-labelledby":`modal-title-${C??"default"}`,className:$,"data-testid":C,onClose:r,open:a,children:t(x,{size:d,tone:s,children:[t(y,{children:[k&&t(i,{children:[S?e(b,{alt:f??"Modal image",src:k}):e(u,{icon:k,style:"filled",tone:g(s)}),e(h,{size:16,variant:"horizontal"})]}),f&&e(l,{component:"h2",id:`modal-title-${C??"default"}`,variant:"h3Strong",children:f}),f&&v&&e(h,{size:8,variant:"horizontal"}),v&&e(l,{color:H.palette.semantic.text["text-weak"],id:`modal-description-${C??"default"}`,variant:"b1Weak",children:v}),j&&t(i,{children:[e(h,{size:24,variant:"horizontal"}),j]})]}),W&&t(i,{children:[e(h,{size:24,variant:"horizontal"}),e(w,{direction:M?"column":"row-reverse",spacing:2,children:e(w,{direction:M?"column-reverse":"row",spacing:2,width:M?"100%":"fit-content",children:z.map(((t,i)=>{const{label:a,id:o,...r}=t;return e(n,{fdKey:o??`modal-action-${a.replace(/\s+/g,"-").toLowerCase()}`,fullWidth:M,...r,children:a},o??`modal-action-${i}-${a.replace(/\s+/g,"-").toLowerCase()}`)}))})})]})]})})}));v.displayName="Modal";export{v as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{memo as a}from"react";import o from"@mui/material/Modal";import r from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import l from"@mui/material/Typography";import s from"@mui/material/Stack";import{styled as d}from"@mui/material/styles";import m from"@mui/material/useMediaQuery";import c from"@mui/material/styles/useTheme";import{breakpointValues as p}from"../../../themes/tokens/breakpoints/breakpoints.js";import u from"../../atoms/IconContainer/index.js";import h from"../../Spacer/index.js";const f={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"}},g=e=>f.iconContainer[e](),x=d(r,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(p.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),b=d("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),w=d(s)({justifyContent:"flex-start",alignItems:"center"}),y=d(r)((({theme:e})=>({[e.breakpoints.down(p.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),v=a((({open:a,onClose:r,tone:s="default",size:d="large",title:f,description:v,property:k,actions:z=[],className:$,fdKey:C,children:j})=>{const H=c(),M=m(H.breakpoints.down(p.tablet)),S="string"==typeof k,W=z.length>0;return e(o,{"aria-describedby":`modal-description-${C??"default"}`,"aria-labelledby":`modal-title-${C??"default"}`,className:$,"data-fd":C,onClose:r,open:a,children:t(x,{size:d,tone:s,children:[t(y,{children:[k&&t(i,{children:[S?e(b,{alt:f??"Modal image",src:k}):e(u,{icon:k,style:"filled",tone:g(s)}),e(h,{size:16,variant:"horizontal"})]}),f&&e(l,{component:"h2",id:`modal-title-${C??"default"}`,variant:"h3Strong",children:f}),f&&v&&e(h,{size:8,variant:"horizontal"}),v&&e(l,{color:H.palette.semantic.text["text-weak"],id:`modal-description-${C??"default"}`,variant:"b1Weak",children:v}),j&&t(i,{children:[e(h,{size:24,variant:"horizontal"}),j]})]}),W&&t(i,{children:[e(h,{size:24,variant:"horizontal"}),e(w,{direction:M?"column":"row-reverse",spacing:2,children:e(w,{direction:M?"column-reverse":"row",spacing:2,width:M?"100%":"fit-content",children:z.map(((t,i)=>{const{label:a,id:o,...r}=t;return e(n,{fdKey:o??`modal-action-${a.replace(/\s+/g,"-").toLowerCase()}`,fullWidth:M,...r,children:a},o??`modal-action-${i}-${a.replace(/\s+/g,"-").toLowerCase()}`)}))})})]})]})})}));v.displayName="Modal";export{v as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type /\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/* Visual tone of the modal /\nexport type ModalTones = 'default' \| 'destructive';\n\n/* Size variants for the modal /\nexport type ModalSizes = 'large' \| 'small';\n\n/* Action button configuration for Modal /\nexport interface ModalAction extends Omit<ButtonProps, 'children' \| 'fdKey' \| 'fullWidth'> {\n /* Label text for the button /\n label: string;\n /* Optional unique identifier for the button /\n id?: string;\n}\n\n/* Props for the Modal component /\nexport interface ModalProps {\n /* Whether the modal is open /\n open: boolean;\n /* Callback function when the modal is closed /\n onClose: () => void;\n /* Visual tone of the modal /\n tone?: ModalTones;\n /* Size variant of the modal /\n size?: ModalSizes;\n /* Main heading text of the modal /\n title?: string;\n /* Detailed description text of the modal /\n description?: string;\n /* Property element to display - can be an image URL (string) or an icon component (ReactNode) /\n property?: React.ReactNode \| string;\n /* Array of action buttons to display /\n actions?: ModalAction[];\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n 'data-testid'?: string;\n /* Content to display in the modal /\n children?: React.ReactNode;\n}\n\nconst COLOURS = {\n iconContainer: {\n default: (): IconContainerTones => 'neutral',\n destructive: (): IconContainerTones => 'destructive',\n },\n button: {\n default: (): ButtonProps['color'] => 'primary',\n destructive: (): ButtonProps['color'] => 'error',\n },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n tone: ModalTones;\n size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n position: 'absolute',\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n border: 'none',\n borderRadius: theme.radius['radius-16'],\n padding: theme.spacing(4),\n boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n outline: 'none',\n maxHeight: '90vh',\n overflowY: 'auto',\n\n // Desktop styles (default)\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n maxWidth: size === 'large' ? '700px' : '500px',\n width: `calc(100% - ${theme.spacing(4)})`,\n\n // Tablet & Mobile styles\n [theme.breakpoints.down(breakpointValues.tablet)]: {\n // Small size at bottom of screen\n ...(size === 'small' && {\n maxWidth: `calc(100% - ${theme.spacing(4)})`,\n width: `calc(100% - ${theme.spacing(4)})`,\n top: 'auto',\n bottom: theme.spacing(2),\n left: theme.spacing(2),\n right: theme.spacing(2),\n transform: 'none',\n maxHeight: '70vh',\n overflowY: 'auto',\n // Flex layout to push buttons to bottom when content is small\n display: 'flex',\n flexDirection: 'column',\n }),\n\n // Large size takes full screen\n ...(size === 'large' && {\n height: `calc(100% - ${theme.spacing(4)})`,\n maxHeight: `calc(100% - ${theme.spacing(4)})`,\n overflowY: 'auto',\n // Flex layout to push buttons to bottom when content is small\n display: 'flex',\n flexDirection: 'column',\n }),\n },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n width: '100%',\n height: 'auto',\n borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n justifyContent: 'flex-start',\n alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n [theme.breakpoints.down(breakpointValues.tablet)]: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n minHeight: 'min-content',\n paddingBottom: theme.spacing(3),\n },\n}));\n\n/\n Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n ({\n open,\n onClose,\n tone = 'default',\n size = 'large',\n title,\n description,\n property,\n actions = [],\n className,\n 'data-testid': dataTestId,\n children,\n }: ModalProps) => {\n const theme = useTheme();\n const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n const isImageUrl = typeof property === 'string';\n const showButtonSection = actions.length > 0;\n\n return (\n <MuiModal\n aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n className={className}\n data-testid={dataTestId}\n onClose={onClose}\n open={open}\n >\n <StyledModalBox size={size} tone={tone}>\n <StyledContentContainer>\n {property && (\n <>\n {isImageUrl ? (\n <StyledImage alt={title ?? 'Modal image'} src={property} />\n ) : (\n <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n )}\n <Spacer size={16} variant=\"horizontal\" />\n </>\n )}\n {title && (\n <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n {title}\n </Typography>\n )}\n {title && description && <Spacer size={8} variant=\"horizontal\" />}\n {description && (\n <Typography\n color={theme.palette.semantic.text['text-weak']}\n id={`modal-description-${dataTestId ?? 'default'}`}\n variant=\"b1Weak\"\n >\n {description}\n </Typography>\n )}\n {children && (\n <>\n <Spacer size={24} variant=\"horizontal\" />\n {children}\n </>\n )}\n </StyledContentContainer>\n {showButtonSection && (\n <>\n <Spacer size={24} variant=\"horizontal\" />\n <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n <StyledButtonStack\n direction={isTabletOrMobile ? 'column-reverse' : 'row'}\n spacing={2}\n width={isTabletOrMobile ? '100%' : 'fit-content'}\n >\n {actions.map((action, index) => {\n const { label, id, ...buttonProps } = action;\n return (\n <Button\n key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n fullWidth={isTabletOrMobile}\n {...buttonProps}\n >\n {label}\n </Button>\n );\n })}\n </StyledButtonStack>\n </StyledButtonStack>\n </>\n )}\n </StyledModalBox>\n </MuiModal>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","fdKey","replace","toLowerCase","fullWidth","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type /\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/* Visual tone of the modal /\nexport type ModalTones = 'default' \| 'destructive';\n\n/* Size variants for the modal /\nexport type ModalSizes = 'large' \| 'small';\n\n/* Action button configuration for Modal /\nexport interface ModalAction extends Omit<ButtonProps, 'children' \| 'fdKey' \| 'fullWidth'> {\n /* Label text for the button /\n label: string;\n /* Optional unique identifier for the button /\n id?: string;\n}\n\n/* Props for the Modal component /\nexport interface ModalProps {\n /* Whether the modal is open /\n open: boolean;\n /* Callback function when the modal is closed /\n onClose: () => void;\n /* Visual tone of the modal /\n tone?: ModalTones;\n /* Size variant of the modal /\n size?: ModalSizes;\n /* Main heading text of the modal /\n title?: string;\n /* Detailed description text of the modal /\n description?: string;\n /* Property element to display - can be an image URL (string) or an icon component (ReactNode) /\n property?: React.ReactNode \| string;\n /* Array of action buttons to display /\n actions?: ModalAction[];\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Content to display in the modal /\n children?: React.ReactNode;\n}\n\nconst COLOURS = {\n iconContainer: {\n default: (): IconContainerTones => 'neutral',\n destructive: (): IconContainerTones => 'destructive',\n },\n button: {\n default: (): ButtonProps['color'] => 'primary',\n destructive: (): ButtonProps['color'] => 'error',\n },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n tone: ModalTones;\n size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n position: 'absolute',\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n border: 'none',\n borderRadius: theme.radius['radius-16'],\n padding: theme.spacing(4),\n boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n outline: 'none',\n maxHeight: '90vh',\n overflowY: 'auto',\n\n // Desktop styles (default)\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n maxWidth: size === 'large' ? '700px' : '500px',\n width: `calc(100% - ${theme.spacing(4)})`,\n\n // Tablet & Mobile styles\n [theme.breakpoints.down(breakpointValues.tablet)]: {\n // Small size at bottom of screen\n ...(size === 'small' && {\n maxWidth: `calc(100% - ${theme.spacing(4)})`,\n width: `calc(100% - ${theme.spacing(4)})`,\n top: 'auto',\n bottom: theme.spacing(2),\n left: theme.spacing(2),\n right: theme.spacing(2),\n transform: 'none',\n maxHeight: '70vh',\n overflowY: 'auto',\n // Flex layout to push buttons to bottom when content is small\n display: 'flex',\n flexDirection: 'column',\n }),\n\n // Large size takes full screen\n ...(size === 'large' && {\n height: `calc(100% - ${theme.spacing(4)})`,\n maxHeight: `calc(100% - ${theme.spacing(4)})`,\n overflowY: 'auto',\n // Flex layout to push buttons to bottom when content is small\n display: 'flex',\n flexDirection: 'column',\n }),\n },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n width: '100%',\n height: 'auto',\n borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n justifyContent: 'flex-start',\n alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n [theme.breakpoints.down(breakpointValues.tablet)]: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n minHeight: 'min-content',\n paddingBottom: theme.spacing(3),\n },\n}));\n\n/\n Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n ({\n open,\n onClose,\n tone = 'default',\n size = 'large',\n title,\n description,\n property,\n actions = [],\n className,\n fdKey,\n children,\n }: ModalProps) => {\n const theme = useTheme();\n const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n const isImageUrl = typeof property === 'string';\n const showButtonSection = actions.length > 0;\n\n return (\n <MuiModal\n aria-describedby={`modal-description-${fdKey ?? 'default'}`}\n aria-labelledby={`modal-title-${fdKey ?? 'default'}`}\n className={className}\n data-fd={fdKey}\n onClose={onClose}\n open={open}\n >\n <StyledModalBox size={size} tone={tone}>\n <StyledContentContainer>\n {property && (\n <>\n {isImageUrl ? (\n <StyledImage alt={title ?? 'Modal image'} src={property} />\n ) : (\n <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n )}\n <Spacer size={16} variant=\"horizontal\" />\n </>\n )}\n {title && (\n <Typography component=\"h2\" id={`modal-title-${fdKey ?? 'default'}`} variant=\"h3Strong\">\n {title}\n </Typography>\n )}\n {title && description && <Spacer size={8} variant=\"horizontal\" />}\n {description && (\n <Typography\n color={theme.palette.semantic.text['text-weak']}\n id={`modal-description-${fdKey ?? 'default'}`}\n variant=\"b1Weak\"\n >\n {description}\n </Typography>\n )}\n {children && (\n <>\n <Spacer size={24} variant=\"horizontal\" />\n {children}\n </>\n )}\n </StyledContentContainer>\n {showButtonSection && (\n <>\n <Spacer size={24} variant=\"horizontal\" />\n <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n <StyledButtonStack\n direction={isTabletOrMobile ? 'column-reverse' : 'row'}\n spacing={2}\n width={isTabletOrMobile ? '100%' : 'fit-content'}\n >\n {actions.map((action, index) => {\n const { label, id, ...buttonProps } = action;\n return (\n <Button\n key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n fullWidth={isTabletOrMobile}\n {...buttonProps}\n >\n {label}\n </Button>\n );\n })}\n </StyledButtonStack>\n </StyledButtonStack>\n </>\n )}\n </StyledModalBox>\n </MuiModal>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","fdKey","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","replace","toLowerCase","fullWidth","displayName"],"mappings":"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"}