@quillsql/admin 1.6.0 → 1.6.2

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

@@ -1,13 +1,4 @@
 import React from 'react';
-interface OrgSelectProps {
-    parentRef: any;
-    environment: string;
-    setEnvironment: (environment: string) => void;
-    organizations: any[];
-    theme: any;
-    organizationId: string;
-    setOrganizationId: (organizationId: string | null) => void;
-}
 interface PopoverComponentProps {
     children: any;
     onClose?: () => void;
@@ -26,10 +17,15 @@ export declare const ListboxTextInput: ({ value, onChange, placeholder, id, }: {
     placeholder: string;
     id: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export default function OrgSelect({ environment, setEnvironment, organizations, theme, organizationId, setOrganizationId, parentRef, }: OrgSelectProps): import("react/jsx-runtime").JSX.Element;
-export declare function ListboxRow({ item, setSelected, }: {
-    item: any;
-    setSelected?: (item: any) => void;
+export default function OrgSelect({ isLoading }: {
+    isLoading: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect, }: {
+    item: string;
+    isSelected?: boolean;
+    setSelected?: (item: string) => void;
+    hoverActions?: (item: string) => JSX.Element;
+    allowUnselect?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=OrgSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,UAAU,cAAc;IACtB,SAAS,EAAE,GAAG,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,GAAG,EAAE,CAAC;IACrB,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5D;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,qBAAqB,2CAqGvB;AAED,eAAO,MAAM,gBAAgB;WAMpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;QACf,MAAM;6CA0DX,CAAC;AAwCF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,WAAW,EACX,cAAc,EACd,aAAa,EACb,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,SAAS,GACV,EAAE,cAAc,2CAsGhB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,WAAW,GACZ,EAAE;IACD,IAAI,EAAE,GAAG,CAAC;IACV,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC,2CA0CA"}
+{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AASpE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,qBAAqB,2CA4HvB;AAED,eAAO,MAAM,gBAAgB,0CAK1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,4CAyDA,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,2CAsJtE;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,GACd,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,2CAwEA"}

package/dist/cjs/components/OrgSelect.js

@@ -3,30 +3,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListboxRow = exports.ListboxTextInput = exports.Popover = void 0;
+exports.ListboxTextInput = void 0;
+exports.Popover = Popover;
+exports.default = OrgSelect;
+exports.ListboxRow = ListboxRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("../icons");
-const AdminProvider_1 = require("../AdminProvider");
 const useOnClickOutside_1 = __importDefault(require("../hooks/useOnClickOutside"));
+const useTenants_1 = require("../hooks/useTenants");
+const QuillSelectWithCombo_1 = require("./QuillSelectWithCombo");
+const QuillMultiSelectWithCombo_1 = require("./QuillMultiSelectWithCombo");
+const useDashboardManager_1 = require("../hooks/useDashboardManager");
+const GlobeIcon_1 = __importDefault(require("../icons/GlobeIcon"));
 function Popover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
     const modalRef = (0, react_1.useRef)(null);
+    const [maxHeight, setMaxHeight] = (0, react_1.useState)('40vh');
     (0, useOnClickOutside_1.default)(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) {
+        if (!isTriggerElem) {
             handleCloseModal();
         }
-    });
+    }, isOpen);
+    (0, react_1.useEffect)(() => {
+        const updateMaxHeight = () => {
+            if (modalRef.current) {
+                const rect = modalRef.current.getBoundingClientRect();
+                const availableSpace = window.innerHeight - rect.top - 32; // 16px for margin
+                const newMaxHeight = Math.min(availableSpace, window.innerHeight * 0.4); // At most 40vh
+                setMaxHeight(`${newMaxHeight}px`);
+            }
+        };
+        // Call on mount and when window resizes
+        updateMaxHeight();
+        window.addEventListener('resize', updateMaxHeight);
+        return () => {
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, []);
     const handleCloseModal = () => {
         setIsOpen(false);
         if (onClose) {
             onClose();
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [showTrigger && ((0, jsx_runtime_1.jsxs)("button", { 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showTrigger && ((0, jsx_runtime_1.jsxs)("button", { 
                 //   onMouseEnter={() => setIsOpen(true)}
                 onClick: (e) => {
                     setIsOpen(!isOpen);
@@ -50,7 +74,7 @@ function Popover({ onClose, parentRef, children, style = {}, onClick, label, sho
                     borderBottom: '1px solid #e7e7e7',
                     paddingLeft: 12,
                     paddingRight: 12,
-                    height: 38,
+                    height: 40,
                     background: 'white',
                     color: '#384151',
                     fontWeight: 500,
@@ -64,7 +88,7 @@ function Popover({ onClose, parentRef, children, style = {}, onClick, label, sho
                             right: 8,
                             top: 8,
                             color: '#6C727F',
-                        }, "aria-hidden": "true" })] })), isOpen && ((0, jsx_runtime_1.jsx)("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        }, "aria-hidden": "true" })] })), (0, jsx_runtime_1.jsx)("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative', display: isOpen ? 'block' : 'none' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                         background: 'white',
                         position: 'absolute',
                         boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
@@ -78,10 +102,10 @@ function Popover({ onClose, parentRef, children, style = {}, onClick, label, sho
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
+                        maxHeight: maxHeight,
                         ...style,
-                    }, children: children }) }))] }));
+                    }, children: children }) })] }));
 }
-exports.Popover = Popover;
 const ListboxTextInput = ({ value, onChange, placeholder, id, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
@@ -109,118 +133,111 @@ const ListboxTextInput = ({ value, onChange, placeholder, id, }) => {
     }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.jsx)("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
 };
 exports.ListboxTextInput = ListboxTextInput;
-function castNumberToString(value) {
-    if (typeof value === 'number') {
-        return value.toString();
-    }
-    return value;
-}
-function createOrganizationList(organizations) {
-    // if capital fields
-    if (!organizations || !organizations.length) {
-        return [];
-    }
-    if (organizations[0]['NAME'] && organizations[0]['ID']) {
-        return [
-            ...organizations.map((org) => {
-                const name = org['NAME'];
-                const id = org['ID'];
-                return {
-                    name,
-                    id: castNumberToString(id),
-                };
-            }),
-            { name: 'All Organizations', id: '*' },
-        ];
-    }
-    return [
-        ...organizations.map((org) => {
-            const name = org['name'];
-            const id = org['id'];
-            return {
-                name,
-                id: castNumberToString(id),
-            };
-        }),
-        { name: 'All Organizations', id: '*' },
-    ];
-}
-function OrgSelect({ environment, setEnvironment, organizations, theme, organizationId, setOrganizationId, parentRef, }) {
-    (0, react_1.useEffect)(() => {
-        setEnvironment(environment);
-    }, [environment]);
-    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
-    const dropDownItems = (0, react_1.useMemo)(() => createOrganizationList(organizations), [organizations]);
-    const handleSelectOrganization = (selectedItem) => {
-        if (state.activeQuery) {
-            const message = 'Are you sure? Changing organization will exit edit mode and your changes will not be saved.';
-            if (!confirm(message))
-                return;
-            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+function OrgSelect({ isLoading }) {
+    const { dashboardTenants, dashboardOwnerTenant, selectedTenantType, selectedTenantValues, setSelectedTenantValues, selectedDashboardTenantIds, setSelectedTenantType, setSelectedDashboardTenantIds, dashboardTenantIdsLoading, } = (0, useTenants_1.useTenants)();
+    const { selectedDashboard } = (0, useDashboardManager_1.useDashboardManager)();
+    const debounceIdTimeoutId = (0, react_1.useRef)(null);
+    const debounceValueTimeoutId = (0, react_1.useRef)(null);
+    const debouncedSetSelectedDashboardTenantIds = (value) => {
+        if (debounceIdTimeoutId.current) {
+            clearTimeout(debounceIdTimeoutId.current);
         }
-        setOrganizationId(selectedItem?.id || '');
-        setIsOpen(false);
+        debounceIdTimeoutId.current = setTimeout(() => {
+            setSelectedDashboardTenantIds(value);
+        }, 500);
     };
-    const selectedOrganization = dropDownItems.find((item) => item.id === organizationId);
-    const filteredOrganizations = searchQuery === ''
-        ? dropDownItems.slice(0, 20)
-        : dropDownItems
-            .filter((org) => {
-            if (!org.name) {
-                return false;
-            }
-            return org.name
-                .toLowerCase()
-                .replace(/\s+/g, '')
-                .includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
-        })
-            .slice(0, 20);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                    fontSize: '14px',
-                    paddingTop: '0px',
-                    marginTop: '0px',
-                    marginBottom: '4px',
-                    fontWeight: '600',
-                    color: theme.secondaryTextColor,
-                }, children: "Organization" }), (0, jsx_runtime_1.jsxs)(Popover, { parentRef: parentRef, label: selectedOrganization && selectedOrganization.name, isOpen: isOpen, onClose: () => setIsOpen(false), style: {
-                    boxSizing: 'border-box',
-                    fontSize: 14,
-                    //   padding: 11,
-                }, setIsOpen: setIsOpen, onClick: () => console.log(), children: [(0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), (0, jsx_runtime_1.jsx)("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), (0, jsx_runtime_1.jsxs)("div", { style: { gap: 2, maxHeight: '50vh' }, children: [filteredOrganizations.map((item, index) => ((0, jsx_runtime_1.jsx)(ListboxRow, { setSelected: handleSelectOrganization, item: item }, index))), filteredOrganizations.length === 0 && ((0, jsx_runtime_1.jsx)(ListboxRow, { item: { name: 'No organizations found' } }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8, width: 230 } })] })] }));
+    const debouncedSetSelectedTenantValues = (value) => {
+        if (debounceValueTimeoutId.current) {
+            clearTimeout(debounceValueTimeoutId.current);
+        }
+        debounceValueTimeoutId.current = setTimeout(() => {
+            setSelectedTenantValues(value);
+        }, 500);
+    };
+    const dashboardTenantOptions = (0, react_1.useMemo)(() => {
+        return (dashboardTenants?.map((tenant) => {
+            return {
+                label: tenant.name,
+                value: tenant.tenantField,
+            };
+        }) ?? []);
+    }, [dashboardTenants]);
+    const ownerIsSelected = (0, react_1.useMemo)(() => {
+        return (!selectedDashboard?.tenantKeys ||
+            selectedDashboard?.tenantKeys?.some((key) => key === selectedTenantType?.tenantField));
+    }, [selectedDashboard, selectedTenantType]);
+    const tenantValueOptions = (0, react_1.useMemo)(() => {
+        return selectedTenantType?.scope === 'database'
+            ? (selectedTenantType?.flags?.map((flag) => ({
+                label: flag,
+                value: flag,
+            })) ?? [])
+            : (selectedTenantType?.tenantIds?.map((id) => ({
+                label: id.label ?? id.flag ?? id.id.toString(),
+                value: id.id,
+            })) ?? []);
+    }, [selectedTenantType]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 16 }, children: [dashboardTenantOptions?.length > 1 && ((0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { label: 'Tenant Type', width: 230, value: selectedTenantType?.tenantField, options: dashboardTenantOptions, onChange: (e) => setSelectedTenantType(e.target.value), isLoading: isLoading, disabled: isLoading, hideEmptyOption: true, badge: ownerIsSelected ? 'Owner' : undefined })), (0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, { label: selectedTenantType?.scope === 'database'
+                    ? 'Tags'
+                    : (selectedTenantType?.name ?? 'Tenant'), width: 230, value: !tenantValueOptions.length ? [] : (selectedTenantValues ?? []), options: tenantValueOptions, onChange: (e) => debouncedSetSelectedTenantValues(e.target.value), emptyLabel: selectedTenantType?.scope === 'database'
+                    ? 'No tags provided'
+                    : undefined, disabled: isLoading, allSelectedLabel: selectedTenantType?.scope === 'database' ? undefined : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 3 }, children: [(0, jsx_runtime_1.jsx)(GlobeIcon_1.default, { style: {
+                                marginTop: 1.75,
+                            } }), (0, jsx_runtime_1.jsxs)("div", { children: ["All ", (selectedTenantType?.name ?? 'Tenant') + 's'] })] })), isLoading: isLoading }, (selectedTenantType?.tenantField ?? 'Tenant') + 'options'), selectedTenantType &&
+                !ownerIsSelected &&
+                dashboardOwnerTenant?.scope !== 'database' &&
+                !!selectedTenantValues?.length && ((0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, { label: dashboardOwnerTenant?.name ?? 'Viewing as', width: 230, value: isLoading ? [] : (selectedDashboardTenantIds ?? []), options: dashboardOwnerTenant?.tenantIds?.map((id) => ({
+                    label: id.label ?? id.flag ?? id.id.toString(),
+                    value: id.id,
+                })) ?? [], onChange: (e) => debouncedSetSelectedDashboardTenantIds(e.target.value), isLoading: dashboardTenantIdsLoading || isLoading, disabled: isLoading, allSelectedLabel: selectedTenantType?.scope === 'database' ? undefined : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 3 }, children: [(0, jsx_runtime_1.jsx)(GlobeIcon_1.default, { style: {
+                                marginTop: 1.75,
+                            } }), (0, jsx_runtime_1.jsx)("div", { children: "All Tenants" })] })) }))] }));
 }
-exports.default = OrgSelect;
-function ListboxRow({ item, setSelected, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { onClick: setSelected ? () => setSelected(item) : undefined, className: "quill-org-select", children: [(0, jsx_runtime_1.jsx)("style", { children: `
-  .quill-org-select {
+function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'quill-list-select' + (isSelected ? ' quill-list-selected' : ''), style: {
+            paddingBottom: 6,
+            cursor: isSelected && !allowUnselect ? 'default' : 'pointer',
+            position: 'relative',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { onClick: setSelected && (!isSelected || allowUnselect)
+                ? () => setSelected(item)
+                : undefined, className: "quill-list-select-title", style: {
+                height: 42,
+                color: '#384151',
+                width: 216,
+                borderRadius: 6,
+                textAlign: 'left',
+                paddingLeft: 10,
+                paddingRight: 12,
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                fontWeight: 500,
+                fontSize: 14,
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+            }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    .quill-list-select > div {
       background-color: white;
-      height: 42px;
-      color: #384151;
-      width: 216px;
-     borderBottom: 1px solid #e7e7e7;
-     border-radius: 6px;
-     text-align: left;
-     padding-left: 10px;
-     padding-right: 12px;
-     display: flex;
-     flex-direction: row;
-     align-items: center;
-     cursor: pointer;
-     font-weight: 500;
-     font-size: 14px;
-     text-overflow: ellipsis;
-     white-space: nowrap;
-     overflow: hidden;
-  }
-  .quill-org-select:hover {
-    background-color: rgba(56, 65, 81, 0.04);
-  }` }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    display: 'block',
-                }, children: item.name })] }));
+    }
+    .quill-list-selected > div {
+      background-color: rgba(56, 65, 81, 0.04);
+    }
+    .quill-list-select:hover > div {
+      background-color: rgba(56, 65, 81, 0.04);
+    }
+    .quill-list-select-hover-actions {
+      display: none;
+    }
+    .quill-list-select:hover > div > .quill-list-select-hover-actions {
+      display: block;
+    }
+    
+    ` }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        display: 'block',
+                    }, children: item }), (0, jsx_runtime_1.jsx)("div", { className: isSelected ? '' : 'quill-list-select-hover-actions', children: hoverActions && hoverActions(item) })] }) }));
 }
-exports.ListboxRow = ListboxRow;

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

@@ -0,0 +1,30 @@
+export interface MultiSelectComponentProps {
+    label?: string;
+    width: number;
+    value: (string | number | null)[];
+    options: {
+        value: string | number;
+        label: string;
+    }[];
+    onChange: (event: {
+        target: {
+            value: (string | number | null)[];
+        };
+    }) => void;
+    isLoading?: boolean;
+    disabled?: boolean;
+    emptyLabel?: string;
+    allSelectedLabel?: JSX.Element;
+    noneSelectedLabel?: JSX.Element;
+    mimicReactSelect?: boolean;
+}
+/**
+ * A robust select component that implements the new minimal Select interface.
+ */
+export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, noneSelectedLabel, mimicReactSelect, }: 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/cjs/components/QuillMultiSelectWithCombo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,yBAAyB,2CAumB3B;AAED,eAAO,MAAM,gBAAgB,sCAI1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;CACrB,4CAwDA,CAAC"}