@quillsql/admin 1.6.1 → 1.6.3

package/dist/cjs/components/QuillPopover.js

@@ -0,0 +1,180 @@
+"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.QuillPopover = QuillPopover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useOnClickOutside_1 = __importStar(require("../hooks/useOnClickOutside"));
+const UiComponents_1 = require("./UiComponents");
+const react_1 = require("react");
+const AdminProvider_1 = require("../AdminProvider");
+const react_dom_1 = require("react-dom");
+const ui_1 = require("../utils/ui");
+function QuillPopover({ style, popoverStyle, label, isLoading, disabled, children, }) {
+    const theme = (0, AdminProvider_1.useAdmin)().state.theme;
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const modalRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    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 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));
+            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, useOnClickOutside_1.default)(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            position: 'relative',
+            borderRadius: '6px',
+            width: 200,
+            color: '#384151',
+            fontWeight: 500,
+            ...style,
+        }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: 14,
+                    color: theme?.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
+                    paddingBottom: 5,
+                    fontWeight: 600,
+                }, children: label })), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("style", { children: ` 
+          .quill-select-button { background: ${theme?.backgroundColor}; }
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+          .quill-select-button:disabled { 
+            cursor: not-allowed;
+            background: ${theme?.hoverBackgroundColor}; 
+          }
+
+        ` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                        }, children: "Select" }), (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.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 ? ((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, {}) })) : (children) }), document.body)] }));
+}

package/dist/cjs/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/cjs/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,2CAwMtB"}
+{"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/cjs/components/QuillSelect.js

@@ -3,23 +3,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuillSelectComponent = void 0;
+exports.QuillSelectComponent = QuillSelectComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useOnClickOutside_1 = __importDefault(require("../hooks/useOnClickOutside"));
 const react_1 = require("react");
 const Admin_1 = require("../Admin");
-function QuillSelectComponent({ options, value, onChange, theme = Admin_1.theme, label, }) {
+function QuillSelectComponent({ style, options, value, onChange, theme = Admin_1.defaultTheme, label, hideEmptyOption, disabled, }) {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
-    (0, useOnClickOutside_1.default)(modalRef, (e) => {
+    const parentRef = (0, react_1.useRef)(null);
+    (0, useOnClickOutside_1.default)(parentRef, () => {
         setShowModal(false);
-    });
+    }, showModal);
+    const [maxHeight, setMaxHeight] = (0, react_1.useState)('40vh');
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             width: 200,
             minWidth: 200,
             borderRadius: '6px',
-        }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
+            ...style,
+        }, ref: parentRef, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
                     fontSize: 14,
                     color: theme.primaryTextColor,
                     fontFamily: theme.fontFamily,
@@ -47,11 +66,18 @@ function QuillSelectComponent({ options, value, onChange, theme = Admin_1.theme,
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme.backgroundColor}; } .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                }, className: 'quill-select-button', disabled: disabled, onClick: () => !disabled && setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: `
+          .quill-select-button { background: ${theme.backgroundColor}; } 
+          .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }
+          .quill-select-button:disabled {
+            cursor: not-allowed;
+            background: ${theme.hoverBackgroundColor};
+          }
+        ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
-                        }, children: options.find((elem) => elem.value === value)?.label || 'Select' }), (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, jsx_runtime_1.jsxs)("div", { id: "quillSelectPopover", ref: modalRef, style: {
+                        }, children: options?.find((elem) => elem.value === value)?.label ?? 'Select' }), (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, jsx_runtime_1.jsxs)("div", { id: "quillSelectPopover", ref: modalRef, style: {
                     position: 'absolute',
                     width: '100%',
                     display: 'flex',
@@ -64,15 +90,12 @@ function QuillSelectComponent({ options, value, onChange, theme = Admin_1.theme,
                     background: 'white',
                     marginTop: 12,
                     zIndex: 100,
-                    paddingTop: 6,
-                    paddingBottom: 6,
-                    paddingLeft: 6,
-                    paddingRight: 6,
+                    padding: 6,
                     boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
                     fontFamily: theme.fontFamily,
-                    maxHeight: '40vh',
+                    maxHeight: maxHeight,
                     overflow: 'scroll',
-                }, children: [(0, jsx_runtime_1.jsxs)("button", { style: {
+                }, children: [(!hideEmptyOption || !options.length) && ((0, jsx_runtime_1.jsxs)("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -100,7 +123,7 @@ function QuillSelectComponent({ options, value, onChange, theme = Admin_1.theme,
                   .quill-option:hover {
                     background: #F4F4F5;
                   }
-                ` }), 'Select'] }), options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                ` }), 'Select'] })), options?.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -132,6 +155,5 @@ function QuillSelectComponent({ options, value, onChange, theme = Admin_1.theme,
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
-                                }, children: option.label })] }, option.value)))] }))] }));
+                                }, children: option.label ?? '-' })] }, option.label)))] }))] }));
 }
-exports.QuillSelectComponent = QuillSelectComponent;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface SelectComponentProps {
+    value: string | null | undefined;
+    label?: string;
+    width: number;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    isLoading?: boolean;
+    hideEmptyOption?: boolean;
+    disabled?: boolean;
+    badge?: string;
+    mimicReactSelect?: boolean;
+    testLabel?: string;
+}
+/**
+ * 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, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuillSelectWithCombo.d.ts.map

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

@@ -0,0 +1 @@
+{"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,IAAI,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,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;CACpB;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,GACV,EAAE,oBAAoB,2CAqatB"}

package/dist/cjs/components/QuillSelectWithCombo.js

@@ -0,0 +1,327 @@
+"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.QuillSelectComponentWithCombo = QuillSelectComponentWithCombo;
+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 QuillMultiSelectWithCombo_1 = require("./QuillMultiSelectWithCombo");
+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 QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, disabled, badge, mimicReactSelect, testLabel, }) {
+    const theme = (0, AdminProvider_1.useAdmin)().state.theme;
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const modalRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    const [searchQuery, setSearchQuery] = react_1.default.useState('');
+    const [popoverPosition, setPopoverPosition] = (0, react_1.useState)(undefined);
+    const [z, setZ] = (0, react_1.useState)(10);
+    const scrollableParentRef = (0, react_1.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_1.default.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 = (0, react_1.useMemo)(() => {
+        return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
+    }, [filteredItems]);
+    const selectedLabel = (0, react_1.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,
+                    });
+                }
+            });
+        }
+    };
+    (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, useOnClickOutside_1.default)(modalRef, (event) => {
+        if (!buttonRef.current?.contains(event.target))
+            setShowModal(false);
+    }, showModal);
+    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: 5,
+                    fontWeight: 600,
+                }, children: label })), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("style", { children: ` 
+          .quill-select-button { background: ${theme?.backgroundColor}; }
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+          .quill-select-button:disabled { 
+            cursor: not-allowed;
+            background: ${theme?.hoverBackgroundColor}; 
+          }
+
+        ` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            fontWeight: value?.length || isLoading ? undefined : 300,
+                            color: value?.length || isLoading
+                                ? undefined
+                                : theme?.secondaryTextColor,
+                        }, children: selectedLabel }), badge && ((0, jsx_runtime_1.jsx)("span", { style: {
+                            color: 'white',
+                            backgroundColor: 'black',
+                            borderRadius: 10,
+                            padding: '2px 6px',
+                            fontSize: 10,
+                            fontWeight: 600,
+                            marginBottom: -2,
+                            marginLeft: -42,
+                        }, children: badge })), (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: 'white',
+                        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 && ((0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
+                                setSearchQuery(value);
+                            } })), searchQuery === '' &&
+                            !isLoading &&
+                            (!hideEmptyOption || !options.length) && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("style", { children: `
+                .quill-option {
+                  background: white;
+                }
+                  .quill-option:hover {
+                    background: #F4F4F5;
+                  }
+                ` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                        color: theme?.secondaryTextColor,
+                                        fontWeight: 300,
+                                    }, children: "Select" })] })), !isLoading ? (filteredItems.map((option) => ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("style", { children: `
+                .quill-option {
+                  background: white;
+                }
+                  .quill-option:hover {
+                    background: #F4F4F5;
+                  }
+                ` }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                    }, children: option.label ?? nullLabel })] }, option.value)))) : ((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, {}) }))] }), document.body)] }));
+}