@quillsql/react 2.11.14 → 2.11.16

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

@@ -1,2 +1,25 @@
-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, HandleButton, }: {
+    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: any;
+    SecondaryButton: any;
+    Button: any;
+    HandleButton: 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":";AAmBA,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,EACN,YAAY,GACb,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,GAAG,CAAC;IAClB,eAAe,EAAE,GAAG,CAAC;IACrB,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,GAAG,CAAC;CACnB,2CAsNA"}

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

@@ -1,12 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
+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';
+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, HandleButton, }) {
     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,25 +37,32 @@ 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('.');
+            return (selectedColumns.length === 0 || selectedColumns[0].startsWith(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,
@@ -60,7 +77,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: () => {

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

@@ -1,3 +1,14 @@
-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';
+export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle, LimitPopover, EditPopover, TextInput, Button, SecondaryButton, children, }: any) => 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":";AAEA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAUzB,eAAO,MAAM,aAAa,4IAYvB,GAAG,4CAoCL,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,4CA+CtB,CAAC"}

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

@@ -1,13 +1,12 @@
 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, children, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const handleClickDelete = (e) => {
         setOpenPopover(null);
@@ -20,19 +19,30 @@ export const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, pop
             filterLabel: `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: () => {
+                }, isEdit: true, onDelete: handleClickDelete, initialLimit: limit.value[0].value, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }), isOpen: isOpen, setIsOpen: setIsOpen, onDelete: () => {
                 handleDelete();
             } }) }));
 };
-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, 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,3 @@
-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;
+export declare const SortSentence: ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle, SortPopover, EditPopover, Select, Button, SecondaryButton, children, }: any) => 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":"AAYA,eAAO,MAAM,YAAY,kOAkBtB,GAAG,mDA8CL,CAAC;AAEF,eAAO,MAAM,cAAc,oFASxB,GAAG,4CAiEL,CAAC"}

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

@@ -8,7 +8,7 @@ const SORT_VALUE_TO_LABEL = {
     ASC: 'ascending',
     DESC: 'descending',
 };
-export const SortSentence = ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, children, }) => {
+export const SortSentence = ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, children, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const handleClickDelete = (e) => {
         e.stopPropagation(); // don't call onClick handler
@@ -19,22 +19,22 @@ export const SortSentence = ({ sortData, keyPrefix, columns, handleDelete, setEd
         setEditPopoverKey(null);
     };
     if (!sortData && (!sortData.expr.column || !sortData.expr.value)) {
-        return;
+        return null;
     }
-    return (_jsx("div", { style: { width: '100%' }, children: _jsx(SortPopover
+    return (_jsx("div", { children: _jsx(SortPopover
         // @ts-ignore
         , { 
             // @ts-ignore
             filterLabel: `${snakeCaseToTitleCase(sortData.expr.column) || snakeCaseToTitleCase(sortData.expr.value)} ${SORT_VALUE_TO_LABEL[sortData.type]}`, 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 }), isOpen: isOpen, setIsOpen: setIsOpen, onDelete: () => {
+                }, columns: columns, isEdit: true, onDelete: handleClickDelete, column: sortData.expr.column || sortData.expr.value, Select: Select, Button: Button, SecondaryButton: SecondaryButton }), isOpen: isOpen, setIsOpen: setIsOpen, onDelete: () => {
                 setIsPending(false);
                 setActiveEditItem(null);
                 setActivePath(null);
             } }) }));
 };
-export const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, }) => {
+export const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
     const [sortColumn, setSortColumn] = useState(column || '');
     const [sortDirection, setSortDirection] = useState('ASC');
     const [theme] = useContext(ThemeContext);
@@ -43,14 +43,14 @@ export const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, }) =
                     flexDirection: 'row',
                     gap: 12,
                     padding: '6px 0px',
-                }, children: [_jsx(QuillSelectComponent, { theme: theme, value: sortColumn, onChange: (value) => {
+                }, children: [_jsx(Select, { theme: theme, value: sortColumn, onChange: (value) => {
                             setSortColumn(value);
                         }, options: [
                             ...columns.map((column) => ({
                                 label: snakeCaseToTitleCase(column.split('.')[1] || ''),
                                 value: column.split('.')[1],
                             })),
-                        ] }), _jsx(QuillSelectComponent, { theme: theme, value: sortDirection, onChange: (value) => {
+                        ] }), _jsx(Select, { theme: theme, value: sortDirection, onChange: (value) => {
                             setSortDirection(value);
                         }, options: [
                             { label: 'Ascending', value: 'ASC' },
@@ -60,5 +60,5 @@ export const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, }) =
                     flexDirection: 'row',
                     justifyContent: 'end',
                     gap: 12,
-                }, children: isEdit ? (_jsxs(_Fragment, { children: [_jsx(MemoizedSecondaryButton, { onClick: onDelete, label: "Delete" }), _jsx(MemoizedButton, { onClick: () => onSave(sortColumn, sortDirection), label: "Edit sort" })] })) : (_jsx(MemoizedButton, { onClick: () => onSave(sortColumn, sortDirection), label: "Add sort" })) })] }));
+                }, 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" })) })] }));
 };

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

@@ -7,7 +7,6 @@
  */
 export declare const QuillButton: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
 export declare const QuillSecondaryButton: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const QuillTextInput: (props: any) => import("react/jsx-runtime").JSX.Element;
 export declare const QuillReportBuilderTable: ({ rows, columns, error, ...props }: any) => import("react/jsx-runtime").JSX.Element;
 export declare const QuillTag: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
 export declare const QuillSidebarHeading: ({ label }: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAiBA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAiBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAuB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CAgDL;AAED,eAAO,MAAM,YAAY,sGAkCxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CA6CL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAiDtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAMnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,gBAAgB,sFAO1B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAiBA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoFpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAiBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAuB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CAgDL;AAED,eAAO,MAAM,YAAY,sGAkCxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CA6CL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAiDtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAMnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CA+BL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,gBAAgB,sFAO1B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAsBL,CAAC"}

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

@@ -3,7 +3,7 @@ import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { MemoizedSelect, MemoizedCheckbox, MemoizedHeader, MemoizedLabel, MemoizedTabs, LoadingSpinner, MemoizedSecondaryButton, } from '../UiComponents';
 import MemoizedQuillTable from '../QuillTable';
 import { ThemeContext } from '../../Context';
-import { isNodeEmptyCollection } from './util';
+import { isNodeEmptyCollection, allNumericNodesValidInTree } from './util';
 import { downloadCSV } from '../../utils/csv';
 import { snakeCaseToTitleCase } from '../../utils/textProcessing';
 /**
@@ -52,24 +52,6 @@ export const QuillSecondaryButton = ({ children, ...props }) => {
             ...props.style,
         }, children: children }));
 };
-export const QuillTextInput = (props) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx("input", { ...props, style: {
-            color: theme?.primaryTextColor,
-            backgroundColor: theme?.backgroundColor || 'white',
-            fontFamily: theme?.fontFamily,
-            fontWeight: 'medium',
-            borderWidth: '1px',
-            borderColor: theme?.borderColor || '#E7E7E7',
-            borderStyle: 'solid',
-            borderRadius: '6px',
-            boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
-            padding: '0 12px',
-            display: 'block',
-            minHeight: 32,
-            ...props.style,
-        } }));
-};
 export const QuillReportBuilderTable = ({ rows, columns, error, ...props }) => {
     const reformattedColumns = columns.map((c) => ({ label: c, field: c }));
     return (_jsx("div", { style: { height: '100%', overflow: 'auto' }, children: _jsx(MemoizedQuillTable, { rows: rows, columns: reformattedColumns, rowsPerPage: 10, showDownloadCSVButton: rows?.length > 0, downloadCSV: () => downloadCSV({ rows, fields: reformattedColumns, name: 'my_report' }), emptyStateLabel: error || 'No results', ...props }) }));
@@ -80,15 +62,27 @@ export const QuillTag = forwardRef(({ label, onClick, children, onClickDelete, h
             boxShadow: '0px 1px 4px #e2e8f005',
             border: '1px solid #e2e8f0',
             borderRadius: 6,
+            paddingLeft: 8,
             display: 'flex',
+            minHeight: 30,
             flexDirection: 'row',
             width: '100%',
-            padding: '4px 8px',
             alignItems: 'center',
             backgroundColor: theme?.backgroundColor || 'white',
             fontFamily: theme?.fontFamily,
             fontSize: 14,
-        }, ref: forwardedRef, onClick: onClick, children: [label ?? children, !hideDelete && (_jsx("div", { style: {
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            maxWidth: '100%',
+        }, ref: forwardedRef, onClick: onClick, children: [_jsx("div", { style: {
+                    alignItems: 'center',
+                    fontFamily: theme?.fontFamily,
+                    fontSize: 14,
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '90%',
+                    overflow: 'hidden',
+                }, children: label ?? children }), !hideDelete && (_jsx("div", { style: {
                     marginLeft: 'auto',
                     marginRight: '8px',
                     display: 'flex',
@@ -293,6 +287,13 @@ export const DEFAULT_TAB_OPTIONS = [
 ];
 export const QuillTabs = forwardRef(({ options = DEFAULT_TAB_OPTIONS, ...props }, ref) => (_jsx(MemoizedTabs, { ref: ref, options: options, ...props })));
 export const EditPopover = ({ onSave, onDelete, Button, renderNode, activeEditItem, }) => {
+    const handleOnClick = () => {
+        if (!allNumericNodesValidInTree(activeEditItem)) {
+            alert('Please input a number.');
+            return;
+        }
+        onSave();
+    };
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'column',
@@ -303,7 +304,7 @@ export const EditPopover = ({ onSave, onDelete, Button, renderNode, activeEditIt
                     justifyContent: 'end',
                     gap: 8,
                     width: '100%',
-                }, children: [_jsx(MemoizedSecondaryButton, { onClick: onDelete, label: "Delete" }), _jsx(Button, { onClick: onSave, label: "Save" })] })] }));
+                }, children: [_jsx(MemoizedSecondaryButton, { onClick: onDelete, label: "Delete" }), _jsx(Button, { onClick: handleOnClick, label: "Save" })] })] }));
 };
 export const QuillFilterPopover = ({ filterLabel, onClickDeleteFilter, popoverTitle, popoverChildren, isOpen, setIsOpen, }) => {
     return (_jsx(QuillPopover, { isOpen: isOpen, title: popoverTitle, trigger: _jsx(QuillTag, { label: filterLabel, onClickDelete: onClickDeleteFilter, onClick: () => {
@@ -390,9 +391,16 @@ export const TagWrapper = ({ isCard, isRow, editPopoverKey, keyPrefix, formData,
     }
 };
 export const AddFilterPopover = ({ onSave, Button, renderNode, activeEditItem, }) => {
+    const handleOnClick = () => {
+        if (!allNumericNodesValidInTree(activeEditItem)) {
+            alert('Please input a number.');
+            return;
+        }
+        onSave();
+    };
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [activeEditItem && renderNode(activeEditItem), _jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     justifyContent: 'end',
-                }, children: _jsx(Button, { onClick: onSave, label: 'Add filter' }) })] }));
+                }, children: _jsx(Button, { onClick: handleOnClick, label: 'Add filter' }) })] }));
 };

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

@@ -74,4 +74,5 @@ export declare const getDateFilterInfo: (node: any) => {
     intervalPaths: any;
 };
 export declare function removeNonSelectedTableReferences(ast: any, table: string): any;
+export declare function allNumericNodesValidInTree(node: any): boolean;
 //# sourceMappingURL=util.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/util.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,eAAO,MAAM,qBAAqB,SAAU,GAAG,YAW9C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,WAa1C;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,GAAG,WAK5C;AAGD,eAAO,MAAM,WAAW,SAAU,GAAG,YAuBpC,CAAC;AAKF,eAAO,MAAM,oBAAoB,SAAU,GAAG,QAE7C,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG;;;;;;;;EAU3C;AAKD,eAAO,MAAM,eAAe,QAAS,GAAG,QAMvC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,WAiBvD;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,GAAG,iBAQjD;AAED,wBAAgB,+BAA+B,CAC7C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAOf;AAQD,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,gCAAgC,CAC9C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAOf;AAMD,eAAO,MAAM,mBAAmB,SAAU,GAAG,gBAAgB,MAAM,YA4BlE,CAAC;AAIF,eAAO,MAAM,2BAA2B,SAAU,GAAG,YAUpD,CAAC;AAIF,eAAO,MAAM,oBAAoB,SACzB,GAAG,gBACK,MAAM,KACnB,OAoBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAAU,GAAG,gBAAgB,MAAM,QAYpE,CAAC;AAEF,eAAO,MAAM,4BAA4B,SAAU,GAAG,KAAG,OAUxD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,SAAU,GAAG,QA4B3C,CAAC;AAGF,eAAO,MAAM,UAAU,eAAgB,MAAM,SAe5C,CAAC;AAmBF;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,CAAC,EAAE,MAAM,UAsBvE;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,GAAG,UAgB9C;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,CAAC,EAAE,MAAM,sBAmBtE;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,SAAU,GAAG,YAU1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,GAAG,YAOxC,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,WAehD;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,GAAG,GACV,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAyB1C;AAED,eAAO,MAAM,QAAQ,QAAS,GAAG,QAAoC,CAAC;AAEtE,eAAO,MAAM,QAAQ,MAAO,MAAM,WAA2C,CAAC;AA4L9E,eAAO,MAAM,iBAAiB,SAAU,GAAG;;;;;;;CAc1C,CAAC;AAqCF,wBAAgB,gCAAgC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,OAQvE"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/util.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,eAAO,MAAM,qBAAqB,SAAU,GAAG,YAW9C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,WAa1C;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,GAAG,WAK5C;AAGD,eAAO,MAAM,WAAW,SAAU,GAAG,YAuBpC,CAAC;AAKF,eAAO,MAAM,oBAAoB,SAAU,GAAG,QAE7C,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG;;;;;;;;EAU3C;AAKD,eAAO,MAAM,eAAe,QAAS,GAAG,QAMvC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,WAiBvD;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,GAAG,iBAQjD;AAED,wBAAgB,+BAA+B,CAC7C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAOf;AAQD,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,gCAAgC,CAC9C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAOf;AAMD,eAAO,MAAM,mBAAmB,SAAU,GAAG,gBAAgB,MAAM,YA4BlE,CAAC;AAIF,eAAO,MAAM,2BAA2B,SAAU,GAAG,YAUpD,CAAC;AAIF,eAAO,MAAM,oBAAoB,SACzB,GAAG,gBACK,MAAM,KACnB,OAoBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAAU,GAAG,gBAAgB,MAAM,QAYpE,CAAC;AAEF,eAAO,MAAM,4BAA4B,SAAU,GAAG,KAAG,OAUxD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,SAAU,GAAG,QA4B3C,CAAC;AAGF,eAAO,MAAM,UAAU,eAAgB,MAAM,SAe5C,CAAC;AAmBF;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,CAAC,EAAE,MAAM,UAsBvE;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,GAAG,UAgB9C;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,CAAC,EAAE,MAAM,sBAmBtE;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,SAAU,GAAG,YAU1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,GAAG,YAOxC,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,WAehD;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,GAAG,GACV,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAyB1C;AAED,eAAO,MAAM,QAAQ,QAAS,GAAG,QAAoC,CAAC;AAEtE,eAAO,MAAM,QAAQ,MAAO,MAAM,WAA2C,CAAC;AA4L9E,eAAO,MAAM,iBAAiB,SAAU,GAAG;;;;;;;CAc1C,CAAC;AAqCF,wBAAgB,gCAAgC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,OAQvE;AAED,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAe7D"}

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

@@ -662,3 +662,21 @@ export function removeNonSelectedTableReferences(ast, table) {
     console.log(ast);
     return ast;
 }
+export function allNumericNodesValidInTree(node) {
+    if (!node)
+        return true;
+    if (node.type === 'number') {
+        const value = parseFloat(node.value);
+        console.log(node.value, value);
+        if (Number.isNaN(value)) {
+            return false;
+        }
+        else {
+            node.value = value;
+            return true;
+        }
+    }
+    const isLeftValid = allNumericNodesValidInTree(node.left);
+    const isRightValid = allNumericNodesValidInTree(node.right);
+    return isLeftValid && isRightValid;
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 export interface Option {
     value: string;
     label: string;
@@ -9,7 +9,8 @@ export interface SelectComponentProps {
     options: Option[];
     disabled?: boolean;
     label?: string;
-    theme: any;
+    theme?: any;
+    style?: CSSProperties;
 }
 export interface ButtonComponentProps {
     onClick: () => void;
@@ -31,13 +32,15 @@ export interface TableComponentProps {
     rowsPerPage?: number;
     emptyStateLabel?: string;
 }
+/**
+ * An input element used to accept data from the user.
+ */
 export interface TextInputComponentProps {
-    onChange: (e: any) => void;
-    value: string;
     id: string;
-    placeholder: string;
-    theme?: any;
-    width?: string;
+    width: number;
+    value: string | number | undefined | null;
+    placeholder?: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface ModalComponentProps {
     children: any;
@@ -61,13 +64,11 @@ export interface DeleteButtonProps {
     onClick: () => void;
     style: any;
 }
-export declare const QuillTextInput: ({ value, onChange, placeholder, id, theme, }: TextInputComponentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedTextInput: ({ value, onChange, placeholder, id }: {
-    value: any;
-    onChange: any;
-    placeholder: any;
-    id: any;
-}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The fallback TextInput element for Quill.
+ */
+export declare const QuillTextInput: ({ id, value, width, placeholder, onChange, }: TextInputComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedTextInput: ({ value, onChange, placeholder, id, }: TextInputComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MemoizedButton: ({ label, onClick, primary, isLoading, }: {
     label: any;
     onClick: any;

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

@@ -1 +1 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/UiComponents.js

@@ -3,7 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useContext, useEffect, useRef } from 'react';
 import { ArrowDownHeadIcon, XIcon } from '../assets';
 import { ThemeContext } from '../Context';
-export const QuillTextInput = ({ value, onChange, placeholder, id, theme, }) => {
+/**
+ * The fallback TextInput element for Quill.
+ */
+export const QuillTextInput = ({ id, value, width, placeholder, onChange, }) => {
+    const [theme] = useContext(ThemeContext);
     return (_jsx("input", { style: {
             display: 'flex',
             height: 40,
@@ -14,14 +18,15 @@ export const QuillTextInput = ({ value, onChange, placeholder, id, theme, }) =>
             fontSize: 14,
             boxSizing: 'border-box',
             paddingLeft: 13,
-            backgroundColor: theme.backgroundColor,
-            color: theme.primaryTextColor,
-            fontFamily: theme.fontFamily,
-            width: 200,
-            minWidth: 200,
-        }, id: id, type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder }));
+            backgroundColor: theme?.backgroundColor,
+            color: theme?.primaryTextColor,
+            fontFamily: theme?.fontFamily,
+            width: width,
+            minWidth: width,
+        }, id: id, value: value, placeholder: placeholder, onChange: onChange }));
 };
-export const MemoizedTextInput = ({ value, onChange, placeholder, id }) => {
+// TODO: depreciate this component in favor of QuillTextInput (or vice versa)
+export const MemoizedTextInput = ({ value, onChange, placeholder, id, }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("style", { children: `
     .quill-text-input {
@@ -38,7 +43,7 @@ export const MemoizedTextInput = ({ value, onChange, placeholder, id }) => {
        padding-top: 0px;
        padding-bottom: 0px;
        box-sizing: border-box;
-    }` }), _jsx("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: { fontFamily: theme?.fontFamily } })] }));
+    }` }), _jsx("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: onChange, placeholder: placeholder, style: { fontFamily: theme?.fontFamily } })] }));
 };
 export const MemoizedButton = ({ label, onClick, primary = true, isLoading = false, }) => {
     const [theme] = useContext(ThemeContext);
@@ -140,6 +145,7 @@ export const MemoizedLabel = ({ children }) => {
             color: theme?.secondaryTextColor || '#575E6A',
             userSelect: 'none',
             paddingBottom: 5,
+            margin: 0,
         }, children: children }));
 };
 export const MemoizedCheckbox = ({ checked, onChange, style = {}, ...props }) => (_jsx("input", { type: "checkbox", checked: checked, onChange: () => onChange(!checked), style: { width: '14px', height: '14px', margin: 'auto 0', ...style }, ...props }));
@@ -178,13 +184,17 @@ export const MemoizedTabs = ({ defaultValue, options, onValueChange }) => (_jsx(
                     color: '#606572',
                 }),
         }, children: label }))) }));
-export const MemoizedText = ({ children }) => (_jsx("p", { style: {
-        fontSize: 12,
-        fontWeight: 400,
-        margin: 0,
-        color: '#575E6A',
-        userSelect: 'none',
-    }, children: children }));
+export const MemoizedText = ({ children }) => {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("p", { style: {
+            fontSize: 12,
+            fontWeight: 400,
+            margin: 0,
+            color: '#575E6A',
+            userSelect: 'none',
+            fontFamily: theme?.fontFamily,
+        }, children: children }));
+};
 const useOnClickOutside = (ref, handler) => {
     useEffect(() => {
         const listener = (event) => {

package/dist/esm/utils/width.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Calculates the width that the first child of the given container should be
+ * such that the first child takes up as much space as possible in the container
+ * without crowding out the rest of its siblings. Also respects flexbox gap.
+ * @param containerRef the ref of the container element
+ * @param setState a callback to set the new width of the first child
+ * @param options config options ('gap' sets the size of the flexbox gap)
+ */
+export declare const updateFirstChildWidth: (containerRef: React.RefObject<HTMLElement>, setState: (value: React.SetStateAction<number>) => void, options?: {
+    gap: number;
+}) => void;
+//# sourceMappingURL=width.d.ts.map

package/dist/esm/utils/width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"width.d.ts","sourceRoot":"","sources":["../../../src/utils/width.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,iBAClB,MAAM,SAAS,CAAC,WAAW,CAAC,oBACxB,MAAM,cAAc,CAAC,MAAM,CAAC,KAAK,IAAI,YAC9C;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,SAazB,CAAC"}

package/dist/esm/utils/width.js

@@ -0,0 +1,21 @@
+/**
+ * Calculates the width that the first child of the given container should be
+ * such that the first child takes up as much space as possible in the container
+ * without crowding out the rest of its siblings. Also respects flexbox gap.
+ * @param containerRef the ref of the container element
+ * @param setState a callback to set the new width of the first child
+ * @param options config options ('gap' sets the size of the flexbox gap)
+ */
+export const updateFirstChildWidth = (containerRef, setState, options = { gap: 0 }) => {
+    if (containerRef.current) {
+        const element = containerRef.current;
+        const totalWidth = element.getBoundingClientRect().width;
+        const gapWidth = options.gap * (element.childElementCount - 1);
+        let siblingsWidth = 0;
+        const children = Array.from(containerRef.current.children);
+        for (let i = 1; i < children.length; i++) {
+            siblingsWidth += children[i].getBoundingClientRect().width;
+        }
+        setState(totalWidth - siblingsWidth - gapWidth);
+    }
+};