@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/components/QuillTable.js

@@ -0,0 +1,261 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
+import { compareValues } from '../utils/valueFormatter';
+import { ThemeContext } from '../Context';
+import { QuillLoadingComponent } from './UiComponents';
+export default function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
+    const [activeRows, setActiveRows] = useState([]);
+    const [pageIndex, setPageIndex] = useState(currentPage || 0);
+    const [maxPage, setMaxPage] = useState(1);
+    const [sortColumn, setSortColumn] = useState(sort?.field || '');
+    const [sortDirection, setSortDirection] = useState(sort?.direction || 'desc');
+    const [theme] = useContext(ThemeContext);
+    const [isPaginating, setIsPaginating] = useState(true);
+    const [initialLoad, setInitialLoad] = useState(isLoading);
+    useEffect(() => {
+        setSortColumn(sort?.field || '');
+        setSortDirection(sort?.direction || 'desc');
+    }, [sort]);
+    useEffect(() => {
+        setIsPaginating(true);
+        if (rows?.length === 0 && isLoading) {
+            return;
+        }
+        const start = pageIndex * rowsPerPage;
+        const end = (pageIndex + 1) * rowsPerPage;
+        if (rowCount && onSortChange && rowCount !== rows.length) {
+            setMaxPage(Math.ceil(rowCount / rowsPerPage));
+            setActiveRows(rows.slice(start, end));
+        }
+        else {
+            const sortedRows = [...rows];
+            if (sortColumn) {
+                sortedRows.sort((a, b) => {
+                    const result = compareValues(a, b, sortColumn);
+                    return sortDirection === 'asc' ? result : -result;
+                });
+            }
+            setMaxPage(Math.ceil(sortedRows.length / rowsPerPage));
+            setActiveRows(sortedRows.slice(start, end));
+        }
+        setIsPaginating(false);
+        setInitialLoad(false);
+    }, [pageIndex, rows, sortColumn, sortDirection, columns, rowCount]);
+    const increasePage = () => {
+        if (pageIndex + 1 === maxPage) {
+            return;
+        }
+        setPageIndex((pageIndex) => pageIndex + 1);
+        onPageChange && onPageChange(pageIndex + 1);
+    };
+    const decreasePage = () => {
+        if (pageIndex === 0) {
+            return;
+        }
+        setPageIndex((pageIndex) => pageIndex - 1);
+        onPageChange && onPageChange(pageIndex - 1);
+    };
+    const toggleSort = (column) => {
+        if (sortColumn === column.field) {
+            setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+            setPageIndex(0);
+            if (onSortChange) {
+                onSortChange({
+                    field: column.field,
+                    direction: sortDirection === 'asc' ? 'desc' : 'asc',
+                });
+            }
+        }
+        else {
+            setSortColumn(column.field);
+            setSortDirection('desc');
+            setPageIndex(0);
+            if (onSortChange) {
+                onSortChange({
+                    field: column.field,
+                    direction: 'desc',
+                });
+            }
+        }
+    };
+    if (initialLoad) {
+        return (_jsx("div", { style: {
+                height: '100%',
+                ...containerStyle,
+            }, className: className, children: _jsx(LoadingComponent, {}) }));
+    }
+    return (_jsx("div", { style: {
+            width: '100%',
+            height: '100%',
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            ...containerStyle,
+        }, className: className, children: _jsx("div", { style: {
+                height: '100%',
+                width: '100%',
+                overflow: 'auto',
+                borderRadius: 6,
+                border: '1px solid #E7E7E7',
+                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%',
+                    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',
+                                        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 #E7E7E7'
+                                                    : '1px solid #E7E7E7',
+                                                borderBottom: '1px solid #E7E7E7',
+                                                whiteSpace: 'nowrap',
+                                                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))) }) }), (isPaginating || isLoading) && (_jsx("div", { className: className, children: _jsx(LoadingComponent, {}) })), (activeRows && activeRows.length === 0) ||
+                                (columns && columns.length === 0) ? (_jsx("div", { style: {
+                                    padding: '30px 0',
+                                    display: isPaginating || isLoading ? 'none' : 'flex',
+                                    flex: '1 0 auto',
+                                    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: isPaginating || isLoading ? 'none' : '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 #E7E7E7'
+                                                    : '1px solid #E7E7E7',
+                                                overflow: 'hidden',
+                                                borderTop: rowIndex > 0 ? '1px solid #E7E7E7' : undefined,
+                                                borderBottom: rowIndex === activeRows?.length - 1
+                                                    ? '1px solid #E7E7E7'
+                                                    : undefined,
+                                                userSelect: 'none',
+                                            }, 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: typeof row[column.field] === 'object'
+                                                        ? JSON.stringify(row[column.field])
+                                                        : typeof row[column.field] === 'boolean'
+                                                            ? row[column.field].toString()
+                                                            : row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }))] }), _jsx("div", { style: {
+                            display: 'flex',
+                            minWidth: '100px',
+                            height: 38,
+                            borderTop: '1px solid #E7E7E7',
+                            background: '#F9FAFB',
+                            width: '100%',
+                        }, children: _jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                width: '100%',
+                                height: 37,
+                            }, children: [!hideCSVDownloadButton ? (_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", {})), rows.length === 0 || isLoading ? null : (_jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                    }, children: [_jsxs("div", { style: {
+                                                fontSize: 12,
+                                                fontFamily: theme?.fontFamily,
+                                                color: theme?.primaryTextColor,
+                                            }, children: [pageIndex + 1, ' 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/AddColumnModal.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { TextInputComponentProps } from '../UiComponents';
+export default function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, schemaLoading, TextInput, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState, LoadingComponent, }: {
+    onSave: any;
+    orderedColumnNames: any;
+    setOrderedColumnNames: any;
+    selectedColumns: any;
+    setSelectedColumns: any;
+    isSelectedAllColumns: any;
+    clearAllState: any;
+    nameToColumn: any;
+    baseAst: any;
+    setBaseAst: any;
+    pivot: any;
+    initialTableName: any;
+    defaultAST: any;
+    defaultTable: any;
+    setPivot: any;
+    schemaLoading?: boolean;
+    TextInput: (props: TextInputComponentProps) => JSX.Element;
+    SelectColumn: (props: {
+        label: string;
+        isSelected: boolean;
+        setSelected: () => void;
+        DragHandle: ({ dragIcon }: {
+            dragIcon: () => JSX.Element;
+        }) => JSX.Element;
+    }) => JSX.Element;
+    SecondaryButton: any;
+    Button: any;
+    ColumnSearchEmptyState: () => JSX.Element;
+    LoadingComponent: () => JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddColumnModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddColumnModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnModal.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAGL,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,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,aAAa,EACb,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,sBAAoD,EACpD,gBAAwC,GACzC,EAAE;IACD,MAAM,EAAE,GAAG,CAAC;IACZ,kBAAkB,EAAE,GAAG,CAAC;IACxB,qBAAqB,EAAE,GAAG,CAAC;IAC3B,eAAe,EAAE,GAAG,CAAC;IACrB,kBAAkB,EAAE,GAAG,CAAC;IACxB,oBAAoB,EAAE,GAAG,CAAC;IAC1B,aAAa,EAAE,GAAG,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,KAAK,EAAE,GAAG,CAAC;IACX,gBAAgB,EAAE,GAAG,CAAC;IACtB,UAAU,EAAE,GAAG,CAAC;IAChB,YAAY,EAAE,GAAG,CAAC;IAClB,QAAQ,EAAE,GAAG,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3D,YAAY,EAAE,CAAC,KAAK,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;YAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,OAAO,CAAA;SAAE,KAAK,GAAG,CAAC,OAAO,CAAC;KAC5E,KAAK,GAAG,CAAC,OAAO,CAAC;IAClB,eAAe,EAAE,GAAG,CAAC;IACrB,MAAM,EAAE,GAAG,CAAC;IACZ,sBAAsB,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAC1C,gBAAgB,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACrC,2CAqNA"}

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

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } 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';
+import { QuillColumnSearchEmptyState, QuillLoadingComponent, } from '../UiComponents';
+import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
+export default function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, schemaLoading, TextInput, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState = QuillColumnSearchEmptyState, LoadingComponent = QuillLoadingComponent, }) {
+    const [search, setSearch] = useState('');
+    const [searchResults, setSearchResults] = useState(orderedColumnNames);
+    const textInputContainerRef = useRef(null);
+    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 || !over)
+            return;
+        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);
+    };
+    useEffect(() => {
+        setSearchResults(orderedColumnNames
+            .filter((row) => {
+            const [table] = row.split('.');
+            const selectedTable = selectedColumns[0]?.split('.')[0];
+            return selectedColumns.length === 0 || selectedTable === table;
+        })
+            .filter((row) => search.length === 0 ||
+            row.includes(search) ||
+            snakeAndCamelCaseToTitleCase(row)
+                .toLowerCase()
+                .includes(search.toLowerCase())));
+    }, [search, orderedColumnNames, selectedColumns]);
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            minWidth: 300,
+            maxHeight: 600,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingBottom: 16,
+        }, children: [_jsx("div", { ref: textInputContainerRef, style: {
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginTop: 2,
+                    marginBottom: 6,
+                }, children: _jsx(TextInput, { id: 'add_column_search_bar', value: search, placeholder: 'Search...', width: 400, onChange: (e) => setSearch(e.target.value) }) }), schemaLoading ? (_jsx(LoadingComponent, {})) : (_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: '400px',
+                        }, children: [searchResults.map((value) => {
+                                return (_jsx(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value
+                                        .split('.')
+                                        .map((v) => snakeAndCamelCaseToTitleCase(v))
+                                        .join(' | '), SelectColumn: SelectColumn }, value));
+                            }), search.length > 0 && searchResults.length === 0 && (_jsx(ColumnSearchEmptyState, {}))] }) }) })), _jsxs("div", { style: {
+                    display: 'flex',
+                    width: '100%',
+                    flexDirection: 'row',
+                    gap: 8,
+                    justifyContent: 'end',
+                    marginTop: 12,
+                }, children: [selectedColumns.length > 0 && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), selectedColumns.length > 0 && !isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns(searchResults.filter((row) => {
+                            const [table] = row.split('.');
+                            return selectedColumns[0].startsWith(table);
+                        })), label: "Select all" })), _jsx(Button, { onClick: () => {
+                            // 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();
+                        }, label: "Select columns" })] })] }));
+}
+const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, }) => {
+    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, { isSelected: selectedColumns?.includes(id), setSelected: handleSelect, label: snakeAndCamelCaseToTitleCase(label), DragHandle: (props) => (_jsx("div", { style: {
+                    cursor: 'grab',
+                }, ...attributes, ...listeners, children: _jsx(props.dragIcon, {}) })) }) }));
+};

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { ButtonComponentProps, TextInputComponentProps } from '../UiComponents';
+import { LimitPopoverComponentProps } from './ui';
+export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle, LimitPopover, EditPopover, TextInput, Button, SecondaryButton, }: {
+    limit: any;
+    handleDelete: () => void;
+    setOpenPopover: (arg: any) => void;
+    onSave: (column: any, direction: any) => void;
+    popoverTitle?: string | undefined;
+    LimitPopover: (props: LimitPopoverComponentProps) => JSX.Element;
+    EditPopover: any;
+    TextInput: any;
+    Button: (props: ButtonComponentProps) => JSX.Element;
+    SecondaryButton: (props: ButtonComponentProps) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface AddLimitPopoverProps {
+    onSave: (limit: number) => void;
+    initialLimit?: number;
+    isEdit?: boolean;
+    onDelete?: () => void;
+    TextInput?: (props: TextInputComponentProps) => JSX.Element;
+    Button?: (props: ButtonComponentProps) => JSX.Element;
+    SecondaryButton?: (props: ButtonComponentProps) => JSX.Element;
+}
+export declare const AddLimitPopover: ({ onSave, initialLimit, isEdit, onDelete, TextInput, Button, SecondaryButton, }: AddLimitPopoverProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddLimitPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddLimitPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddLimitPopover.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;WAYjB,GAAG;kBACI,MAAM,IAAI;0BACF,GAAG,KAAK,IAAI;qBACjB,GAAG,aAAa,GAAG,KAAK,IAAI;;0BAEvB,0BAA0B,KAAK,WAAW;iBACnD,GAAG;eACL,GAAG;oBACE,oBAAoB,KAAK,WAAW;6BAC3B,oBAAoB,KAAK,WAAW;6CAiC9D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CAChE;AAED,eAAO,MAAM,eAAe,oFAQzB,oBAAoB,4CA8CtB,CAAC"}

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MemoizedButton, MemoizedSecondaryButton, QuillTextInput, } from '../UiComponents';
+export const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit limit', LimitPopover, EditPopover, TextInput = QuillTextInput, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleClickDelete = () => {
+        setOpenPopover(null);
+        handleDelete();
+    };
+    return (_jsx("div", { style: { width: '100%' }, children: _jsx(LimitPopover, { isOpen: isOpen, setIsOpen: setIsOpen, limitLabel: `limit ${limit.value[0].value}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: _jsx(EditPopover, { onSave: (column, direction) => {
+                    setIsOpen(false);
+                    onSave(column, direction);
+                }, isEdit: true, onDelete: handleClickDelete, initialLimit: limit.value[0].value, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) }) }));
+};
+export const AddLimitPopover = ({ onSave, initialLimit = 10, isEdit = false, onDelete = () => { }, TextInput = QuillTextInput, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
+    const [limit, setLimit] = useState(initialLimit);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 12,
+                    padding: '6px 0px',
+                }, children: _jsx(TextInput, { id: 'add_limit_input', label: "Limit", value: limit.toString() ?? initialLimit.toString(), width: 200, 
+                    // style={{ minHeight: 32, padding: '6px 12px' }}
+                    onChange: (e) => {
+                        if (Number.isNaN(parseFloat(e.target.value || '0'))) {
+                            alert('Please input a number.');
+                            return;
+                        }
+                        setLimit(parseFloat(e.target.value || '0'));
+                    } }) }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'end',
+                    gap: 12,
+                }, children: isEdit ? (_jsxs(_Fragment, { children: [_jsx(SecondaryButton, { onClick: onDelete, label: "Delete" }), _jsx(Button, { onClick: () => onSave(limit), label: "Edit limit" })] })) : (_jsx(Button, { onClick: () => onSave(limit), label: "Add limit" })) })] }));
+};

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { ButtonComponentProps, SelectComponentProps } from '../UiComponents';
+import { SortPopoverComponentProps } from './ui';
+export declare const SortSentence: ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle, SortPopover, EditPopover, Select, Button, SecondaryButton, }: {
+    sortData: any;
+    columns: any;
+    setIsPending: any;
+    setEditPopoverKey: any;
+    setActiveEditItem: any;
+    setOpenPopover: any;
+    setActivePath: any;
+    keyPrefix?: any;
+    handleDelete: any;
+    onSave: any;
+    popoverTitle?: string | undefined;
+    SortPopover: (props: SortPopoverComponentProps) => JSX.Element;
+    EditPopover: any;
+    Select?: ((props: SelectComponentProps) => JSX.Element) | undefined;
+    Button?: ((props: ButtonComponentProps) => JSX.Element) | undefined;
+    SecondaryButton?: ((props: ButtonComponentProps) => JSX.Element) | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const AddSortPopover: ({ onSave, columns, isEdit, onDelete, column, direction, Select, Button, SecondaryButton, }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddSortPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddSortPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddSortPopover.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,oBAAoB,EAGpB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,yBAAyB,EAAE,MAAM,MAAM,CAAC;AAkBjD,eAAO,MAAM,YAAY;cAkBb,GAAG;aACJ,GAAG;kBACE,GAAG;uBACE,GAAG;uBACH,GAAG;oBACN,GAAG;mBACJ,GAAG;gBACN,GAAG;kBACD,GAAG;YACT,GAAG;;yBAEU,yBAAyB,KAAK,WAAW;iBACjD,GAAG;sBACC,oBAAoB,KAAK,WAAW;sBACpC,oBAAoB,KAAK,WAAW;+BAC3B,oBAAoB,KAAK,WAAW;oDAqD/D,CAAC;AAEF,eAAO,MAAM,cAAc,+FAUxB,GAAG,4CAmEL,CAAC"}

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { QuillSelectComponent } from '../QuillSelect';
+import { MemoizedButton, MemoizedSecondaryButton, } from '../UiComponents';
+import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
+import { extractColumnish } from './ast';
+const SORT_VALUE_TO_LABEL = {
+    ASC: 'ascending',
+    DESC: 'descending',
+};
+function parseColumn(sortData) {
+    let column = undefined;
+    if (sortData && sortData.expr && sortData.expr.column) {
+        column = extractColumnish(sortData.expr);
+    }
+    else if (sortData && sortData.expr) {
+        column = sortData.expr.value;
+    }
+    return column || '';
+}
+export const SortSentence = ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleSetIsOpen = (isOpen) => {
+        setIsOpen(isOpen);
+        if (!isOpen) {
+            setIsPending(false);
+            setActiveEditItem(null);
+            setActivePath(null);
+        }
+    };
+    const handleClickDelete = (e) => {
+        e.stopPropagation(); // don't call onClick handler
+        setIsPending(false);
+        handleDelete(keyPrefix);
+        setActiveEditItem(null);
+        setOpenPopover(null);
+        setEditPopoverKey(null);
+    };
+    if (!sortData && (!sortData.expr.column || !sortData.expr.value)) {
+        return null;
+    }
+    return (_jsx("div", { children: _jsx(SortPopover, { isOpen: isOpen, setIsOpen: handleSetIsOpen, sortLabel: `${snakeAndCamelCaseToTitleCase(parseColumn(sortData))} ${SORT_VALUE_TO_LABEL[sortData.type] || SORT_VALUE_TO_LABEL.ASC}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: _jsx(EditPopover, { onSave: (column, direction) => {
+                    setIsOpen(false);
+                    onSave(column, direction);
+                }, columns: columns, isEdit: true, onDelete: handleClickDelete, column: sortData.expr.column || sortData.expr.value, direction: sortData.type, Select: Select, Button: Button, SecondaryButton: SecondaryButton }) }) }));
+};
+export const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, direction, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
+    const [sortColumn, setSortColumn] = useState(column || '');
+    const [sortDirection, setSortDirection] = useState(direction || 'ASC');
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 12,
+                    padding: '6px 0px',
+                }, children: [_jsx(Select, { label: "Sort Column", value: sortColumn, onChange: (e) => {
+                            setSortColumn(e.target.value);
+                        }, options: [
+                            ...columns.map((column) => ({
+                                label: snakeAndCamelCaseToTitleCase(column.split('.')[1] || ''),
+                                value: column.split('.')[1],
+                            })),
+                        ], width: 200 }), _jsx(Select, { label: "Sort Direction", value: sortDirection, onChange: (e) => {
+                            setSortDirection(e.target.value);
+                        }, options: [
+                            { label: 'Ascending', value: 'ASC' },
+                            { label: 'Descending', value: 'DESC' },
+                        ], width: 200 })] }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'end',
+                    gap: 12,
+                }, children: isEdit ? (_jsxs(_Fragment, { children: [_jsx(SecondaryButton, { onClick: onDelete, label: "Delete" }), _jsx(Button, { onClick: () => onSave(sortColumn, sortDirection), label: "Edit sort" })] })) : (_jsx(Button, { onClick: () => onSave(sortColumn, sortDirection), label: "Add sort" })) })] }));
+};