@quillsql/react 2.13.47 → 2.13.49

package/dist/cjs/components/QuillMultiSelectWithCombo.js

@@ -157,15 +157,18 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
             if (!option) {
                 return false;
             }
-            return option.label
+            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);
+                .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) {
@@ -204,14 +207,19 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
         let mutationObserver;
         if (showModal && buttonRef.current) {
             updatePosition();
-            setZ((0, useOnClickOutside_1.getEffectiveZIndex)(buttonRef.current));
+            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 });
+            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 });
+            scrollableParentRef.current.addEventListener('scroll', updatePosition, {
+                passive: true,
+            });
             const handleResize = () => requestAnimationFrame(updatePosition);
             window.addEventListener('resize', handleResize, { passive: true });
             return () => {
@@ -227,7 +235,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
             borderRadius: '6px',
             width: width,
             minWidth: width,
-            ...style
+            ...style,
         }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
                     fontSize: 14,
                     color: theme?.secondaryTextColor,
@@ -269,54 +277,61 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                             width: '100%',
                             textAlign: 'left',
                             zIndex: 1,
-                        }, children: selectedOptionsLabel }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { style: {
-                    position: 'absolute',
-                    top: `${popoverPosition?.top ?? 0}px`,
-                    left: `${popoverPosition?.left ?? 0}px`,
-                    width: `${popoverPosition?.width ?? 0}px`,
-                    maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
-                    minHeight: options.length > 2 ? 120 : options.length * 40,
-                    visibility: popoverPosition ? 'visible' : 'hidden',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    boxSizing: 'border-box',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme?.borderColor,
-                    borderRadius: 6,
-                    background: 'white',
-                    marginTop: 12,
-                    zIndex: z,
-                    padding: 6,
-                    fontFamily: theme?.fontFamily,
-                    overflow: 'scroll',
-                    fontSize: 14,
-                }, ref: modalRef, "data-portal-ignore": "true", children: [!exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
-                                    setSearchQuery(value);
-                                } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    height: 9,
-                                    width: 230,
-                                    borderTop: '1px solid #e7e7e7',
-                                } })] })), !isLoading &&
-                        (!filteredItems || filteredItems.length === 0 || exceedsLimit) && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            padding: 8,
-                            margin: 0,
-                            boxSizing: 'border-box',
-                            borderWidth: 0,
-                            fontSize: 14,
-                            borderStyle: 'solid',
-                            borderColor: theme?.borderColor,
-                            borderRadius: 4,
-                            fontFamily: theme?.fontFamily,
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            height: 34,
-                            minHeight: 34,
-                            gap: 6,
-                            overflow: 'hidden',
-                        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                            fontWeight: value?.length || isLoading ? undefined : 300,
+                            color: value?.length || isLoading
+                                ? undefined
+                                : theme?.secondaryTextColor,
+                        }, children: selectedOptionsLabel }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { style: {
+                        position: 'absolute',
+                        top: `${popoverPosition?.top ?? 0}px`,
+                        left: `${popoverPosition?.left ?? 0}px`,
+                        width: `${popoverPosition?.width ?? 0}px`,
+                        maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
+                        minHeight: options.length > 2 ? 120 : options.length * 40,
+                        visibility: popoverPosition ? 'visible' : 'hidden',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxSizing: 'border-box',
+                        borderWidth: 1,
+                        borderStyle: 'solid',
+                        borderColor: theme?.borderColor,
+                        borderRadius: 6,
+                        background: 'white',
+                        marginTop: 12,
+                        zIndex: z,
+                        padding: 6,
+                        fontFamily: theme?.fontFamily,
+                        overflow: 'scroll',
+                        fontSize: 14,
+                    }, ref: modalRef, "data-portal-ignore": "true", children: [!exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
+                                        setSearchQuery(value);
+                                    } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        height: 9,
+                                        width: 230,
+                                        borderTop: '1px solid #e7e7e7',
+                                    } })] })), !isLoading &&
+                            (!filteredItems ||
+                                filteredItems.length === 0 ||
+                                exceedsLimit) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                padding: 8,
+                                margin: 0,
+                                boxSizing: 'border-box',
+                                borderWidth: 0,
+                                fontSize: 14,
+                                borderStyle: 'solid',
+                                borderColor: theme?.borderColor,
+                                borderRadius: 4,
+                                fontFamily: theme?.fontFamily,
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                height: 34,
+                                minHeight: 34,
+                                gap: 6,
+                                overflow: 'hidden',
+                            }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
                   background: white;
                 }
@@ -324,126 +339,138 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                   background: #F4F4F5;
                 }
               ` }), (0, jsx_runtime_1.jsx)("span", { style: {
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                    cursor: 'default',
-                                }, children: exceedsLimit
-                                    ? 'Too many options'
-                                    : (emptyLabel ?? 'No options available') })] })), !exceedsLimit && !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchQuery === '' && potentialOptions.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    padding: 8,
-                                    margin: 0,
-                                    boxSizing: 'border-box',
-                                    borderWidth: 0,
-                                    fontSize: 14,
-                                    borderStyle: 'solid',
-                                    borderColor: theme?.borderColor,
-                                    borderRadius: 4,
-                                    fontFamily: theme?.fontFamily,
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    height: 34,
-                                    minHeight: 34,
-                                    gap: 6,
-                                    overflow: 'hidden',
-                                }, className: "quill-option", onClick: () => {
-                                    // if any are selected, deselect all
-                                    if (selectAllCheckboxState === CheckboxState.SELECTED ||
-                                        selectAllCheckboxState === CheckboxState.INDETERMINATE) {
-                                        setSelectAllCheckboxState(CheckboxState.UNSELECTED);
-                                        setSelectedOptions([]);
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        cursor: 'default',
+                                    }, children: exceedsLimit
+                                        ? 'Too many options'
+                                        : (emptyLabel ?? 'No options available') })] })), !exceedsLimit && !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchQuery === '' && potentialOptions.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        padding: 8,
+                                        margin: 0,
+                                        boxSizing: 'border-box',
+                                        borderWidth: 0,
+                                        fontSize: 14,
+                                        borderStyle: 'solid',
+                                        borderColor: theme?.borderColor,
+                                        borderRadius: 4,
+                                        fontFamily: theme?.fontFamily,
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        height: 34,
+                                        minHeight: 34,
+                                        gap: 6,
+                                        overflow: 'hidden',
+                                    }, className: "quill-option", onClick: () => {
+                                        // if any are selected, deselect all
+                                        if (selectAllCheckboxState === CheckboxState.SELECTED ||
+                                            selectAllCheckboxState === CheckboxState.INDETERMINATE) {
+                                            setSelectAllCheckboxState(CheckboxState.UNSELECTED);
+                                            setSelectedOptions([]);
+                                            const updatedChangeEvent = {
+                                                target: { value: [] },
+                                            };
+                                            debounce(updatedChangeEvent);
+                                            return;
+                                        }
+                                        // if none are selected, select all
                                         const updatedChangeEvent = {
-                                            target: { value: [] },
+                                            target: {
+                                                value: options.map((opt) => opt.value),
+                                            },
                                         };
+                                        setSelectAllCheckboxState(CheckboxState.SELECTED);
+                                        setSelectedOptions(options.map((opt) => opt.value));
                                         debounce(updatedChangeEvent);
-                                        return;
-                                    }
-                                    // if none are selected, select all
-                                    const updatedChangeEvent = {
-                                        target: {
-                                            value: options.map((opt) => opt.value),
-                                        },
-                                    };
-                                    setSelectAllCheckboxState(CheckboxState.SELECTED);
-                                    setSelectedOptions(options.map((opt) => opt.value));
-                                    debounce(updatedChangeEvent);
-                                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                                    }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                   .quill-option {
                     background: white;
                   }
                   .quill-option:hover {
                     background: #F4F4F5;
                   }
-                ` }), (0, jsx_runtime_1.jsx)("input", { ref: selectAllRef, type: "checkbox", checked: selectAllCheckboxState === CheckboxState.SELECTED, style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap',
-                                            overflow: 'hidden',
-                                        }, children: 'Select all' })] })), filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    padding: 8,
-                                    margin: 0,
-                                    boxSizing: 'border-box',
-                                    borderWidth: 0,
-                                    fontSize: 14,
-                                    borderStyle: 'solid',
-                                    borderColor: theme?.borderColor,
-                                    borderRadius: 4,
-                                    fontFamily: theme?.fontFamily,
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    height: 34,
-                                    minHeight: 34,
-                                    gap: 6,
-                                    overflow: 'hidden',
-                                }, 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);
-                                        if (updateSelectedOptions.length === 0) {
-                                            setSelectAllCheckboxState(CheckboxState.UNSELECTED);
+                ` }), (0, jsx_runtime_1.jsx)("input", { ref: selectAllRef, type: "checkbox", checked: selectAllCheckboxState === CheckboxState.SELECTED, style: {
+                                                width: '14px',
+                                                height: '14px',
+                                                margin: 'auto 0',
+                                            }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                            }, children: (0, jsx_runtime_1.jsx)("span", { style: {
+                                                    color: theme?.secondaryTextColor,
+                                                    fontWeight: 300,
+                                                }, children: "Select all" }) })] })), filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        padding: 8,
+                                        margin: 0,
+                                        boxSizing: 'border-box',
+                                        borderWidth: 0,
+                                        fontSize: 14,
+                                        borderStyle: 'solid',
+                                        borderColor: theme?.borderColor,
+                                        borderRadius: 4,
+                                        fontFamily: theme?.fontFamily,
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        height: 34,
+                                        minHeight: 34,
+                                        gap: 6,
+                                        overflow: 'hidden',
+                                    }, 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);
+                                            if (updateSelectedOptions.length === 0) {
+                                                setSelectAllCheckboxState(CheckboxState.UNSELECTED);
+                                            }
+                                            else {
+                                                setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
+                                            }
+                                            setSelectedOptions(updateSelectedOptions);
                                         }
                                         else {
-                                            setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
-                                        }
-                                        setSelectedOptions(updateSelectedOptions);
-                                    }
-                                    else {
-                                        updateSelectedOptions = [
-                                            ...updateSelectedOptions,
-                                            changeEvent.target.value,
-                                        ];
-                                        if (updateSelectedOptions.length === potentialOptions.length) {
-                                            setSelectAllCheckboxState(CheckboxState.SELECTED);
+                                            updateSelectedOptions = [
+                                                ...updateSelectedOptions,
+                                                changeEvent.target.value,
+                                            ];
+                                            if (updateSelectedOptions.length ===
+                                                potentialOptions.length) {
+                                                setSelectAllCheckboxState(CheckboxState.SELECTED);
+                                            }
+                                            else {
+                                                setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
+                                            }
+                                            setSelectedOptions(updateSelectedOptions);
                                         }
-                                        else {
-                                            setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
+                                        const updatedChangeEvent = {
+                                            target: { value: updateSelectedOptions },
+                                        };
+                                        if (updateSelectedOptions.length === 0) {
+                                            updatedChangeEvent.target.value = [];
                                         }
-                                        setSelectedOptions(updateSelectedOptions);
-                                    }
-                                    const updatedChangeEvent = {
-                                        target: { value: updateSelectedOptions },
-                                    };
-                                    if (updateSelectedOptions.length === 0) {
-                                        updatedChangeEvent.target.value = [];
-                                    }
-                                    debounce(updatedChangeEvent);
-                                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                                        debounce(updatedChangeEvent);
+                                    }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                     .quill-option {
                       background: white;
                     }
                     .quill-option:hover {
                       background: #F4F4F5;
                     }
-                  ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap',
-                                            overflow: 'hidden',
-                                        }, children: option.label ?? nullLabel })] }, option.value)))] })) : isLoading ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] }), document.body)] }));
+                  ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: {
+                                                width: '14px',
+                                                height: '14px',
+                                                margin: 'auto 0',
+                                            }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                            }, children: option.label ?? nullLabel })] }, option.value)))] })) : isLoading ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] }), document.body)] }));
 }
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {

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,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAMtE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,oBAAoB,2CA0StB"}
+{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAatE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,oBAAoB,2CA2TtB"}

package/dist/cjs/components/QuillSelect.js

@@ -93,13 +93,18 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
         let mutationObserver;
         if (showModal && buttonRef.current) {
             updatePosition();
-            setZ((0, useOnClickOutside_1.getEffectiveZIndex)(buttonRef.current));
+            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 });
+            mutationObserver.observe(buttonRef.current, {
+                attributes: true,
+                subtree: true,
+            });
             scrollableParentRef.current = (0, ui_1.getScrollableParent)(buttonRef.current);
-            scrollableParentRef.current.addEventListener('scroll', updatePosition, { passive: true });
+            scrollableParentRef.current.addEventListener('scroll', updatePosition, {
+                passive: true,
+            });
             const handleResize = () => requestAnimationFrame(updatePosition);
             window.addEventListener('resize', handleResize, { passive: true });
             return () => {
@@ -153,80 +158,83 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                             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, 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", children: [!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: () => {
-                            const changeEvent = { target: { value: '' } };
-                            onChange(changeEvent);
-                            setShowModal(false);
-                        }, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                            fontWeight: value !== undefined ? undefined : 300,
+                            color: value !== undefined ? undefined : theme?.secondaryTextColor,
+                        }, 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, 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", children: [!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: () => {
+                                const changeEvent = { target: { value: '' } };
+                                onChange(changeEvent);
+                                setShowModal(false);
+                            }, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
                   background: white;
                 }
                   .quill-option:hover {
                     background: #F4F4F5;
                   }
-                ` }), 'Select'] })), !isLoading ? (options.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: () => {
-                            const changeEvent = { target: { value: option.value } };
-                            onChange(changeEvent);
-                            setShowModal(false);
-                        }, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                ` }), (0, jsx_runtime_1.jsx)("span", { style: { color: theme?.secondaryTextColor, fontWeight: 300 }, children: "Select" })] })), !isLoading ? (options.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: () => {
+                                const changeEvent = { target: { value: option.value } };
+                                onChange(changeEvent);
+                                setShowModal(false);
+                            }, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
                   background: white;
                 }
@@ -234,8 +242,8 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                     background: #F4F4F5;
                   }
                 ` }), (0, jsx_runtime_1.jsx)("span", { style: {
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                }, children: option.label ?? '-' })] }, option.label)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }), document.body)] }));
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                    }, children: option.label ?? '-' })] }, option.label)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }), document.body)] }));
 }