@quillsql/react 2.10.39 → 2.11.0

package/dist/esm/components/Chart/LineChart.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
+export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, customPrimaryColor, customComparisonColor, singlePointStyle, }: {
     colors?: string[];
     yAxisFields: any[];
     data: any[];
@@ -13,5 +13,9 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
     hideXAxis: boolean;
     hideYAxis: boolean;
     hideCartesianGrid: boolean;
+    dashedComparison: boolean;
+    customPrimaryColor: string | undefined;
+    customComparisonColor: string | undefined;
+    singlePointStyle: 'dot' | 'line';
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/esm/components/Chart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,kDAoMA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,gBAAwB,EACxB,kBAA8B,EAC9B,qBAAiC,EACjC,gBAAwB,GACzB,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,qBAAqB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,gBAAgB,EAAE,KAAK,GAAG,MAAM,CAAC;CAClC,kDAyNA"}

package/dist/esm/components/Chart/LineChart.js

@@ -7,7 +7,7 @@ import { selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
-export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
+export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, dashedComparison = false, customPrimaryColor = undefined, customComparisonColor = undefined, singlePointStyle = 'dot', }) {
     const [formattedData, setFormattedData] = useState([]);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
@@ -16,8 +16,9 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
         if (!data || data.length === 0) {
             return;
         }
+        let newData = data;
         if (typeof data[0][xAxisField] === 'object') {
-            const curData = data.map((d) => {
+            newData = data.map((d) => {
                 const formatted = { ...d };
                 // NEED TO FORMAT FOR BIG QUERY
                 if (d[xAxisField] && typeof d[xAxisField] === 'object') {
@@ -25,11 +26,12 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
                 }
                 return formatted;
             });
-            setFormattedData(curData);
         }
-        else {
-            setFormattedData(data);
+        if (singlePointStyle === 'line' && newData.length == 1) {
+            const point = { ...newData[0] };
+            newData.push(point);
         }
+        setFormattedData(newData);
     }, [data]);
     if (!data || data.length === 0) {
         return (_jsx("div", { style: {
@@ -43,6 +45,16 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
                 color: theme.secondaryTextColor,
             }, children: "No results found for specified time period." }));
     }
+    // Allows the users to override the color scheme on a per-chart basis.
+    const getCustomColor = (index) => {
+        if (index === 0 && customPrimaryColor) {
+            return customPrimaryColor;
+        }
+        if (index === 1 && comparison && customComparisonColor) {
+            return customComparisonColor;
+        }
+        return undefined; // use the default colors from the theme
+    };
     return (_jsx("div", { style: { ...containerStyle }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: formattedData, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme?.chartLabelFontFamily ||
@@ -87,5 +99,5 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
                                         { field: xAxisField, format: xAxisFormat },
                                     ],
                                 }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, theme: theme }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => (_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: selectColor(elem, colors, index), stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: selectColor(elem, colors, index), fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
+                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => (_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: getCustomColor(index) ?? selectColor(elem, colors, index), stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index) ?? selectColor(elem, colors, index), fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && dashedComparison && index > 0 ? '5 5' : undefined, isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
 }

package/dist/esm/components/QuillTable.d.ts

@@ -1,3 +1,3 @@
 import { TableComponentProps } from './UiComponents';
-export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, downloadCSV, LoadingComponent, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
+export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillTable.d.ts.map

package/dist/esm/components/QuillTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAMrD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,gBAA0C,GAC3C,EAAE,mBAAmB,2CAsZrB"}
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAMrD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA0C,EAC1C,WAAgB,EAChB,eAAwC,EACxC,WAAW,GACZ,EAAE,mBAAmB,2CAsZrB"}

package/dist/esm/components/QuillTable.js

@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from 'react';
 import { compareValues } from '../utils/valueFormatter';
 import { ThemeContext } from '../Context';
 import ChartSkeleton from './Chart/ChartSkeleton';
-export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, downloadCSV, LoadingComponent = () => _jsx(ChartSkeleton, {}), }) {
+export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent = () => _jsx(ChartSkeleton, {}), rowsPerPage = 10, emptyStateLabel = 'No results returned.', downloadCSV, }) {
     const [activeRows, setActiveRows] = useState([]);
     const [page, setPage] = useState(1);
     const [maxPage, setMaxPage] = useState(1);
@@ -23,10 +23,10 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
                 return sortDirection === 'asc' ? result : -result;
             });
         }
-        const start = (page - 1) * 10;
-        const end = page * 10;
+        const start = (page - 1) * rowsPerPage;
+        const end = page * rowsPerPage;
         if (sortedRows && sortedRows.length) {
-            setMaxPage(Math.ceil(sortedRows.length / 10));
+            setMaxPage(Math.ceil(sortedRows.length / rowsPerPage));
         }
         setActiveRows(sortedRows.slice(start, end));
         setIsPaginating(false);
@@ -57,174 +57,174 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
                 ...containerStyle,
             }, children: _jsx(LoadingComponent, {}) }));
     }
-    return (_jsxs("div", { style: {
+    return (_jsx("div", { style: {
             width: '100%',
             height: '100%',
             overflow: 'visible',
             display: 'flex',
             flexDirection: 'column',
             ...containerStyle,
-        }, children: [_jsx("div", { style: {
-                    height: '100%',
+        }, children: _jsx("div", { style: {
+                height: '100%',
+                width: '100%',
+                overflow: 'auto',
+                borderRadius: 6,
+                border: '1px solid rgb(229, 231, 235)',
+                padding: 0,
+                margin: 0,
+                boxSizing: 'border-box',
+                outline: 'none',
+            }, children: _jsxs("div", { role: "table", className: "table", style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minWidth: '0px',
                     width: '100%',
-                    overflow: 'auto',
-                    borderRadius: 6,
-                    border: '1px solid rgb(229, 231, 235)',
-                    padding: 0,
-                    margin: 0,
-                    boxSizing: 'border-box',
-                    outline: 'none',
-                }, children: _jsxs("div", { role: "table", className: "table", style: { minWidth: '0px', width: '100%', height: '100%' }, children: [_jsx("div", { className: "thead", children: _jsx("div", { role: "row", className: "tr", style: {
-                                    display: 'flex',
-                                    flex: '1 0 auto',
-                                    minWidth: '100px',
-                                    boxSizing: 'border-box',
-                                }, children: columns && columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), style: {
-                                        boxSizing: 'border-box',
-                                        flex: '150 0 auto',
-                                        minWidth: '50px',
-                                        width: '150px',
-                                        position: 'relative',
-                                        cursor: 'pointer',
-                                        background: 'rgb(249, 250, 251)',
-                                        borderRight: index + 1 === columns.length
-                                            ? '0px solid rgb(229, 231, 235)'
-                                            : '1px solid rgb(229, 231, 235)',
-                                        borderBottom: '1px solid rgb(229, 231, 235)',
-                                        whiteSpace: 'nowrap',
-                                        alignItems: 'center',
-                                        overflowX: 'visible',
-                                        margin: '0px',
-                                        textOverflow: 'ellipsis',
-                                        minHeight: '36px',
-                                        userSelect: 'none',
-                                        paddingLeft: 16,
-                                        paddingRight: 16,
+                    height: '100%',
+                }, children: [_jsxs("div", { style: { overflow: 'auto', flexGrow: 1 }, children: [_jsx("div", { className: "thead", children: _jsx("div", { role: "row", className: "tr", style: {
                                         display: 'flex',
-                                        flexDirection: 'row',
-                                        justifyContent: 'space-between',
-                                    }, children: [_jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", style: {
-                                                // fontFamily:
-                                                //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                                                WebkitTapHighlightColor: 'transparent',
-                                                fontFamily: theme?.fontFamily,
-                                                // color: 'rgb(55, 65, 81)',
-                                                color: theme?.primaryTextColor,
-                                                textDecoration: 'none',
-                                                fontSize: theme?.fontSizeSmall || '14px',
-                                                fontWeight: theme?.fontWeightMedium || '500',
-                                                lineHeight: '20px', // 1.25rem * 16px = 20px
-                                                textOverflow: 'ellipsis',
+                                        flex: '1 0 auto',
+                                        minWidth: '100px',
+                                        boxSizing: 'border-box',
+                                    }, children: columns &&
+                                        columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), style: {
+                                                boxSizing: 'border-box',
+                                                flex: '150 0 auto',
+                                                minWidth: '50px',
+                                                width: '150px',
+                                                position: 'relative',
+                                                cursor: 'pointer',
+                                                background: 'rgb(249, 250, 251)',
+                                                borderRight: index + 1 === columns.length
+                                                    ? '0px solid rgb(229, 231, 235)'
+                                                    : '1px solid rgb(229, 231, 235)',
+                                                borderBottom: '1px solid rgb(229, 231, 235)',
                                                 whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                            }, children: column.label || column.field }), column.field === sortColumn && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.primaryTextColor, height: "14px", width: "14px", style: {
-                                                transform: sortDirection === 'desc'
-                                                    ? 'rotate(180deg)'
-                                                    : undefined,
-                                            }, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), (activeRows && activeRows.length === 0) || (columns && columns.length === 0) ? (_jsx("div", { style: {
-                                paddingTop: '60px',
-                                display: 'flex',
-                                flex: '1 0 auto',
-                                margin: 'auto',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                fontSize: 13,
-                                color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                            }, children: "No results returned." })) : (_jsx("div", { role: "rowgroup", className: "tbody", children: activeRows && activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
+                                                alignItems: 'center',
+                                                overflowX: 'visible',
+                                                margin: '0px',
+                                                textOverflow: 'ellipsis',
+                                                minHeight: '36px',
+                                                userSelect: 'none',
+                                                paddingLeft: 16,
+                                                paddingRight: 16,
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                justifyContent: 'space-between',
+                                            }, children: [_jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", style: {
+                                                        // fontFamily:
+                                                        //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+                                                        WebkitTapHighlightColor: 'transparent',
+                                                        fontFamily: theme?.fontFamily,
+                                                        // color: 'rgb(55, 65, 81)',
+                                                        color: theme?.primaryTextColor,
+                                                        textDecoration: 'none',
+                                                        fontSize: theme?.fontSizeSmall || '14px',
+                                                        fontWeight: theme?.fontWeightMedium || '500',
+                                                        lineHeight: '20px', // 1.25rem * 16px = 20px
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                        overflow: 'hidden',
+                                                    }, children: column.label || column.field }), column.field === sortColumn && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.primaryTextColor, height: "14px", width: "14px", style: {
+                                                        transform: sortDirection === 'desc'
+                                                            ? 'rotate(180deg)'
+                                                            : undefined,
+                                                    }, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), (activeRows && activeRows.length === 0) ||
+                                (columns && columns.length === 0) ? (_jsx("div", { style: {
+                                    padding: '60px 0',
                                     display: 'flex',
                                     flex: '1 0 auto',
-                                    minWidth: '100px',
-                                    boxSizing: 'border-box',
-                                }, children: columns.map((column, columnIndex) => (_jsx("div", { role: "cell", style: {
-                                        boxSizing: 'border-box',
-                                        flex: '150 0 auto',
-                                        minWidth: '50px',
-                                        width: '150px',
-                                        display: 'flex',
-                                        margin: '0px',
-                                        textOverflow: 'ellipsis',
-                                        minHeight: '36px',
-                                        borderRight: columnIndex + 1 === columns.length
-                                            ? '0px solid rgb(229, 231, 235)'
-                                            : '1px solid rgb(229, 231, 235)',
-                                        overflow: 'hidden',
-                                        borderTop: rowIndex > 0
-                                            ? '1px solid rgb(229, 231, 235)'
-                                            : undefined,
-                                        borderBottom: rowIndex === rows.length - 1
-                                            ? '1px solid rgb(229, 231, 235)'
-                                            : undefined,
-                                        userSelect: 'none',
-                                    }, children: _jsx("div", { style: {
-                                            lineHeight: '24px',
-                                            width: '100%',
+                                    margin: 'auto',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    fontSize: 13,
+                                    color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                                }, children: emptyStateLabel })) : (_jsx("div", { role: "rowgroup", className: "tbody", children: activeRows &&
+                                    activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
                                             display: 'flex',
-                                            cursor: 'default',
-                                            position: 'relative',
-                                            userSelect: 'none',
-                                        }, "data-testid": "static-cell", children: _jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", style: {
-                                                fontFamily: theme?.fontFamily ||
-                                                    'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                                                WebkitTapHighlightColor: 'transparent',
-                                                // color: 'rgb(55, 65, 81)',
-                                                color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                                                textDecoration: 'none',
-                                                fontWeight: 400,
-                                                fontSize: theme?.fontSizeSmall || '14px',
-                                                lineHeight: '20px',
+                                            flex: '1 0 auto',
+                                            minWidth: '100px',
+                                            boxSizing: 'border-box',
+                                        }, children: columns.map((column, columnIndex) => (_jsx("div", { role: "cell", style: {
+                                                boxSizing: 'border-box',
+                                                flex: '150 0 auto',
+                                                minWidth: '50px',
+                                                width: '150px',
+                                                display: 'flex',
+                                                margin: '0px',
                                                 textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
+                                                minHeight: '36px',
+                                                borderRight: columnIndex + 1 === columns.length
+                                                    ? '0px solid rgb(229, 231, 235)'
+                                                    : '1px solid rgb(229, 231, 235)',
                                                 overflow: 'hidden',
-                                                padding: '8px 16px',
+                                                borderTop: rowIndex > 0
+                                                    ? '1px solid rgb(229, 231, 235)'
+                                                    : undefined,
+                                                borderBottom: rowIndex === rows.length - 1
+                                                    ? '1px solid rgb(229, 231, 235)'
+                                                    : undefined,
                                                 userSelect: 'none',
-                                            }, children: row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }))] }) }), _jsx("div", { style: { position: 'relative' }, children: _jsx("div", { style: {
-                        display: 'flex',
-                        flex: '1 0 auto',
-                        minWidth: '100px',
-                        boxSizing: 'border-box',
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        height: 38,
-                        background: '#F9FAFB',
-                        borderRight: '1px solid rgb(229, 231, 235)',
-                        borderLeft: '1px solid rgb(229, 231, 235)',
-                        borderBottom: '1px solid rgb(229, 231, 235)',
-                        borderTop: '1px solid rgb(229, 231, 235)',
-                        borderBottomRightRadius: 6,
-                        borderBottomLeftRadius: 6,
-                        width: '100%',
-                    }, children: _jsxs("div", { style: {
+                                            }, children: _jsx("div", { style: {
+                                                    lineHeight: '24px',
+                                                    width: '100%',
+                                                    display: 'flex',
+                                                    cursor: 'default',
+                                                    position: 'relative',
+                                                    userSelect: 'none',
+                                                }, "data-testid": "static-cell", children: _jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", style: {
+                                                        fontFamily: theme?.fontFamily ||
+                                                            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+                                                        WebkitTapHighlightColor: 'transparent',
+                                                        // color: 'rgb(55, 65, 81)',
+                                                        color: theme?.secondaryTextColor ||
+                                                            'rgb(55, 65, 81)',
+                                                        textDecoration: 'none',
+                                                        fontWeight: 400,
+                                                        fontSize: theme?.fontSizeSmall || '14px',
+                                                        lineHeight: '20px',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                        overflow: 'hidden',
+                                                        padding: '8px 16px',
+                                                        userSelect: 'none',
+                                                    }, children: row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }))] }), _jsx("div", { style: {
                             display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
+                            minWidth: '100px',
+                            height: 38,
+                            borderTop: '1px solid rgb(229, 231, 235)',
+                            background: '#F9FAFB',
                             width: '100%',
-                        }, children: [showDownloadCSVButton ? (_jsx("button", { onClick: downloadCSV, style: {
-                                    fontSize: 14,
-                                    paddingLeft: 12,
-                                    fontFamily: theme?.fontFamily,
-                                    color: theme?.primaryTextColor,
-                                    background: 'transparent',
-                                    fontWeight: 500,
-                                    cursor: 'pointer',
-                                    border: 'none',
-                                }, children: "Download CSV" })) : (_jsx("div", {})), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                }, children: [_jsxs("div", { style: {
-                                            fontSize: 12,
-                                            fontFamily: theme?.fontFamily,
-                                            color: theme?.primaryTextColor,
-                                        }, children: [page, ' of ', maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: decreasePage, style: {
-                                            cursor: 'pointer',
-                                            border: 'none',
-                                            background: 'transparent',
-                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), _jsx("button", { onClick: increasePage, style: {
-                                            cursor: 'pointer',
-                                            border: 'none',
-                                            background: 'transparent',
-                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clipRule: "evenodd" }) }) }), _jsx("div", { style: { width: 12 } })] })] }) }) })] }));
+                        }, children: _jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                width: '100%',
+                                height: 37,
+                            }, children: [showDownloadCSVButton ? (_jsx("button", { onClick: downloadCSV, style: {
+                                        fontSize: 14,
+                                        paddingLeft: 12,
+                                        fontFamily: theme?.fontFamily,
+                                        color: theme?.primaryTextColor,
+                                        background: 'transparent',
+                                        fontWeight: 500,
+                                        cursor: 'pointer',
+                                        border: 'none',
+                                    }, children: "Download CSV" })) : (_jsx("div", {})), _jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                    }, children: [_jsxs("div", { style: {
+                                                fontSize: 12,
+                                                fontFamily: theme?.fontFamily,
+                                                color: theme?.primaryTextColor,
+                                            }, children: [page, ' of ', maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: decreasePage, style: {
+                                                cursor: 'pointer',
+                                                border: 'none',
+                                                background: 'transparent',
+                                            }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), _jsx("button", { onClick: increasePage, style: {
+                                                cursor: 'pointer',
+                                                border: 'none',
+                                                background: 'transparent',
+                                            }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clipRule: "evenodd" }) }) }), _jsx("div", { style: { width: 12 } })] })] }) })] }) }) }));
 }

package/dist/esm/components/ReportBuilder/AddColumnPopover.d.ts

@@ -0,0 +1,2 @@
+export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, HandleButton, }: any): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddColumnPopover.d.ts.map

package/dist/esm/components/ReportBuilder/AddColumnPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CA4LL"}

package/dist/esm/components/ReportBuilder/AddColumnPopover.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
+import { CSS as DND_CSS } from '@dnd-kit/utilities';
+export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, HandleButton, }) {
+    const [search, setSearch] = useState('');
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    // When a drag event ends, switch the item order.
+    function handleDragEnd(event) {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            setOrderedColumnNames((orderedColumnNames) => {
+                const oldIndex = orderedColumnNames.indexOf(active.id);
+                const newIndex = orderedColumnNames.indexOf(over.id);
+                return arrayMove(orderedColumnNames, oldIndex, newIndex);
+            });
+        }
+    }
+    const getColumnsInPivot = () => {
+        if (!pivot)
+            return [];
+        const { valueField, rowField, columnField } = pivot;
+        return [valueField, rowField, columnField].filter(Boolean);
+    };
+    const searchResults = orderedColumnNames
+        .filter((row) => {
+        const [table, _column] = row.split('.');
+        return (selectedColumns.length === 0 || selectedColumns[0].startsWith(table));
+    })
+        .filter((row) => search.length === 0 || row.includes(search));
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            minWidth: 300,
+            maxHeight: 500,
+        }, children: [_jsx("div", { style: {
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginTop: 2,
+                }, children: _jsx(TextInput, { type: "text", value: search, placeholder: 'Search...', style: { margin: '8px 0', width: '100%' }, onChange: (e) => setSearch(e.target.value) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: orderedColumnNames, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 8,
+                            overflowY: 'auto',
+                            maxWidth: '300px',
+                        }, children: [searchResults.map((value) => {
+                                return (_jsx(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
+                            }), search.length > 0 && searchResults.length === 0 && (_jsx("div", { children: "No results found" }))] }) }) }), _jsxs("div", { style: {
+                    display: 'flex',
+                    width: '100%',
+                    flexDirection: 'row',
+                    gap: 8,
+                    justifyContent: 'end',
+                    marginTop: 12,
+                }, children: [selectedColumns.length > 0 && !isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns(orderedColumnNames.filter((row) => {
+                            const [table, _column] = row.split('.');
+                            return selectedColumns[0].startsWith(table);
+                        })), children: "Select all" })), selectedColumns.length > 0 && isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns([]), children: "Clear" })), _jsx(Button, { onMouseUp: () => {
+                            // follow the ordering of the ordered column names
+                            let tableName = initialTableName;
+                            const orderedSelectedColumns = [];
+                            for (const value of orderedColumnNames) {
+                                const [table, column] = value.split('.');
+                                if (selectedColumns.includes(value)) {
+                                    tableName = table;
+                                    orderedSelectedColumns.push(column);
+                                }
+                            }
+                            if (orderedSelectedColumns.length === 0) {
+                                clearAllState();
+                                return;
+                            }
+                            // If there is already an AST saved in state, only update the columns
+                            // otherwise fill in the defaultAST shape and also update columns.
+                            const fallbackAST = {
+                                ...defaultAST,
+                                from: [{ ...defaultTable, table: tableName }],
+                                columns: orderedSelectedColumns.map((name) => nameToColumn(name)),
+                            };
+                            const newBaseAst = {
+                                ...baseAst,
+                                from: [{ ...defaultTable, table: tableName }],
+                                columns: baseAst?.columns.length
+                                    ? orderedSelectedColumns.map((name) => nameToColumn(name))
+                                    : baseAst?.columns,
+                            };
+                            const newAst = baseAst ? newBaseAst : fallbackAST;
+                            setBaseAst(newAst);
+                            // If the user deleted a column that was in the pivot, delete the Pivot
+                            const columnInAST = (col) => newAst.columns.find((c) => c.expr?.value === col ||
+                                c.expr?.column === col ||
+                                c.as === col);
+                            if (pivot &&
+                                !getColumnsInPivot().every((c) => columnInAST(c))) {
+                                setPivot(null);
+                            }
+                            onSave();
+                        }, children: "Save" })] })] }));
+}
+const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, HandleButton, }) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
+    const style = {
+        transform: DND_CSS.Transform.toString(transform),
+        transition,
+    };
+    const handleSelect = () => {
+        setSelectedColumns((selectedColumns) => {
+            if (selectedColumns.includes(id)) {
+                return selectedColumns.filter((column) => column !== id);
+            }
+            else {
+                return [...selectedColumns, id];
+            }
+        });
+    };
+    return (_jsx("div", { style: { userSelect: 'none', ...style }, ref: setNodeRef, children: _jsx(SelectColumn, { selected: selectedColumns?.includes(id), setSelected: handleSelect, label: label, children: _jsx("div", { style: {
+                    cursor: 'grab',
+                }, ...attributes, ...listeners, children: _jsx(HandleButton, {}) }) }) }));
+};