@quillsql/admin 1.3.6 → 1.3.8

package/dist/esm/components/DropDownMenuWithLabel.js

@@ -1,47 +1,145 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled = false, secondaryTextColor = '#6e6e6e', }) {
-    return (_jsxs("div", { children: [_jsx("h1", { style: {
+import React, { useEffect } from 'react';
+import { ListboxTextInput, Popover } from './OrgSelect';
+export default function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled = false, secondaryTextColor = '#6e6e6e', parentRef, }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [filteredItems, setFilteredItems] = React.useState(items);
+    useEffect(() => {
+        setFilteredItems(items);
+    }, [items]);
+    const handleSearchChange = (value) => {
+        setSearchQuery(value);
+        setFilteredItems(items.filter((item) => item.toLowerCase().includes(value.toLowerCase())));
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
                     fontSize: '14px',
                     paddingTop: '0px',
                     marginTop: '0px',
                     marginBottom: '4px',
                     fontWeight: '600',
                     color: secondaryTextColor,
-                    userSelect: 'none',
-                }, children: label }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
-                        position: 'relative',
-                        fontFamily: theme?.fontFamily,
-                        fontSize: 14,
-                        fontWeight: 500,
-                    }, children: [_jsxs("select", { style: {
-                                width: '100%',
-                                minWidth: 250,
-                                maxWidth: 250,
-                                outline: 'none',
-                                textAlign: 'left',
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                borderRadius: 6,
-                                WebkitAppearance: 'none',
-                                paddingLeft: 12,
-                                paddingRight: 12,
-                                height: 38,
-                                borderWidth: 1,
-                                borderColor: '#e7e7e7',
-                                background: 'white',
-                                color: '#212121',
-                                boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                                fontFamily: theme?.fontFamily,
-                            }, disabled: disabled, onChange: (e) => {
-                                setSelected(items.find((item) => item === e.target.value));
-                            }, value: selected || '', children: [_jsx("option", { value: "", children: items && items.length !== 0 ? 'Select' : 'N/A' }), items.slice(0, 50).map((item) => (_jsx("option", { value: item, children: item }, item)))] }), _jsxs("svg", { style: {
-                                height: '20px',
-                                width: '20px',
-                                flex: 'none',
-                                position: 'absolute',
-                                right: 8,
-                                top: 9,
-                                color: '#565656',
-                            }, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", visibility: disabled ? 'hidden' : 'visible', children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] })] }) })] }));
+                }, children: label }), _jsxs(Popover, { parentRef: parentRef, label: items.length === 0 ? 'N/A' : selected ? selected : 'Select', isOpen: isOpen, onClose: () => setIsOpen(false), style: {
+                    boxSizing: 'border-box',
+                    fontSize: 14,
+                    //   padding: 11,
+                }, setIsOpen: setIsOpen, children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: 'Search', value: searchQuery, onChange: handleSearchChange }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsx("div", { style: { gap: 2, maxHeight: '50vh' }, children: filteredItems.map((item, index) => (_jsx(ListboxRow, { setSelected: setSelected, setIsOpen: setIsOpen, item: item }, index))) }), _jsx("div", { style: { height: 8, width: 230 } })] })] }));
+    {
+        /* return (
+        <div style={{ position: 'relative', minWidth: 230 }}>
+          <h1
+            style={{
+              fontSize: '14px',
+              paddingTop: '0px',
+              marginTop: '0px',
+              marginBottom: '4px',
+              fontWeight: '600',
+              color: secondaryTextColor,
+              userSelect: 'none',
+            }}
+          >
+            {label}
+          </h1>
+          <MemoizedPopover
+            parentRef={parentRef}
+            label={selected}
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            // style={{
+            //   boxSizing: 'border-box',
+            //   fontSize: 14,
+            // }}
+            setIsOpen={setIsOpen}
+            onClick={() => console.log()}
+          >
+            <MemoizedTextInput
+              id="quill-search-bar"
+              placeholder="Search"
+              value={searchQuery}
+              onChange={handleSearchChange}
+            />
+            <div
+              style={{ height: 9, width: 230, borderTop: '1px solid #e7e7e7' }}
+            />
+            <div style={{ gap: 2, maxHeight: '50vh' }}>
+              {filteredItems.map((item, index) => (
+                <DropdownRow setSelected={setSelected} item={item} key={index} />
+              ))}
+              {filteredItems.length === 0 && (
+                <DropdownRow item={{ name: `No ${label} found` }} />
+              )}
+            </div>
+          </Popover>
+    
+        </div>
+        </div>
+      ); */
+    }
+}
+function ListboxRow({ item, setSelected, setIsOpen, }) {
+    return (_jsxs("div", { onClick: setSelected
+            ? () => {
+                setSelected(item);
+                setIsOpen(false);
+            }
+            : undefined, className: "drop-down", children: [_jsx("style", { children: `
+  .drop-down {
+      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);
+  }` }), _jsx("div", { style: {
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    display: 'block',
+                }, children: item.name || item })] }));
+}
+function DropdownRow({ item, setSelected, }) {
+    return (_jsxs("div", { onClick: setSelected ? () => setSelected(item) : undefined, className: "dropdown-row", children: [_jsx("style", { children: `
+  .dropdown-row {
+      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;
+  }
+  .dropdown-row:hover {
+    background-color: rgba(56, 65, 81, 0.04);
+  }` }), _jsx("div", { style: {
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    display: 'block',
+                }, children: item })] }));
 }

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

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+interface DynamicBannerProps {
+    header: string;
+    message: string;
+    onExit: () => void;
+    style: CSSProperties;
+    fontColor?: string;
+}
+export default function DynamicBanner({ header, message, onExit, style, fontColor, }: DynamicBannerProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=DynamicBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicBanner.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAiCzC"}

package/dist/esm/components/DynamicBanner.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import XMarkIcon from '../icons/XMarkIcon';
+export default function DynamicBanner({ header, message, onExit, style, fontColor, }) {
+    return (_jsxs("div", { id: "quill-edit-banner", style: {
+            width: '100vw',
+            height: 70,
+            minHeight: 70,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingLeft: 20,
+            paddingRight: 20,
+            borderBottom: '1px solid #e7e7e7',
+        }, children: [_jsx("h1", { style: { fontSize: 21, fontWeight: 600, color: '#212121' }, children: header }), _jsx("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: _jsx(XMarkIcon, { style: { width: '20px', height: '20px' }, fill: fontColor, "aria-hidden": "true" }) })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"EnvSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/EnvSelectPopover.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,WAAW,EACX,cAAc,EACd,aAAa,EACb,WAAW,GACZ,EAAE,qBAAqB,2CAsTvB"}
+{"version":3,"file":"EnvSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/EnvSelectPopover.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,WAAW,EACX,cAAc,EACd,aAAa,EACb,WAAW,GACZ,EAAE,qBAAqB,2CAqTvB"}

package/dist/esm/components/EnvSelectPopover.js

@@ -206,7 +206,6 @@ export default function EnvSelectPopover({ clients, setClient, client, theme, en
                                     ? () => handleItemClick(item)
                                     : undefined, style: {
                                     ...clientStyles,
-                                    visibility: showPromote ? 'visible' : 'hidden',
                                 }, children: item.name }), client && client._id === item._id && (_jsxs("div", { onClick: (e) => handlePromoteClick(e, item), style: {
                                     ...promoteStyles,
                                     visibility: showPromote ? 'visible' : 'hidden',

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

@@ -1,3 +1,4 @@
+import React from 'react';
 interface OrgSelectProps {
     parentRef: any;
     environment: string;
@@ -7,6 +8,28 @@ interface OrgSelectProps {
     organizationId: string;
     setOrganizationId: (organizationId: string | null) => void;
 }
+interface PopoverComponentProps {
+    children: any;
+    onClose?: () => void;
+    parentRef?: any;
+    style?: any;
+    onClick?: (e: React.MouseEvent) => void;
+    label?: string;
+    showTrigger?: boolean;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}
+export declare function Popover({ onClose, parentRef, children, style, onClick, label, showTrigger, isOpen, setIsOpen, }: PopoverComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare const ListboxTextInput: ({ value, onChange, placeholder, id, }: {
+    value: string;
+    onChange: (e: string) => void;
+    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;
+}): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=OrgSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAWA,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;AA0ND,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,WAAW,EACX,cAAc,EACd,aAAa,EACb,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,SAAS,GACV,EAAE,cAAc,2CAiGhB"}
+{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,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;AAsBD,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,2CAoGhB;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"}

package/dist/esm/components/OrgSelect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, } from 'react';
+import { useEffect, useMemo, useRef, useState, } from 'react';
 import { ArrowDownHeadIcon } from '../icons';
 import { useAdmin } from '../AdminProvider';
 const useOnClickOutside = (ref, handler) => {
@@ -18,7 +18,7 @@ const useOnClickOutside = (ref, handler) => {
         };
     }, [ref, handler]);
 };
-function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
+export function Popover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
     const modalRef = useRef(null);
     useOnClickOutside(modalRef, (e) => {
         // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
@@ -62,8 +62,6 @@ function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, la
                     height: 38,
                     background: 'white',
                     color: '#384151',
-                    // boxShadow: "0 1px 2px 0 rgba(0,0,0,.05)",
-                    // fontFamily: theme.fontFamily,
                     fontWeight: 500,
                     fontSize: 14,
                     position: 'relative',
@@ -92,7 +90,7 @@ function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, la
                         ...style,
                     }, children: children }) }))] }));
 }
-const MemoizedTextInput = ({ value, onChange, placeholder, id, }) => {
+export const ListboxTextInput = ({ value, onChange, placeholder, id, }) => {
     return (_jsxs("div", { style: {
             position: 'relative',
             display: 'flex',
@@ -118,6 +116,42 @@ const MemoizedTextInput = ({ value, onChange, placeholder, id, }) => {
         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", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
 };
+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: '' },
+    ];
+}
 export default function OrgSelect({ environment, setEnvironment, organizations, theme, organizationId, setOrganizationId, parentRef, }) {
     useEffect(() => {
         setEnvironment(environment);
@@ -125,10 +159,7 @@ export default function OrgSelect({ environment, setEnvironment, organizations,
     const { state, dispatch } = useAdmin();
     const [isOpen, setIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
-    const dropDownItems = organizations.map((org) => ({
-        name: org.name,
-        id: org.id,
-    }));
+    const dropDownItems = 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.';
@@ -143,10 +174,15 @@ export default function OrgSelect({ environment, setEnvironment, organizations,
     const selectedOrganization = dropDownItems.find((item) => item.id === organizationId);
     const filteredOrganizations = searchQuery === ''
         ? dropDownItems
-        : dropDownItems.filter((org) => org.name
-            .toLowerCase()
-            .replace(/\s+/g, '')
-            .includes(searchQuery.toLowerCase().replace(/\s+/g, '')));
+        : dropDownItems.filter((org) => {
+            if (!org.name) {
+                return false;
+            }
+            return org.name
+                .toLowerCase()
+                .replace(/\s+/g, '')
+                .includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
+        });
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
                     fontSize: '14px',
                     paddingTop: '0px',
@@ -154,13 +190,13 @@ export default function OrgSelect({ environment, setEnvironment, organizations,
                     marginBottom: '4px',
                     fontWeight: '600',
                     color: theme.secondaryTextColor,
-                }, children: "Organization" }), _jsxs(MemoizedPopover, { parentRef: parentRef, label: selectedOrganization && selectedOrganization.name, isOpen: isOpen, onClose: () => setIsOpen(false), style: {
+                }, children: "Organization" }), _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: [_jsx(MemoizedTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsxs("div", { style: { gap: 2, maxHeight: '50vh' }, children: [filteredOrganizations.map((item, index) => (_jsx(OrgSelectRow, { setSelected: handleSelectOrganization, item: item }, index))), filteredOrganizations.length === 0 && (_jsx(OrgSelectRow, { item: { name: 'No organizations found' } }))] }), _jsx("div", { style: { height: 8, width: 230 } })] })] }));
+                }, setIsOpen: setIsOpen, onClick: () => console.log(), children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsxs("div", { style: { gap: 2, maxHeight: '50vh' }, children: [filteredOrganizations.map((item, index) => (_jsx(ListboxRow, { setSelected: handleSelectOrganization, item: item }, index))), filteredOrganizations.length === 0 && (_jsx(ListboxRow, { item: { name: 'No organizations found' } }))] }), _jsx("div", { style: { height: 8, width: 230 } })] })] }));
 }
-function OrgSelectRow({ item, setSelected, }) {
+export function ListboxRow({ item, setSelected, }) {
     return (_jsxs("div", { onClick: setSelected ? () => setSelected(item) : undefined, className: "quill-org-select", children: [_jsx("style", { children: `
   .quill-org-select {
       background-color: white;

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

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+export default function SqlTextEditor({ containerStyle, value, setValue, }: {
+    containerStyle?: CSSProperties;
+    value: string;
+    setValue: (e: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SqlTextEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SqlTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SqlTextEditor.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA+B7C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,cAAc,EACd,KAAK,EACL,QAAQ,GACT,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,2CAwBA"}

package/dist/esm/components/SqlTextEditor.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MonacoEditor from '@monaco-editor/react';
+function defineEditorTheme(monaco) {
+    monaco.editor.defineTheme('onedark', {
+        base: 'vs',
+        inherit: true,
+        rules: [
+            {
+                token: 'comment',
+                foreground: '#5d7988',
+                fontStyle: 'italic',
+            },
+            { token: 'constant', foreground: '#e06c75' },
+        ],
+        colors: {
+            'editor.background': '#F9F9F9',
+        },
+    });
+}
+function setEditorTheme(_editor, monaco) {
+    try {
+        monaco.editor.setTheme('onedark');
+    }
+    catch (e) {
+        console.log('ERROR: ', e);
+    }
+}
+export default function SqlTextEditor({ containerStyle, value, setValue, }) {
+    return (_jsx("div", { style: { ...containerStyle }, children: _jsx(MonacoEditor, { height: "224px", defaultLanguage: "pgsql", defaultValue: "", value: value, loading: _jsx("div", {}), options: {
+                wordWrap: 'on',
+                minimap: {
+                    enabled: false,
+                },
+                padding: { top: 16 },
+            }, onChange: (query) => {
+                setValue(query);
+            }, beforeMount: (monaco) => defineEditorTheme(monaco), onMount: setEditorTheme }) }));
+}

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

@@ -0,0 +1,119 @@
+export interface Option {
+    value: string;
+    label: string;
+}
+export interface SelectComponentProps {
+    onChange: (value: string) => void;
+    value: string;
+    options: Option[];
+    disabled?: boolean;
+    label?: string;
+}
+export interface TextInputComponentProps {
+    onChange: (e: any) => void;
+    value: string;
+    id: string;
+    placeholder: string;
+}
+export interface ButtonComponentProps {
+    onClick: () => void;
+    label: string;
+    primary?: boolean;
+}
+export interface TableComponentProps {
+    rows: any[];
+    columns: any[];
+    height: string;
+}
+export interface TextInputComponentProps {
+    onChange: (e: any) => void;
+    value: string;
+    id: string;
+    width?: string;
+}
+export interface ModalComponentProps {
+    children: any;
+    isOpen: boolean;
+    onClose?: () => void;
+    title?: string;
+    setIsOpen: (isOpen: boolean) => void;
+    theme?: any;
+}
+export interface HeaderProps {
+    children: any;
+}
+export interface LabelProps {
+    children: any;
+}
+export interface TextProps {
+    children: any;
+}
+export interface DeleteButtonProps {
+    onClick: () => void;
+    style: any;
+}
+export declare const MemoizedTextInput: ({ value, onChange, placeholder, id, width, }: TextInputComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedButton: ({ label, onClick, primary, style, width, }: {
+    label: any;
+    onClick: any;
+    primary?: boolean | undefined;
+    style?: {} | undefined;
+    width?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedSecondaryButton: ({ label, onClick }: {
+    label: any;
+    onClick: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedSelect: ({ value, onChange, options, disabled, label, }: {
+    value: any;
+    onChange: any;
+    options: any;
+    disabled?: boolean | undefined;
+    label: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedHeader: ({ children }: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedLabel: ({ children }: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MemoizedText: ({ children }: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface PopoverComponentProps {
+    children: any;
+    onClose?: () => void;
+    parentRef?: any;
+    style?: any;
+    onClick?: () => void;
+    showTrigger?: boolean;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}
+export declare function MemoizedPopover({ onClose, parentRef, children, style, onClick, label, showTrigger, isOpen, setIsOpen, }: {
+    onClose: any;
+    parentRef: any;
+    children: any;
+    style?: {} | undefined;
+    onClick: any;
+    label: any;
+    showTrigger?: boolean | undefined;
+    isOpen: any;
+    setIsOpen: any;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }: {
+    isOpen: any;
+    onClose: any;
+    setIsOpen: any;
+    title: any;
+    children: any;
+    theme: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare const MemoizedDeleteButton: ({ onClick, style }: {
+    onClick: any;
+    style: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingSpinner: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UiComponents.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}