@quillsql/react 2.11.15 → 2.11.17

package/dist/esm/components/Dashboard/MetricComponent.js

@@ -1,23 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
 import { COMPARISON_OPTIONS } from '../../DateRangePicker/dateRangePickerUtils';
 import { valueFormatter } from '../../utils/valueFormatter';
 import ChartError from '../Chart/ChartError';
 import ChartSkeleton from '../Chart/ChartSkeleton';
-export default function QuillMetricComponent({ dashboardItem, onClickDashboardItem, error, isLoading, theme, style, }) {
+import { generatePivotTable } from '../../internals/ReportBuilder/PivotModal';
+import { DashboardFiltersContext } from '../../Context';
+import { useTheme } from '../../hooks';
+export default function QuillMetricComponent({ dashboardItem, onClick, error, isLoading, }) {
+    const theme = useTheme();
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
     const data = dashboardItem;
-    const isComparison = data.rows.length > 0 &&
-        Object.keys(data.rows[0]).includes(`comparison_${data.xAxisField}`);
+    const config = dashboardItem;
+    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
+    const pivotTable = useMemo(() => {
+        const pivot = config?.pivot;
+        const data = config;
+        return pivot && data?.rows
+            ? generatePivotTable(pivot, JSON.parse(JSON.stringify(data.rows)), // deep copy
+            dateFilter
+                ? [dateFilter.startDate || null, dateFilter.endDate || null, null]
+                : [null, null, null], Boolean(dateFilter?.comparisonRange?.startDate), -1, dateFilter?.comparisonRange?.startDate
+                ? [
+                    dateFilter?.comparisonRange.startDate,
+                    dateFilter?.comparisonRange.endDate,
+                    null,
+                ]
+                : [null, null, null])
+            : null;
+    }, [config?.pivot]);
     const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
     const comparisonKey = data?.filtersApplied?.date_range?.comparisonRange?.value;
     const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
-    return (_jsx("div", { onClick: onClickDashboardItem
-            ? () => onClickDashboardItem(dashboardItem)
-            : () => { }, style: {
+    const rows = pivotTable?.rows ?? data.rows ?? [];
+    const isComparison = rows.length > 0 &&
+        Object.keys(rows[0]).includes(`comparison_${data.xAxisField}`);
+    return (_jsx("div", { onClick: () => onClick && onClick(dashboardItem), style: {
             cursor: 'pointer',
             boxSizing: 'content-box',
             borderRadius: 8,
             paddingBottom: isLoading ? 0 : 30,
-            ...style,
         }, children: _jsx("div", { style: {
                 width: '100%',
                 height: '100%',
@@ -50,7 +72,7 @@ export default function QuillMetricComponent({ dashboardItem, onClickDashboardIt
                                         display: 'block',
                                         maxWidth: '100%',
                                         overflow: 'hidden',
-                                    }, children: dashboardItem?.name }), onClickDashboardItem ? (_jsx("div", { style: {
+                                    }, children: dashboardItem?.name }), onClick ? (_jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         color: theme.primaryTextColor,
                                         boxSizing: 'content-box',
@@ -60,11 +82,13 @@ export default function QuillMetricComponent({ dashboardItem, onClickDashboardIt
                                         display: 'flex',
                                         alignItems: 'center',
                                         justifyContent: 'flex-end',
-                                    }, children: 'view report →' })) : null] }), isLoading ? (_jsx(ChartSkeleton, { containerStyle: { maxHeight: '78px', height: style?.height ?? '100%' } })) : error ? (_jsx(ChartError, {})) : data.rows?.length === 0 ||
-                            data.rows[0][data.xAxisField] === null ? (_jsx("div", { style: {
+                                    }, children: 'view report →' })) : null] }), isLoading ? (_jsx(ChartSkeleton, { containerStyle: {
+                                maxHeight: '78px',
+                                height: '100%',
+                            } })) : error ? (_jsx(ChartError, {})) : rows?.length === 0 || rows[0][data.xAxisField] === null ? (_jsx("div", { style: {
                                 display: 'flex',
                                 flex: '1 0 auto',
-                                height: style?.height ?? '100%',
+                                height: '100%',
                                 margin: 'auto',
                                 justifyContent: 'center',
                                 alignItems: 'center',
@@ -72,7 +96,6 @@ export default function QuillMetricComponent({ dashboardItem, onClickDashboardIt
                                 color: theme.secondaryTextColor,
                                 maxWidth: '100%',
                                 width: '100%',
-                                ...style,
                             }, children: "No results" })) : (_jsx("div", { style: {
                                 padding: 0,
                                 height: '100%',
@@ -99,9 +122,9 @@ export default function QuillMetricComponent({ dashboardItem, onClickDashboardIt
                                             gap: 4,
                                             alignItems: 'baseline',
                                             marginRight: 'auto',
-                                        }, children: [_jsx("span", { children: data.rows.length > 0 &&
+                                        }, children: [_jsx("span", { children: rows.length > 0 &&
                                                     valueFormatter({
-                                                        value: data.rows[0][data.xAxisField] ?? 0,
+                                                        value: rows[0][data.xAxisField] ?? 0,
                                                         field: data.xAxisField,
                                                         fields: [
                                                             {
@@ -130,10 +153,9 @@ export default function QuillMetricComponent({ dashboardItem, onClickDashboardIt
                                                     fontWeight: '500',
                                                     fontFamily: theme?.fontFamily,
                                                     color: theme?.secondaryTextColor,
-                                                }, children: data.rows.length > 0 &&
+                                                }, children: rows.length > 0 &&
                                                     valueFormatter({
-                                                        value: data.rows[0][`comparison_${data.xAxisField}`] ??
-                                                            0,
+                                                        value: rows[0][`comparison_${data.xAxisField}`] ?? 0,
                                                         field: data.xAxisField,
                                                         fields: [
                                                             {

package/dist/esm/components/Dashboard/TableComponent.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-export default function QuillTableComponent({ dashboardItem, onClickDashboardItem, isLoading, error, theme, style, children, }: any): JSX.Element;
+import { DashboardItemProps } from '../../Dashboard';
+export default function QuillTableComponent({ dashboardItem, onClick, isLoading, error, }: DashboardItemProps): JSX.Element;
 //# sourceMappingURL=TableComponent.d.ts.map

package/dist/esm/components/Dashboard/TableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AASA,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,oBAAoB,EACpB,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAiKnB"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA2JlC"}

package/dist/esm/components/Dashboard/TableComponent.js

@@ -7,7 +7,9 @@ import { DashboardFiltersContext } from '../../Context';
 import { quillFormat } from '../../utils/valueFormatter';
 import ChartSkeleton from '../Chart/ChartSkeleton';
 import ChartError from '../Chart/ChartError';
-export default function QuillTableComponent({ dashboardItem, onClickDashboardItem, isLoading, error, theme, style, children, }) {
+import { useTheme } from '../../hooks';
+export default function QuillTableComponent({ dashboardItem, onClick, isLoading, error, }) {
+    const theme = useTheme();
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const config = dashboardItem;
     const data = dashboardItem;
@@ -57,12 +59,7 @@ export default function QuillTableComponent({ dashboardItem, onClickDashboardIte
             return formattedRow;
         }, {});
     });
-    return (_jsxs("div", { style: {
-            cursor: 'pointer',
-            ...style,
-        }, onClick: onClickDashboardItem
-            ? () => onClickDashboardItem(dashboardItem)
-            : () => { }, children: [_jsxs("div", { style: {
+    return (_jsxs("div", { style: { cursor: 'pointer' }, onClick: () => onClick && onClick(dashboardItem), children: [_jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     justifyContent: 'space-between',
@@ -81,7 +78,7 @@ export default function QuillTableComponent({ dashboardItem, onClickDashboardIte
                             display: 'block',
                             maxWidth: '100%',
                             overflow: 'hidden',
-                        }, children: dashboardItem?.name }), onClickDashboardItem ? (_jsx("div", { style: {
+                        }, children: dashboardItem?.name }), onClick ? (_jsx("div", { style: {
                             fontFamily: theme.fontFamily,
                             color: theme.primaryTextColor,
                             boxSizing: 'content-box',
@@ -97,7 +94,7 @@ export default function QuillTableComponent({ dashboardItem, onClickDashboardIte
                 } })) : error ? (_jsx(ChartError, { containerStyle: {
                     width: '100%',
                     height: '400px',
-                } })) : (_jsx(QuillTable, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: config?.rowsPerPage || 10, containerStyle: {
+                } })) : (_jsx(QuillTable, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: 10, containerStyle: {
                     width: '100%',
                     height: '400px',
                 }, showDownloadCSVButton: true, downloadCSV: () => {

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

@@ -1,3 +1,6 @@
 import { SelectComponentProps } from './UiComponents';
-export declare function QuillSelectComponent({ options, value, onChange, theme, label, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A robust select component that implements the new minimal Select interface.
+ */
+export declare function QuillSelectComponent({ options, value, onChange, label, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,oBAAoB,2CAwMtB"}
+{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAKtD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CA0MtB"}

package/dist/esm/components/QuillSelect.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnClickOutside } from '../hooks';
-import { useRef, useState } from 'react';
-export function QuillSelectComponent({ options, value, onChange, theme, label, }) {
+import { useContext, useRef, useState } from 'react';
+import { ThemeContext } from '../Context';
+/**
+ * A robust select component that implements the new minimal Select interface.
+ */
+export function QuillSelectComponent({ options, value, onChange, label, }) {
+    const [theme] = useContext(ThemeContext);
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
-    useOnClickOutside(modalRef, (e) => {
-        setShowModal(false);
-    });
+    useOnClickOutside(modalRef, (e) => setShowModal(false));
     return (_jsxs("div", { style: {
             position: 'relative',
             width: 200,
             minWidth: 200,
-            boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
             borderRadius: '6px',
         }, children: [label && (_jsx("div", { style: {
                     fontSize: 14,
@@ -62,7 +64,6 @@ export function QuillSelectComponent({ options, value, onChange, theme, label, }
                     paddingBottom: 6,
                     paddingLeft: 6,
                     paddingRight: 6,
-                    boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
                     fontFamily: theme.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
@@ -85,7 +86,9 @@ export function QuillSelectComponent({ options, value, onChange, theme, label, }
                             height: 34,
                             minHeight: 34,
                         }, className: "quill-option", onClick: () => {
-                            onChange('');
+                            // Manually create a synthetic ChangeEvent and pass it to callback
+                            const changeEvent = { target: { value: '' } };
+                            onChange(changeEvent);
                             setShowModal(false);
                         }, children: [_jsx("style", { children: `
                 .quill-option {
@@ -113,7 +116,9 @@ export function QuillSelectComponent({ options, value, onChange, theme, label, }
                             minHeight: 34,
                             overflow: 'hidden',
                         }, className: "quill-option", onClick: () => {
-                            onChange(option.value);
+                            // Manually create a synthetic ChangeEvent and pass it to callback
+                            const changeEvent = { target: { value: option.value } };
+                            onChange(changeEvent);
                             setShowModal(false);
                         }, children: [_jsx("style", { children: `
                 .quill-option {

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

@@ -1,3 +1,17 @@
-import { TableComponentProps } from './UiComponents';
-export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+import { ButtonComponentProps } from './UiComponents';
+export interface TableComponentProps {
+    rows: any[];
+    columns: any[];
+    containerStyle?: React.CSSProperties;
+    isLoading?: boolean;
+    showDownloadCSVButton?: boolean;
+    downloadFileName?: string;
+    downloadCSV?: () => void;
+    LoadingComponent?: () => JSX.Element;
+    DownloadCSVButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+    rowsPerPage?: number;
+    emptyStateLabel?: string;
+}
+export default function QuillTable({ rows, columns, isLoading, 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,gBAA0C,EAC1C,WAAgB,EAChB,eAA8B,EAC9B,WAAW,GACZ,EAAE,mBAAmB,2CAwZrB"}
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA0C,EAC1C,WAAgB,EAChB,eAA8B,EAC9B,WAAW,GACZ,EAAE,mBAAmB,2CAwZrB"}

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, LoadingComponent = () => _jsx(ChartSkeleton, {}), rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, }) {
+export default function QuillTable({ rows, columns, isLoading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent = () => _jsx(ChartSkeleton, {}), rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, }) {
     const [activeRows, setActiveRows] = useState([]);
     const [page, setPage] = useState(1);
     const [maxPage, setMaxPage] = useState(1);
@@ -13,7 +13,7 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
     const [isPaginating, setIsPaginating] = useState(true);
     useEffect(() => {
         setIsPaginating(true);
-        if (rows.length === 0 && loading) {
+        if (rows.length === 0 && isLoading) {
             return;
         }
         const sortedRows = [...rows];
@@ -30,7 +30,7 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
         }
         setActiveRows(sortedRows.slice(start, end));
         setIsPaginating(false);
-    }, [page, rows, sortColumn, sortDirection, loading, columns]);
+    }, [page, rows, sortColumn, sortDirection, isLoading, columns]);
     const increasePage = () => {
         if (page === maxPage) {
             return;
@@ -52,7 +52,7 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
             setSortDirection('desc');
         }
     };
-    if (loading || isPaginating) {
+    if (isLoading || isPaginating) {
         return (_jsx("div", { style: {
                 ...containerStyle,
             }, children: _jsx(LoadingComponent, {}) }));

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

@@ -1,2 +1,31 @@
-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;
+/// <reference types="react" />
+import { TextInputComponentProps } from '../UiComponents';
+export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, }: {
+    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;
+    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;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AddColumnPopover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAoBA,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,2CAgML"}
+{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAI1D,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,GACP,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,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;CACb,2CAoNA"}

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

@@ -1,12 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
+/* eslint-disable no-unused-vars */
+import { useContext, 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 { ThemeContext } from '../../Context';
-export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, HandleButton, }) {
+import { updateFirstChildWidth } from '../../utils/width';
+import { snakeCaseToTitleCase } from '../../utils/textProcessing';
+export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, }) {
     const [theme] = useContext(ThemeContext);
     const [search, setSearch] = useState('');
+    const [searchResults, setSearchResults] = useState(orderedColumnNames);
+    const textInputContainerRef = useRef(null);
+    const [searchInputWidth, setSearchInputWidth] = useState(200);
+    useEffect(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component onload here.
+        updateFirstChildWidth(textInputContainerRef, setSearchInputWidth);
+    }, []);
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
     }));
@@ -27,32 +38,40 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
         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));
+    useEffect(() => {
+        setSearchResults(orderedColumnNames
+            .filter((row) => {
+            const [table, _column] = row.split('.');
+            const selectedTable = selectedColumns[0]?.split('.')[0];
+            return selectedColumns.length === 0 || selectedTable === table;
+        })
+            .filter((row) => search.length === 0 ||
+            row.includes(search) ||
+            snakeCaseToTitleCase(row)
+                .toLowerCase()
+                .includes(search.toLowerCase())));
+    }, [search, orderedColumnNames, selectedColumns]);
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
             minWidth: 300,
             maxHeight: 500,
-        }, children: [_jsx("div", { style: {
+        }, children: [_jsx("div", { ref: textInputContainerRef, style: {
                     position: 'relative',
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
                     marginTop: 2,
-                }, children: _jsx(TextInput, { type: "text", value: search, placeholder: 'Search...', style: { marginBottom: 6, 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: {
+                    marginBottom: 6,
+                }, children: _jsx(TextInput, { id: 'add_column_search_bar', value: search, placeholder: 'Search...', width: searchInputWidth, 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, { theme: theme, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' | '), SelectColumn: SelectColumn, HandleButton: HandleButton }, value));
+                                return (_jsx(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' | '), SelectColumn: SelectColumn }, value));
                             }), search.length > 0 && searchResults.length === 0 && (_jsx("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" }))] }) }) }), _jsxs("div", { style: {
                     display: 'flex',
                     width: '100%',
@@ -60,7 +79,7 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
                     gap: 8,
                     justifyContent: 'end',
                     marginTop: 12,
-                }, children: [selectedColumns.length > 0 && !isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns(orderedColumnNames.filter((row) => {
+                }, children: [selectedColumns.length > 0 && !isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns(searchResults.filter((row) => {
                             const [table, _column] = row.split('.');
                             return selectedColumns[0].startsWith(table);
                         })), label: "Select all" })), selectedColumns.length > 0 && isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), _jsx(Button, { onClick: () => {
@@ -105,7 +124,7 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
                             onSave();
                         }, label: "Select columns" })] })] }));
 }
-const SortableItem = ({ id, label, setSelectedColumns, theme, selectedColumns, SelectColumn, HandleButton, }) => {
+const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, }) => {
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
     const style = {
         transform: DND_CSS.Transform.toString(transform),
@@ -121,7 +140,7 @@ const SortableItem = ({ id, label, setSelectedColumns, theme, selectedColumns, S
             }
         });
     };
-    return (_jsx("div", { style: { userSelect: 'none', ...style }, ref: setNodeRef, children: _jsx(SelectColumn, { selected: selectedColumns?.includes(id), setSelected: handleSelect, label: label, children: _jsx("div", { style: {
+    return (_jsx("div", { style: { userSelect: 'none', ...style }, ref: setNodeRef, children: _jsx(SelectColumn, { isSelected: selectedColumns?.includes(id), setSelected: handleSelect, label: label, DragHandle: (props) => (_jsx("div", { style: {
                     cursor: 'grab',
-                }, ...attributes, ...listeners, children: _jsx(HandleButton, {}) }) }) }));
+                }, ...attributes, ...listeners, children: _jsx(props.dragIcon, {}) })) }) }));
 };

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

@@ -1,3 +1,26 @@
-export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle, LimitPopover, EditPopover, children, }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const AddLimitPopover: ({ onSave, initialLimit, isEdit, onDelete, }: any) => import("react/jsx-runtime").JSX.Element;
+/// <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

@@ -1 +1 @@
-{"version":3,"file":"AddLimitPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddLimitPopover.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,wGASvB,GAAG,4CAiCL,CAAC;AAEF,eAAO,MAAM,eAAe,gDAKzB,GAAG,4CAmCL,CAAC"}
+{"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;AAGzB,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

@@ -1,38 +1,38 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useContext } from 'react';
-import { MemoizedButton, MemoizedSecondaryButton } from '../UiComponents';
+import { MemoizedButton, MemoizedSecondaryButton, QuillTextInput, } from '../UiComponents';
 import { ThemeContext } from '../../Context';
-import { QuillTextInput } from './ui';
-const SORT_VALUE_TO_LABEL = {
-    ASC: 'ascending',
-    DESC: 'descending',
-};
-export const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit limit', LimitPopover, EditPopover, children, }) => {
+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 = (e) => {
         setOpenPopover(null);
         handleDelete();
     };
-    return (_jsx("div", { style: { width: '100%' }, children: _jsx(LimitPopover
-        // @ts-ignore
-        , { 
-            // @ts-ignore
-            filterLabel: `limit ${limit.value[0].value}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: _jsx(EditPopover, { onSave: (column, direction) => {
+    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 }), isOpen: isOpen, setIsOpen: setIsOpen, onDelete: () => {
-                handleDelete();
-            } }) }));
+                }, isEdit: true, onDelete: handleClickDelete, initialLimit: limit.value[0].value, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) }) }));
 };
-export const AddLimitPopover = ({ onSave, initialLimit, isEdit, onDelete, }) => {
-    const [limit, setLimit] = useState(initialLimit || 0);
+export const AddLimitPopover = ({ onSave, initialLimit = 0, isEdit = false, onDelete = () => { }, TextInput = QuillTextInput, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
+    const [limit, setLimit] = useState(initialLimit);
     const [theme] = useContext(ThemeContext);
-    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(QuillTextInput, { value: limit, type: "number", style: { width: 200, minHeight: 32, padding: '6px 12px' }, onChange: (e) => {
-                        setLimit(e.target.value);
+    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', 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(MemoizedSecondaryButton, { onClick: onDelete, label: "Delete" }), _jsx(MemoizedButton, { onClick: () => onSave(limit), label: "Edit limit" })] })) : (_jsx(MemoizedButton, { onClick: () => onSave(limit), label: "Add limit" })) })] }));
+                }, 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

@@ -1,3 +1,23 @@
-export declare const SortSentence: ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle, SortPopover, EditPopover, children, }: any) => import("react/jsx-runtime").JSX.Element | undefined;
-export declare const AddSortPopover: ({ onSave, columns, isEdit, onDelete, column, }: any) => import("react/jsx-runtime").JSX.Element;
+/// <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, Select, Button, SecondaryButton, }: any) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AddSortPopover.d.ts.map

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":"AAYA,eAAO,MAAM,YAAY,iMAetB,GAAG,wDA2CL,CAAC;AAEF,eAAO,MAAM,cAAc,mDAMxB,GAAG,4CAiEL,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;AAOjD,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;oDAoD/D,CAAC;AAEF,eAAO,MAAM,cAAc,oFASxB,GAAG,4CA6DL,CAAC"}