@quillsql/admin 1.7.0 → 1.7.2

package/dist/cjs/components/QuillMultiSelectWithCombo.js

@@ -1,688 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListboxTextInput = void 0;
-exports.QuillMultiSelectComponentWithCombo = QuillMultiSelectComponentWithCombo;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const useOnClickOutside_1 = __importStar(require("../hooks/useOnClickOutside"));
-const UiComponents_1 = require("./UiComponents");
-const react_1 = __importStar(require("react"));
-const AdminProvider_1 = require("../AdminProvider");
-const react_dom_1 = require("react-dom");
-const ui_1 = require("../utils/ui");
-/**
- * A robust select component that implements the new minimal Select interface.
- */
-function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, noneSelectedLabel, mimicReactSelect, enableSingleSelectOption, displayValue, enableSubmitButton, submitButtonText, }) {
-    const { state } = (0, AdminProvider_1.useAdmin)();
-    const theme = state.theme;
-    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
-    const [pendingSelections, setPendingSelections] = (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 [popoverPosition, setPopoverPosition] = (0, react_1.useState)(undefined);
-    const [z, setZ] = (0, react_1.useState)(10);
-    const scrollableParentRef = (0, react_1.useRef)(document.body);
-    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 selectedOptionsLabel = (0, react_1.useMemo)(() => {
-        const currentValue = enableSubmitButton ? pendingSelections : value;
-        if (!currentValue || !currentValue.length) {
-            return noneSelectedLabel ?? 'Select';
-        }
-        // if (currentValue.length === options.length) {
-        //   return 'All Tenants';
-        // }
-        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, pendingSelections, enableSubmitButton]);
-    const potentialOptions = (0, react_1.useMemo)(() => {
-        const currentValue = enableSubmitButton ? pendingSelections : value;
-        return currentValue
-            .filter((opt) => !optionValues.has(opt ?? ''))
-            .map((opt) => ({
-            label: opt === '' ? '-' : (opt?.toString() ?? '-'),
-            value: opt ?? '',
-        }))
-            .concat(options);
-    }, [value, pendingSelections, options, enableSubmitButton]);
-    const selectAllCheckboxState = (0, react_1.useMemo)(() => {
-        const currentSelections = enableSubmitButton
-            ? pendingSelections
-            : selectedOptions;
-        if (currentSelections.length === 0) {
-            return CheckboxState.UNSELECTED;
-        }
-        if (currentSelections.length === potentialOptions.length) {
-            return CheckboxState.SELECTED;
-        }
-        return CheckboxState.INDETERMINATE;
-    }, [
-        selectedOptions,
-        pendingSelections,
-        potentialOptions,
-        enableSubmitButton,
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (selectAllRef.current) {
-            selectAllRef.current.indeterminate =
-                selectAllCheckboxState === CheckboxState.INDETERMINATE;
-        }
-    }, [selectAllCheckboxState, showModal]);
-    const updatePosition = () => {
-        if (buttonRef.current) {
-            requestAnimationFrame(() => {
-                const rect = buttonRef?.current?.getBoundingClientRect();
-                if (rect) {
-                    const viewportHeight = window.innerHeight;
-                    // Calculate available space below the element with a 64px bottom margin
-                    const availableHeight = viewportHeight - rect.bottom - 64;
-                    setPopoverPosition({
-                        top: rect.bottom + window.scrollY,
-                        left: rect.left + window.scrollX,
-                        width: rect.width,
-                        maxHeight: availableHeight,
-                    });
-                }
-            });
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        let resizeObserver;
-        let mutationObserver;
-        if (showModal && buttonRef.current) {
-            updatePosition();
-            setZ((0, useOnClickOutside_1.getEffectiveZIndex)(buttonRef.current) + 1);
-            resizeObserver = new ResizeObserver(() => updatePosition());
-            resizeObserver.observe(buttonRef.current);
-            mutationObserver = new MutationObserver(() => updatePosition());
-            mutationObserver.observe(buttonRef.current, {
-                attributes: true,
-                subtree: true,
-            });
-            // Track scrolling of the nearest scrollable ancestor
-            scrollableParentRef.current = (0, ui_1.getScrollableParent)(buttonRef.current);
-            scrollableParentRef.current.addEventListener('scroll', updatePosition, {
-                passive: true,
-            });
-            const handleResize = () => requestAnimationFrame(updatePosition);
-            window.addEventListener('resize', handleResize, { passive: true });
-            return () => {
-                resizeObserver.disconnect();
-                mutationObserver.disconnect();
-                scrollableParentRef.current.removeEventListener('scroll', updatePosition);
-                window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, [showModal]);
-    (0, react_1.useEffect)(() => {
-        if (options.length > 0 && options?.[0]?.value === 'EXCEEDS_LIMIT') {
-            setExceedsLimit(true);
-        }
-        else {
-            setExceedsLimit(false);
-        }
-    }, [options]);
-    (0, useOnClickOutside_1.default)(modalRef, (event) => {
-        if (!buttonRef.current?.contains(event.target))
-            setShowModal(false);
-    }, showModal);
-    (0, react_1.useEffect)(() => {
-        if (!value) {
-            setSelectedOptions([]);
-            if (enableSubmitButton) {
-                setPendingSelections([]);
-            }
-        }
-        else {
-            setSelectedOptions(value);
-            if (enableSubmitButton) {
-                setPendingSelections(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);
-        }
-        debounceTimeoutId.current = setTimeout(() => {
-            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_1.default.useMemo(() => {
-        // Sort null to top
-        if (searchQuery === '') {
-            return potentialOptions
-                .sort((a, b) => {
-                if (a.value === null) {
-                    return -1;
-                }
-                if (b.value === null) {
-                    return 1;
-                }
-                return 0;
-            })
-                .slice(0, 100);
-        }
-        const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/;
-        const isUuid = potentialOptions?.[0]?.value?.toString()?.match(uuidRegex);
-        const isNumber = typeof potentialOptions?.[0]?.value === 'number';
-        return potentialOptions
-            .filter((option) => {
-            if (!option) {
-                return false;
-            }
-            return (option.label
-                .toString()
-                .toLowerCase()
-                .replace(/\s+/g, '')
-                .includes(searchQuery.toLowerCase().replace(/\s+/g, '')) ||
-                (isNumber || isUuid
-                    ? option.value
-                        .toString()
-                        .toLowerCase()
-                        .replace(/\s+/g, '')
-                        .includes(searchQuery.toLowerCase().replace(/\s+/g, ''))
-                    : false));
-        })
-            .sort((a, b) => {
-            if (a.value === null) {
-                return -1;
-            }
-            if (b.value === null) {
-                return 1;
-            }
-            return 0;
-        })
-            .slice(0, 100);
-    }, [potentialOptions, 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',
-            width: width,
-            minWidth: width,
-            color: '#384151',
-            fontWeight: mimicReactSelect ? 400 : 500,
-        }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
-                    fontSize: 14,
-                    color: theme?.secondaryTextColor,
-                    fontFamily: theme?.fontFamily,
-                    paddingBottom: 4,
-                    fontWeight: 600,
-                }, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
-                    fontFamily: theme?.fontFamily,
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    fontWeight: 'inherit',
-                    lineHeight: 'inherit',
-                    padding: '8px 12px',
-                    fontSize: 14,
-                    margin: 0,
-                    boxSizing: 'border-box',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme?.borderColor,
-                    borderRadius: 6,
-                    paddingTop: 9,
-                    paddingBottom: 9,
-                    height: 40,
-                    minHeight: 40,
-                    maxHeight: 40,
-                }, 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}; color: ${theme?.primaryTextColor}; } 
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
-          .quill-select-button:disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-          }
-        ` }), (0, jsx_runtime_1.jsx)("span", { style: {
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            width: '100%',
-                            textAlign: 'left',
-                            zIndex: 1,
-                            fontWeight: (enableSubmitButton ? pendingSelections : value)?.length ||
-                                isLoading
-                                ? undefined
-                                : 300,
-                        }, children: isLoading
-                            ? 'Loading...'
-                            : (enableSubmitButton ? pendingSelections : value)?.length
-                                ? (enableSubmitButton ? pendingSelections : value)?.length ===
-                                    options?.length
-                                    ? (allSelectedLabel ?? selectedOptionsLabel)
-                                    : selectedOptionsLabel
-                                : emptyLabel
-                                    ? (allSelectedLabel ?? selectedOptionsLabel)
-                                    : selectedOptionsLabel }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { style: {
-                        position: 'absolute',
-                        top: `${popoverPosition?.top ?? 0}px`,
-                        left: `${popoverPosition?.left ?? 0}px`,
-                        width: `${popoverPosition?.width ?? 0}px`,
-                        maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
-                        minHeight: options.length > 2 ? 120 : options.length * 40,
-                        visibility: popoverPosition ? 'visible' : 'hidden',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        boxSizing: 'border-box',
-                        borderWidth: 1,
-                        borderStyle: 'solid',
-                        borderColor: theme?.borderColor,
-                        borderRadius: 6,
-                        background: theme?.backgroundColor,
-                        marginTop: 12,
-                        zIndex: z + 1,
-                        padding: 6,
-                        fontFamily: theme?.fontFamily,
-                        fontSize: 14,
-                    }, ref: modalRef, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                flex: 1,
-                                overflow: 'hidden',
-                                minHeight: 0,
-                            }, 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',
-                                            } })] })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                        flex: 1,
-                                        overflow: 'auto',
-                                        minHeight: 0,
-                                    }, children: [!isLoading &&
-                                            (!filteredItems ||
-                                                filteredItems.length === 0 ||
-                                                exceedsLimit) && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("style", { children: `
-                .quill-option {
-                  background: ${theme?.backgroundColor};
-                .quill-option:hover {
-                  background: ${theme?.hoverBackgroundColor};
-                }
-              ` }), (0, jsx_runtime_1.jsx)("span", { style: {
-                                                        textOverflow: 'ellipsis',
-                                                        whiteSpace: 'nowrap',
-                                                        overflow: 'hidden',
-                                                        cursor: 'default',
-                                                        color: theme?.secondaryTextColor,
-                                                    }, children: exceedsLimit
-                                                        ? 'Too many options'
-                                                        : (emptyLabel ?? 'No options available') })] })), !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',
-                                                        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: [(0, jsx_runtime_1.jsx)("style", { children: `
-                  .quill-option {
-                    background: ${theme?.backgroundColor};
-                  }
-                  .quill-option:hover {
-                    background: ${theme?.hoverBackgroundColor};
-                    color: ${theme?.hoverTextColor};
-                  }
-                ` }), (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: (0, jsx_runtime_1.jsx)("span", { style: {
-                                                                    fontWeight: 300,
-                                                                }, 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',
-                                                        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: [(0, jsx_runtime_1.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};
-                    }
-                  ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: (enableSubmitButton
-                                                                ? pendingSelections
-                                                                : selectedOptions).includes(option.value), style: {
-                                                                width: '14px',
-                                                                height: '14px',
-                                                                margin: 'auto 0',
-                                                            }, readOnly: true }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                flex: 1,
-                                                                minWidth: 0,
-                                                                overflow: 'hidden',
-                                                                gap: 8,
-                                                                alignItems: 'baseline',
-                                                            }, children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                                                width: '100%',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                display: 'flex',
-                                                marginLeft: 'auto',
-                                                marginRight: 'auto',
-                                                padding: 8,
-                                            }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] })] }), enableSubmitButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                        height: 1,
-                                        width: '100%',
-                                        borderTop: '1px solid #e7e7e7',
-                                        marginTop: 6,
-                                        marginBottom: 6,
-                                    } }), (0, jsx_runtime_1.jsxs)("button", { style: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        padding: 8,
-                                        margin: 0,
-                                        boxSizing: 'border-box',
-                                        borderWidth: 1,
-                                        borderStyle: 'solid',
-                                        borderColor: theme?.borderColor,
-                                        fontSize: 14,
-                                        borderRadius: 4,
-                                        fontFamily: theme?.fontFamily,
-                                        height: 34,
-                                        minHeight: 34,
-                                        background: theme?.primaryButtonColor,
-                                        color: theme?.primaryButtonTextColor,
-                                        cursor: 'pointer',
-                                        flexShrink: 0,
-                                    }, className: "quill-submit-button", onClick: handleSubmit, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-                    .quill-submit-button:hover {
-                      background: ${theme?.hoverBackgroundColor};
-                      color: ${theme?.hoverTextColor};
-                    }
-                  ` }), submitButtonText ?? 'Apply Selection'] })] }))] }), document.body)] }));
-}
-const ListboxTextInput = ({ value, onChange, placeholder, id, width, }) => {
-    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginTop: 2,
-            background: theme.backgroundColor,
-        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-      .quill-text-input {
-          background-color: white;
-          height: 40px;
-         width: ${width ?? 145}px;
-         z-index: 2;
-         color: ${theme.primaryTextColor};
-         border-radius: 4px;
-         text-align: left;
-         padding-top: 0px;
-         padding-bottom: 0px;
-         padding-right: 12px;
-         box-sizing: content-box;
-         margin-left: 6px;
-         border: 0 solid ${theme.borderColor};
-      }
-      .quill-text-input:focus {
-        outline: none;
-    }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), (0, jsx_runtime_1.jsx)("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
-                    fontFamily: theme.fontFamily,
-                    color: theme.primaryTextColor,
-                    background: theme.backgroundColor,
-                } })] }));
-};
-exports.ListboxTextInput = ListboxTextInput;