@quillsql/admin 1.6.4 → 1.7.1

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

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,yBAAyB,2CAomB3B;AAED,eAAO,MAAM,gBAAgB,iDAM1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,4CAkEA,CAAC"}
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GACjB,EAAE,yBAAyB,2CAs1B3B;AAED,eAAO,MAAM,gBAAgB,GAAI,8CAM9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,4CAkEA,CAAC"}

package/dist/esm/components/QuillMultiSelectWithCombo.js

@@ -2,16 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import useOnClickOutside, { getEffectiveZIndex, } from '../hooks/useOnClickOutside';
 import { LoadingSpinner } from './UiComponents';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useAdmin } from '../AdminProvider';
+import { useAdmin } from '../hooks/useAdmin';
 import { createPortal } from 'react-dom';
 import { getScrollableParent } from '../utils/ui';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, noneSelectedLabel, mimicReactSelect, }) {
+export function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, noneSelectedLabel, mimicReactSelect, enableSingleSelectOption, displayValue, enableSubmitButton, submitButtonText, }) {
     const { state } = useAdmin();
     const theme = state.theme;
     const [selectedOptions, setSelectedOptions] = useState([]);
+    const [pendingSelections, setPendingSelections] = useState([]);
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
     const buttonRef = useRef(null);
@@ -30,38 +31,48 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
     })(CheckboxState || (CheckboxState = {}));
     const optionValues = useMemo(() => new Set(options.map((opt) => opt.value)), [options]);
     const selectedOptionsLabel = useMemo(() => {
-        if (!value || !value.length) {
+        const currentValue = enableSubmitButton ? pendingSelections : value;
+        if (!currentValue || !currentValue.length) {
             return noneSelectedLabel ?? 'Select';
         }
-        // if (value.length === options.length) {
+        // if (currentValue.length === options.length) {
         //   return 'All Tenants';
         // }
-        const matchingOptions = options.filter((elem) => value.includes(elem.value));
-        if (matchingOptions.length !== value.length) {
-            return value.join(', ');
+        const matchingOptions = options.filter((elem) => currentValue.includes(elem.value));
+        if (matchingOptions.length !== currentValue.length) {
+            return currentValue.join(', ');
         }
         return matchingOptions
             .map((elem) => elem.label ?? '-')
             .join(', ');
-    }, [options, value]);
+    }, [options, value, pendingSelections, enableSubmitButton]);
     const potentialOptions = useMemo(() => {
-        return value
+        const currentValue = enableSubmitButton ? pendingSelections : value;
+        return currentValue
             .filter((opt) => !optionValues.has(opt ?? ''))
             .map((opt) => ({
             label: opt === '' ? '-' : (opt?.toString() ?? '-'),
             value: opt ?? '',
         }))
             .concat(options);
-    }, [value, options]);
+    }, [value, pendingSelections, options, enableSubmitButton]);
     const selectAllCheckboxState = useMemo(() => {
-        if (selectedOptions.length === 0) {
+        const currentSelections = enableSubmitButton
+            ? pendingSelections
+            : selectedOptions;
+        if (currentSelections.length === 0) {
             return CheckboxState.UNSELECTED;
         }
-        if (selectedOptions.length === potentialOptions.length) {
+        if (currentSelections.length === potentialOptions.length) {
             return CheckboxState.SELECTED;
         }
         return CheckboxState.INDETERMINATE;
-    }, [selectedOptions]);
+    }, [
+        selectedOptions,
+        pendingSelections,
+        potentialOptions,
+        enableSubmitButton,
+    ]);
     useEffect(() => {
         if (selectAllRef.current) {
             selectAllRef.current.indeterminate =
@@ -129,12 +140,22 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
     useEffect(() => {
         if (!value) {
             setSelectedOptions([]);
+            if (enableSubmitButton) {
+                setPendingSelections([]);
+            }
         }
         else {
             setSelectedOptions(value);
+            if (enableSubmitButton) {
+                setPendingSelections(value);
+            }
         }
-    }, [value]);
+    }, [value, enableSubmitButton]);
     const debounce = (updatedChangeEvent) => {
+        if (enableSubmitButton) {
+            // When submit button is enabled, don't call onChange immediately
+            return;
+        }
         if (debounceTimeoutId.current) {
             clearTimeout(debounceTimeoutId.current);
         }
@@ -142,6 +163,13 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
             onChange(updatedChangeEvent);
         }, 200);
     };
+    const handleSubmit = () => {
+        const updatedChangeEvent = {
+            target: { value: pendingSelections },
+        };
+        onChange(updatedChangeEvent);
+        setShowModal(false);
+    };
     // 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.useMemo(() => {
@@ -241,11 +269,15 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                             width: '100%',
                             textAlign: 'left',
                             zIndex: 1,
-                            fontWeight: value?.length || isLoading ? undefined : 300,
+                            fontWeight: (enableSubmitButton ? pendingSelections : value)?.length ||
+                                isLoading
+                                ? undefined
+                                : 300,
                         }, children: isLoading
                             ? 'Loading...'
-                            : value?.length
-                                ? value?.length === options?.length
+                            : (enableSubmitButton ? pendingSelections : value)?.length
+                                ? (enableSubmitButton ? pendingSelections : value)?.length ===
+                                    options?.length
                                     ? (allSelectedLabel ?? selectedOptionsLabel)
                                     : selectedOptionsLabel
                                 : emptyLabel
@@ -271,87 +303,108 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                         zIndex: z + 1,
                         padding: 6,
                         fontFamily: theme?.fontFamily,
-                        overflow: 'scroll',
                         fontSize: 14,
-                    }, ref: modalRef, children: [!exceedsLimit && options && options.length > 20 && (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
-                                        setSearchQuery(value);
-                                    } }), _jsx("div", { style: {
-                                        height: 9,
-                                        width: 230,
-                                        borderTop: '1px solid #e7e7e7',
-                                    } })] })), !isLoading &&
-                            (!filteredItems ||
-                                filteredItems.length === 0 ||
-                                exceedsLimit) && (_jsxs("div", { style: {
+                    }, ref: modalRef, children: [_jsxs("div", { 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,
+                                flexDirection: 'column',
+                                flex: 1,
                                 overflow: 'hidden',
-                            }, children: [_jsx("style", { children: `
+                                minHeight: 0,
+                            }, children: [!exceedsLimit && options && options.length > 20 && (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
+                                                setSearchQuery(value);
+                                            } }), _jsx("div", { style: {
+                                                height: 9,
+                                                width: 230,
+                                                borderTop: '1px solid #e7e7e7',
+                                            } })] })), _jsxs("div", { style: {
+                                        flex: 1,
+                                        overflow: 'auto',
+                                        minHeight: 0,
+                                    }, children: [!isLoading &&
+                                            (!filteredItems ||
+                                                filteredItems.length === 0 ||
+                                                exceedsLimit) && (_jsxs("div", { 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',
+                                            }, children: [_jsx("style", { children: `
                 .quill-option {
                   background: ${theme?.backgroundColor};
                 .quill-option:hover {
                   background: ${theme?.hoverBackgroundColor};
                 }
               ` }), _jsx("span", { style: {
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        cursor: 'default',
-                                        color: theme?.secondaryTextColor,
-                                    }, children: exceedsLimit
-                                        ? 'Too many options'
-                                        : (emptyLabel ?? 'No options available') })] })), !isLoading ? (_jsxs(_Fragment, { children: [searchQuery === '' && potentialOptions.length > 0 && (_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) {
-                                            setSelectedOptions([]);
-                                            const updatedChangeEvent = {
-                                                target: { value: [] },
-                                            };
-                                            debounce(updatedChangeEvent);
-                                            return;
-                                        }
-                                        // if none are selected, select all
-                                        const updatedChangeEvent = {
-                                            target: {
-                                                value: options.map((opt) => opt.value),
-                                            },
-                                        };
-                                        setSelectedOptions(options.map((opt) => opt.value));
-                                        debounce(updatedChangeEvent);
-                                    }, children: [_jsx("style", { children: `
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                        overflow: 'hidden',
+                                                        cursor: 'default',
+                                                        color: theme?.secondaryTextColor,
+                                                    }, children: exceedsLimit
+                                                        ? 'Too many options'
+                                                        : (emptyLabel ?? 'No options available') })] })), !isLoading ? (_jsxs(_Fragment, { children: [searchQuery === '' && potentialOptions.length > 0 && (_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',
+                                                        width: '100%',
+                                                    }, className: "quill-option", onClick: () => {
+                                                        // if any are selected, deselect all
+                                                        if (selectAllCheckboxState === CheckboxState.SELECTED ||
+                                                            selectAllCheckboxState ===
+                                                                CheckboxState.INDETERMINATE) {
+                                                            if (enableSubmitButton) {
+                                                                setPendingSelections([]);
+                                                            }
+                                                            else {
+                                                                setSelectedOptions([]);
+                                                                const updatedChangeEvent = {
+                                                                    target: { value: [] },
+                                                                };
+                                                                debounce(updatedChangeEvent);
+                                                            }
+                                                            return;
+                                                        }
+                                                        // if none are selected, select all
+                                                        if (enableSubmitButton) {
+                                                            setPendingSelections(options.map((opt) => opt.value));
+                                                        }
+                                                        else {
+                                                            const updatedChangeEvent = {
+                                                                target: {
+                                                                    value: options.map((opt) => opt.value),
+                                                                },
+                                                            };
+                                                            setSelectedOptions(options.map((opt) => opt.value));
+                                                            debounce(updatedChangeEvent);
+                                                        }
+                                                    }, children: [_jsx("style", { children: `
                   .quill-option {
                     background: ${theme?.backgroundColor};
                   }
@@ -360,81 +413,207 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                     color: ${theme?.hoverTextColor};
                   }
                 ` }), _jsx("input", { ref: selectAllRef, type: "checkbox", checked: selectAllCheckboxState === CheckboxState.SELECTED, style: {
-                                                width: '14px',
-                                                height: '14px',
-                                                margin: 'auto 0',
-                                            }, readOnly: true }), _jsx("span", { style: {
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                            }, children: _jsx("span", { style: {
-                                                    fontWeight: 300,
-                                                }, children: "Select all" }) })] })), filteredItems.map((option) => (_jsxs("button", { style: {
+                                                                width: '14px',
+                                                                height: '14px',
+                                                                margin: 'auto 0',
+                                                            }, readOnly: true }), _jsx("span", { style: {
+                                                                textOverflow: 'ellipsis',
+                                                                whiteSpace: 'nowrap',
+                                                                overflow: 'hidden',
+                                                            }, children: _jsx("span", { style: {
+                                                                    fontWeight: 300,
+                                                                }, children: "Select all" }) })] })), filteredItems.map((option) => (_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',
+                                                        position: 'relative',
+                                                        width: '100%',
+                                                    }, className: "quill-option", onClick: () => {
+                                                        // Manually create a synthetic ChangeEvent and pass it to callback
+                                                        const changeEvent = {
+                                                            target: { value: option.value },
+                                                        };
+                                                        let updateSelectedOptions = [...selectedOptions];
+                                                        let updatePendingSelections = [...pendingSelections];
+                                                        if (enableSubmitButton) {
+                                                            if (pendingSelections.includes(changeEvent.target.value)) {
+                                                                updatePendingSelections =
+                                                                    pendingSelections.filter((opt) => opt !== changeEvent.target.value);
+                                                                setPendingSelections(updatePendingSelections);
+                                                            }
+                                                            else {
+                                                                updatePendingSelections = [
+                                                                    ...updatePendingSelections,
+                                                                    changeEvent.target.value,
+                                                                ];
+                                                                setPendingSelections(updatePendingSelections);
+                                                            }
+                                                        }
+                                                        else {
+                                                            if (selectedOptions.includes(changeEvent.target.value)) {
+                                                                updateSelectedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
+                                                                setSelectedOptions(updateSelectedOptions);
+                                                            }
+                                                            else {
+                                                                updateSelectedOptions = [
+                                                                    ...updateSelectedOptions,
+                                                                    changeEvent.target.value,
+                                                                ];
+                                                                setSelectedOptions(updateSelectedOptions);
+                                                            }
+                                                            const updatedChangeEvent = {
+                                                                target: { value: updateSelectedOptions },
+                                                            };
+                                                            if (updateSelectedOptions.length === 0) {
+                                                                updatedChangeEvent.target.value = [];
+                                                            }
+                                                            debounce(updatedChangeEvent);
+                                                        }
+                                                    }, children: [_jsx("style", { children: `
+                    .quill-option {
+                      background: ${theme?.backgroundColor};
+                      color: ${theme?.primaryTextColor};
+                    }
+                    .quill-option:hover {
+                      background: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
+                    }
+                    .quill-select-only-btn {
+                      background: transparent;
+                      border: none;
+                      padding: 2px 6px;
+                      border-radius: 3px;
+                      font-size: 11px;
+                      color: ${theme?.secondaryTextColor};
+                      cursor: pointer;
+                      opacity: 0;
+                      transition: opacity 0.2s ease;
+                    }
+                    .quill-option:hover .quill-select-only-btn {
+                      opacity: 1;
+                    }
+                    .quill-select-only-btn:hover {
+                      background: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
+                    }
+                  ` }), _jsx("input", { type: "checkbox", checked: (enableSubmitButton
+                                                                ? pendingSelections
+                                                                : selectedOptions).includes(option.value), style: {
+                                                                width: '14px',
+                                                                height: '14px',
+                                                                margin: 'auto 0',
+                                                            }, readOnly: true }), _jsxs("div", { style: {
+                                                                display: 'flex',
+                                                                flexDirection: 'row',
+                                                                flex: 1,
+                                                                minWidth: 0,
+                                                                overflow: 'hidden',
+                                                                gap: 8,
+                                                                alignItems: 'baseline',
+                                                            }, children: [_jsx("span", { style: {
+                                                                        textOverflow: 'ellipsis',
+                                                                        whiteSpace: 'nowrap',
+                                                                        overflow: 'hidden',
+                                                                        fontWeight: 400,
+                                                                        flex: '0 1 auto',
+                                                                        minWidth: 0,
+                                                                        textAlign: 'left',
+                                                                    }, title: option.value !== null && option.value !== '-'
+                                                                        ? option.value.toString()
+                                                                        : undefined, children: option.label ?? nullLabel }), option.value !== null &&
+                                                                    option.value !== '-' &&
+                                                                    displayValue && (_jsx("span", { style: {
+                                                                        fontSize: 11,
+                                                                        color: theme?.secondaryTextColor,
+                                                                        textOverflow: 'ellipsis',
+                                                                        whiteSpace: 'nowrap',
+                                                                        overflow: 'hidden',
+                                                                        fontWeight: 400,
+                                                                        flexShrink: 1,
+                                                                        maxWidth: '30%',
+                                                                        minWidth: 0,
+                                                                    }, title: option.value.toString(), children: option.value.toString().length > 15
+                                                                        ? `${option.value.toString().substring(0, 15)}...`
+                                                                        : option.value.toString() }))] }), enableSingleSelectOption && (_jsx("div", { className: "quill-select-only-btn", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                if (enableSubmitButton) {
+                                                                    setPendingSelections([option.value]);
+                                                                }
+                                                                else {
+                                                                    const updatedChangeEvent = {
+                                                                        target: { value: [option.value] },
+                                                                    };
+                                                                    setSelectedOptions([option.value]);
+                                                                    debounce(updatedChangeEvent);
+                                                                }
+                                                            }, title: "Select only this option", role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                                                if (e.key === 'Enter' || e.key === ' ') {
+                                                                    e.preventDefault();
+                                                                    e.stopPropagation();
+                                                                    if (enableSubmitButton) {
+                                                                        setPendingSelections([option.value]);
+                                                                    }
+                                                                    else {
+                                                                        const updatedChangeEvent = {
+                                                                            target: { value: [option.value] },
+                                                                        };
+                                                                        setSelectedOptions([option.value]);
+                                                                        debounce(updatedChangeEvent);
+                                                                    }
+                                                                }
+                                                            }, children: "only" }))] }, option.value)))] })) : isLoading ? (_jsx("div", { style: {
+                                                width: '100%',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                display: 'flex',
+                                                marginLeft: 'auto',
+                                                marginRight: 'auto',
+                                                padding: 8,
+                                            }, children: _jsx(LoadingSpinner, {}) })) : null] })] }), enableSubmitButton && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                        height: 1,
+                                        width: '100%',
+                                        borderTop: '1px solid #e7e7e7',
+                                        marginTop: 6,
+                                        marginBottom: 6,
+                                    } }), _jsxs("button", { style: {
                                         display: 'flex',
                                         alignItems: 'center',
+                                        justifyContent: 'center',
                                         padding: 8,
                                         margin: 0,
                                         boxSizing: 'border-box',
-                                        borderWidth: 0,
-                                        fontSize: 14,
+                                        borderWidth: 1,
                                         borderStyle: 'solid',
                                         borderColor: theme?.borderColor,
+                                        fontSize: 14,
                                         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);
-                                            setSelectedOptions(updateSelectedOptions);
-                                        }
-                                        else {
-                                            updateSelectedOptions = [
-                                                ...updateSelectedOptions,
-                                                changeEvent.target.value,
-                                            ];
-                                            setSelectedOptions(updateSelectedOptions);
-                                        }
-                                        const updatedChangeEvent = {
-                                            target: { value: updateSelectedOptions },
-                                        };
-                                        if (updateSelectedOptions.length === 0) {
-                                            updatedChangeEvent.target.value = [];
-                                        }
-                                        debounce(updatedChangeEvent);
-                                    }, children: [_jsx("style", { children: `
-                    .quill-option {
-                      background: ${theme?.backgroundColor};
-                      color: ${theme?.primaryTextColor};
-                    }
-                    .quill-option:hover {
+                                        background: theme?.primaryButtonColor,
+                                        color: theme?.primaryButtonTextColor,
+                                        cursor: 'pointer',
+                                        flexShrink: 0,
+                                    }, className: "quill-submit-button", onClick: handleSubmit, children: [_jsx("style", { children: `
+                    .quill-submit-button:hover {
                       background: ${theme?.hoverBackgroundColor};
                       color: ${theme?.hoverTextColor};
                     }
-                  ` }), _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 ?? nullLabel })] }, option.value)))] })) : isLoading ? (_jsx("div", { style: {
-                                width: '100%',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                display: 'flex',
-                                marginLeft: 'auto',
-                                marginRight: 'auto',
-                                padding: 8,
-                            }, children: _jsx(LoadingSpinner, {}) })) : null] }), document.body)] }));
+                  ` }), submitButtonText ?? 'Apply Selection'] })] }))] }), document.body)] }));
 }
 export const ListboxTextInput = ({ value, onChange, placeholder, id, width, }) => {
     const { state: { theme }, } = useAdmin();

package/dist/esm/components/QuillPopover.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useOnClickOutside, { getEffectiveZIndex, } from '../hooks/useOnClickOutside';
 import { LoadingSpinner } from './UiComponents';
 import { useEffect, useRef, useState } from 'react';
-import { useAdmin } from '../AdminProvider';
+import { useAdmin } from '../hooks/useAdmin';
 import { createPortal } from 'react-dom';
 import { getScrollableParent } from '../utils/ui';
 export function QuillPopover({ style, popoverStyle, label, isLoading, disabled, children, }) {

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

@@ -1 +1 @@
-{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,KAAK,EACL,eAAe,EACf,QAAQ,GACT,EAAE,oBAAoB,2CA0OtB"}
+{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,KAAK,EACL,eAAe,EACf,QAAQ,GACT,EAAE,oBAAoB,2CA0OtB"}

package/dist/esm/components/QuillSelect.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useOnClickOutside from '../hooks/useOnClickOutside';
+import { defaultTheme } from '../models/Provider';
 import { useEffect, useRef, useState } from 'react';
-import { defaultTheme } from '../Admin';
 export function QuillSelectComponent({ style, options, value, onChange, theme = defaultTheme, label, hideEmptyOption, disabled, }) {
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);