@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/components/Dropdown/Dropdown.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useState } from 'react';
+import { HoveredValueContext, SelectedValueContext } from '../../contexts';
+import { useInternalState, useSelectOnKeyDown } from '../../hooks';
+import { ArrowDownHeadIcon } from '../../assets';
+import { mergeRefs } from '../../lib';
+import { constructValueToNameMapping } from '../selectUtils';
+import Modal from '../Modal';
+const Dropdown = React.forwardRef((props, ref) => {
+    const { defaultValue, value, onValueChange, placeholder = 'Select...', disabled = false, icon, children, className, theme, ...other } = props;
+    const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
+    const [isFocused, setIsFocused] = useState(false);
+    const dropdownRef = useRef(null);
+    const Icon = icon;
+    const valueToNameMapping = constructValueToNameMapping(children);
+    const optionValues = React.Children.map(children, (child) => child.props.value);
+    const handleValueChange = (value) => {
+        setSelectedValue(value);
+        setIsFocused(false);
+        onValueChange?.(value);
+    };
+    const [hoveredValue, handleKeyDown] = useSelectOnKeyDown(handleValueChange, optionValues, isFocused, setIsFocused, selectedValue);
+    return (_jsxs("div", { className: className, ref: mergeRefs([dropdownRef, ref]), onKeyDown: handleKeyDown, style: {
+            position: 'relative',
+            width: '100%',
+            minWidth: '10rem',
+        }, ...other, children: [_jsxs("button", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    width: '100%',
+                    outline: 'none',
+                    padding: '1.5rem 2rem',
+                    borderRadius: '0.375rem',
+                    border: '2px solid',
+                    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                    cursor: 'pointer',
+                    background: 'white',
+                }, type: "button", onClick: () => setIsFocused(!isFocused), disabled: disabled, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'start',
+                            alignItems: 'center',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                        }, children: [Icon ? (_jsx(Icon, { style: {
+                                    flexShrink: 0,
+                                    height: '1.5rem',
+                                    width: '1.5rem',
+                                    color: theme?.secondaryTextColor || '#6C727F',
+                                    marginRight: '1.5rem',
+                                }, "aria-hidden": "true" })) : null, _jsx("p", { style: {
+                                    margin: 0,
+                                    fontSize: '13px',
+                                    fontWeight: '500',
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                }, children: selectedValue
+                                    ? valueToNameMapping.get(selectedValue)
+                                    : placeholder })] }), _jsx(ArrowDownHeadIcon, { style: {
+                            flexShrink: 0,
+                            height: '1.5rem',
+                            width: '1.5rem',
+                            marginRight: '-0.25rem',
+                            color: theme?.secondaryTextColor || '#6C727F',
+                        }, "aria-hidden": "true" })] }), _jsx(Modal, { theme: theme, showModal: isFocused, setShowModal: setIsFocused, parentRef: dropdownRef, children: _jsx(SelectedValueContext.Provider, { value: { selectedValue, handleValueChange }, children: _jsx(HoveredValueContext.Provider, { value: { hoveredValue }, children: React.Children.map(children, (child) => React.cloneElement(child)) }) }) })] }));
+});
+export default Dropdown;

package/dist/esm/components/Dropdown/DropdownItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    text?: string;
+    icon?: React.ElementType;
+    theme: any;
+    lastItem?: boolean;
+}
+declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default DropdownItem;
+//# sourceMappingURL=DropdownItem.d.ts.map

package/dist/esm/components/Dropdown/DropdownItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACzB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,6FAkDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/components/Dropdown/DropdownItem.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import { SelectedValueContext } from '../../contexts';
+const DropdownItem = React.forwardRef((props, ref) => {
+    const { value, text, className, theme, lastItem, ...other } = props;
+    const { handleValueChange } = useContext(SelectedValueContext);
+    return (_jsx("button", { className: className, ref: ref, style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'start',
+            width: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            // padding: '0.75rem 1.25rem',
+            paddingLeft: 12,
+            paddingTop: 12,
+            paddingBottom: 12,
+            fontSize: theme?.fontSizeSmall || 14,
+            borderStyle: 'solid',
+            borderBottomWidth: lastItem ? '0px' : '1px',
+            borderBottomColor: theme?.borderColor || '#E5E7EB',
+            background: theme?.backgroundColor || 'white',
+            borderTop: 'none',
+            borderRight: 'none',
+            borderLeft: 'none',
+            cursor: 'pointer',
+            color: theme?.secondaryTextColor || '#364153',
+        }, type: "button", onClick: () => handleValueChange?.(value), ...other, children: _jsx("p", { style: {
+                margin: 0,
+                fontFamily: theme?.fontFamily,
+                color: theme?.primaryTextColor,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+            }, children: text ?? value }) }));
+});
+export default DropdownItem;

package/dist/esm/components/Dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Dropdown } from './Dropdown';
+export { default as DropdownItem } from './DropdownItem';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/esm/components/Dropdown/index.js

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './Dropdown';
+export { default as DropdownItem } from './DropdownItem';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { HorizontalPosition } from '../../lib/inputTypes';
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    showModal: boolean;
+    setShowModal: React.Dispatch<React.SetStateAction<boolean>> | ((nextState: boolean) => void);
+    parentRef?: React.RefObject<HTMLElement>;
+    width?: number;
+    maxHeight?: string;
+    anchorPosition?: HorizontalPosition;
+    children: React.ReactNode;
+    theme: any;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EACR,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAC7C,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,KAAK,mFAwFT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useOnClickOutside, useOnWindowResize } from '../../hooks';
+import { mergeRefs } from '../../lib';
+const Modal = React.forwardRef((props, ref) => {
+    const { showModal, setShowModal, parentRef, width, maxHeight = '18rem', children, className, theme, ...other } = props;
+    const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
+    const modalRef = useRef(null);
+    const checkModalExceedsWindow = useCallback((modalWidth, windowWidth) => {
+        if (!parentRef.current) {
+            return false;
+        }
+        const modalBoundingRight = parentRef.current.getBoundingClientRect().left + modalWidth;
+        return windowWidth - modalBoundingRight < 0;
+    }, [parentRef]);
+    const getAbsoluteSpacing = () => {
+        return modalExceedsWindow ? '0' : '0';
+    };
+    useOnClickOutside(modalRef, (e) => {
+        // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
+        const isTriggerElem = parentRef
+            ? parentRef.current?.contains(e.target)
+            : false;
+        if (!isTriggerElem) {
+            setShowModal(false);
+        }
+    });
+    // Execute only when modal is of absolute size
+    useEffect(() => {
+        if (width) {
+            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+        }
+    }, [checkModalExceedsWindow, parentRef, width]);
+    useOnWindowResize(() => {
+        if (width) {
+            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+        }
+    });
+    return showModal ? (_jsx("div", { className: className, ref: mergeRefs([modalRef, ref]), style: {
+            position: 'absolute',
+            zIndex: 10,
+            overflowY: 'auto',
+            width: width ? width : '100%',
+            left: getAbsoluteSpacing(),
+            right: getAbsoluteSpacing(),
+            maxHeight: maxHeight,
+            backgroundColor: theme?.backgroundColor || 'white',
+            borderColor: theme?.borderColor || '#E5E7EB',
+            borderTopStyle: 'solid',
+            borderBottomStyle: 'solid',
+            borderLeftStyle: 'solid',
+            borderRightStyle: 'solid',
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            marginTop: '0.5rem',
+            marginBottom: '0.5rem',
+            borderRadius: '0.375rem',
+            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        }, ...other, children: children })) : null;
+});
+export default Modal;

package/dist/esm/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Modal';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/components/Modal/index.js

@@ -0,0 +1 @@
+export { default } from './Modal';

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface QuillCardProps {
+    children: ReactNode;
+    onClick?: () => void;
+    onDelete?: () => void;
+}
+export declare function QuillCard({ children, onClick, onDelete }: QuillCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=QuillCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuillCard.d.ts","sourceRoot":"","sources":["../../../src/components/QuillCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,cAAc;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,cAAc,2CA4ExE"}

package/dist/esm/components/QuillCard.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from '../assets';
+import { useTheme } from '../hooks';
+export function QuillCard({ children, onClick, onDelete }) {
+    const theme = useTheme();
+    return (_jsxs("div", { className: onClick ? 'quill-card-hover' : '', style: {
+            backgroundColor: theme.backgroundColor || 'white',
+            cursor: onClick ? 'pointer' : 'default',
+            padding: 16,
+            borderRadius: 8,
+            boxShadow: '0 1px 4px 0 rgba(56, 65, 81, 0.07)',
+            borderWidth: theme.borderWidth,
+            borderStyle: 'solid',
+            borderColor: theme.borderColor,
+            overflowX: 'hidden',
+            position: 'relative',
+        }, onClick: onClick, children: [_jsx("style", { children: `
+        .quill-card-hover:hover {
+          background-color: #f9f9f9 !important;
+          .quill-delete-button {
+              background-color: #f9f9f9;
+          }
+          .quill-delete-button:hover {
+            background-color: #f5f5f5;
+          }
+        }
+      ` }), onDelete && (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: (e) => {
+                    onDelete();
+                    // Since this button is inside of the card, we do not want to fire
+                    // the onClick callback as well, if we fire the onDelete callback.
+                    e.stopPropagation();
+                }, style: {
+                    height: 40,
+                    width: 40,
+                    top: 4,
+                    right: 4,
+                    position: 'absolute',
+                    cursor: 'pointer',
+                    border: 'none',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 6,
+                    float: 'right',
+                }, children: [_jsx("style", { children: `
+      .quill-delete-button {
+          background-color: white;
+      }
+      .quill-delete-button:hover {
+        background-color: rgba(56, 65, 81, 0.03);
+      }` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] })), _jsx("div", { style: {
+                    overflowX: 'scroll',
+                    display: 'flex',
+                    height: '100%',
+                }, children: children })] }));
+}

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

@@ -0,0 +1,11 @@
+import { MultiSelectComponentProps } from './UiComponents';
+/**
+ * A robust select component that implements the new minimal Select interface.
+ */
+export declare function QuillMultiSelectComponent({ options, width, onChange, label, value, }: MultiSelectComponentProps): 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=QuillMultiSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3D;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,yBAAyB,2CAsQ3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}

package/dist/esm/components/QuillMultiSelect.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOnClickOutside } from '../hooks';
+import { useContext, useEffect, 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, }) {
+    const [theme] = useContext(ThemeContext);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [showModal, setShowModal] = useState(false);
+    const modalRef = useRef(null);
+    const debounceTimeoutId = useRef(null);
+    // const [searchQuery, setSearchQuery] = useState('');
+    // const [filteredOptions, setFilteredOptions] = useState(options);
+    useOnClickOutside(modalRef, () => setShowModal(false));
+    useEffect(() => {
+        if (!value) {
+            setSelectedOptions([]);
+        }
+        else {
+            setSelectedOptions(value);
+        }
+    }, [value]);
+    const debounce = (updatedChangeEvent) => {
+        if (debounceTimeoutId.current) {
+            clearTimeout(debounceTimeoutId.current);
+        }
+        debounceTimeoutId.current = setTimeout(() => {
+            onChange(updatedChangeEvent);
+        }, 500);
+    };
+    // const filterOptions = (query: string) => {
+    //   setSearchQuery(query);
+    //   setFilteredOptions(
+    //     options.filter((option) =>
+    //       option.label.toLowerCase().includes(query.toLowerCase()),
+    //     ),
+    //   );
+    // };
+    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,
+                    color: theme.primaryTextColor,
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    fontWeight: 'inherit',
+                    lineHeight: 'inherit',
+                    padding: '8px 12px',
+                    fontSize: 14,
+                    margin: 0,
+                    boxSizing: 'border-box',
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                    borderColor: theme.borderColor,
+                    borderRadius: 6,
+                    paddingTop: 9,
+                    paddingBottom: 9,
+                    height: 40,
+                    minHeight: 40,
+                    maxHeight: 40,
+                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [_jsx("style", { children: ` .quill-select-button { background: ${theme.backgroundColor}; } 
+          .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }
+        ` }), _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", { ref: modalRef, style: {
+                    position: 'absolute',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    boxSizing: 'border-box',
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                    borderColor: theme.borderColor,
+                    borderRadius: 6,
+                    background: 'white',
+                    marginTop: 12,
+                    zIndex: 100,
+                    padding: 6,
+                    fontFamily: theme.fontFamily,
+                    maxHeight: '50vh',
+                    overflow: 'scroll',
+                }, children: options.map((option) => (_jsxs("button", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: 8,
+                        margin: 0,
+                        boxSizing: 'border-box',
+                        borderWidth: 0,
+                        fontSize: 14,
+                        borderStyle: 'solid',
+                        borderColor: theme.borderColor,
+                        borderRadius: 4,
+                        fontFamily: theme.fontFamily,
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        height: 34,
+                        minHeight: 34,
+                        gap: 6,
+                        overflow: 'hidden',
+                    }, className: "quill-option", onClick: () => {
+                        // Manually create a synthetic ChangeEvent and pass it to callback
+                        const changeEvent = { target: { value: option.value } };
+                        let updateSelctedOptions = [...selectedOptions];
+                        if (selectedOptions.includes(changeEvent.target.value)) {
+                            updateSelctedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
+                            setSelectedOptions(updateSelctedOptions);
+                        }
+                        else {
+                            updateSelctedOptions = [
+                                ...updateSelctedOptions,
+                                changeEvent.target.value,
+                            ];
+                            setSelectedOptions(updateSelctedOptions);
+                        }
+                        const updatedChangeEvent = {
+                            target: { value: updateSelctedOptions.join(',') },
+                        };
+                        if (updateSelctedOptions.length === 0) {
+                            updatedChangeEvent.target.value = '';
+                        }
+                        debounce(updatedChangeEvent);
+                    }, children: [_jsx("style", { children: `
+                .quill-option {
+                  background: white;
+                }
+                  .quill-option:hover {
+                    background: #F4F4F5;
+                  }
+                ` }), _jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), _jsx("span", { style: {
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                            }, children: option.label })] }, option.value))) }))] }));
+}
+export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: 2,
+        }, children: [_jsx("style", { children: `
+      .quill-text-input {
+          background-color: white;
+          height: 40px;
+         width: 180px;
+         z-index: 2;
+         color: #384151;
+         border-radius: 4px;
+         text-align: left;
+         padding-right: 12px;
+         padding-top: 0px;
+         padding-bottom: 0px;
+         box-sizing: content-box;
+         margin-left: 6px;
+      }
+      .quill-text-input:focus {
+        outline: none;
+    }` }), _jsx("div", { style: { width: 6 } }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), _jsx("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
+};

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

@@ -0,0 +1,11 @@
+import { MultiSelectComponentProps } from './UiComponents';
+/**
+ * A robust select component that implements the new minimal Select interface.
+ */
+export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, }: MultiSelectComponentProps): 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

@@ -0,0 +1 @@
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3D;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,yBAAyB,2CAqS3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}