@quillsql/react 2.10.29 → 2.10.31

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-import { QuillTheme } from '../QuillProvider';
-interface QuillCardProps {
-    children: ReactNode;
-    theme: QuillTheme;
-    onClick?: () => void;
-    onClose?: () => void;
-    isSelected?: boolean;
-    clickable?: boolean;
-    minHeight?: number;
-}
-export declare function QuillCard({ children, theme, onClick, isSelected, clickable, onClose, minHeight, style, }: QuillCardProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=QuillCard.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuillCard.d.ts","sourceRoot":"","sources":["../../../src/components/QuillCard.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,UAAU,cAAc;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,SAAgB,EAChB,OAAO,EACP,SAAa,EACb,KAAU,GACX,EAAE,cAAc,2CAqEhB"}

package/dist/esm/components/QuillCard.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { XIcon } from '../assets';
-export function QuillCard({ children, theme, onClick, isSelected = false, clickable = true, onClose, minHeight = 0, style = {}, }) {
-    return (_jsxs("div", { className: clickable ? 'quill-card-hover' : '', style: {
-            backgroundColor: theme.backgroundColor || 'white',
-            cursor: clickable ? 'pointer' : 'default',
-            padding: 16,
-            borderRadius: 8,
-            boxShadow: '0 1px 4px 0 rgba(56, 65, 81, 0.07)',
-            borderWidth: theme.borderWidth,
-            borderStyle: 'solid',
-            borderColor: isSelected ? '#aaaaaa' : theme.borderColor,
-            overflowX: 'hidden',
-            position: 'relative',
-            minHeight: minHeight,
-            ...style,
-        }, onClick: onClick, children: [_jsx("style", { children: `
-        .quill-card-hover:hover {
-          background-color: #f9f9f9 !important;
-          .quill-delete-button {
-              background-color: #f9f9f9;
-          }
-          .quill-delete-button:hover {
-            background-color: #f5f5f5;
-          }
-        }
-      ` }), onClose && (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: e => {
-                    e.stopPropagation();
-                    onClose();
-                }, style: {
-                    height: 42,
-                    width: 42,
-                    top: 4,
-                    right: 4,
-                    // marginTop: -12,
-                    // marginRight: -12,
-                    position: 'absolute',
-                    cursor: 'pointer',
-                    border: 'none',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 6,
-                    float: 'right',
-                }, children: [_jsx("style", { children: `
-      .quill-delete-button {
-          background-color: white;
-      }
-      .quill-delete-button:hover {
-        background-color: rgba(56, 65, 81, 0.03);
-      }` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] })), _jsx("div", { style: { overflowX: 'scroll' }, children: children })] }));
-}

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

@@ -1,3 +0,0 @@
-import { SelectComponentProps } from './UiComponents';
-export declare function QuillSelectComponent({ options, value, onChange, theme, label, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=QuillSelect.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,oBAAoB,2CAgMtB"}

package/dist/esm/components/QuillSelect.js

@@ -1,124 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnClickOutside } from '../hooks';
-import { useRef, useState } from 'react';
-export function QuillSelectComponent({ options, value, onChange, theme, label, }) {
-    const [showModal, setShowModal] = useState(false);
-    const modalRef = useRef(null);
-    useOnClickOutside(modalRef, (e) => {
-        setShowModal(false);
-    });
-    return (_jsxs("div", { style: { position: 'relative', width: 200, minWidth: 200 }, children: [label && (_jsx("div", { style: {
-                    fontSize: 14,
-                    color: theme.primaryTextColor,
-                    fontFamily: theme.fontFamily,
-                    paddingBottom: 5,
-                    fontWeight: 600,
-                }, children: label })), _jsxs("button", { style: {
-                    fontFamily: theme.fontFamily,
-                    color: theme.primaryTextColor,
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    fontWeight: 'inherit',
-                    lineHeight: 'inherit',
-                    padding: '8px 12px',
-                    fontSize: 14,
-                    margin: 0,
-                    boxSizing: 'border-box',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme.borderColor,
-                    borderRadius: 6,
-                    paddingTop: 9,
-                    paddingBottom: 9,
-                    height: 40,
-                    minHeight: 40,
-                    maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [_jsx("style", { children: ` .quill-select-button { background: ${theme.backgroundColor}; } .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }` }), _jsx("span", { style: {
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                        }, children: options.find((elem) => elem.value === value)?.label || 'Select' }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && (_jsxs("div", { ref: modalRef, style: {
-                    position: 'absolute',
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    boxSizing: 'border-box',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme.borderColor,
-                    borderRadius: 6,
-                    background: 'white',
-                    marginTop: 12,
-                    zIndex: 100,
-                    paddingTop: 6,
-                    paddingBottom: 6,
-                    paddingLeft: 6,
-                    paddingRight: 6,
-                    boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                    fontFamily: theme.fontFamily,
-                    maxHeight: '50vh',
-                    overflow: 'scroll',
-                }, children: [_jsxs("button", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            padding: '8px 8px',
-                            margin: 0,
-                            boxSizing: 'border-box',
-                            borderWidth: 0,
-                            fontSize: 14,
-                            borderStyle: 'solid',
-                            borderColor: theme.borderColor,
-                            borderRadius: 4,
-                            fontFamily: theme.fontFamily,
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            height: 34,
-                            minHeight: 34,
-                        }, className: "quill-option", onClick: () => {
-                            onChange('');
-                            setShowModal(false);
-                        }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: white;
-                }
-                  .quill-option:hover {
-                    background: #F4F4F5;
-                  }
-                ` }), 'Select'] }), options.map((option) => (_jsxs("button", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            padding: '8px 8px',
-                            margin: 0,
-                            boxSizing: 'border-box',
-                            borderWidth: 0,
-                            fontSize: 14,
-                            borderStyle: 'solid',
-                            borderColor: theme.borderColor,
-                            borderRadius: 4,
-                            fontFamily: theme.fontFamily,
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            height: 34,
-                            minHeight: 34,
-                            overflow: 'hidden',
-                        }, className: "quill-option", onClick: () => {
-                            onChange(option.value);
-                            setShowModal(false);
-                        }, children: [_jsx("style", { children: `
-                .quill-option {
-                  background: white;
-                }
-                  .quill-option:hover {
-                    background: #F4F4F5;
-                  }
-                ` }), _jsx("span", { style: {
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                }, children: option.label })] }, option.value)))] }))] }));
-}

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

@@ -1,3 +0,0 @@
-import { TableComponentProps } from './UiComponents';
-export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=QuillTable.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA2C,GAC5C,EAAE,mBAAmB,2CA+arB"}

package/dist/esm/components/QuillTable.js

@@ -1,252 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useMemo } from 'react';
-import { LoadingSpinner } from './UiComponents';
-import { useExport } from '../hooks/useExport';
-import { compareValues, quillFormat } from '../utils/valueFormatter';
-import { ThemeContext } from '../Context';
-export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent = () => _jsx(LoadingSpinner, {}), }) {
-    const [activeRows, setActiveRows] = useState([]);
-    const [page, setPage] = useState(1);
-    const [maxPage, setMaxPage] = useState(1);
-    const [sortColumn, setSortColumn] = useState(null);
-    const [sortDirection, setSortDirection] = useState('desc');
-    const [theme] = useContext(ThemeContext);
-    const [isFormatting, setIsFormatting] = useState(false);
-    const formattedRows = useMemo(() => {
-        setIsFormatting(true);
-        return rows.map((row) => {
-            return columns.reduce((formattedRow, column) => {
-                // Apply the format function to each field in the row
-                const formattedValue = quillFormat({
-                    value: row[column.field],
-                    format: column.format,
-                });
-                formattedRow[column.field] = formattedValue;
-                return formattedRow;
-            }, {});
-        });
-    }, [rows]);
-    const { downloadCSV } = useExport({
-        rows: formattedRows,
-        fields: columns,
-        name: downloadFileName,
-    });
-    useEffect(() => {
-        const sortedRows = [...formattedRows];
-        if (sortColumn) {
-            sortedRows.sort((a, b) => {
-                const result = compareValues(a, b, sortColumn);
-                return sortDirection === 'asc' ? result : -result;
-            });
-        }
-        const start = (page - 1) * 10;
-        const end = page * 10;
-        if (sortedRows && sortedRows.length) {
-            setMaxPage(Math.ceil(sortedRows.length / 10));
-        }
-        setActiveRows(sortedRows.slice(start, end));
-        setIsFormatting(false);
-    }, [page, formattedRows, sortColumn, sortDirection]);
-    const increasePage = () => {
-        if (page === maxPage) {
-            return;
-        }
-        setPage((page) => page + 1);
-    };
-    const decreasePage = () => {
-        if (page === 1) {
-            return;
-        }
-        setPage((page) => page - 1);
-    };
-    const toggleSort = (column) => {
-        if (sortColumn === column.field) {
-            setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-        }
-        else {
-            setSortColumn(column.field);
-            setSortDirection('desc');
-        }
-    };
-    if (loading || isFormatting) {
-        return (_jsx("div", { style: {
-                height: '100%',
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                alignItems: 'center',
-                ...containerStyle,
-            }, children: _jsx(LoadingComponent, {}) }));
-    }
-    return (_jsxs("div", { style: {
-            width: '100%',
-            height: '100%',
-            overflow: 'visible',
-            display: 'flex',
-            flexDirection: 'column',
-            ...containerStyle,
-        }, children: [_jsx("div", { style: {
-                    height: '100%',
-                    width: '100%',
-                    overflow: 'auto',
-                    borderRadius: 6,
-                    border: '1px solid rgb(229, 231, 235)',
-                    padding: 0,
-                    margin: 0,
-                    boxSizing: 'border-box',
-                    outline: 'none',
-                }, children: _jsxs("div", { role: "table", className: "table", style: { minWidth: '0px', width: '100%', height: '100%' }, children: [_jsx("div", { className: "thead", children: _jsx("div", { role: "row", className: "tr", style: {
-                                    display: 'flex',
-                                    flex: '1 0 auto',
-                                    minWidth: '100px',
-                                    boxSizing: 'border-box',
-                                }, children: columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), style: {
-                                        boxSizing: 'border-box',
-                                        flex: '150 0 auto',
-                                        minWidth: '50px',
-                                        width: '150px',
-                                        position: 'relative',
-                                        cursor: 'pointer',
-                                        background: 'rgb(249, 250, 251)',
-                                        borderRight: index + 1 === columns.length
-                                            ? '0px solid rgb(229, 231, 235)'
-                                            : '1px solid rgb(229, 231, 235)',
-                                        borderBottom: '1px solid rgb(229, 231, 235)',
-                                        whiteSpace: 'nowrap',
-                                        alignItems: 'center',
-                                        overflowX: 'visible',
-                                        margin: '0px',
-                                        textOverflow: 'ellipsis',
-                                        minHeight: '36px',
-                                        userSelect: 'none',
-                                        paddingLeft: 16,
-                                        paddingRight: 16,
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        justifyContent: 'space-between',
-                                    }, children: [_jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", style: {
-                                                // fontFamily:
-                                                //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                                                WebkitTapHighlightColor: 'transparent',
-                                                fontFamily: theme?.fontFamily,
-                                                // color: 'rgb(55, 65, 81)',
-                                                color: theme?.primaryTextColor,
-                                                textDecoration: 'none',
-                                                fontSize: theme?.fontSizeSmall || '14px',
-                                                fontWeight: theme?.fontWeightMedium || '500',
-                                                lineHeight: '20px', // 1.25rem * 16px = 20px
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                            }, children: column.label || column.field }), column.field === sortColumn && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.primaryTextColor, height: "14px", width: "14px", style: {
-                                                transform: sortDirection === 'desc'
-                                                    ? 'rotate(180deg)'
-                                                    : undefined,
-                                            }, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), activeRows.length === 0 || columns.length === 0 ? (_jsx("div", { style: {
-                                paddingTop: '60px',
-                                display: 'flex',
-                                flex: '1 0 auto',
-                                margin: 'auto',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                fontSize: 13,
-                                color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                            }, children: "No results returned." })) : (_jsx("div", { role: "rowgroup", className: "tbody", children: activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
-                                    display: 'flex',
-                                    flex: '1 0 auto',
-                                    minWidth: '100px',
-                                    boxSizing: 'border-box',
-                                }, children: columns.map((column, columnIndex) => (_jsx("div", { role: "cell", style: {
-                                        boxSizing: 'border-box',
-                                        flex: '150 0 auto',
-                                        minWidth: '50px',
-                                        width: '150px',
-                                        display: 'flex',
-                                        margin: '0px',
-                                        textOverflow: 'ellipsis',
-                                        minHeight: '36px',
-                                        borderRight: columnIndex + 1 === columns.length
-                                            ? '0px solid rgb(229, 231, 235)'
-                                            : '1px solid rgb(229, 231, 235)',
-                                        overflow: 'hidden',
-                                        borderTop: rowIndex > 0
-                                            ? '1px solid rgb(229, 231, 235)'
-                                            : undefined,
-                                        borderBottom: rowIndex === rows.length - 1
-                                            ? '1px solid rgb(229, 231, 235)'
-                                            : undefined,
-                                        userSelect: 'none',
-                                    }, children: _jsx("div", { style: {
-                                            lineHeight: '24px',
-                                            width: '100%',
-                                            display: 'flex',
-                                            cursor: 'default',
-                                            position: 'relative',
-                                            userSelect: 'none',
-                                        }, "data-testid": "static-cell", children: _jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", style: {
-                                                fontFamily: theme?.fontFamily ||
-                                                    'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                                                WebkitTapHighlightColor: 'transparent',
-                                                // color: 'rgb(55, 65, 81)',
-                                                color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                                                textDecoration: 'none',
-                                                fontWeight: 400,
-                                                fontSize: theme?.fontSizeSmall || '14px',
-                                                lineHeight: '20px',
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                padding: '8px 16px',
-                                                userSelect: 'none',
-                                            }, children: row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }))] }) }), _jsx("div", { style: { position: 'relative' }, children: _jsx("div", { style: {
-                        display: 'flex',
-                        flex: '1 0 auto',
-                        minWidth: '100px',
-                        boxSizing: 'border-box',
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        height: 38,
-                        background: '#F9FAFB',
-                        borderRight: '1px solid rgb(229, 231, 235)',
-                        borderLeft: '1px solid rgb(229, 231, 235)',
-                        borderBottom: '1px solid rgb(229, 231, 235)',
-                        borderTop: '1px solid rgb(229, 231, 235)',
-                        borderBottomRightRadius: 6,
-                        borderBottomLeftRadius: 6,
-                        width: '100%',
-                    }, children: _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                        }, children: [showDownloadCSVButton ? (_jsx("button", { onClick: downloadCSV, style: {
-                                    fontSize: 14,
-                                    paddingLeft: 12,
-                                    fontFamily: theme?.fontFamily,
-                                    color: theme?.primaryTextColor,
-                                    background: 'transparent',
-                                    fontWeight: 500,
-                                    cursor: 'pointer',
-                                    border: 'none',
-                                }, children: "Download CSV" })) : (_jsx("div", {})), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                }, children: [_jsxs("div", { style: {
-                                            fontSize: 12,
-                                            fontFamily: theme?.fontFamily,
-                                            color: theme?.primaryTextColor,
-                                        }, children: [page, ' of ', maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: decreasePage, style: {
-                                            cursor: 'pointer',
-                                            border: 'none',
-                                            background: 'transparent',
-                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), _jsx("button", { onClick: increasePage, style: {
-                                            cursor: 'pointer',
-                                            border: 'none',
-                                            background: 'transparent',
-                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clipRule: "evenodd" }) }) }), _jsx("div", { style: { width: 12 } })] })] }) }) })] }));
-}