@quillsql/react 2.13.42 → 2.13.44

package/dist/esm/components/QuillSelect.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnClickOutside } from '../hooks';
+import useOnClickOutside, { getEffectiveZIndex } from '../hooks/useOnClickOutside';
 import { LoadingSpinner } from './UiComponents';
-import { useContext, useMemo, useRef, useState } from 'react';
+import { useContext, useMemo, useRef, useState, useEffect } from 'react';
 import { ThemeContext } from '../Context';
+import { createPortal } from 'react-dom';
+import { getScrollableParent } from '../utils/ui';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
@@ -30,6 +32,48 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
     const nullLabel = useMemo(() => {
         return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
     }, [sortedItems]);
+    const [popoverPosition, setPopoverPosition] = useState(undefined);
+    const [z, setZ] = useState(10);
+    const scrollableParentRef = useRef(document.body);
+    const updatePosition = () => {
+        if (buttonRef.current) {
+            requestAnimationFrame(() => {
+                const rect = buttonRef?.current?.getBoundingClientRect();
+                if (rect) {
+                    const viewportHeight = window.innerHeight;
+                    const availableHeight = viewportHeight - rect.bottom - 64;
+                    setPopoverPosition({
+                        top: rect.bottom + window.scrollY,
+                        left: rect.left + window.scrollX,
+                        width: rect.width,
+                        maxHeight: availableHeight,
+                    });
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        let resizeObserver;
+        let mutationObserver;
+        if (showModal && buttonRef.current) {
+            updatePosition();
+            setZ(getEffectiveZIndex(buttonRef.current));
+            resizeObserver = new ResizeObserver(() => updatePosition());
+            resizeObserver.observe(buttonRef.current);
+            mutationObserver = new MutationObserver(() => updatePosition());
+            mutationObserver.observe(buttonRef.current, { attributes: true, subtree: true });
+            scrollableParentRef.current = getScrollableParent(buttonRef.current);
+            scrollableParentRef.current.addEventListener('scroll', updatePosition, { passive: true });
+            const handleResize = () => requestAnimationFrame(updatePosition);
+            window.addEventListener('resize', handleResize, { passive: true });
+            return () => {
+                resizeObserver.disconnect();
+                mutationObserver.disconnect();
+                scrollableParentRef.current.removeEventListener('scroll', updatePosition);
+                window.removeEventListener('resize', handleResize);
+            };
+        }
+    }, [showModal]);
     return (_jsxs("div", { style: {
             position: 'relative',
             borderRadius: '6px',
@@ -73,9 +117,14 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
-                        }, children: options.find((elem) => elem.value === value)?.label || 'Select' }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && (_jsxs("div", { style: {
+                        }, children: options.find((elem) => elem.value === value)?.label || 'Select' }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && createPortal(_jsxs("div", { style: {
                     position: 'absolute',
-                    width: '100%',
+                    top: `${popoverPosition?.top ?? 0}px`,
+                    left: `${popoverPosition?.left ?? 0}px`,
+                    width: `${popoverPosition?.width ?? 0}px`,
+                    maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
+                    minHeight: options.length > 2 ? 120 : options.length * 40,
+                    visibility: popoverPosition ? 'visible' : 'hidden',
                     display: 'flex',
                     flexDirection: 'column',
                     boxSizing: 'border-box',
@@ -85,15 +134,12 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                     borderRadius: 6,
                     background: 'white',
                     marginTop: 12,
-                    zIndex: 100,
-                    paddingTop: 6,
-                    paddingBottom: 6,
-                    paddingLeft: 6,
-                    paddingRight: 6,
+                    zIndex: z,
+                    padding: 6,
                     fontFamily: theme?.fontFamily,
-                    maxHeight: '50vh',
                     overflow: 'scroll',
-                }, ref: modalRef, children: [!isLoading && (!hideEmptyOption || !options.length) && (_jsxs("button", { style: {
+                    fontSize: 14,
+                }, ref: modalRef, "data-portal-ignore": "true", children: [!isLoading && (!hideEmptyOption || !options.length) && (_jsxs("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -112,7 +158,6 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                             height: 34,
                             minHeight: 34,
                         }, className: "quill-option", onClick: () => {
-                            // Manually create a synthetic ChangeEvent and pass it to callback
                             const changeEvent = { target: { value: '' } };
                             onChange(changeEvent);
                             setShowModal(false);
@@ -142,7 +187,6 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                             minHeight: 34,
                             overflow: 'hidden',
                         }, className: "quill-option", onClick: () => {
-                            // Manually create a synthetic ChangeEvent and pass it to callback
                             const changeEvent = { target: { value: option.value } };
                             onChange(changeEvent);
                             setShowModal(false);
@@ -157,5 +201,5 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
-                                }, children: option.label ?? '-' })] }, option.label)))) : (_jsx(LoadingSpinner, {}))] }))] }));
+                                }, children: option.label ?? '-' })] }, option.label)))) : (_jsx(LoadingSpinner, {}))] }), document.body)] }));
 }

package/dist/esm/components/QuillSelectWithCombo.js

@@ -19,7 +19,7 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
         // Sort null to top
         if (searchQuery === '') {
             return options
-                .sort((a, b) => {
+                ?.sort((a, b) => {
                 if (a.value === null) {
                     return -1;
                 }
@@ -28,13 +28,13 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
                 }
                 return 0;
             })
-                .slice(0, 20);
+                ?.slice(0, 20) ?? [];
         }
         const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/;
         const isUuid = options?.[0]?.value?.toString()?.match(uuidRegex);
         const isNumber = typeof options?.[0]?.value === 'number';
         return options
-            .filter((option) => {
+            ?.filter((option) => {
             if (!option) {
                 return false;
             }
@@ -48,7 +48,7 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
                     .replace(/\s+/g, '')
                     .includes(searchQuery.toLowerCase().replace(/\s+/g, '')) : false);
         })
-            .sort((a, b) => {
+            ?.sort((a, b) => {
             if (a.value === null) {
                 return -1;
             }
@@ -57,13 +57,13 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
             }
             return 0;
         })
-            .slice(0, 20);
+            ?.slice(0, 20) ?? [];
     }, [options, searchQuery]);
     const nullLabel = useMemo(() => {
         return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
     }, [filteredItems]);
     const selectedLabel = useMemo(() => {
-        const selectedOption = options.find((elem) => elem.value === value);
+        const selectedOption = options?.find((elem) => elem.value === value);
         return selectedOption && selectedOption.label == '-'
             ? nullLabel
             : (selectedOption?.label ?? 'Select');

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

@@ -1,21 +1,11 @@
 import React from '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, TextInputComponent, 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;
+import { Table } from '../../models/Tables';
+import { ReportBuilderColumn, ReportBuilderTable } from '../../models/ReportBuilder';
+export default function AddColumnModal({ onSave, selectedColumns, schema, schemaLoading, TextInputComponent, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState, LoadingComponent, }: {
+    onSave: (newTables: ReportBuilderTable[], newColumns: ReportBuilderColumn[]) => void;
+    selectedColumns: ReportBuilderColumn[];
+    schema: Table[];
     schemaLoading?: boolean;
     TextInputComponent: ((props: TextInputComponentProps) => JSX.Element) | React.ForwardRefExoticComponent<TextInputComponentProps & React.RefAttributes<HTMLInputElement>>;
     SelectColumn: (props: {

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

@@ -1 +1 @@
-{"version":3,"file":"AddColumnModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAiB3D,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,kBAAkB,EAClB,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,kBAAkB,EACd,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC,GACjD,KAAK,CAAC,yBAAyB,CAC7B,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAChE,CAAC;IACN,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,2CAsNA"}
+{"version":3,"file":"AddColumnModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAiBpE,OAAO,EAGL,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAEL,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAM,EAEN,eAAe,EACf,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,MAAM,EACN,sBAAoD,EACpD,gBAAwC,GACzC,EAAE;IACD,MAAM,EAAE,CACN,SAAS,EAAE,kBAAkB,EAAE,EAC/B,UAAU,EAAE,mBAAmB,EAAE,KAC9B,IAAI,CAAC;IAEV,eAAe,EAAE,mBAAmB,EAAE,CAAC;IACvC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,EACd,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC,GACjD,KAAK,CAAC,yBAAyB,CAC7B,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAChE,CAAC;IACN,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,2CA0UA"}

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

@@ -1,14 +1,85 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useMemo, 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, TextInputComponent, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState = QuillColumnSearchEmptyState, LoadingComponent = QuillLoadingComponent, }) {
+import { JoinType, } from '../../models/ReportBuilder';
+import { getSchemaForeignKeyMapping } from '../../utils/schema';
+export default function AddColumnModal({ onSave, 
+// selectedTables,
+selectedColumns, schema, schemaLoading, TextInputComponent, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState = QuillColumnSearchEmptyState, LoadingComponent = QuillLoadingComponent, }) {
+    const [primaryTable, setPrimaryTable] = useState(undefined);
     const [search, setSearch] = useState('');
-    const [searchResults, setSearchResults] = useState(orderedColumnNames);
     const textInputContainerRef = useRef(null);
+    const [modalSelectedColumns, setModalSelectedColumns] = useState(selectedColumns.map((col) => `${col.table}.${col.field}`));
+    const foreignKeyMap = useMemo(() => {
+        return getSchemaForeignKeyMapping(schema);
+    }, [schema]);
+    const columnOptions = schema
+        .filter((table) => {
+        if (!primaryTable)
+            return true;
+        return (table.name === primaryTable ||
+            foreignKeyMap[primaryTable]?.some((tableInfo) => tableInfo.foreignTable === table.name) ||
+            foreignKeyMap[table.name]?.some((tableInfo) => tableInfo.foreignTable === primaryTable));
+    })
+        .sort((a, b) => {
+        // Ensure primaryTable is always first, this is essential for SELECT ALL
+        if (primaryTable) {
+            if (a.name === primaryTable)
+                return -1;
+            if (b.name === primaryTable)
+                return 1;
+        }
+        return 0; // Keep original order otherwise
+    })
+        .flatMap((table) => table.columns
+        .map((col) => `${table.name}.${col.field}`)
+        .sort((a, b) => {
+        const aIsId = a.endsWith('.id') ||
+            a.endsWith('_id') ||
+            a.endsWith('Id') ||
+            a === 'id';
+        const bIsId = b.endsWith('.id') ||
+            b.endsWith('_id') ||
+            b.endsWith('Id') ||
+            b === 'id';
+        if (aIsId && !bIsId)
+            return 1;
+        if (bIsId && !aIsId)
+            return -1;
+        return 0;
+    }));
+    const [orderedColumnNames, setOrderedColumnNames] = useState(columnOptions);
+    const isSelectedAllColumns = columnOptions.length === modalSelectedColumns.length;
+    const duplicateColumnNames = useMemo(() => {
+        const columnNames = modalSelectedColumns.map((col) => {
+            const [, ...rest] = col.split('.');
+            return rest.join('.');
+        });
+        const duplicates = columnNames.filter((name, i) => columnNames.indexOf(name) !== i);
+        return duplicates;
+    }, [modalSelectedColumns, schema]);
+    const searchResults = useMemo(() => {
+        return orderedColumnNames.filter((column) => {
+            return (columnOptions.includes(column) &&
+                (search.length === 0 ||
+                    column.toLowerCase().includes(search.toLowerCase()) ||
+                    snakeAndCamelCaseToTitleCase(column)
+                        .toLowerCase()
+                        .includes(search.toLowerCase())));
+        });
+    }, [search, columnOptions, orderedColumnNames]);
+    useEffect(() => {
+        if (modalSelectedColumns.length === 0) {
+            setPrimaryTable(undefined);
+        }
+        else {
+            setPrimaryTable(modalSelectedColumns[0]?.split('.')[0]);
+        }
+    }, [modalSelectedColumns]);
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
     }));
@@ -25,25 +96,6 @@ export default function AddColumnModal({ onSave, orderedColumnNames, setOrderedC
             });
         }
     }
-    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',
@@ -66,11 +118,35 @@ export default function AddColumnModal({ onSave, orderedColumnNames, setOrderedC
                             gap: 8,
                             overflowY: 'auto',
                             maxWidth: '400px',
-                        }, children: [searchResults.map((value) => {
-                                return (_jsx(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value
+                        }, children: [searchResults.map((value, index) => {
+                                return (_jsx(SortableItem, { selectedColumns: modalSelectedColumns, setSelectedColumns: (newSelectedColumns) => {
+                                        if (!primaryTable) {
+                                            setModalSelectedColumns(newSelectedColumns);
+                                        }
+                                        else {
+                                            // need to check if primary table is in selected columns
+                                            const columnTables = [
+                                                ...new Set(newSelectedColumns.map((col) => {
+                                                    const [table] = col.split('.');
+                                                    return table || '';
+                                                })),
+                                            ];
+                                            if (columnTables.includes(primaryTable)) {
+                                                setModalSelectedColumns(newSelectedColumns);
+                                            }
+                                            else if (columnTables.length === 1) {
+                                                setPrimaryTable(columnTables[0]);
+                                                setModalSelectedColumns(newSelectedColumns);
+                                            }
+                                            else {
+                                                setPrimaryTable(undefined);
+                                                setModalSelectedColumns([]);
+                                            }
+                                        }
+                                    }, id: value, label: value
                                         .split('.')
                                         .map((v) => snakeAndCamelCaseToTitleCase(v))
-                                        .join(' | '), SelectColumn: SelectColumn }, value));
+                                        .join(' | '), SelectColumn: SelectColumn }, index));
                             }), search.length > 0 && searchResults.length === 0 && (_jsx(ColumnSearchEmptyState, {}))] }) }) })), _jsxs("div", { style: {
                     display: 'flex',
                     width: '100%',
@@ -78,50 +154,75 @@ export default function AddColumnModal({ onSave, orderedColumnNames, setOrderedC
                     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, ...rest] = value.split('.');
-                                const column = rest.join('.');
-                                if (selectedColumns.includes(value)) {
-                                    tableName = table;
-                                    orderedSelectedColumns.push(column);
+                }, children: [modalSelectedColumns.length > 0 && (_jsx(SecondaryButton, { onClick: () => setModalSelectedColumns([]), label: "Clear" })), modalSelectedColumns.length > 0 && !isSelectedAllColumns && (_jsx(SecondaryButton, { onClick: () => setModalSelectedColumns(columnOptions), label: "Select all" })), _jsx(Button, { onClick: () => {
+                            const newTableNames = [
+                                ...new Set(modalSelectedColumns
+                                    .map((col) => {
+                                    const [table] = col.split('.');
+                                    return table;
+                                })
+                                    .filter((table) => table !== undefined)),
+                            ];
+                            const newTables = newTableNames
+                                .map((table) => {
+                                if (primaryTable && primaryTable !== table) {
+                                    const asForeignTable = foreignKeyMap[primaryTable]?.find((tableInfo) => tableInfo.foreignTable === table);
+                                    const asPrimaryTable = foreignKeyMap[table]?.find((tableInfo) => tableInfo.foreignTable === primaryTable);
+                                    const foreignTable = asForeignTable || asPrimaryTable;
+                                    const primaryTableField = asForeignTable?.foreignKey ||
+                                        asPrimaryTable?.foreignTablePrimaryKey;
+                                    const foreignTableField = asForeignTable?.foreignTablePrimaryKey ||
+                                        asPrimaryTable?.foreignKey;
+                                    if (!foreignTable ||
+                                        !primaryTableField ||
+                                        !foreignTableField) {
+                                        return null;
+                                    }
+                                    return {
+                                        name: table,
+                                        join: {
+                                            type: JoinType.JOIN,
+                                            condition: {
+                                                operator: '=',
+                                                left: {
+                                                    table: primaryTable,
+                                                    field: primaryTableField,
+                                                },
+                                                right: {
+                                                    table,
+                                                    field: foreignTableField,
+                                                },
+                                            },
+                                        },
+                                    };
+                                }
+                                else {
+                                    return { name: table };
                                 }
-                            }
-                            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();
+                            })
+                                .filter((table) => table !== null);
+                            const sortedSelectedColumns = orderedColumnNames.filter((col) => modalSelectedColumns.includes(col));
+                            const newColumns = sortedSelectedColumns
+                                .map((col) => {
+                                const [table, ...rest] = col.split('.');
+                                const field = rest.join('.');
+                                if (!table ||
+                                    !field ||
+                                    !newTables.some((t) => t.name === table)) {
+                                    return null;
+                                }
+                                else {
+                                    return {
+                                        table: table || '',
+                                        field: field || '',
+                                        alias: duplicateColumnNames.includes(field)
+                                            ? `${table}_${field}`
+                                            : undefined,
+                                    };
+                                }
+                            })
+                                .filter((col) => col !== null);
+                            onSave(newTables, newColumns);
                         }, label: "Select columns" })] })] }));
 }
 const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, }) => {
@@ -131,14 +232,10 @@ const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectCo
         transition,
     };
     const handleSelect = () => {
-        setSelectedColumns((selectedColumns) => {
-            if (selectedColumns.includes(id)) {
-                return selectedColumns.filter((column) => column !== id);
-            }
-            else {
-                return [...selectedColumns, id];
-            }
-        });
+        const newSelectedColumns = selectedColumns.includes(id)
+            ? selectedColumns.filter((column) => column !== id)
+            : [...selectedColumns, id];
+        setSelectedColumns(newSelectedColumns);
     };
     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',

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

@@ -1,15 +1,11 @@
 import { ButtonComponentProps, SelectComponentProps } from '../UiComponents';
 import { SortPopoverComponentProps } from './ui';
 import { ColumnInternal } from '../../models/Columns';
-export declare const SortSentence: ({ sortField, sortDirection, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, onSave, popoverTitle, SortPopover, EditPopover, Select, Button, SecondaryButton, disabled, }: {
+export declare const SortSentence: ({ sortField, sortDirection, columns, handleDelete, setOpenPopover, onSave, popoverTitle, SortPopover, EditPopover, Select, Button, SecondaryButton, disabled, }: {
     sortField: string;
     sortDirection: string;
     columns: ColumnInternal[];
-    setIsPending: any;
-    setEditPopoverKey: any;
-    setActiveEditItem: any;
     setOpenPopover: any;
-    keyPrefix?: any;
     handleDelete: any;
     onSave: any;
     popoverTitle?: string;

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

@@ -1 +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;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAStD,eAAO,MAAM,YAAY,mOAkBtB;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,YAAY,EAAE,GAAG,CAAC;IAClB,iBAAiB,EAAE,GAAG,CAAC;IACvB,iBAAiB,EAAE,GAAG,CAAC;IACvB,cAAc,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,YAAY,EAAE,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,WAAW,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,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;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,mDAoDA,CAAC;AAEF,eAAO,MAAM,cAAc,+FAUxB;IACD,MAAM,EAAE,GAAG,CAAC;IACZ,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,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,4CAmEA,CAAC"}
+{"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;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAStD,eAAO,MAAM,YAAY,oKActB;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,WAAW,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,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;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,mDA6CA,CAAC;AAEF,eAAO,MAAM,cAAc,+FAUxB;IACD,MAAM,EAAE,GAAG,CAAC;IACZ,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,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,4CAmEA,CAAC"}

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

@@ -9,22 +9,15 @@ const SORT_VALUE_TO_LABEL = {
     asc: 'ascending',
     desc: 'descending',
 };
-export const SortSentence = ({ sortField, sortDirection, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, disabled = false, }) => {
+export const SortSentence = ({ sortField, sortDirection, columns, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, disabled = false, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const handleSetIsOpen = (isOpen) => {
         setIsOpen(isOpen);
-        if (!isOpen) {
-            setIsPending(false);
-            setActiveEditItem(null);
-        }
     };
     const handleClickDelete = (e) => {
         e.stopPropagation(); // don't call onClick handler
-        setIsPending(false);
-        handleDelete(keyPrefix);
-        setActiveEditItem(null);
         setOpenPopover(null);
-        setEditPopoverKey(null);
+        handleDelete();
     };
     if (!sortField) {
         return null;

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

@@ -0,0 +1,17 @@
+import { ReportBuilderColumn } from '../../models/ReportBuilder';
+interface DraggableColumnsProps {
+    columns: ReportBuilderColumn[];
+    onColumnOrderChange: (newOrder: ReportBuilderColumn[]) => void;
+    DraggableColumnComponent: (props: {
+        label: string;
+        onDelete: () => void;
+        DragHandle: ({ dragIcon }: {
+            dragIcon: () => JSX.Element;
+        }) => JSX.Element;
+        deleteDisabled?: boolean;
+    }) => JSX.Element;
+    loading: boolean;
+}
+export default function DraggableColumns({ columns, onColumnOrderChange, DraggableColumnComponent, loading, }: DraggableColumnsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DraggableColumns.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableColumns.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/DraggableColumns.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IAC/D,wBAAwB,EAAE,CAAC,KAAK,EAAE;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;YAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,OAAO,CAAA;SAAE,KAAK,GAAG,CAAC,OAAO,CAAC;QAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;KAC1B,KAAK,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,mBAAmB,EACnB,wBAAwB,EACxB,OAAO,GACR,EAAE,qBAAqB,2CAmFvB"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import DraggableItem from './DraggableItem';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { useMemo } from 'react';
+import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
+export default function DraggableColumns({ columns, onColumnOrderChange, DraggableColumnComponent, loading, }) {
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const columnNames = useMemo(() => {
+        return columns.map((col) => `${col.table}.${col.alias ?? col.field}`);
+    }, [columns]);
+    // const [orderedColumnNames, setOrderedColumnNames] = useState<string[]>([]);
+    const columnNameToLabel = (columnName) => {
+        return snakeAndCamelCaseToTitleCase(columnName.split('.').pop() ?? '');
+    };
+    // 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) {
+            const oldIndex = columnNames.findIndex((c) => c.endsWith(active.id));
+            const newIndex = columnNames.findIndex((c) => c.endsWith(over.id));
+            const newOrder = arrayMove(columnNames, oldIndex, newIndex);
+            const orderToColumns = newOrder
+                .map((name) => {
+                const [table, field] = name.split('.');
+                return columns.find((col) => col.table === table &&
+                    (col.alias ? col.alias === field : col.field === field));
+            })
+                .filter((col) => col !== undefined);
+            onColumnOrderChange(orderToColumns);
+        }
+    }
+    function onDeleteColumn(columnName) {
+        const newColumns = columns.filter((col) => `${col.table}.${col.alias ?? col.field}` !== columnName);
+        onColumnOrderChange(newColumns);
+    }
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columnNames, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8,
+                }, children: [columnNames.map((name) => (_jsx(DraggableItem, { id: name, label: columnNameToLabel(name), onDelete: () => !loading && onDeleteColumn(name), loading: loading, DraggableColumnComponent: DraggableColumnComponent }, name))), columnNames.length > 0 && _jsx("div", { style: { height: 6 } })] }) }) }));
+}