@quillsql/react 2.12.51 → 2.12.53

package/dist/cjs/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAmCjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,GACR,EAAE;IACD,IAAI,EAAE,GAAG,CAAC;IACV,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAiJd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,eAAe;UAOpB,GAAG;;mCAGE,WAAW,UACZ,UAAU,KACf,YAAY;2BACM,GAAG;aACjB,GAAG,EAAE,GAAG,IAAI;wDAMlB,yBAAyB,KAAK,WAAW;MAC1C,WA4EH,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAoCjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,GACR,EAAE;IACD,IAAI,EAAE,GAAG,CAAC;IACV,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CA+Kd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe;UAOpB,GAAG;;mCAGE,WAAW,UACZ,UAAU,KACf,YAAY;2BACM,GAAG;aACjB,GAAG,EAAE,GAAG,IAAI;qFAQlB,yBAAyB,KAAK,WAAW;MAC1C,WA4EH,CAAC"}

package/dist/cjs/components/Dashboard/DataLoader.js

@@ -39,6 +39,22 @@ function DataLoader({ item, children, filters, }) {
     const [additionalProcessing, setAdditionProcessing] = (0, react_1.useState)({
         page: paginationProcessing_1.DEFAULT_PAGINATION,
     });
+    const [rowCount, setRowCount] = (0, react_1.useState)(dashboard[item._id]?.rowCount ?? 0);
+    const [rowCountIsLoading, setRowCountIsLoading] = (0, react_1.useState)(false);
+    const fetchRowCount = async (processing) => {
+        if (!client || !filters) {
+            return;
+        }
+        setRowCountIsLoading(true);
+        const rowCount = await (0, report_1.fetchReportRowCount)(item._id, client, true, filters, processing, schemaData.customFields);
+        dispatch({
+            type: 'UPDATE_DASHBOARD_ITEM',
+            id: item._id,
+            data: { rowCount },
+        });
+        setRowCount(rowCount);
+        setRowCountIsLoading(false);
+    };
     const onPageChange = (page) => {
         if (additionalProcessing &&
             additionalProcessing.page &&
@@ -72,7 +88,7 @@ function DataLoader({ item, children, filters, }) {
             setLoading(true);
             try {
                 const updatedProcessing = { ...additionalProcessing, ...processing };
-                const paginatedRows = await (0, tableProcessing_1.fetchTableByReport)(report.id, client, updatedProcessing, filters, schemaData.customFields);
+                const paginatedRows = await (0, tableProcessing_1.fetchResultsByReport)(report.id, client, updatedProcessing, filters, schemaData.customFields);
                 if (paginatedRows.error) {
                     throw new Error('Error fetching chart');
                 }
@@ -109,13 +125,14 @@ function DataLoader({ item, children, filters, }) {
             return;
         }
         setLoading(true);
-        const { report, error } = await (0, report_1.fetchReport)(item._id, client, true, filters, processing, undefined, schemaData.customFields);
+        const { report: fetchedReport, error } = await (0, report_1.fetchReport)(item._id, client, true, filters, processing, undefined, schemaData.customFields);
+        fetchRowCount(processing);
         dispatch({
             type: 'ADD_DASHBOARD_ITEM',
             id: item._id,
-            data: { ...report, triggerReload: false },
+            data: { ...fetchedReport, triggerReload: false },
         });
-        const convertedReport = (0, report_1.convertInternalReportToReport)(report);
+        const convertedReport = (0, report_1.convertInternalReportToReport)(fetchedReport);
         setReport(convertedReport);
         setAdditionProcessing(processing);
         setError(error);
@@ -139,6 +156,8 @@ function DataLoader({ item, children, filters, }) {
             onPageChange,
             onSortChange,
             data: report,
+            rowCount,
+            rowCountIsLoading,
         }) }));
 }
 exports.default = DataLoader;

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { QuillReport } from '../../models/Report';
-export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }: {
+export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }: {
     report: QuillReport;
     onClick?: (report: QuillReport) => void;
     isLoading?: boolean;
     error?: string;
     rowCount?: number;
+    rowCountIsLoading?: boolean;
     onPageChange?: (page: number) => void;
     onSortChange?: (sort: {
         field: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,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,GAAG,GAAG,CAAC,OAAO,CAyFd"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,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,GAAG,GAAG,CAAC,OAAO,CA0Fd"}

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

@@ -11,7 +11,7 @@ const ChartError_1 = __importDefault(require("../Chart/ChartError"));
 const useExport_1 = require("../../hooks/useExport");
 const paginationProcessing_1 = require("../../utils/paginationProcessing");
 const Context_1 = require("../../Context");
-function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }) {
+function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
     const { downloadCSV } = (0, useExport_1.useExport)(report?.id);
@@ -45,7 +45,7 @@ function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPa
                 } })) : error ? ((0, jsx_runtime_1.jsx)("div", { style: {
                     width: '100%',
                     height: '400px',
-                }, children: (0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: error }) })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, columns: report.columns, rowsPerPage: report.pagination?.rowsPerPage ?? paginationProcessing_1.DEFAULT_PAGINATION.rowsPerPage, containerStyle: {
+                }, children: (0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: error }) })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, columns: report.columns, rowsPerPage: report.pagination?.rowsPerPage ?? paginationProcessing_1.DEFAULT_PAGINATION.rowsPerPage, containerStyle: {
                     width: '100%',
                     height: '400px',
                 }, downloadCSV: () => {

package/dist/cjs/components/Dashboard/util.d.ts

@@ -1,7 +1,7 @@
-import { Client } from '../../models/Client';
+import { QuillProviderClient } from '../../models/Client';
 export declare function validateTemplatesAgainstFilters(filters: any[], templates: any[]): {
     valid: boolean;
     error: string;
 };
-export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: Client, dashboardData: any): Promise<any>;
+export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: QuillProviderClient, dashboardData: any): Promise<any>;
 //# sourceMappingURL=util.d.ts.map

package/dist/cjs/components/Dashboard/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAED,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,GAAG,GACjB,OAAO,CAAC,GAAG,CAAC,CAiDd"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG1D,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAED,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,mBAAmB,EAC3B,aAAa,EAAE,GAAG,GACjB,OAAO,CAAC,GAAG,CAAC,CAiDd"}

package/dist/cjs/components/Dashboard/util.js

@@ -40,13 +40,13 @@ function validateTemplatesAgainstFilters(filters, templates) {
 exports.validateTemplatesAgainstFilters = validateTemplatesAgainstFilters;
 async function addTemplatesToDashboard(name, newTemplates, client, dashboardData) {
     try {
-        const { publicKey, customerId } = client;
+        const { publicKey, organizationId } = client;
         const hostedBody = {
             metadata: {
                 dashboardName: name,
                 task: 'add-from-template',
                 clientId: publicKey,
-                orgId: customerId || '*',
+                orgId: organizationId || '*',
                 templateReportIds: newTemplates.map((template) => template._id),
             },
         };

package/dist/cjs/components/QuillMultiSelect.d.ts

@@ -2,7 +2,7 @@ import { MultiSelectComponentProps } from './UiComponents';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export declare function QuillMultiSelectComponent({ options, width, onChange, label, value, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillMultiSelectComponent({ options, width, onChange, label, value, isLoading, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
     value: string;
     onChange: (e: string) => void;

package/dist/cjs/components/QuillMultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAgC3D;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,yBAAyB,2CAsQ3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}
+{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAsO3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}

package/dist/cjs/components/QuillMultiSelect.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListboxTextInput = exports.QuillMultiSelectComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../hooks");
+const UiComponents_1 = require("./UiComponents");
 const react_1 = require("react");
 const Context_1 = require("../Context");
 /**
@@ -17,20 +18,18 @@ function displaySelectedOptionLabels({ options, value, }) {
         return 'Select';
     }
     return matchingOptions
-        .map((elem) => elem.label)
+        .map((elem) => elem.label ?? '-')
         .join(', ');
 }
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-function QuillMultiSelectComponent({ options, width, onChange, label, value, }) {
+function QuillMultiSelectComponent({ options, width, onChange, label, value, isLoading, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
     const debounceTimeoutId = (0, react_1.useRef)(null);
-    // const [searchQuery, setSearchQuery] = useState('');
-    // const [filteredOptions, setFilteredOptions] = useState(options);
     (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
     (0, react_1.useEffect)(() => {
         if (!value) {
@@ -40,6 +39,21 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, })
             setSelectedOptions(value);
         }
     }, [value]);
+    const sortedItems = (0, react_1.useMemo)(() => {
+        // Sort null to top
+        return options.sort((a, b) => {
+            if (a.value === null) {
+                return -1;
+            }
+            if (b.value === null) {
+                return 1;
+            }
+            return a.label.localeCompare(b.label);
+        });
+    }, [options]);
+    const nullLabel = (0, react_1.useMemo)(() => {
+        return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
+    }, [sortedItems]);
     const debounce = (updatedChangeEvent) => {
         if (debounceTimeoutId.current) {
             clearTimeout(debounceTimeoutId.current);
@@ -48,14 +62,6 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, })
             onChange(updatedChangeEvent);
         }, 500);
     };
-    // const filterOptions = (query: string) => {
-    //   setSearchQuery(query);
-    //   setFilteredOptions(
-    //     options.filter((option) =>
-    //       option.label.toLowerCase().includes(query.toLowerCase()),
-    //     ),
-    //   );
-    // };
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             borderRadius: '6px',
@@ -115,7 +121,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, })
                     fontFamily: theme?.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
-                }, children: options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                }, children: !isLoading ? (sortedItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                         display: 'flex',
                         alignItems: 'center',
                         padding: 8,
@@ -166,7 +172,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, })
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
-                            }, children: option.label })] }, option.value))) }))] }));
+                            }, children: option.label ?? nullLabel })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {})) }))] }));
 }
 exports.QuillMultiSelectComponent = QuillMultiSelectComponent;
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {

package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts

@@ -2,7 +2,7 @@ import { MultiSelectComponentProps } from './UiComponents';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
     value: string;
     onChange: (e: string) => void;

package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAgC3D;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,yBAAyB,2CAiV3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CA4U3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}

package/dist/cjs/components/QuillMultiSelectWithCombo.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListboxTextInput = exports.QuillMultiSelectComponentWithCombo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../hooks");
+const UiComponents_1 = require("./UiComponents");
 const react_1 = __importStar(require("react"));
 const Context_1 = require("../Context");
 /**
@@ -46,34 +47,22 @@ function displaySelectedOptionLabels({ options, value, }) {
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, }) {
+function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
     const debounceTimeoutId = (0, react_1.useRef)(null);
     const [searchQuery, setSearchQuery] = react_1.default.useState('');
-    const [filteredItems, setFilteredItems] = react_1.default.useState(options.slice(0, 20));
+    const [exceedsLimit, setExceedsLimit] = (0, react_1.useState)(false);
     (0, react_1.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);
-    };
     (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
     (0, react_1.useEffect)(() => {
         if (!value) {
@@ -91,14 +80,43 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
             onChange(updatedChangeEvent);
         }, 500);
     };
-    // const filterOptions = (query: string) => {
-    //   setSearchQuery(query);
-    //   setFilteredOptions(
-    //     options.filter((option) =>
-    //       option.label.toLowerCase().includes(query.toLowerCase()),
-    //     ),
-    //   );
-    // };
+    const filteredItems = react_1.default.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 a.label.localeCompare(b.label);
+            });
+        }
+        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 = (0, react_1.useMemo)(() => {
+        return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
+    }, [filteredItems]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             borderRadius: '6px',
@@ -110,7 +128,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                     fontFamily: theme?.fontFamily,
                     paddingBottom: 5,
                     fontWeight: 600,
-                }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
+                }, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
                     color: theme?.primaryTextColor,
                     width: '100%',
@@ -159,9 +177,14 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                     maxHeight: '50vh',
                     overflow: 'scroll',
                     fontSize: 14,
-                }, children: [options && options.length > 20 && ((0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
-                            handleSearchChange(value);
-                        } })), options && options.length > 20 && ((0, jsx_runtime_1.jsx)("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } })), (!filteredItems || filteredItems.length === 0) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [!exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
+                            setSearchQuery(value);
+                        } })), !exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            height: 9,
+                            width: 230,
+                            borderTop: '1px solid #e7e7e7',
+                        } })), !isLoading &&
+                        (!filteredItems || filteredItems.length === 0 || exceedsLimit) && ((0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             padding: 8,
@@ -180,18 +203,18 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                             gap: 6,
                             overflow: 'hidden',
                         }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-            .quill-option {
-              background: white;
-            }
-              .quill-option:hover {
-                background: #F4F4F5;
+              .quill-option {
+                background: white;
               }
-            ` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                .quill-option:hover {
+                  background: #F4F4F5;
+                }
+              ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     cursor: 'default',
-                                }, children: "No options available" })] })), filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                                }, children: exceedsLimit ? 'Too many options' : 'No options available' })] })), !exceedsLimit && !isLoading ? (filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             padding: 8,
@@ -232,17 +255,17 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                             }
                             debounce(updatedChangeEvent);
                         }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-                .quill-option {
-                  background: white;
-                }
-                  .quill-option:hover {
-                    background: #F4F4F5;
+                  .quill-option {
+                    background: white;
                   }
-                ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
+                    .quill-option:hover {
+                      background: #F4F4F5;
+                    }
+                  ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
-                                }, children: option.label })] }, option.value)))] }))] }));
+                                }, children: option.label ?? nullLabel })] }, option.value)))) : isLoading ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] }))] }));
 }
 exports.QuillMultiSelectComponentWithCombo = QuillMultiSelectComponentWithCombo;
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {

package/dist/cjs/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, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillSelectComponent({ options, value, width, onChange, label, isLoading, disabled, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillSelect.d.ts.map

package/dist/cjs/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;AAItD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CA2MtB"}
+{"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,GACT,EAAE,oBAAoB,2CA8OtB"}

package/dist/cjs/components/QuillSelect.js

@@ -3,16 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuillSelectComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../hooks");
+const UiComponents_1 = require("./UiComponents");
 const react_1 = require("react");
 const Context_1 = require("../Context");
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-function QuillSelectComponent({ options, value, width, onChange, label, }) {
+function QuillSelectComponent({ options, value, width, onChange, label, isLoading, disabled, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
     (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
+    const sortedItems = (0, react_1.useMemo)(() => {
+        // Sort null to top
+        return options.sort((a, b) => {
+            if (a.value === null) {
+                return -1;
+            }
+            if (b.value === null) {
+                return 1;
+            }
+            return a.label.localeCompare(b.label);
+        });
+    }, [options]);
+    const nullLabel = (0, react_1.useMemo)(() => {
+        return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
+    }, [sortedItems]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             // width: 200,
@@ -26,7 +42,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, }) {
                     fontFamily: theme?.fontFamily,
                     paddingBottom: 5,
                     fontWeight: 600,
-                }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
+                }, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
                     color: theme?.primaryTextColor,
                     width: '100%',
@@ -47,7 +63,14 @@ function QuillSelectComponent({ options, value, width, onChange, label, }) {
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [(0, jsx_runtime_1.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;
+            }        
+          ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
@@ -71,7 +94,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, }) {
                     fontFamily: theme?.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
-                }, children: [(0, jsx_runtime_1.jsxs)("button", { style: {
+                }, children: [!isLoading && ((0, jsx_runtime_1.jsxs)("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -94,14 +117,14 @@ function QuillSelectComponent({ options, value, width, onChange, label, }) {
                             const changeEvent = { target: { value: '' } };
                             onChange(changeEvent);
                             setShowModal(false);
-                        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                        }, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
                   background: white;
                 }
                   .quill-option:hover {
                     background: #F4F4F5;
                   }
-                ` }), 'Select'] }), options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                ` }), 'Select'] })), !isLoading ? (options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -124,7 +147,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, }) {
                             const changeEvent = { target: { value: option.value } };
                             onChange(changeEvent);
                             setShowModal(false);
-                        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                        }, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
                   background: white;
                 }
@@ -135,6 +158,6 @@ function QuillSelectComponent({ options, value, width, onChange, label, }) {
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
-                                }, children: option.label })] }, option.label)))] }))] }));
+                                }, children: option.label ?? '-' })] }, option.label)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
 }
 exports.QuillSelectComponent = QuillSelectComponent;

package/dist/cjs/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, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillSelectWithCombo.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtD;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CAoPtB"}
+{"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,2CA8QtB"}