@quillsql/admin 1.3.7 → 1.3.9

package/dist/cjs/assets/index.d.ts

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

package/dist/cjs/assets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/cjs/assets/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XIcon = exports.ArrowDownHeadIcon = void 0;
+var ArrowDownHeadIcon_1 = require("./ArrowDownHeadIcon");
+Object.defineProperty(exports, "ArrowDownHeadIcon", { enumerable: true, get: function () { return __importDefault(ArrowDownHeadIcon_1).default; } });
+var XIcon_1 = require("./XIcon");
+Object.defineProperty(exports, "XIcon", { enumerable: true, get: function () { return __importDefault(XIcon_1).default; } });

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

@@ -0,0 +1,6 @@
+export default function DatabaseMismatchCard({ environemntName, environemntDatabaseType, backendDatabaseType, }: {
+    environemntName: string;
+    environemntDatabaseType: string;
+    backendDatabaseType: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatabaseMismatchCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatabaseMismatchCard.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseMismatchCard.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,eAAe,EACf,uBAAuB,EACvB,mBAAmB,GACpB,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;CAC7B,2CAmDA"}

package/dist/cjs/components/DatabaseMismatchCard.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function DatabaseMismatchCard({ environemntName, environemntDatabaseType, backendDatabaseType, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            width: '100%',
+            marginTop: 80,
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                borderRadius: 10,
+                width: 500,
+                border: '1px solid #e7e7e7',
+                padding: 20,
+            }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { fontSize: 20, fontWeight: 'bolder' }, children: "Invalid Database Type Connected to Quill Server SDK" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("p", { children: ["The selected environment ", (0, jsx_runtime_1.jsx)("strong", { children: environemntName }), " is running on ", (0, jsx_runtime_1.jsx)("strong", { children: environemntDatabaseType }), ", but the", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "queryEndpoint " }), "prop passed into ", (0, jsx_runtime_1.jsx)("strong", { children: '<AdminProvider />' }), " is connecting to", (0, jsx_runtime_1.jsxs)("strong", { children: [" ", backendDatabaseType, "."] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "If you intend to use a different environment that uses", ' ', (0, jsx_runtime_1.jsx)("strong", { children: backendDatabaseType }), ", switch to that environment in the ", (0, jsx_runtime_1.jsx)("strong", { children: "Environment" }), " dropdown.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "If you intend to connect to a different endpoint with a different datasource, you can do so by passing the", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "queryEndpoint" }), " prop into", ' ', (0, jsx_runtime_1.jsx)("strong", { children: '<AdminProvider />' }), " with the correct endpoint.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "If you intend to connect to a different datasource and continue to use the same endpoint, you can do so by passing the credentials of the datasource into the ", (0, jsx_runtime_1.jsx)("strong", { children: "databaseCredentials" }), " object in the instantiation of the ", (0, jsx_runtime_1.jsx)("strong", { children: "Quill Server SDK" }), "."] })] }) }));
+}
+exports.default = DatabaseMismatchCard;

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

@@ -5,7 +5,8 @@ interface DatabaseSelectorProps {
     value: string;
     onDatabaseSelect: (database: string) => void;
     containerStyle?: CSSProperties;
+    databaseType: string;
 }
-export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
+export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DatabaseSelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGvD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,GACf,EAAE,qBAAqB,2CAqCvB"}
+{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGvD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,EACd,YAAiB,GAClB,EAAE,qBAAqB,2CAqCvB"}

package/dist/cjs/components/DatabaseSelector.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, }) {
+function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             ...containerStyle,
             height: 128,
@@ -10,7 +10,7 @@ function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerS
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            border: '1px solid #e0e0e0',
+            border: `${databaseType === value ? '2px' : '1px'} solid ${databaseType === value ? '#000000' : '#e0e0e0'}`,
             borderRadius: 6,
             padding: 12,
         }, id: "connect-database-form", onClick: () => {

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

@@ -6,7 +6,8 @@ interface DropdownMenuWithLabelProps {
     theme?: any;
     secondaryTextColor?: string;
     disabled?: boolean;
+    parentRef: any;
 }
-export default function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled, secondaryTextColor, }: DropdownMenuWithLabelProps): import("react/jsx-runtime").JSX.Element;
+export default function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled, secondaryTextColor, parentRef, }: DropdownMenuWithLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DropDownMenuWithLabel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenuWithLabel.d.ts","sourceRoot":"","sources":["../../../src/components/DropDownMenuWithLabel.tsx"],"names":[],"mappings":"AAEA,UAAU,0BAA0B;IAClC,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,kBAA8B,GAC/B,EAAE,0BAA0B,2CA0F5B"}
+{"version":3,"file":"DropDownMenuWithLabel.d.ts","sourceRoot":"","sources":["../../../src/components/DropDownMenuWithLabel.tsx"],"names":[],"mappings":"AAIA,UAAU,0BAA0B;IAClC,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,kBAA8B,EAC9B,SAAS,GACV,EAAE,0BAA0B,2CAqH5B"}

package/dist/cjs/components/DropDownMenuWithLabel.js

@@ -1,50 +1,171 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled = false, secondaryTextColor = '#6e6e6e', }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+const react_1 = __importStar(require("react"));
+const OrgSelect_1 = require("./OrgSelect");
+function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled = false, secondaryTextColor = '#6e6e6e', parentRef, }) {
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
+    const [searchQuery, setSearchQuery] = react_1.default.useState('');
+    const [filteredItems, setFilteredItems] = react_1.default.useState(items);
+    (0, react_1.useEffect)(() => {
+        setFilteredItems(items);
+    }, [items]);
+    const handleSearchChange = (value) => {
+        setSearchQuery(value);
+        setFilteredItems(items.filter((item) => item.toLowerCase().includes(value.toLowerCase())));
+    };
+    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: secondaryTextColor,
-                    userSelect: 'none',
-                }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        position: 'relative',
-                        fontFamily: theme?.fontFamily,
-                        fontSize: 14,
-                        fontWeight: 500,
-                    }, children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("option", { value: "", children: items && items.length !== 0 ? 'Select' : 'N/A' }), items.slice(0, 50).map((item) => ((0, jsx_runtime_1.jsx)("option", { value: item, children: item }, item)))] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsxs)(OrgSelect_1.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: [(0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxTextInput, { id: "quill-search-bar", placeholder: 'Search', value: searchQuery, onChange: handleSearchChange }), (0, jsx_runtime_1.jsx)("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), (0, jsx_runtime_1.jsx)("div", { style: { gap: 2, maxHeight: '50vh' }, children: filteredItems.map((item, index) => ((0, jsx_runtime_1.jsx)(ListboxRow, { setSelected: setSelected, setIsOpen: setIsOpen, item: item }, index))) }), (0, jsx_runtime_1.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>
+      ); */
+    }
 }
 exports.default = DropdownMenuWithLabel;
+function ListboxRow({ item, setSelected, setIsOpen, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { onClick: setSelected
+            ? () => {
+                setSelected(item);
+                setIsOpen(false);
+            }
+            : undefined, className: "drop-down", children: [(0, jsx_runtime_1.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);
+  }` }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    display: 'block',
+                }, children: item.name || item })] }));
+}
+function DropdownRow({ item, setSelected, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { onClick: setSelected ? () => setSelected(item) : undefined, className: "dropdown-row", children: [(0, jsx_runtime_1.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);
+  }` }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    display: 'block',
+                }, children: item })] }));
+}

package/dist/cjs/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/cjs/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/cjs/components/DynamicBanner.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const XMarkIcon_1 = __importDefault(require("../icons/XMarkIcon"));
+function DynamicBanner({ header, message, onExit, style, fontColor, }) {
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("h1", { style: { fontSize: 21, fontWeight: 600, color: '#212121' }, children: header }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: (0, jsx_runtime_1.jsx)(XMarkIcon_1.default, { style: { width: '20px', height: '20px' }, fill: fontColor, "aria-hidden": "true" }) })] }));
+}
+exports.default = DynamicBanner;

package/dist/cjs/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/cjs/components/EnvSelectPopover.js

@@ -208,7 +208,6 @@ function EnvSelectPopover({ clients, setClient, client, theme, environment, setE
                                     ? () => handleItemClick(item)
                                     : undefined, style: {
                                     ...clientStyles,
-                                    visibility: showPromote ? 'visible' : 'hidden',
                                 }, children: item.name }), client && client._id === item._id && ((0, jsx_runtime_1.jsxs)("div", { onClick: (e) => handlePromoteClick(e, item), style: {
                                     ...promoteStyles,
                                     visibility: showPromote ? 'visible' : 'hidden',

package/dist/cjs/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/cjs/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/cjs/components/OrgSelect.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListboxRow = exports.ListboxTextInput = exports.Popover = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("../icons");
@@ -20,7 +21,7 @@ const useOnClickOutside = (ref, handler) => {
         };
     }, [ref, handler]);
 };
-function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
+function Popover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
     const modalRef = (0, react_1.useRef)(null);
     useOnClickOutside(modalRef, (e) => {
         // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
@@ -64,8 +65,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',
@@ -94,7 +93,8 @@ function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, la
                         ...style,
                     }, children: children }) }))] }));
 }
-const MemoizedTextInput = ({ value, onChange, placeholder, id, }) => {
+exports.Popover = Popover;
+const ListboxTextInput = ({ value, onChange, placeholder, id, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             display: 'flex',
@@ -120,6 +120,43 @@ const MemoizedTextInput = ({ value, onChange, placeholder, id, }) => {
         outline: none;
     }` }), (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);
@@ -127,10 +164,7 @@ function OrgSelect({ environment, setEnvironment, organizations, theme, organiza
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
-    const dropDownItems = organizations.map((org) => ({
-        name: org.name,
-        id: org.id,
-    }));
+    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.';
@@ -145,10 +179,15 @@ function OrgSelect({ environment, setEnvironment, organizations, theme, organiza
     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 ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                     fontSize: '14px',
                     paddingTop: '0px',
@@ -156,14 +195,14 @@ function OrgSelect({ environment, setEnvironment, organizations, theme, organiza
                     marginBottom: '4px',
                     fontWeight: '600',
                     color: theme.secondaryTextColor,
-                }, children: "Organization" }), (0, jsx_runtime_1.jsxs)(MemoizedPopover, { parentRef: parentRef, label: selectedOrganization && selectedOrganization.name, isOpen: isOpen, onClose: () => setIsOpen(false), style: {
+                }, 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)(MemoizedTextInput, { 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)(OrgSelectRow, { setSelected: handleSelectOrganization, item: item }, index))), filteredOrganizations.length === 0 && ((0, jsx_runtime_1.jsx)(OrgSelectRow, { item: { name: 'No organizations found' } }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8, width: 230 } })] })] }));
+                }, 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 } })] })] }));
 }
 exports.default = OrgSelect;
-function OrgSelectRow({ item, setSelected, }) {
+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 {
       background-color: white;
@@ -194,3 +233,4 @@ function OrgSelectRow({ item, setSelected, }) {
                     display: 'block',
                 }, children: item.name })] }));
 }
+exports.ListboxRow = ListboxRow;

package/dist/cjs/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/cjs/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/cjs/components/SqlTextEditor.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("@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);
+    }
+}
+function SqlTextEditor({ containerStyle, value, setValue, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, children: (0, jsx_runtime_1.jsx)(react_1.default, { height: "224px", defaultLanguage: "pgsql", defaultValue: "", value: value, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
+                wordWrap: 'on',
+                minimap: {
+                    enabled: false,
+                },
+                padding: { top: 16 },
+            }, onChange: (query) => {
+                setValue(query);
+            }, beforeMount: (monaco) => defineEditorTheme(monaco), onMount: setEditorTheme }) }));
+}
+exports.default = SqlTextEditor;