@quillsql/admin 1.7.0 → 1.7.2

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

@@ -1 +0,0 @@
-{"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,2CAsNvB"}

package/dist/esm/components/QuillPopover.js

@@ -1,143 +0,0 @@
-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,
-                    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}; color: ${theme?.primaryTextColor}; }
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
-          .quill-select-button:disabled { 
-            cursor: not-allowed;
-            opacity: 0.5;
-          }
-
-        ` }), _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: theme?.backgroundColor,
-                        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 +0,0 @@
-import { SelectComponentProps } from './UiComponents';
-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 +0,0 @@
-{"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"}

package/dist/esm/components/QuillSelect.js

@@ -1,153 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import useOnClickOutside from '../hooks/useOnClickOutside';
-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);
-    const parentRef = useRef(null);
-    useOnClickOutside(parentRef, () => {
-        setShowModal(false);
-    }, showModal);
-    const [maxHeight, setMaxHeight] = useState('40vh');
-    useEffect(() => {
-        const updateMaxHeight = () => {
-            if (modalRef.current) {
-                const rect = modalRef.current.getBoundingClientRect();
-                const availableSpace = window.innerHeight - rect.top - 16; // 16px for margin
-                const newMaxHeight = Math.min(availableSpace, window.innerHeight * 0.4); // At most 40vh
-                setMaxHeight(`${newMaxHeight}px`);
-            }
-        };
-        // Call on mount and when window resizes
-        updateMaxHeight();
-        window.addEventListener('resize', updateMaxHeight);
-        return () => {
-            window.removeEventListener('resize', updateMaxHeight);
-        };
-    }, []);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            width: 200,
-            minWidth: 200,
-            borderRadius: '6px',
-            ...style,
-        }, ref: parentRef, children: [label && (_jsx("div", { style: {
-                    fontSize: 14,
-                    color: theme.primaryTextColor,
-                    fontFamily: theme.fontFamily,
-                    paddingBottom: 5,
-                    fontWeight: 600,
-                }, children: label })), _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', disabled: disabled, onClick: () => !disabled && setShowModal((showModal) => !showModal), children: [_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;
-          }
-        ` }), _jsx("span", { style: {
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                        }, children: options?.find((elem) => elem.value === value)?.label ?? '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 && (_jsxs("div", { id: "quillSelectPopover", ref: modalRef, style: {
-                    position: 'absolute',
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    boxSizing: 'border-box',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme.borderColor,
-                    borderRadius: 6,
-                    background: theme.backgroundColor,
-                    marginTop: 12,
-                    zIndex: 100,
-                    padding: 6,
-                    boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                    fontFamily: theme.fontFamily,
-                    maxHeight: maxHeight,
-                    overflow: 'scroll',
-                }, children: [(!hideEmptyOption || !options.length) && (_jsxs("button", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            padding: '8px 8px',
-                            margin: 0,
-                            boxSizing: 'border-box',
-                            borderWidth: 0,
-                            fontSize: 14,
-                            borderStyle: 'solid',
-                            borderColor: theme.borderColor,
-                            borderRadius: 4,
-                            fontFamily: theme.fontFamily,
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            height: 34,
-                            minHeight: 34,
-                        }, className: "quill-option", onClick: () => {
-                            onChange('');
-                            setShowModal(false);
-                        }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: ${theme.backgroundColor};
-                }
-                  .quill-option:hover {
-                    background: ${theme.hoverBackgroundColor};
-                  }
-                ` }), 'Select'] })), options?.map((option) => (_jsxs("button", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            padding: '8px 8px',
-                            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,
-                            overflow: 'hidden',
-                            color: theme.primaryTextColor,
-                        }, className: "quill-option", onClick: () => {
-                            onChange(option.value);
-                            setShowModal(false);
-                        }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: ${theme.backgroundColor};
-                }
-                  .quill-option:hover {
-                    background: ${theme.hoverBackgroundColor};
-                  }
-                ` }), _jsx("span", { style: {
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                }, children: option.label ?? '-' })] }, option.label)))] }))] }));
-}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-export interface SelectComponentProps {
-    value: string | number | null | undefined;
-    label?: string;
-    width: number;
-    options: {
-        value: string | number;
-        label: string;
-    }[];
-    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-    isLoading?: boolean;
-    hideEmptyOption?: boolean;
-    disabled?: boolean;
-    badge?: string;
-    mimicReactSelect?: boolean;
-    testLabel?: string;
-    displayValue?: boolean;
-}
-/**
- * A robust select component that implements the new minimal Select interface.
- */
-export declare function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, disabled, badge, mimicReactSelect, testLabel, displayValue, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=QuillSelectWithCombo.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AAIA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,EACf,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,SAAS,EACT,YAAY,GACb,EAAE,oBAAoB,2CA6ctB"}

package/dist/esm/components/QuillSelectWithCombo.js

@@ -1,317 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import useOnClickOutside, { getEffectiveZIndex, } from '../hooks/useOnClickOutside';
-import { LoadingSpinner } from './UiComponents';
-import React, { useEffect, useMemo, useRef, useState, } from 'react';
-import { ListboxTextInput } from './QuillMultiSelectWithCombo';
-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 QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, disabled, badge, mimicReactSelect, testLabel, displayValue, }) {
-    const theme = useAdmin().state.theme;
-    const [showModal, setShowModal] = useState(false);
-    const modalRef = useRef(null);
-    const buttonRef = useRef(null);
-    const [searchQuery, setSearchQuery] = React.useState('');
-    const [popoverPosition, setPopoverPosition] = useState(undefined);
-    const [z, setZ] = useState(10);
-    const scrollableParentRef = useRef(document.body);
-    // FIXME: Hacked this to display the option that has been filtered out, which is good
-    // But it doesn't have its proper label, since we haven't stored/passed in the label
-    const filteredItems = React.useMemo(() => {
-        // Sort null to top
-        if (searchQuery === '') {
-            return (options
-                ?.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 = options?.[0]?.value?.toString()?.match(uuidRegex);
-        const isNumber = typeof options?.[0]?.value === 'number';
-        return (options
-            ?.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) ?? []);
-    }, [options, searchQuery]);
-    const nullLabel = useMemo(() => {
-        return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
-    }, [filteredItems]);
-    const selectedLabel = useMemo(() => {
-        const selectedOption = options?.find((elem) => elem.value === value);
-        return selectedOption && selectedOption.label == '-'
-            ? nullLabel
-            : (selectedOption?.label ?? 'Select');
-    }, [value, options, nullLabel]);
-    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]);
-    useOnClickOutside(modalRef, (event) => {
-        if (!buttonRef.current?.contains(event.target))
-            setShowModal(false);
-    }, showModal);
-    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 })), _jsxs("button", { style: {
-                    fontFamily: theme?.fontFamily,
-                    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}; color: ${theme?.primaryTextColor}; }
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
-          .quill-select-button:disabled { 
-            cursor: not-allowed;
-            opacity: 0.5;
-          }
-        ` }), _jsx("span", { style: {
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            fontWeight: isLoading ? undefined : 300,
-                        }, children: isLoading ? 'Loading...' : selectedLabel }), badge && (_jsx("span", { style: {
-                            color: 'white',
-                            backgroundColor: 'black',
-                            borderRadius: 10,
-                            padding: '2px 6px',
-                            fontSize: 10,
-                            fontWeight: 600,
-                            marginBottom: -2,
-                            marginLeft: -42,
-                        }, children: badge })), _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: theme?.backgroundColor,
-                        marginTop: 12,
-                        zIndex: z,
-                        padding: 6,
-                        fontFamily: theme?.fontFamily,
-                        overflow: 'scroll',
-                        fontSize: 14,
-                    }, ref: modalRef, "data-portal-ignore": "true", "data-testid": `quill-select-portal-${testLabel}`, children: [options && options.length > 20 && !isLoading && (_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
-                                setSearchQuery(value);
-                            } })), searchQuery === '' &&
-                            !isLoading &&
-                            (!hideEmptyOption || !options.length) && (_jsxs("button", { style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                padding: '8px 8px',
-                                margin: 0,
-                                boxSizing: 'border-box',
-                                borderWidth: 0,
-                                fontSize: 14,
-                                borderStyle: 'solid',
-                                borderColor: theme?.borderColor,
-                                borderRadius: 4,
-                                fontFamily: theme?.fontFamily,
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                height: 34,
-                                minHeight: 34,
-                            }, className: "quill-option", onClick: () => {
-                                // Manually create a synthetic ChangeEvent and pass it to callback
-                                const changeEvent = { target: { value: undefined } };
-                                onChange(changeEvent);
-                                setShowModal(false);
-                            }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: ${theme?.backgroundColor};
-                  color: ${theme?.secondaryTextColor};
-                }
-                  .quill-option:hover {
-                    background: ${theme?.hoverBackgroundColor};
-                    color: ${theme?.hoverTextColor};
-                  }
-                ` }), _jsx("span", { style: {
-                                        fontWeight: 300,
-                                    }, children: "Select" })] })), !isLoading ? (filteredItems.map((option) => (_jsxs("button", { style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                padding: '8px 8px',
-                                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,
-                                overflow: 'hidden',
-                            }, className: "quill-option", onClick: () => {
-                                // Manually create a synthetic ChangeEvent and pass it to callback
-                                const changeEvent = { target: { value: option.value } };
-                                onChange(changeEvent);
-                                setShowModal(false);
-                            }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: ${theme?.backgroundColor};
-                  color: ${theme?.primaryTextColor};
-                }
-                  .quill-option:hover {
-                    background: ${theme?.hoverBackgroundColor};
-                    color: ${theme?.hoverTextColor};
-                  }
-                ` }), _jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        flex: 1,
-                                        minWidth: 0,
-                                        overflow: 'hidden',
-                                        gap: 8,
-                                        alignItems: 'center',
-                                    }, children: [_jsx("span", { style: {
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                fontWeight: 400,
-                                                flex: 1,
-                                                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() }))] })] }, option.value)))) : (_jsx("div", { style: {
-                                width: '100%',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                display: 'flex',
-                                marginLeft: 'auto',
-                                marginRight: 'auto',
-                                padding: 8,
-                            }, children: _jsx(LoadingSpinner, {}) }))] }), document.body)] }));
-}