@quillsql/react 2.12.52 → 2.13.0

package/dist/esm/components/QuillMultiSelectWithCombo.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnClickOutside } from '../hooks';
 import { LoadingSpinner } from './UiComponents';
-import React, { useContext, useEffect, useRef, useState, } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { ThemeContext } from '../Context';
 /**
  * Helper function for displaying option labels
@@ -28,27 +28,15 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
     const modalRef = useRef(null);
     const debounceTimeoutId = useRef(null);
     const [searchQuery, setSearchQuery] = React.useState('');
-    const [filteredItems, setFilteredItems] = React.useState(options.slice(0, 20));
+    const [exceedsLimit, setExceedsLimit] = useState(false);
     useEffect(() => {
-        setFilteredItems(options.slice(0, 20));
+        if (options.length > 0 && options?.[0]?.value === 'EXCEEDS_LIMIT') {
+            setExceedsLimit(true);
+        }
+        else {
+            setExceedsLimit(false);
+        }
     }, [options]);
-    const handleSearchChange = (value) => {
-        setSearchQuery(value);
-        const curFilteredItems = value === ''
-            ? options.slice(0, 20)
-            : options
-                .filter((option) => {
-                if (!option) {
-                    return false;
-                }
-                return option.value
-                    .toLowerCase()
-                    .replace(/\s+/g, '')
-                    .includes(value.toLowerCase().replace(/\s+/g, ''));
-            })
-                .slice(0, 20);
-        setFilteredItems(curFilteredItems);
-    };
     useOnClickOutside(modalRef, () => setShowModal(false));
     useEffect(() => {
         if (!value) {
@@ -66,14 +54,43 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
             onChange(updatedChangeEvent);
         }, 500);
     };
-    // const filterOptions = (query: string) => {
-    //   setSearchQuery(query);
-    //   setFilteredOptions(
-    //     options.filter((option) =>
-    //       option.label.toLowerCase().includes(query.toLowerCase()),
-    //     ),
-    //   );
-    // };
+    const filteredItems = React.useMemo(function () {
+        // Sort null to top
+        if (searchQuery === '') {
+            return options.sort((a, b) => {
+                if (a.value === null) {
+                    return -1;
+                }
+                if (b.value === null) {
+                    return 1;
+                }
+                return 0;
+            });
+        }
+        return options
+            .filter((option) => {
+            if (!option) {
+                return false;
+            }
+            return option.value
+                .toLowerCase()
+                .replace(/\s+/g, '')
+                .includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
+        })
+            .sort((a, b) => {
+            if (a.value === null) {
+                return -1;
+            }
+            if (b.value === null) {
+                return 1;
+            }
+            return a.label.localeCompare(b.label);
+        })
+            .slice(0, 20);
+    }, [options, searchQuery]);
+    const nullLabel = useMemo(() => {
+        return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
+    }, [filteredItems]);
     return (_jsxs("div", { style: {
             position: 'relative',
             borderRadius: '6px',
@@ -85,7 +102,7 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                     fontFamily: theme?.fontFamily,
                     paddingBottom: 5,
                     fontWeight: 600,
-                }, children: label })), _jsxs("button", { style: {
+                }, children: label ?? nullLabel })), _jsxs("button", { style: {
                     fontFamily: theme?.fontFamily,
                     color: theme?.primaryTextColor,
                     width: '100%',
@@ -134,9 +151,14 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                     maxHeight: '50vh',
                     overflow: 'scroll',
                     fontSize: 14,
-                }, children: [options && options.length > 20 && !isLoading && (_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
-                            handleSearchChange(value);
-                        } })), options && options.length > 20 && (_jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } })), (!filteredItems || filteredItems.length === 0) && !isLoading && (_jsxs("div", { style: {
+                }, children: [!exceedsLimit && options && options.length > 20 && (_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
+                            setSearchQuery(value);
+                        } })), !exceedsLimit && options && options.length > 20 && (_jsx("div", { style: {
+                            height: 9,
+                            width: 230,
+                            borderTop: '1px solid #e7e7e7',
+                        } })), !isLoading &&
+                        (!filteredItems || filteredItems.length === 0 || exceedsLimit) && (_jsxs("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             padding: 8,
@@ -155,18 +177,18 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                             gap: 6,
                             overflow: 'hidden',
                         }, children: [_jsx("style", { children: `
-            .quill-option {
-              background: white;
-            }
-              .quill-option:hover {
-                background: #F4F4F5;
+              .quill-option {
+                background: white;
               }
-            ` }), _jsx("span", { style: {
+                .quill-option:hover {
+                  background: #F4F4F5;
+                }
+              ` }), _jsx("span", { style: {
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     cursor: 'default',
-                                }, children: "No options available" })] })), !isLoading ? (filteredItems.map((option) => (_jsxs("button", { style: {
+                                }, children: exceedsLimit ? 'Too many options' : 'No options available' })] })), !exceedsLimit && !isLoading ? (filteredItems.map((option) => (_jsxs("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             padding: 8,
@@ -207,17 +229,17 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                             }
                             debounce(updatedChangeEvent);
                         }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: white;
-                }
-                  .quill-option:hover {
-                    background: #F4F4F5;
+                  .quill-option {
+                    background: white;
                   }
-                ` }), _jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), _jsx("span", { style: {
+                    .quill-option:hover {
+                      background: #F4F4F5;
+                    }
+                  ` }), _jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), _jsx("span", { style: {
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
-                                }, children: option.label })] }, option.value)))) : (_jsx(LoadingSpinner, {}))] }))] }));
+                                }, children: option.label ?? nullLabel })] }, option.value)))) : isLoading ? (_jsx("div", { children: _jsx(LoadingSpinner, {}) })) : null] }))] }));
 }
 export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
     return (_jsxs("div", { style: {

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

@@ -2,5 +2,5 @@ import { SelectComponentProps } from './UiComponents';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export declare function QuillSelectComponent({ options, value, width, onChange, label, isLoading, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillSelectComponent({ options, value, width, onChange, label, isLoading, disabled, hideEmptyOption, }: 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,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,2CAiNtB"}
+{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,oBAAoB,2CA8OtB"}

package/dist/esm/components/QuillSelect.js

@@ -1,16 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnClickOutside } from '../hooks';
 import { LoadingSpinner } from './UiComponents';
-import { useContext, useRef, useState } from 'react';
+import { useContext, useMemo, useRef, useState } from 'react';
 import { ThemeContext } from '../Context';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export function QuillSelectComponent({ options, value, width, onChange, label, isLoading, }) {
+export function QuillSelectComponent({ options, value, width, onChange, label, isLoading, disabled, hideEmptyOption, }) {
     const [theme] = useContext(ThemeContext);
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
     useOnClickOutside(modalRef, () => setShowModal(false));
+    const sortedItems = useMemo(() => {
+        // Sort null to top
+        return options.sort((a, b) => {
+            if (a.value === null) {
+                return -1;
+            }
+            if (b.value === null) {
+                return 1;
+            }
+            return 0;
+        });
+    }, [options]);
+    const nullLabel = useMemo(() => {
+        return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
+    }, [sortedItems]);
     return (_jsxs("div", { style: {
             position: 'relative',
             // width: 200,
@@ -24,7 +39,7 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                     fontFamily: theme?.fontFamily,
                     paddingBottom: 5,
                     fontWeight: 600,
-                }, children: label })), _jsxs("button", { style: {
+                }, children: label ?? nullLabel })), _jsxs("button", { style: {
                     fontFamily: theme?.fontFamily,
                     color: theme?.primaryTextColor,
                     width: '100%',
@@ -45,7 +60,14 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), _jsx("span", { style: {
+                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [_jsx("style", { children: ` 
+            .quill-select-button { background: ${theme?.backgroundColor}; } 
+            .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+            .quill-select-button:disabled {
+              opacity: 0.5;
+              cursor: not-allowed;
+            }        
+          ` }), _jsx("span", { style: {
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
@@ -69,7 +91,7 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                     fontFamily: theme?.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
-                }, children: [!isLoading && (_jsxs("button", { style: {
+                }, children: [!isLoading && !hideEmptyOption && (_jsxs("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -92,7 +114,7 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                             const changeEvent = { target: { value: '' } };
                             onChange(changeEvent);
                             setShowModal(false);
-                        }, children: [_jsx("style", { children: `
+                        }, disabled: disabled, children: [_jsx("style", { children: `
                 .quill-option {
                   background: white;
                 }
@@ -122,7 +144,7 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                             const changeEvent = { target: { value: option.value } };
                             onChange(changeEvent);
                             setShowModal(false);
-                        }, children: [_jsx("style", { children: `
+                        }, disabled: disabled, children: [_jsx("style", { children: `
                 .quill-option {
                   background: white;
                 }
@@ -133,5 +155,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, {}))] }))] }));
 }

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

@@ -2,5 +2,5 @@ import { SelectComponentProps } from './UiComponents';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export declare function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillSelectWithCombo.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,2CAwPtB"}
+{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,GAChB,EAAE,oBAAoB,2CA8QtB"}

package/dist/esm/components/QuillSelectWithCombo.js

@@ -1,39 +1,60 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnClickOutside } from '../hooks';
 import { LoadingSpinner } from './UiComponents';
-import React, { useContext, useEffect, useRef, useState, } from 'react';
+import React, { useContext, useMemo, useRef, useState, } from 'react';
 import { ThemeContext } from '../Context';
 import { ListboxTextInput } from './QuillMultiSelectWithCombo';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, }) {
+export function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, }) {
     const [theme] = useContext(ThemeContext);
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
     const [searchQuery, setSearchQuery] = React.useState('');
-    const [filteredItems, setFilteredItems] = React.useState([]);
-    useOnClickOutside(modalRef, () => setShowModal(false));
-    useEffect(() => {
-        setFilteredItems(options.slice(0, 20));
-    }, [options]);
-    const handleSearchChange = (value) => {
-        setSearchQuery(value);
-        const curFilteredItems = value === ''
-            ? options.slice(0, 20)
-            : options
-                .filter((option) => {
-                if (!option) {
-                    return false;
+    const filteredItems = React.useMemo(function () {
+        // Sort null to top
+        if (searchQuery === '') {
+            return options.sort((a, b) => {
+                if (a.value === null) {
+                    return -1;
+                }
+                if (b.value === null) {
+                    return 1;
                 }
-                return option.value
-                    .toLowerCase()
-                    .replace(/\s+/g, '')
-                    .includes(value.toLowerCase().replace(/\s+/g, ''));
-            })
-                .slice(0, 20);
-        setFilteredItems(curFilteredItems);
-    };
+                return 0;
+            });
+        }
+        return options
+            .filter((option) => {
+            if (!option) {
+                return false;
+            }
+            return option.value
+                .toLowerCase()
+                .replace(/\s+/g, '')
+                .includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
+        })
+            .sort((a, b) => {
+            if (a.value === null) {
+                return -1;
+            }
+            if (b.value === null) {
+                return 1;
+            }
+            return a.label.localeCompare(b.label);
+        })
+            .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);
+        return selectedOption && selectedOption.label == null
+            ? nullLabel
+            : selectedOption?.label ?? 'Select';
+    }, [value, options, nullLabel]);
     useOnClickOutside(modalRef, () => setShowModal(false));
     return (_jsxs("div", { style: {
             position: 'relative',
@@ -73,7 +94,7 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
                             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", { ref: modalRef, style: {
+                        }, children: selectedLabel }), _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", { ref: modalRef, style: {
                     position: 'absolute',
                     width: '100%',
                     display: 'flex',
@@ -95,8 +116,8 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
                     overflow: 'scroll',
                     fontSize: 14,
                 }, children: [options && options.length > 20 && !isLoading && (_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
-                            handleSearchChange(value);
-                        } })), searchQuery === '' && !isLoading && (_jsxs("button", { style: {
+                            setSearchQuery(value);
+                        } })), searchQuery === '' && !isLoading && !hideEmptyOption && (_jsxs("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -160,5 +181,5 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
-                                }, children: option.label })] }, option.value)))) : (_jsx(LoadingSpinner, {}))] }))] }));
+                                }, children: option.label ?? nullLabel })] }, option.value)))) : (_jsx(LoadingSpinner, {}))] }))] }));
 }

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

@@ -3,11 +3,12 @@ import { ButtonComponentProps } from './UiComponents';
 export interface TableComponentProps {
     rows: object[];
     rowCount?: number;
+    rowCountIsLoading?: boolean;
     columns: {
         label: string;
         field: string;
     }[];
-    currentPage?: number;
+    currentPage: number;
     sort?: {
         field: string;
         direction: string;
@@ -27,5 +28,5 @@ export interface TableComponentProps {
         direction: string;
     }) => void;
 }
-export default function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hideCSVDownloadButton, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, onPageChange, onSortChange, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
+export default function QuillTable({ rows, rowCount, rowCountIsLoading, columns, isLoading, currentPage, sort, hideCSVDownloadButton, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, onPageChange, onSortChange, }: 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":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,oBAAoB,EAAyB,MAAM,gBAAgB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,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;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,qBAA4B,EAC5B,cAAc,EACd,SAAS,EACT,gBAAwC,EACxC,WAAgB,EAChB,eAA8B,EAC9B,WAAW,EACX,YAAY,EACZ,YAAY,GACb,EAAE,mBAAmB,2CA+crB"}
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,oBAAoB,EAAyB,MAAM,gBAAgB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,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;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,qBAA4B,EAC5B,cAAc,EACd,SAAS,EACT,gBAAwC,EACxC,WAAgB,EAChB,eAA8B,EAC9B,WAAW,EACX,YAAY,EACZ,YAAY,GACb,EAAE,mBAAmB,2CA+drB"}

package/dist/esm/components/QuillTable.js

@@ -3,26 +3,25 @@ import { useContext, useEffect, useState } from 'react';
 import { compareValues } from '../utils/valueFormatter';
 import { ThemeContext } from '../Context';
 import { QuillLoadingComponent } from './UiComponents';
-export default function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
+export default function QuillTable({ rows, rowCount, rowCountIsLoading, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
     const [activeRows, setActiveRows] = useState([]);
-    const [pageIndex, setPageIndex] = useState(currentPage || 0);
     const [maxPage, setMaxPage] = useState(1);
     const [sortColumn, setSortColumn] = useState(sort?.field || '');
     const [sortDirection, setSortDirection] = useState(sort?.direction || 'desc');
     const [theme] = useContext(ThemeContext);
     const [isPaginating, setIsPaginating] = useState(true);
-    const [initialLoad, setInitialLoad] = useState(isLoading);
+    const [initialLoad, setInitialLoad] = useState(true);
     useEffect(() => {
         setSortColumn(sort?.field || '');
         setSortDirection(sort?.direction || 'desc');
     }, [sort]);
     useEffect(() => {
-        setIsPaginating(true);
         if (rows?.length === 0 && isLoading) {
             return;
         }
-        const start = pageIndex * rowsPerPage;
-        const end = (pageIndex + 1) * rowsPerPage;
+        setIsPaginating(true);
+        const start = currentPage * rowsPerPage;
+        const end = (currentPage + 1) * rowsPerPage;
         if (rowCount && onSortChange && rowCount !== rows.length) {
             setMaxPage(Math.ceil(rowCount / rowsPerPage));
             setActiveRows(rows.slice(start, end));
@@ -40,25 +39,29 @@ export default function QuillTable({ rows, rowCount, columns, isLoading, current
         }
         setIsPaginating(false);
         setInitialLoad(false);
-    }, [pageIndex, rows, sortColumn, sortDirection, columns, rowCount]);
+    }, [currentPage, rows, sortColumn, sortDirection, columns, rowCount]);
+    useEffect(() => {
+        if (rows.length < (currentPage + 1) * rowsPerPage) {
+            onPageChange && onPageChange(0);
+            setMaxPage(1);
+        }
+    }, [rows]);
     const increasePage = () => {
-        if (pageIndex + 1 === maxPage) {
+        if (!rowCountIsLoading && currentPage + 1 === maxPage) {
             return;
         }
-        setPageIndex((pageIndex) => pageIndex + 1);
-        onPageChange && onPageChange(pageIndex + 1);
+        onPageChange && onPageChange(currentPage + 1);
     };
     const decreasePage = () => {
-        if (pageIndex === 0) {
+        if (currentPage === 0) {
             return;
         }
-        setPageIndex((pageIndex) => pageIndex - 1);
-        onPageChange && onPageChange(pageIndex - 1);
+        onPageChange && onPageChange(currentPage - 1);
     };
     const toggleSort = (column) => {
         if (sortColumn === column.field) {
             setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-            setPageIndex(0);
+            onPageChange && onPageChange(0);
             if (onSortChange) {
                 onSortChange({
                     field: column.field,
@@ -69,7 +72,7 @@ export default function QuillTable({ rows, rowCount, columns, isLoading, current
         else {
             setSortColumn(column.field);
             setSortDirection('desc');
-            setPageIndex(0);
+            onPageChange && onPageChange(0);
             if (onSortChange) {
                 onSortChange({
                     field: column.field,
@@ -102,6 +105,7 @@ export default function QuillTable({ rows, rowCount, columns, isLoading, current
                 margin: 0,
                 boxSizing: 'border-box',
                 outline: 'none',
+                position: 'relative',
             }, children: _jsxs("div", { role: "table", className: "table", style: {
                     display: 'flex',
                     flexDirection: 'column',
@@ -121,8 +125,9 @@ export default function QuillTable({ rows, rowCount, columns, isLoading, current
                                             boxSizing: 'border-box',
                                             marginBottom: '-1px', // avoid double border
                                         }, children: columns &&
-                                            columns.map((column, index) => (_jsxs("div", { onClick: () => {
+                                            columns.map((column, index) => (_jsxs("div", { onClick: (e) => {
                                                     toggleSort(column);
+                                                    e.stopPropagation();
                                                 }, style: {
                                                     boxSizing: 'border-box',
                                                     flex: '150 0 auto',
@@ -165,7 +170,7 @@ export default function QuillTable({ rows, rowCount, columns, isLoading, current
                                                             transform: sortDirection === 'desc'
                                                                 ? 'rotate(180deg)'
                                                                 : undefined,
-                                                        }, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), (isPaginating || isLoading) && (_jsx("div", { className: className, children: _jsx(LoadingComponent, {}) })), (activeRows && activeRows.length === 0) ||
+                                                        }, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), (isPaginating || isLoading) && (_jsx("div", { className: className, style: { position: 'absolute', width: '100%' }, children: _jsx(LoadingComponent, {}) })), (activeRows && activeRows.length === 0) ||
                                     (columns && columns.length === 0) ? (_jsx("div", { style: {
                                         padding: '30px 0',
                                         display: isPaginating || isLoading ? 'none' : 'flex',
@@ -175,6 +180,8 @@ export default function QuillTable({ rows, rowCount, columns, isLoading, current
                                         alignItems: 'center',
                                         fontSize: 13,
                                         color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                                        position: 'absolute',
+                                        width: '100%',
                                     }, children: emptyStateLabel })) : (_jsx("div", { role: "rowgroup", className: "tbody", children: activeRows &&
                                         activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
                                                 display: isPaginating || isLoading ? 'none' : 'flex',
@@ -259,11 +266,17 @@ export default function QuillTable({ rows, rowCount, columns, isLoading, current
                                                 fontSize: 12,
                                                 fontFamily: theme?.fontFamily,
                                                 color: theme?.primaryTextColor,
-                                            }, children: [pageIndex + 1, ' of ', maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: decreasePage, style: {
+                                            }, children: [currentPage + 1, ' of ', rowCountIsLoading && maxPage > 1 ? 'many' : maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: (e) => {
+                                                decreasePage();
+                                                e.stopPropagation();
+                                            }, style: {
                                                 cursor: 'pointer',
                                                 border: 'none',
                                                 background: 'transparent',
-                                            }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), _jsx("button", { onClick: increasePage, style: {
+                                            }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), _jsx("button", { onClick: (e) => {
+                                                increasePage();
+                                                e.stopPropagation();
+                                            }, style: {
                                                 cursor: 'pointer',
                                                 border: 'none',
                                                 background: 'transparent',

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

@@ -1,7 +1,7 @@
 /// <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, }: {
+export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle, LimitPopover, EditPopover, TextInput, Button, SecondaryButton, disabled, }: {
     limit: any;
     handleDelete: () => void;
     setOpenPopover: (arg: any) => void;
@@ -12,6 +12,7 @@ export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSa
     TextInput: any;
     Button: (props: ButtonComponentProps) => JSX.Element;
     SecondaryButton: (props: ButtonComponentProps) => JSX.Element;
+    disabled?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export interface AddLimitPopoverProps {
     onSave: (limit: number) => void;

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":";AACA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;WAYjB,GAAG;kBACI,MAAM,IAAI;0BACF,GAAG,KAAK,IAAI;qBACjB,GAAG,aAAa,GAAG,KAAK,IAAI;;0BAEvB,0BAA0B,KAAK,WAAW;iBACnD,GAAG;eACL,GAAG;oBACE,oBAAoB,KAAK,WAAW;6BAC3B,oBAAoB,KAAK,WAAW;6CAiC9D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,CAAC,EACf,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,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,6FAQzB,oBAAoB,4CAwEtB,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;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;WAajB,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;;6CAmC9D,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,kBAAkB,CAAC,EACf,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,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,6FAQzB,oBAAoB,4CAwEtB,CAAC"}

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { MemoizedButton, MemoizedSecondaryButton, QuillTextInput, } from '../UiComponents';
-export const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit limit', LimitPopover, EditPopover, TextInput = QuillTextInput, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
+export const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit limit', LimitPopover, EditPopover, TextInput = QuillTextInput, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, disabled = false, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const handleClickDelete = () => {
         setOpenPopover(null);
         handleDelete();
     };
-    return (_jsx("div", { style: { width: '100%' }, children: _jsx(LimitPopover, { isOpen: isOpen, setIsOpen: setIsOpen, limitLabel: `limit ${limit.value[0].value}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: _jsx(EditPopover, { onSave: (column, direction) => {
+    return (_jsx("div", { style: { width: '100%' }, children: _jsx(LimitPopover, { isOpen: isOpen, setIsOpen: setIsOpen, limitLabel: `limit ${limit.value[0].value}`, onClickDelete: handleClickDelete, disabled: disabled, popoverTitle: popoverTitle, popoverChildren: _jsx(EditPopover, { onSave: (column, direction) => {
                     setIsOpen(false);
                     onSave(column, direction);
                 }, isEdit: true, onDelete: handleClickDelete, initialLimit: limit.value[0].value, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) }) }));