@quillsql/admin 1.6.0 → 1.6.2

package/dist/esm/components/QuillMultiSelectWithCombo.js

@@ -0,0 +1,466 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useOnClickOutside, { getEffectiveZIndex, } from '../hooks/useOnClickOutside';
+import { LoadingSpinner } from './UiComponents';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useAdmin } from '../AdminProvider';
+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, }) {
+    const { state } = useAdmin();
+    const theme = state.theme;
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [showModal, setShowModal] = useState(false);
+    const modalRef = useRef(null);
+    const buttonRef = useRef(null);
+    const debounceTimeoutId = useRef(null);
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [exceedsLimit, setExceedsLimit] = useState(false);
+    const [popoverPosition, setPopoverPosition] = useState(undefined);
+    const [z, setZ] = useState(10);
+    const scrollableParentRef = useRef(document.body);
+    const selectAllRef = 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 = useMemo(() => new Set(options.map((opt) => opt.value)), [options]);
+    const selectedOptionsLabel = useMemo(() => {
+        if (!value || !value.length) {
+            return noneSelectedLabel ?? 'Select';
+        }
+        // if (value.length === options.length) {
+        //   return 'All Tenants';
+        // }
+        const matchingOptions = options.filter((elem) => value.includes(elem.value));
+        if (matchingOptions.length !== value.length) {
+            return value.join(', ');
+        }
+        return matchingOptions
+            .map((elem) => elem.label ?? '-')
+            .join(', ');
+    }, [options, value]);
+    const potentialOptions = useMemo(() => {
+        return value
+            .filter((opt) => !optionValues.has(opt ?? ''))
+            .map((opt) => ({
+            label: opt === '' ? '-' : (opt?.toString() ?? '-'),
+            value: opt ?? '',
+        }))
+            .concat(options);
+    }, [value, options]);
+    const selectAllCheckboxState = useMemo(() => {
+        if (selectedOptions.length === 0) {
+            return CheckboxState.UNSELECTED;
+        }
+        if (selectedOptions.length === potentialOptions.length) {
+            return CheckboxState.SELECTED;
+        }
+        return CheckboxState.INDETERMINATE;
+    }, [selectedOptions]);
+    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,
+                    });
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        let resizeObserver;
+        let mutationObserver;
+        if (showModal && buttonRef.current) {
+            updatePosition();
+            setZ(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 = 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]);
+    useEffect(() => {
+        if (options.length > 0 && options?.[0]?.value === 'EXCEEDS_LIMIT') {
+            setExceedsLimit(true);
+        }
+        else {
+            setExceedsLimit(false);
+        }
+    }, [options]);
+    useOnClickOutside(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
+    useEffect(() => {
+        if (!value) {
+            setSelectedOptions([]);
+        }
+        else {
+            setSelectedOptions(value);
+        }
+    }, [value]);
+    const debounce = (updatedChangeEvent) => {
+        if (debounceTimeoutId.current) {
+            clearTimeout(debounceTimeoutId.current);
+        }
+        debounceTimeoutId.current = setTimeout(() => {
+            onChange(updatedChangeEvent);
+        }, 200);
+    };
+    // 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(() => {
+        // 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 = useMemo(() => {
+        return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
+    }, [filteredItems]);
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            borderRadius: '6px',
+            width: width,
+            minWidth: width,
+            color: '#384151',
+            fontWeight: mimicReactSelect ? 400 : 500,
+        }, children: [label && (_jsx("div", { style: {
+                    fontSize: 14,
+                    color: theme?.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
+                    paddingBottom: 5,
+                    fontWeight: 600,
+                }, children: label ?? nullLabel })), _jsxs("button", { style: {
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                    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: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+          .quill-select-button:disabled {
+            cursor: not-allowed;
+            background: ${theme?.hoverBackgroundColor};
+          }
+        ` }), _jsx("span", { style: {
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            width: '100%',
+                            textAlign: 'left',
+                            zIndex: 1,
+                            fontWeight: value?.length || isLoading ? undefined : 300,
+                            color: value?.length || isLoading
+                                ? undefined
+                                : theme?.secondaryTextColor,
+                        }, children: isLoading
+                            ? 'Loading...'
+                            : value?.length
+                                ? value?.length === options?.length
+                                    ? (allSelectedLabel ?? selectedOptionsLabel)
+                                    : selectedOptionsLabel
+                                : emptyLabel
+                                    ? (allSelectedLabel ?? selectedOptionsLabel)
+                                    : selectedOptionsLabel }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal &&
+                createPortal(_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: 'white',
+                        marginTop: 12,
+                        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: {
+                                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: white;
+                }
+                .quill-option:hover {
+                  background: #F4F4F5;
+                }
+              ` }), _jsx("span", { style: {
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        cursor: 'default',
+                                    }, 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: `
+                  .quill-option {
+                    background: white;
+                  }
+                  .quill-option:hover {
+                    background: #F4F4F5;
+                  }
+                ` }), _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: {
+                                                    color: theme?.secondaryTextColor,
+                                                    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',
+                                    }, 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: white;
+                    }
+                    .quill-option:hover {
+                      background: #F4F4F5;
+                    }
+                  ` }), _jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: {
+                                                width: '14px',
+                                                height: '14px',
+                                                margin: 'auto 0',
+                                            }, readOnly: true }), _jsx("span", { style: {
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                            }, children: option.label ?? 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)] }));
+}
+export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: 2,
+        }, children: [_jsx("style", { children: `
+      .quill-text-input {
+          background-color: white;
+          height: 40px;
+         width: 145px;
+         z-index: 2;
+         color: #384151;
+         border-radius: 4px;
+         text-align: left;
+         padding-top: 0px;
+         padding-bottom: 0px;
+         box-sizing: content-box;
+         margin-left: 6px;
+         border: 0 solid #e5e7eb;
+      }
+      .quill-text-input:focus {
+        outline: none;
+    }` }), _jsx("div", { style: { width: 6 } }), _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: _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" }) }), _jsx("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
+};

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

@@ -0,0 +1,11 @@
+import React, { CSSProperties } from 'react';
+export interface PopoverComponentProps {
+    label?: string;
+    style?: CSSProperties;
+    popoverStyle?: CSSProperties;
+    disabled?: boolean;
+    isLoading?: boolean;
+    children?: React.ReactNode;
+}
+export declare function QuillPopover({ style, popoverStyle, label, isLoading, disabled, children, }: PopoverComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuillPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuillPopover.d.ts","sourceRoot":"","sources":["../../../src/components/QuillPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAK1E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,YAAY,EACZ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,2CAuNvB"}

package/dist/esm/components/QuillPopover.js

@@ -0,0 +1,144 @@
+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 { createPortal } from 'react-dom';
+import { getScrollableParent } from '../utils/ui';
+export function QuillPopover({ style, popoverStyle, label, isLoading, disabled, children, }) {
+    const theme = useAdmin().state.theme;
+    const [showModal, setShowModal] = useState(false);
+    const modalRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [popoverPosition, setPopoverPosition] = useState(undefined);
+    const [z, setZ] = useState(10);
+    const scrollableParentRef = useRef(document.body);
+    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,
+                    });
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        let resizeObserver;
+        let mutationObserver;
+        if (showModal && buttonRef.current) {
+            updatePosition();
+            setZ(getEffectiveZIndex(buttonRef.current));
+            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 = 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]);
+    useOnClickOutside(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            borderRadius: '6px',
+            width: 200,
+            color: '#384151',
+            fontWeight: 500,
+            ...style,
+        }, children: [label && (_jsx("div", { style: {
+                    fontSize: 14,
+                    color: theme?.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
+                    paddingBottom: 5,
+                    fontWeight: 600,
+                }, children: label })), _jsxs("button", { style: {
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    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: [_jsx("style", { children: ` 
+          .quill-select-button { background: ${theme?.backgroundColor}; }
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+          .quill-select-button:disabled { 
+            cursor: not-allowed;
+            background: ${theme?.hoverBackgroundColor}; 
+          }
+
+        ` }), _jsx("span", { style: {
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                        }, children: "Select" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal &&
+                createPortal(_jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxSizing: 'border-box',
+                        borderWidth: 1,
+                        borderStyle: 'solid',
+                        borderColor: theme?.borderColor,
+                        borderRadius: 6,
+                        background: 'white',
+                        marginTop: 12,
+                        zIndex: z,
+                        padding: 12,
+                        fontFamily: theme?.fontFamily,
+                        overflow: 'scroll',
+                        fontSize: 14,
+                        ...popoverStyle,
+                        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`,
+                        visibility: popoverPosition ? 'visible' : 'hidden',
+                    }, ref: modalRef, children: isLoading ? (_jsx("div", { style: {
+                            width: '100%',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            display: 'flex',
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                            padding: 8,
+                        }, children: _jsx(LoadingSpinner, {}) })) : (children) }), document.body)] }));
+}

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

@@ -1,3 +1,3 @@
 import { SelectComponentProps } from './UiComponents';
-export declare function QuillSelectComponent({ options, value, onChange, theme, label, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillSelectComponent({ style, options, value, onChange, theme, label, hideEmptyOption, disabled, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItD,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,KAAK,GACN,EAAE,oBAAoB,2CAuMtB"}
+{"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"}