@quillsql/admin 1.3.6 → 1.3.8

package/dist/cjs/api/ConnectionClient.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSQLView = exports.getQueryFromAI = exports.getSqlViewData = exports.getSQLViews = exports.getTableSchema = exports.getFKInfo = exports.getOrgInfo = exports.getTableInfo = exports.getTablesBySchema = exports.getSchemaTableInfo = exports.testConnectionString = void 0;
+exports.createSQLView = exports.getQueryFromAiWithConnection = exports.getQueryFromAI = exports.getSqlViewData = exports.getSQLViews = exports.getTableColumnsBySchema = exports.getTableSchema = exports.getFKInfo = exports.getOrgInfo = exports.getTableInfo = exports.getTablesBySchema = exports.getSchemaTableInfo = exports.testConnectionString = void 0;
 const constants_1 = require("../utils/constants");
-const databases_1 = require("../utils/databases");
-async function testConnectionString(connectionString) {
+async function testConnectionString(connectionString, databaseType, clientId) {
     const localURL = `${constants_1.QUILL_SERVER}/sdk/test-connection`;
     const response = await fetch(localURL, {
         method: 'POST',
@@ -12,14 +11,16 @@ async function testConnectionString(connectionString) {
         },
         body: JSON.stringify({
             connectionString,
+            clientId,
+            databaseType,
             task: 'test-connection',
         }),
     });
     const results = await response.json();
-    return results.success;
+    return results;
 }
 exports.testConnectionString = testConnectionString;
-async function getSchemaTableInfo(connectionString, schema) {
+async function getSchemaTableInfo(clientId, schema, databaseType) {
     const localURL = `${constants_1.QUILL_SERVER}/sdk/schema-info`;
     const response = await fetch(localURL, {
         method: 'POST',
@@ -27,8 +28,9 @@ async function getSchemaTableInfo(connectionString, schema) {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-            connectionString,
+            clientId,
             schema,
+            databaseType,
             task: 'schema-info',
         }),
     });
@@ -36,7 +38,7 @@ async function getSchemaTableInfo(connectionString, schema) {
     return results;
 }
 exports.getSchemaTableInfo = getSchemaTableInfo;
-async function getTablesBySchema(connectionString, schema) {
+async function getTablesBySchema(clientId, schema) {
     const localURL = `${constants_1.QUILL_SERVER}/sdk/tables-by-schema`;
     const response = await fetch(localURL, {
         method: 'POST',
@@ -44,8 +46,8 @@ async function getTablesBySchema(connectionString, schema) {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-            connectionString,
-            schema,
+            clientId,
+            schemaNames: [schema],
             task: 'tables-by-schema',
         }),
     });
@@ -53,7 +55,7 @@ async function getTablesBySchema(connectionString, schema) {
     return results.tables;
 }
 exports.getTablesBySchema = getTablesBySchema;
-async function getTableInfo(connectionString, schema, table) {
+async function getTableInfo(clientId, schema, table) {
     const localURL = `${constants_1.QUILL_SERVER}/sdk/table-info`;
     const response = await fetch(localURL, {
         method: 'POST',
@@ -61,7 +63,7 @@ async function getTableInfo(connectionString, schema, table) {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-            connectionString,
+            clientId,
             schema,
             table,
             task: 'table-info',
@@ -71,7 +73,7 @@ async function getTableInfo(connectionString, schema, table) {
     return results;
 }
 exports.getTableInfo = getTableInfo;
-async function getOrgInfo(connectionString, schema, table, orgIdColumn, orgColumn) {
+async function getOrgInfo(clientId, schema, table, orgIdColumn, orgColumn) {
     const localURL = `${constants_1.QUILL_SERVER}/sdk/org-info`;
     const response = await fetch(localURL, {
         method: 'POST',
@@ -79,7 +81,7 @@ async function getOrgInfo(connectionString, schema, table, orgIdColumn, orgColum
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-            connectionString,
+            clientId,
             schema,
             table,
             orgColumn,
@@ -91,7 +93,7 @@ async function getOrgInfo(connectionString, schema, table, orgIdColumn, orgColum
     return results.orgStrings;
 }
 exports.getOrgInfo = getOrgInfo;
-async function getFKInfo(connectionString, schema, table, primaryKey) {
+async function getFKInfo(clientId, schema, table, primaryKey) {
     const localURL = `${constants_1.QUILL_SERVER}/sdk/fk-info`;
     const response = await fetch(localURL, {
         method: 'POST',
@@ -99,7 +101,7 @@ async function getFKInfo(connectionString, schema, table, primaryKey) {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-            connectionString,
+            clientId,
             schema,
             table,
             primaryKey,
@@ -119,7 +121,7 @@ async function getFKInfo(connectionString, schema, table, primaryKey) {
     return results.foreignKeysString;
 }
 exports.getFKInfo = getFKInfo;
-async function getTableSchema(connectionString, tables) {
+async function getTableSchema(clientId, tables, schemaName) {
     const localURL = `${constants_1.QUILL_SERVER}/sdk/table-schemas`;
     const response = await fetch(localURL, {
         method: 'POST',
@@ -127,8 +129,9 @@ async function getTableSchema(connectionString, tables) {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-            connectionString,
+            clientId,
             tables,
+            schemaName,
             task: 'table-schemas',
         }),
     });
@@ -136,6 +139,36 @@ async function getTableSchema(connectionString, tables) {
     return results;
 }
 exports.getTableSchema = getTableSchema;
+async function getTableColumnsBySchema(clientId, schemaNames, databaseType, queryEndpoint) {
+    const localURL = queryEndpoint ?? `${constants_1.QUILL_SERVER}/table-info-by-schema`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            clientId,
+            schemaNames,
+            task: 'table-schemas',
+            metadata: {
+                task: 'table-schemas',
+                preQueries: ['temp'],
+                clientId,
+                runQueryConfig: {
+                    overridePost: true,
+                    convertDatatypes: true,
+                    getTables: true,
+                    schema: schemaNames[0],
+                    schemaNames: schemaNames,
+                },
+                databaseType: databaseType,
+            },
+        }),
+    });
+    const results = await response.json();
+    return queryEndpoint ? results.data.queryResults : results;
+}
+exports.getTableColumnsBySchema = getTableColumnsBySchema;
 async function getSQLViews(tableSchemas, customerNameField) {
     const localURL = `${constants_1.QUILL_SERVER}/sqlviewai`;
     const response = await fetch(localURL, {
@@ -159,21 +192,40 @@ async function getSQLViews(tableSchemas, customerNameField) {
     return results.notSureWhatThisIs.sqlQueries;
 }
 exports.getSQLViews = getSQLViews;
-async function getSqlViewData(connectionString, query) {
-    const localURL = `${constants_1.QUILL_SERVER}/sdk/query-view`;
-    const response = await fetch(localURL, {
+async function getSqlViewData(clientId, query, databaseType, queryEndpoint) {
+    const url = queryEndpoint ?? `${constants_1.QUILL_SERVER}/sdk/query-view`;
+    const response = await fetch(url, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-            connectionString,
+            clientId,
             query,
+            metadata: {
+                task: 'query-view',
+                preQueries: [query],
+                clientId,
+                runQueryConfig: {
+                    overridePost: true,
+                    convertDatatypes: true,
+                    limitThousand: true,
+                },
+                databaseType: databaseType,
+            },
             task: 'query-view',
         }),
     });
     const results = await response.json();
-    return results;
+    if (results.status === 'error') {
+        return { ...results, success: false };
+    }
+    return queryEndpoint
+        ? {
+            ...results.data.queryResults[0],
+            success: results.status === 'success' ? true : false,
+        }
+        : results;
 }
 exports.getSqlViewData = getSqlViewData;
 async function getQueryFromAI(aiPrompt, columnsByTable) {
@@ -193,7 +245,25 @@ async function getQueryFromAI(aiPrompt, columnsByTable) {
     return results.message;
 }
 exports.getQueryFromAI = getQueryFromAI;
-async function createSQLView(connectionType, allSchemaInfo, columnsByTable, viewInfo, client, domainName, tableData, currentTableNames, override = false) {
+async function getQueryFromAiWithConnection(aiPrompt, clientId, schemaNames) {
+    const localURL = `${constants_1.QUILL_SERVER}/ai-from-client-schema`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            prompt: aiPrompt,
+            clientId,
+            schemaNames,
+            task: 'sql-generator',
+        }),
+    });
+    const results = await response.json();
+    return results.message;
+}
+exports.getQueryFromAiWithConnection = getQueryFromAiWithConnection;
+async function createSQLView(connectionType, allSchemaInfo, columnsByTable, viewInfo, client, domainName, tableData, currentTableNames, override = false, clientId) {
     let queryName = viewInfo.name;
     let validQuery = false;
     let localURL = `${constants_1.QUILL_SERVER}/astify`;
@@ -204,7 +274,7 @@ async function createSQLView(connectionType, allSchemaInfo, columnsByTable, view
         },
         body: JSON.stringify({ query: viewInfo.query }),
     });
-    tableData?.columns.forEach((column) => {
+    tableData?.fields.forEach((column) => {
         if (column.name === allSchemaInfo.selectedFields.foreignKey) {
             validQuery = true;
         }
@@ -223,27 +293,28 @@ async function createSQLView(connectionType, allSchemaInfo, columnsByTable, view
     if (currentTableNames.includes(queryName)) {
         return { success: false, message: 'Query name already exists' };
     }
-    const columns = columnsByTable.find((table) => table.tableName === allSchemaInfo.selectedFields.table).columns;
+    const columns = columnsByTable.find((table) => table.tableName === `${allSchemaInfo.selectedFields.schema}.${allSchemaInfo.selectedFields.table}`).columns;
     const customerFieldType = columns.find((column) => column.columnName === allSchemaInfo.selectedFields.organizationIdField).fieldType;
     const fuzzyType = customerFieldType === 'string' || customerFieldType === 'uuid'
         ? 'text'
         : 'number';
     localURL = `${constants_1.QUILL_SERVER}/sdk/create-environment`;
     const payload = {
-        databaseConnectionString: (0, databases_1.formConnectionString)(connectionType),
-        databaseType: connectionType.type,
         customerFieldName: allSchemaInfo.selectedFields.foreignKey,
-        customerTableName: allSchemaInfo.selectedFields.table,
+        customerTableName: `${allSchemaInfo.selectedFields.schema}.${allSchemaInfo.selectedFields.table}`,
         customerTableFieldName: allSchemaInfo.selectedFields.organizationIdField,
         adminCustomerId: allSchemaInfo.selectedFields.defaultOrg?.id,
         customerTableTitleFieldName: allSchemaInfo.selectedFields.customerNameField,
-        columns: tableData?.columns,
+        columns: tableData?.fields,
         task: 'create-environment',
         viewQuery: viewInfo.query,
         customerFieldType: fuzzyType,
         name: queryName,
         client,
         domainName,
+        schemaName: allSchemaInfo.selectedFields.schema,
+        schemaNames: [allSchemaInfo.selectedFields.schema],
+        clientId,
     };
     const response = await fetch(localURL, {
         method: 'POST',

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

@@ -0,0 +1,5 @@
+declare const ArrowDownHeadIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowDownHeadIcon;
+//# sourceMappingURL=ArrowDownHeadIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CAKtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/assets/ArrowDownHeadIcon.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowDownHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: (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" }) }));
+exports.default = ArrowDownHeadIcon;

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

@@ -0,0 +1,5 @@
+declare const XIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default XIcon;
+//# sourceMappingURL=XIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/XIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,KAAK;;6CAcV,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/cjs/assets/XIcon.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const XIcon = ({ ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }));
+exports.default = XIcon;

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 })] }));
+}