@quillsql/react 2.13.7 → 2.13.9

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuillTemplateMetricComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const MetricComponent_1 = __importDefault(require("./MetricComponent"));
@@ -20,4 +21,3 @@ function QuillTemplateMetricComponent({ report, onClick, children, isLoading, })
             cursor: 'pointer',
         }, children: (0, jsx_runtime_1.jsx)(MetricComponent_1.default, { report: report, children: children, isLoading: isLoading }) }));
 }
-exports.default = QuillTemplateMetricComponent;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReport } from '../../models/Report';
 export default function QuillTemplateTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }: {
     report: QuillReport;

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateTableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateTableComponent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,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,CA4Bd"}
+{"version":3,"file":"TemplateTableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateTableComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,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,CA4Bd"}

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuillTemplateTableComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const TableComponent_1 = __importDefault(require("./TableComponent"));
@@ -20,4 +21,3 @@ function QuillTemplateTableComponent({ report, onClick, isLoading, error, rowCou
             cursor: 'pointer',
         }, children: (0, jsx_runtime_1.jsx)(TableComponent_1.default, { report: report, isLoading: isLoading, error: error, rowCount: rowCount, onPageChange: onPageChange, onSortChange: onSortChange }) }));
 }
-exports.default = QuillTemplateTableComponent;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addTemplatesToDashboard = exports.validateTemplatesAgainstFilters = void 0;
+exports.validateTemplatesAgainstFilters = validateTemplatesAgainstFilters;
+exports.addTemplatesToDashboard = addTemplatesToDashboard;
 const dataFetcher_1 = require("../../utils/dataFetcher");
 function validateTemplatesAgainstFilters(filters, templates) {
     let error = '';
@@ -37,7 +38,6 @@ function validateTemplatesAgainstFilters(filters, templates) {
         return { valid: false, error };
     }
 }
-exports.validateTemplatesAgainstFilters = validateTemplatesAgainstFilters;
 async function addTemplatesToDashboard(name, newTemplates, client, dashboardData) {
     try {
         const { publicKey, organizationId } = client;
@@ -82,4 +82,3 @@ async function addTemplatesToDashboard(name, newTemplates, client, dashboardData
         console.error('Error while updating dashboard:', error);
     }
 }
-exports.addTemplatesToDashboard = addTemplatesToDashboard;

package/dist/cjs/components/QuillCard.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuillCard = void 0;
+exports.QuillCard = QuillCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const assets_1 = require("../assets");
@@ -58,4 +58,3 @@ function QuillCard({ children, onClick, onDelete }) {
                     height: '100%',
                 }, children: children })] }));
 }
-exports.QuillCard = QuillCard;

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,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;6CA0DpB,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,2CAgP3B;AAED,eAAO,MAAM,gBAAgB,sCAI1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;CACrB,4CAyDA,CAAC"}

package/dist/cjs/components/QuillMultiSelect.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListboxTextInput = exports.QuillMultiSelectComponent = void 0;
+exports.ListboxTextInput = void 0;
+exports.QuillMultiSelectComponent = QuillMultiSelectComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../hooks");
 const UiComponents_1 = require("./UiComponents");
@@ -29,8 +30,12 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
     const debounceTimeoutId = (0, react_1.useRef)(null);
-    (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false), showModal);
+    (0, hooks_1.useOnClickOutside)(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
     (0, react_1.useEffect)(() => {
         if (!value) {
             setSelectedOptions([]);
@@ -67,7 +72,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
             borderRadius: '6px',
             width: width,
             minWidth: width,
-        }, ref: modalRef, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
                     fontSize: 14,
                     color: theme?.secondaryTextColor,
                     fontFamily: theme?.fontFamily,
@@ -95,7 +100,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                     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}; } 
+                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), ref: buttonRef, 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: {
                             textOverflow: 'ellipsis',
@@ -121,7 +126,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                     fontFamily: theme?.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
-                }, children: !isLoading ? (sortedItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                }, ref: modalRef, children: !isLoading ? (sortedItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                         display: 'flex',
                         alignItems: 'center',
                         padding: 8,
@@ -140,26 +145,23 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                         gap: 6,
                         overflow: 'hidden',
                     }, className: "quill-option", onClick: () => {
-                        // Manually create a synthetic ChangeEvent and pass it to callback
-                        const changeEvent = { target: { value: option.value } };
-                        let updateSelctedOptions = [...selectedOptions];
-                        if (selectedOptions.includes(changeEvent.target.value)) {
-                            updateSelctedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
-                            setSelectedOptions(updateSelctedOptions);
+                        let updateSelectedOptions = [...selectedOptions];
+                        if (selectedOptions.includes(option.value)) {
+                            updateSelectedOptions = selectedOptions.filter((opt) => opt !== option.value);
+                            setSelectedOptions(updateSelectedOptions);
                         }
                         else {
-                            updateSelctedOptions = [
-                                ...updateSelctedOptions,
-                                changeEvent.target.value,
+                            updateSelectedOptions = [
+                                ...updateSelectedOptions,
+                                option.value,
                             ];
-                            setSelectedOptions(updateSelctedOptions);
+                            setSelectedOptions(updateSelectedOptions);
                         }
                         const updatedChangeEvent = {
-                            target: { value: updateSelctedOptions.join(',') },
+                            target: {
+                                value: updateSelectedOptions,
+                            },
                         };
-                        if (updateSelctedOptions.length === 0) {
-                            updatedChangeEvent.target.value = '';
-                        }
                         debounce(updatedChangeEvent);
                     }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
@@ -174,7 +176,6 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                                 overflow: 'hidden',
                             }, children: option.label ?? nullLabel })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {})) }))] }));
 }
-exports.QuillMultiSelectComponent = QuillMultiSelectComponent;
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',

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,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,yBAAyB,2CAiV3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,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,EACT,QAAQ,GACT,EAAE,yBAAyB,2CAge3B;AAED,eAAO,MAAM,gBAAgB,sCAI1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;CACrB,4CAwDA,CAAC"}

package/dist/cjs/components/QuillMultiSelectWithCombo.js

@@ -23,7 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListboxTextInput = exports.QuillMultiSelectComponentWithCombo = void 0;
+exports.ListboxTextInput = void 0;
+exports.QuillMultiSelectComponentWithCombo = QuillMultiSelectComponentWithCombo;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../hooks");
 const UiComponents_1 = require("./UiComponents");
@@ -37,11 +38,11 @@ function displaySelectedOptionLabels({ options, value, }) {
         return 'Select';
     }
     const matchingOptions = options.filter((elem) => value.includes(elem.value));
-    if (!matchingOptions.length) {
-        return 'Select';
+    if (matchingOptions.length !== value.length) {
+        return value.join(', ');
     }
     return matchingOptions
-        .map((elem) => elem.label)
+        .map((elem) => elem.label ?? '-')
         .join(', ');
 }
 /**
@@ -52,9 +53,42 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
     const debounceTimeoutId = (0, react_1.useRef)(null);
     const [searchQuery, setSearchQuery] = react_1.default.useState('');
     const [exceedsLimit, setExceedsLimit] = (0, react_1.useState)(false);
+    const selectAllRef = (0, react_1.useRef)(null);
+    let CheckboxState;
+    (function (CheckboxState) {
+        CheckboxState[CheckboxState["SELECTED"] = 0] = "SELECTED";
+        CheckboxState[CheckboxState["UNSELECTED"] = 1] = "UNSELECTED";
+        CheckboxState[CheckboxState["INDETERMINATE"] = 2] = "INDETERMINATE";
+    })(CheckboxState || (CheckboxState = {}));
+    const optionValues = (0, react_1.useMemo)(() => new Set(options.map((opt) => opt.value)), [options]);
+    const potentialOptions = (0, react_1.useMemo)(() => {
+        return value
+            .filter((opt) => !optionValues.has(opt ?? ''))
+            .map((opt) => ({
+            label: opt === '' ? '-' : (opt ?? '-'),
+            value: opt ?? '',
+        }))
+            .concat(options);
+    }, [value, options]);
+    const [selectAllCheckboxState, setSelectAllCheckboxState] = (0, react_1.useState)((() => {
+        if (value.length === 0) {
+            return CheckboxState.UNSELECTED;
+        }
+        if (value.length === potentialOptions.length) {
+            return CheckboxState.SELECTED;
+        }
+        return CheckboxState.INDETERMINATE;
+    })());
+    (0, react_1.useEffect)(() => {
+        if (selectAllRef.current) {
+            selectAllRef.current.indeterminate =
+                selectAllCheckboxState === CheckboxState.INDETERMINATE;
+        }
+    }, [selectAllCheckboxState]);
     (0, react_1.useEffect)(() => {
         if (options.length > 0 && options?.[0]?.value === 'EXCEEDS_LIMIT') {
             setExceedsLimit(true);
@@ -63,7 +97,10 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
             setExceedsLimit(false);
         }
     }, [options]);
-    (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false), showModal);
+    (0, hooks_1.useOnClickOutside)(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
     (0, react_1.useEffect)(() => {
         if (!value) {
             setSelectedOptions([]);
@@ -78,12 +115,15 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
         }
         debounceTimeoutId.current = setTimeout(() => {
             onChange(updatedChangeEvent);
-        }, 500);
+        }, 200);
     };
-    const filteredItems = react_1.default.useMemo(function () {
+    // FIXME: Hacked this to display selected options that have been filtered out, which is good
+    // But they don't have their proper labels, since we haven't stored/passed in the label
+    const filteredItems = react_1.default.useMemo(() => {
         // Sort null to top
         if (searchQuery === '') {
-            return options.sort((a, b) => {
+            return potentialOptions
+                .sort((a, b) => {
                 if (a.value === null) {
                     return -1;
                 }
@@ -91,9 +131,10 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                     return 1;
                 }
                 return 0;
-            });
+            })
+                .slice(0, 20);
         }
-        return options
+        return potentialOptions
             .filter((option) => {
             if (!option) {
                 return false;
@@ -110,10 +151,10 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
             if (b.value === null) {
                 return 1;
             }
-            return a.label.localeCompare(b.label);
+            return 0;
         })
             .slice(0, 20);
-    }, [options, searchQuery]);
+    }, [potentialOptions, searchQuery]);
     const nullLabel = (0, react_1.useMemo)(() => {
         return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
     }, [filteredItems]);
@@ -122,7 +163,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
             borderRadius: '6px',
             width: width,
             minWidth: width,
-        }, ref: modalRef, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
                     fontSize: 14,
                     color: theme?.secondaryTextColor,
                     fontFamily: theme?.fontFamily,
@@ -150,7 +191,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
+                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, 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 {
             cursor: not-allowed;
@@ -181,13 +222,13 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                     maxHeight: '50vh',
                     overflow: 'scroll',
                     fontSize: 14,
-                }, 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 &&
+                }, ref: modalRef, children: [!exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
+                                    setSearchQuery(value);
+                                } }), (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',
@@ -207,9 +248,9 @@ 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 {
+                  background: white;
+                }
                 .quill-option:hover {
                   background: #F4F4F5;
                 }
@@ -218,60 +259,121 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     cursor: 'default',
-                                }, 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,
-                            margin: 0,
-                            boxSizing: 'border-box',
-                            borderWidth: 0,
-                            fontSize: 14,
-                            borderStyle: 'solid',
-                            borderColor: theme?.borderColor,
-                            borderRadius: 4,
-                            fontFamily: theme?.fontFamily,
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            height: 34,
-                            minHeight: 34,
-                            gap: 6,
-                            overflow: 'hidden',
-                        }, className: "quill-option", onClick: () => {
-                            // Manually create a synthetic ChangeEvent and pass it to callback
-                            const changeEvent = { target: { value: option.value } };
-                            let updateSelctedOptions = [...selectedOptions];
-                            if (selectedOptions.includes(changeEvent.target.value)) {
-                                updateSelctedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
-                                setSelectedOptions(updateSelctedOptions);
-                            }
-                            else {
-                                updateSelctedOptions = [
-                                    ...updateSelctedOptions,
-                                    changeEvent.target.value,
-                                ];
-                                setSelectedOptions(updateSelctedOptions);
-                            }
-                            const updatedChangeEvent = {
-                                target: { value: updateSelctedOptions.join(',') },
-                            };
-                            if (updateSelctedOptions.length === 0) {
-                                updatedChangeEvent.target.value = '';
-                            }
-                            debounce(updatedChangeEvent);
-                        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                                }, children: exceedsLimit ? 'Too many options' : 'No options available' })] })), !exceedsLimit && !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchQuery === '' && potentialOptions.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    padding: 8,
+                                    margin: 0,
+                                    boxSizing: 'border-box',
+                                    borderWidth: 0,
+                                    fontSize: 14,
+                                    borderStyle: 'solid',
+                                    borderColor: theme?.borderColor,
+                                    borderRadius: 4,
+                                    fontFamily: theme?.fontFamily,
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    height: 34,
+                                    minHeight: 34,
+                                    gap: 6,
+                                    overflow: 'hidden',
+                                }, className: "quill-option", onClick: () => {
+                                    // if any are selected, deselect all
+                                    if (selectAllCheckboxState === CheckboxState.SELECTED ||
+                                        selectAllCheckboxState === CheckboxState.INDETERMINATE) {
+                                        setSelectAllCheckboxState(CheckboxState.UNSELECTED);
+                                        setSelectedOptions([]);
+                                        const updatedChangeEvent = {
+                                            target: { value: [] },
+                                        };
+                                        debounce(updatedChangeEvent);
+                                        return;
+                                    }
+                                    // if none are selected, select all
+                                    const updatedChangeEvent = {
+                                        target: {
+                                            value: options.map((opt) => opt.value),
+                                        },
+                                    };
+                                    setSelectAllCheckboxState(CheckboxState.SELECTED);
+                                    setSelectedOptions(options.map((opt) => opt.value));
+                                    debounce(updatedChangeEvent);
+                                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                   .quill-option {
                     background: white;
                   }
+                  .quill-option:hover {
+                    background: #F4F4F5;
+                  }
+                ` }), (0, jsx_runtime_1.jsx)("input", { ref: selectAllRef, type: "checkbox", checked: selectAllCheckboxState === CheckboxState.SELECTED, style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                        }, children: 'Select all' })] })), filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    padding: 8,
+                                    margin: 0,
+                                    boxSizing: 'border-box',
+                                    borderWidth: 0,
+                                    fontSize: 14,
+                                    borderStyle: 'solid',
+                                    borderColor: theme?.borderColor,
+                                    borderRadius: 4,
+                                    fontFamily: theme?.fontFamily,
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    height: 34,
+                                    minHeight: 34,
+                                    gap: 6,
+                                    overflow: 'hidden',
+                                }, className: "quill-option", onClick: () => {
+                                    // Manually create a synthetic ChangeEvent and pass it to callback
+                                    const changeEvent = { target: { value: option.value } };
+                                    let updateSelectedOptions = [...selectedOptions];
+                                    if (selectedOptions.includes(changeEvent.target.value)) {
+                                        updateSelectedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
+                                        if (updateSelectedOptions.length === 0) {
+                                            setSelectAllCheckboxState(CheckboxState.UNSELECTED);
+                                        }
+                                        else {
+                                            setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
+                                        }
+                                        setSelectedOptions(updateSelectedOptions);
+                                    }
+                                    else {
+                                        updateSelectedOptions = [
+                                            ...updateSelectedOptions,
+                                            changeEvent.target.value,
+                                        ];
+                                        if (updateSelectedOptions.length === potentialOptions.length) {
+                                            setSelectAllCheckboxState(CheckboxState.SELECTED);
+                                        }
+                                        else {
+                                            setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
+                                        }
+                                        setSelectedOptions(updateSelectedOptions);
+                                    }
+                                    const updatedChangeEvent = {
+                                        target: { value: updateSelectedOptions },
+                                    };
+                                    if (updateSelectedOptions.length === 0) {
+                                        updatedChangeEvent.target.value = [];
+                                    }
+                                    debounce(updatedChangeEvent);
+                                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                    .quill-option {
+                      background: white;
+                    }
                     .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 ?? nullLabel })] }, option.value)))) : isLoading ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] }))] }));
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                        }, 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, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',

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,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"}
+{"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,2CAqPtB"}

package/dist/cjs/components/QuillSelect.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuillSelectComponent = void 0;
+exports.QuillSelectComponent = QuillSelectComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../hooks");
 const UiComponents_1 = require("./UiComponents");
@@ -13,7 +13,11 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
     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), showModal);
+    const buttonRef = (0, react_1.useRef)(null);
+    (0, hooks_1.useOnClickOutside)(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
     const sortedItems = (0, react_1.useMemo)(() => {
         // Sort null to top
         return options.sort((a, b) => {
@@ -29,10 +33,8 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
     const nullLabel = (0, react_1.useMemo)(() => {
         return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
     }, [sortedItems]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
-            // width: 200,
-            // minWidth: 200,
             borderRadius: '6px',
             width: width,
             minWidth: width,
@@ -63,7 +65,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: ` 
+                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, 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, {
@@ -94,7 +96,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                     fontFamily: theme?.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
-                }, children: [!isLoading && (!hideEmptyOption || !options.length) && ((0, jsx_runtime_1.jsxs)("button", { style: {
+                }, ref: modalRef, children: [!isLoading && (!hideEmptyOption || !options.length) && ((0, jsx_runtime_1.jsxs)("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -160,4 +162,3 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                                     overflow: 'hidden',
                                 }, children: option.label ?? '-' })] }, option.label)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
 }
-exports.QuillSelectComponent = QuillSelectComponent;

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,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,EACf,QAAQ,GACT,EAAE,oBAAoB,2CA2RtB"}
+{"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,EACf,QAAQ,GACT,EAAE,oBAAoB,2CAkTtB"}