@quillsql/react 2.15.2 → 2.15.4

package/dist/esm/components/QuillMultiSelect.js

@@ -1,207 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnClickOutside } from '../hooks';
-import { LoadingSpinner } from './UiComponents';
-import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
-import { ThemeContext } from '../Context';
-/**
- * Helper function for displaying option labels
- */
-function displaySelectedOptionLabels({ options, value, }) {
-    if (!value || !value.length) {
-        return 'Select';
-    }
-    const matchingOptions = options.filter((elem) => value.includes(elem.value));
-    if (!matchingOptions.length) {
-        return 'Select';
-    }
-    return matchingOptions
-        .map((elem) => elem.label ?? '-')
-        .join(', ');
-}
-/**
- * A robust select component that implements the new minimal Select interface.
- */
-export function QuillMultiSelectComponent({ options, width, onChange, label, value, isLoading, }) {
-    const [theme] = useContext(ThemeContext);
-    const [selectedOptions, setSelectedOptions] = useState([]);
-    const [showModal, setShowModal] = useState(false);
-    const modalRef = useRef(null);
-    const buttonRef = useRef(null);
-    const debounceTimeoutId = useRef(null);
-    useOnClickOutside(modalRef, (event) => {
-        if (!buttonRef.current?.contains(event.target))
-            setShowModal(false);
-    }, showModal);
-    useEffect(() => {
-        if (!value) {
-            setSelectedOptions([]);
-        }
-        else {
-            setSelectedOptions(value);
-        }
-    }, [value]);
-    const sortedItems = useMemo(() => {
-        // Sort null to top
-        return options.sort((a, b) => {
-            if (a.value === null) {
-                return -1;
-            }
-            if (b.value === null) {
-                return 1;
-            }
-            return 0;
-        });
-    }, [options]);
-    const nullLabel = useMemo(() => {
-        return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
-    }, [sortedItems]);
-    const debounce = (updatedChangeEvent) => {
-        if (debounceTimeoutId.current) {
-            clearTimeout(debounceTimeoutId.current);
-        }
-        debounceTimeoutId.current = setTimeout(() => {
-            onChange(updatedChangeEvent);
-        }, 500);
-    };
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            borderRadius: '6px',
-            width: width,
-            minWidth: width,
-        }, 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',
-                    fontWeight: 'inherit',
-                    lineHeight: 'inherit',
-                    padding: '8px 12px',
-                    fontSize: 14,
-                    margin: 0,
-                    boxSizing: 'border-box',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme?.borderColor,
-                    borderRadius: 6,
-                    paddingTop: 9,
-                    paddingBottom: 9,
-                    height: 40,
-                    minHeight: 40,
-                    maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), 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}; }
-        ` }), _jsx("span", { style: {
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            width: '100%',
-                            textAlign: 'left',
-                            zIndex: 1,
-                        }, children: displaySelectedOptionLabels({ options, value }) }), _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 && (_jsx("div", { 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,
-                    fontFamily: theme?.fontFamily,
-                    maxHeight: '50vh',
-                    overflow: 'scroll',
-                }, ref: modalRef, children: !isLoading ? (sortedItems.map((option) => (_jsxs("button", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        padding: 8,
-                        margin: 0,
-                        boxSizing: 'border-box',
-                        borderWidth: 0,
-                        fontSize: 14,
-                        borderStyle: 'solid',
-                        borderColor: theme?.borderColor,
-                        borderRadius: 4,
-                        fontFamily: theme?.fontFamily,
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        height: 34,
-                        minHeight: 34,
-                        gap: 6,
-                        overflow: 'hidden',
-                    }, className: "quill-option", onClick: () => {
-                        let updateSelectedOptions = [...selectedOptions];
-                        if (selectedOptions.includes(option.value)) {
-                            updateSelectedOptions = selectedOptions.filter((opt) => opt !== option.value);
-                            setSelectedOptions(updateSelectedOptions);
-                        }
-                        else {
-                            updateSelectedOptions = [
-                                ...updateSelectedOptions,
-                                option.value,
-                            ];
-                            setSelectedOptions(updateSelectedOptions);
-                        }
-                        const updatedChangeEvent = {
-                            target: {
-                                value: updateSelectedOptions,
-                            },
-                        };
-                        debounce(updatedChangeEvent);
-                    }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: ${theme?.backgroundColor};
-                  color: ${theme?.primaryTextColor};
-                }
-                  .quill-option:hover {
-                    background: ${theme?.hoverBackgroundColor};
-                    color: ${theme?.hoverTextColor};
-                  }
-                ` }), _jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), _jsx("span", { style: {
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                            }, children: option.label ?? nullLabel })] }, option.value)))) : (_jsx(LoadingSpinner, {})) }))] }));
-}
-export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginTop: 2,
-        }, children: [_jsx("style", { children: `
-      .quill-text-input {
-          background-color: white;
-          height: 40px;
-         width: 180px;
-         z-index: 2;
-         color: ${theme?.primaryTextColor ?? '#384151'};
-         border-radius: 4px;
-         text-align: left;
-         padding-right: 12px;
-         padding-top: 0px;
-         padding-bottom: 0px;
-         box-sizing: content-box;
-         margin-left: 6px;
-         border: 0 solid ${theme?.borderColor ?? '#e5e7eb'};
-      }
-      .quill-text-input:focus {
-        outline: none;
-    }` }), _jsx("div", { style: { width: 6 } }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), _jsx("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
-                    fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
-                    background: theme?.backgroundColor,
-                } })] }));
-};

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

@@ -1,39 +0,0 @@
-import { CSSProperties } from 'react';
-/**
- * A robust select component that implements the new minimal Select interface.
- */
-export declare function QuillMultiSelectSectionList({ options, width, onChange, label, sectionHeaderMap, value, isLoading, disabled, emptyLabel, allSelectedLabel, style, owner, }: {
-    label?: string;
-    width: number;
-    value: {
-        [tenantField: string]: string[];
-    };
-    options: {
-        [tenantField: string]: {
-            value: string;
-            label: string;
-        }[];
-    };
-    sectionHeaderMap?: {
-        [tenantField: string]: string;
-    };
-    onChange: (event: {
-        target: {
-            value: {
-                [tenantField: string]: string[];
-            };
-        };
-    }) => void;
-    isLoading?: boolean;
-    disabled?: boolean;
-    emptyLabel?: string;
-    allSelectedLabel?: string;
-    style?: CSSProperties;
-    owner?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
-    value: string;
-    onChange: (e: string) => void;
-    placeholder: string;
-}) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=QuillMultiSelectSectionList.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuillMultiSelectSectionList.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectSectionList.tsx"],"names":[],"mappings":"AAEA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,CAAC;IAC3C,OAAO,EAAE;QACP,CAAC,WAAW,EAAE,MAAM,GAAG;YACrB,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;IACF,gBAAgB,CAAC,EAAE;QAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACrD,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,MAAM,EAAE;YAAE,KAAK,EAAE;gBAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;aAAE,CAAA;SAAE,CAAC;KACxD,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAicA;AAED,eAAO,MAAM,gBAAgB,GAAI,mCAI9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;CACrB,4CA8DA,CAAC"}

package/dist/esm/components/QuillMultiSelectSectionList.js

@@ -1,328 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useOnClickOutside } from '../hooks';
-import { LoadingSpinner } from './UiComponents';
-import React, { useContext, useMemo, useRef, useState, } from 'react';
-import { ThemeContext } from '../Context';
-/**
- * A robust select component that implements the new minimal Select interface.
- */
-export function QuillMultiSelectSectionList({ options, width, onChange, label, sectionHeaderMap, value, isLoading, disabled, emptyLabel, allSelectedLabel, style, owner, }) {
-    const [theme] = useContext(ThemeContext);
-    const [showModal, setShowModal] = useState(false);
-    const modalRef = useRef(null);
-    const buttonRef = useRef(null);
-    const debounceTimeoutId = useRef(null);
-    const [searchQuery, setSearchQuery] = React.useState('');
-    useOnClickOutside(modalRef, (event) => {
-        if (!buttonRef.current?.contains(event.target))
-            setShowModal(false);
-    }, showModal);
-    const debounce = (updatedChangeEvent) => {
-        if (debounceTimeoutId.current) {
-            clearTimeout(debounceTimeoutId.current);
-        }
-        debounceTimeoutId.current = setTimeout(() => {
-            onChange(updatedChangeEvent);
-        }, 200);
-    };
-    const optionsLength = React.useMemo(() => {
-        return Object.values(options).reduce((a, b) => a + b.length, 0);
-    }, [options]);
-    const filteredItems = React.useMemo(() => {
-        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}$/;
-        // Get the first element of the first non-empty array
-        const sample = Object.values(options).find((arr) => arr.length > 0)?.[0];
-        if (!sample) {
-            return {};
-        }
-        const isUuid = sample.value?.match(uuidRegex);
-        const isNumber = !isNaN(parseInt(sample.value));
-        const filteredOptions = Object.keys(options).reduce((acc, key) => {
-            acc[key] =
-                options[key]?.filter((option) => {
-                    if (!option) {
-                        return false;
-                    }
-                    return (searchQuery === '' ||
-                        option.label
-                            .toLowerCase()
-                            .replace(/\s+/g, '')
-                            .includes(searchQuery.toLowerCase().replace(/\s+/g, '')) ||
-                        (isNumber || isUuid
-                            ? option.value
-                                .toLowerCase()
-                                .replace(/\s+/g, '')
-                                .includes(searchQuery.toLowerCase().replace(/\s+/g, ''))
-                            : false));
-                }) ?? [];
-            return acc;
-        }, {});
-        const sliceSize = Math.ceil(20 / Object.keys(filteredOptions).length);
-        Object.keys(filteredOptions).forEach((key) => {
-            if (filteredOptions[key]) {
-                filteredOptions[key] = filteredOptions[key].slice(0, sliceSize);
-            }
-        });
-        return Object.fromEntries(Object.entries(filteredOptions)
-            .filter(([, value]) => !!value?.length)
-            .sort(([key]) => (key === owner ? -1 : 1)));
-    }, [options, searchQuery]);
-    const filteredLength = React.useMemo(() => {
-        return Object.values(filteredItems).reduce((a, b) => a + b.length, 0);
-    }, [filteredItems]);
-    const selectedOptionsLabel = useMemo(() => {
-        const valuesLength = Object.values(value).reduce((a, b) => a + b.length, 0);
-        if (!valuesLength) {
-            return 'Select';
-        }
-        const selectedOptionsLabels = Object.keys(value).map((key) => {
-            const matchingOptions = options[key]?.filter((elem) => value[key]?.includes(elem.value)) ?? [];
-            if (matchingOptions.length === 0) {
-                return null;
-            }
-            if (matchingOptions.length !== value[key]?.length) {
-                return value[key]?.join(', ') ?? null;
-            }
-            return matchingOptions
-                .map((elem) => elem.label)
-                .join(', ');
-        });
-        if (selectedOptionsLabels.length === optionsLength && allSelectedLabel) {
-            return allSelectedLabel;
-        }
-        return selectedOptionsLabels.filter((label) => label !== null).join(', ');
-    }, [options, value]);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            borderRadius: '6px',
-            width: width,
-            minWidth: width,
-            ...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',
-                    fontWeight: 'inherit',
-                    lineHeight: 'inherit',
-                    padding: '8px 12px',
-                    fontSize: 14,
-                    margin: 0,
-                    boxSizing: 'border-box',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme?.borderColor,
-                    borderRadius: 6,
-                    paddingTop: 9,
-                    paddingBottom: 9,
-                    height: 40,
-                    minHeight: 40,
-                    maxHeight: 40,
-                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
-          .quill-select-button:disabled {
-            cursor: not-allowed;
-            background: ${theme?.hoverBackgroundColor};
-          }
-        ` }), _jsx("span", { style: {
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            width: '100%',
-                            textAlign: 'left',
-                            zIndex: 1,
-                        }, children: selectedOptionsLabel }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && (_jsxs("div", { 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,
-                    fontFamily: theme?.fontFamily,
-                    maxHeight: '50vh',
-                    overflow: 'scroll',
-                    fontSize: 14,
-                }, ref: modalRef, children: [options && optionsLength > 20 && (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
-                                    setSearchQuery(value);
-                                } }), _jsx("div", { style: {
-                                    height: 9,
-                                    width: 230,
-                                    borderTop: '1px solid #e7e7e7',
-                                } })] })), !isLoading && (!filteredItems || filteredLength === 0) && (_jsxs("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            padding: 8,
-                            margin: 0,
-                            boxSizing: 'border-box',
-                            borderWidth: 0,
-                            fontSize: 14,
-                            borderStyle: 'solid',
-                            borderColor: theme?.borderColor,
-                            borderRadius: 4,
-                            fontFamily: theme?.fontFamily,
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            height: 34,
-                            minHeight: 34,
-                            gap: 6,
-                            overflow: 'hidden',
-                        }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: ${theme?.backgroundColor};
-                }
-                .quill-option:hover {
-                  background: ${theme?.hoverBackgroundColor};
-                }
-              ` }), _jsx("span", { style: {
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                    cursor: 'default',
-                                }, children: emptyLabel ?? 'No options available' })] })), !isLoading ? (Object.keys(filteredItems).map((key) => (_jsxs("div", { children: [_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: () => {
-                                    const updatedValue = options[key]?.length === value[key]?.length
-                                        ? []
-                                        : (options[key]?.map((option) => option.value) ?? []);
-                                    const updatedChangeEvent = {
-                                        target: {
-                                            value: {
-                                                ...value,
-                                                [key]: updatedValue,
-                                            },
-                                        },
-                                    };
-                                    // setSelectedOptions(updatedValue);
-                                    debounce(updatedChangeEvent);
-                                }, children: [_jsx("style", { children: `
-                  .quill-option {
-                    background: ${theme?.backgroundColor};
-                    color: ${theme?.primaryTextColor};
-                  }
-                  .quill-option:hover {
-                    background: ${theme?.hoverBackgroundColor};
-                    color: ${theme?.hoverTextColor};
-                  }
-                ` }), _jsx("input", { type: "checkbox", checked: options[key]?.length === value[key]?.length, style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), _jsx("span", { style: {
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap',
-                                            overflow: 'hidden',
-                                            fontWeight: 600,
-                                        }, children: sectionHeaderMap?.[key] ?? key })] }, 'sh-' + key), _jsx("div", { style: {
-                                    height: 1,
-                                    borderTop: '1px solid #e7e7e7',
-                                    marginTop: 2,
-                                    marginBottom: 2,
-                                } }), filteredItems[key]?.map((option) => (_jsxs("button", { style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    padding: 8,
-                                    paddingLeft: 16,
-                                    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: () => {
-                                    const updatedValue = value[key]?.includes(option.value)
-                                        ? value[key]?.filter((val) => val !== option.value)
-                                        : [...(value[key] ?? []), option.value];
-                                    const updatedChangeEvent = {
-                                        target: {
-                                            value: {
-                                                ...value,
-                                                [key]: updatedValue,
-                                            },
-                                        },
-                                    };
-                                    // setSelectedOptions(updatedValue);
-                                    debounce(updatedChangeEvent);
-                                }, children: [_jsx("style", { children: `
-                    .quill-option {
-                      background: ${theme?.backgroundColor};
-                      color: ${theme?.primaryTextColor};
-                    }
-                    .quill-option:hover {
-                      background: ${theme?.hoverBackgroundColor};
-                      color: ${theme?.hoverTextColor};
-                    }
-                  ` }), _jsx("input", { type: "checkbox", checked: value[key]?.includes(option.value) ?? false, style: {
-                                            width: '14px',
-                                            height: '14px',
-                                            margin: 'auto 0',
-                                        }, readOnly: true }), _jsx("span", { style: {
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap',
-                                            overflow: 'hidden',
-                                        }, children: option.label })] }, 'v-' + key + '-' + option.value)))] }, 'sp-' + key)))) : (_jsx("div", { children: _jsx(LoadingSpinner, {}) }))] }))] }));
-}
-export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginTop: 2,
-        }, children: [_jsx("style", { children: `
-      .quill-text-input {
-          background-color: white;
-          height: 40px;
-         width: 145px;
-         z-index: 2;
-         color: #384151;
-         border-radius: 4px;
-         text-align: left;
-         padding-top: 0px;
-         padding-bottom: 0px;
-         box-sizing: content-box;
-         margin-left: 6px;
-         border: 0 solid ${theme?.borderColor ?? '#e5e7eb'};
-      }
-      .quill-text-input:focus {
-        outline: none;
-    }` }), _jsx("div", { style: { width: 6 } }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), _jsx("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
-                    fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
-                    background: theme?.backgroundColor,
-                } })] }));
-};

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

@@ -1,15 +0,0 @@
-import { MultiSelectComponentProps } from './UiComponents';
-import { CSSProperties } from 'react';
-/**
- * A robust select component that implements the new minimal Select interface.
- */
-export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, style, }: MultiSelectComponentProps & {
-    allSelectedLabel?: string;
-    style?: CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
-export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
-    value: string;
-    onChange: (e: string) => void;
-    placeholder: string;
-}) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=QuillMultiSelectWithCombo.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAc,EAEZ,aAAa,EAMd,MAAM,OAAO,CAAC;AAKf;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,GACN,EAAE,yBAAyB,GAAG;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,2CAwmBA;AAED,eAAO,MAAM,gBAAgB,GAAI,mCAI9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;CACrB,4CA8DA,CAAC"}