@quillsql/react 2.11.16 → 2.11.17

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

@@ -1,16 +1,14 @@
-import React, { CSSProperties } from 'react';
+import React, { ChangeEvent, ReactNode } from 'react';
 export interface Option {
     value: string;
     label: string;
 }
-export interface SelectComponentProps {
-    onChange: (value: string) => void;
-    value: string;
-    options: Option[];
-    disabled?: boolean;
-    label?: string;
-    theme?: any;
-    style?: CSSProperties;
+export interface PopoverComponentProps {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    triggerLabel?: string;
+    popoverTitle?: string;
+    popoverChildren: ReactNode;
 }
 export interface ButtonComponentProps {
     onClick: () => void;
@@ -19,18 +17,8 @@ export interface ButtonComponentProps {
     primary?: boolean;
     width?: string;
 }
-export interface TableComponentProps {
-    rows: any[];
-    columns: any[];
-    containerStyle?: React.CSSProperties;
-    loading?: boolean;
-    showDownloadCSVButton?: boolean;
-    downloadFileName?: string;
-    downloadCSV?: () => void;
-    LoadingComponent?: () => JSX.Element;
-    DownloadCSVButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
-    rowsPerPage?: number;
-    emptyStateLabel?: string;
+export interface DeleteButtonComponentProps {
+    onClick: () => void;
 }
 /**
  * An input element used to accept data from the user.
@@ -38,12 +26,12 @@ export interface TableComponentProps {
 export interface TextInputComponentProps {
     id: string;
     width: number;
-    value: string | number | undefined | null;
+    value: string;
     placeholder?: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface ModalComponentProps {
-    children: any;
+    children: ReactNode;
     isOpen: boolean;
     onClose?: () => void;
     title?: string;
@@ -52,17 +40,19 @@ export interface ModalComponentProps {
     style?: any;
 }
 export interface HeaderProps {
-    children: any;
+    label: string;
 }
 export interface LabelProps {
-    children: any;
+    label: string;
 }
 export interface TextProps {
-    children: any;
+    label: string;
 }
-export interface DeleteButtonProps {
-    onClick: () => void;
-    style: any;
+export interface SidebarComponentProps {
+    children: ReactNode;
+}
+export interface ContainerComponentProps {
+    children: ReactNode;
 }
 /**
  * The fallback TextInput element for Quill.
@@ -79,65 +69,75 @@ export declare const MemoizedSecondaryButton: ({ label, onClick }: {
     label: any;
     onClick: any;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedSelect: ({ value, onChange, options, disabled, style, }: {
-    value: any;
-    onChange: any;
-    options: any;
-    disabled?: boolean | undefined;
-    style?: {} | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedHeader: ({ children }: {
-    children: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedLabel: ({ children }: {
-    children: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedCheckbox: ({ checked, onChange, style, ...props }: {
-    [x: string]: any;
-    checked: any;
-    onChange: any;
-    style?: {} | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedTabs: ({ defaultValue, options, onValueChange }: {
-    defaultValue: any;
-    options: any;
-    onValueChange: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const MemoizedText: ({ children }: {
-    children: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export interface PopoverComponentProps {
-    isOpen: boolean;
-    setIsOpen: () => void;
-    onClose: () => void;
-    triggerLabel: string;
-    popoverTitle: string;
-    popoverChildren: any;
-}
-export interface MemoizedPopoverProps {
-    children: any;
-    onClose?: () => void;
-    parentRef?: any;
-    style?: any;
-    onClick?: () => void;
-    showTrigger?: boolean;
-    isOpen: boolean;
+export interface SelectComponentProps {
+    value: string;
+    label?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+export interface HeaderComponentProps {
+    label: string;
+}
+export declare const MemoizedHeader: ({ label }: HeaderComponentProps) => import("react/jsx-runtime").JSX.Element;
+export interface LabelComponentProps {
     label: string;
+}
+export declare const MemoizedLabel: ({ label }: LabelComponentProps) => import("react/jsx-runtime").JSX.Element;
+export interface CheckboxComponentProps {
+    isChecked: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const MemoizedCheckbox: ({ isChecked, onChange, }: CheckboxComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DEFAULT_TAB_OPTIONS: {
+    label: string;
+    value: string;
+}[];
+export interface TabsComponentProps {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value: string;
+    onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+}
+export declare const QuillTabs: ({ options, value, onChange, }: TabsComponentProps) => import("react/jsx-runtime").JSX.Element;
+export interface TextComponentProps {
+    label: string;
+}
+export declare const MemoizedText: ({ label }: TextComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The one, true Quill popover component.
+ */
+export declare const MemoizedPopover: ({ isOpen, setIsOpen, triggerLabel, popoverTitle, popoverChildren, }: PopoverComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }: {
+    isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
+    title?: string;
+    children: ReactNode;
+    width?: number;
+    height?: number;
+}): JSX.Element;
+export declare const MemoizedDeleteButton: ({ onClick, }: DeleteButtonComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingSpinner: () => import("react/jsx-runtime").JSX.Element;
+export interface TableComponentProps {
+    rows: {
+        [key: string]: any;
+    }[];
+    columns: {
+        field: string;
+        label: string;
+    }[];
+    isLoading?: boolean;
 }
-export declare function MemoizedPopover({ onClose, parentRef, children, style, onClick, showTrigger, isOpen, label, setIsOpen, }: MemoizedPopoverProps): import("react/jsx-runtime").JSX.Element;
-export declare function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, style, }: {
-    isOpen: any;
-    onClose: any;
-    setIsOpen: any;
-    title: any;
-    children: any;
-    theme: any;
-    style?: {} | undefined;
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare const MemoizedDeleteButton: ({ onClick, style }: {
-    onClick: any;
-    style: any;
+export declare const QuillTableComponent: ({ rows, columns, isLoading, }: TableComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuillDropdownComponent: ({ onChange, value, label, options, }: {
+    onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+    value: string;
+    options: Option[];
+    label?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const LoadingSpinner: () => import("react/jsx-runtime").JSX.Element;
+export declare const QuillEmptyDashboardComponent: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiComponents.d.ts.map

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

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

package/dist/esm/components/UiComponents.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // @ts-nocheck
-import { useContext, useEffect, useRef } from 'react';
+import { useCallback, useContext, useEffect, useRef, } from 'react';
 import { ArrowDownHeadIcon, XIcon } from '../assets';
 import { ThemeContext } from '../Context';
+import QuillTable from './QuillTable';
 /**
  * The fallback TextInput element for Quill.
  */
@@ -88,43 +89,7 @@ export const MemoizedSecondaryButton = ({ label, onClick }) => {
       background-color: rgba(56, 65, 81, 0.09);
     }` }), label] }));
 };
-export const MemoizedSelect = ({ value, onChange, options, disabled = false, style = {}, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            maxWidth: 206,
-        }, children: [_jsx("style", { children: `
-    .quill-select {
-        background-color: white;
-        height: 42px;
-        color: #384151;
-        width: 206px;
-        max-width: 206px;
-       border: 1px solid #e7e7e7;
-       border-radius: 6px;
-       text-align: left;
-       box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.08);
-       padding-left: 12px;
-       padding-right: 12px;
-    }` }), _jsx("select", { style: {
-                    WebkitAppearance: 'none',
-                    fontFamily: theme?.fontFamily,
-                    paddingRight: 30,
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    ...style,
-                }, className: "quill-select", value: value, disabled: disabled, onChange: (event) => onChange(event.target.value), children: options.map((option) => (_jsx("option", { className: "quill-option", value: option.value, children: option.label }, option.value))) }), _jsx(ArrowDownHeadIcon, { style: {
-                    height: '20px',
-                    width: '20px',
-                    flex: 'none',
-                    position: 'absolute',
-                    right: 8,
-                    top: 11,
-                    color: '#6C727F',
-                }, "aria-hidden": "true" })] }));
-};
-export const MemoizedHeader = ({ children }) => {
+export const MemoizedHeader = ({ label }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsx("h1", { style: {
             fontSize: 16,
@@ -134,9 +99,9 @@ export const MemoizedHeader = ({ children }) => {
             userSelect: 'none',
             margin: 0,
             padding: 0,
-        }, children: children }));
+        }, children: label }));
 };
-export const MemoizedLabel = ({ children }) => {
+export const MemoizedLabel = ({ label }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsx("h1", { style: {
             fontSize: 14,
@@ -146,16 +111,24 @@ export const MemoizedLabel = ({ children }) => {
             userSelect: 'none',
             paddingBottom: 5,
             margin: 0,
-        }, children: children }));
+        }, children: label }));
 };
-export const MemoizedCheckbox = ({ checked, onChange, style = {}, ...props }) => (_jsx("input", { type: "checkbox", checked: checked, onChange: () => onChange(!checked), style: { width: '14px', height: '14px', margin: 'auto 0', ...style }, ...props }));
-export const MemoizedTabs = ({ defaultValue, options, onValueChange }) => (_jsx("div", { style: {
+export const MemoizedCheckbox = ({ isChecked, onChange, }) => (_jsx("input", { type: "checkbox", checked: isChecked, onChange: onChange, style: { width: '14px', height: '14px', margin: 'auto 0' } }));
+export const DEFAULT_TAB_OPTIONS = [
+    { label: 'or', value: 'OR' },
+    { label: 'and', value: 'AND' },
+];
+export const QuillTabs = ({ options = DEFAULT_TAB_OPTIONS, value, onChange, }) => (_jsx("div", { style: {
         flexDirection: 'row',
         alignItems: 'center',
         borderRadius: '0.25rem',
         outlineStyle: 'none',
         background: '#F9FAFB',
-    }, children: options.map(({ label, value }) => (_jsx("button", { onClick: () => onValueChange(value), style: {
+    }, children: options.map((option) => (_jsx("button", { onClick: () => {
+            // Manually create a synthetic ChangeEvent and pass it to callback
+            const changeEvent = { target: { value: option.value } };
+            onChange(changeEvent);
+        }, style: {
             borderRadius: '0.25rem',
             borderWidth: '1px',
             outlineStyle: 'none',
@@ -169,7 +142,7 @@ export const MemoizedTabs = ({ defaultValue, options, onValueChange }) => (_jsx(
             paddingLeft: '0.75rem',
             paddingRight: '0.75rem',
             color: '12px',
-            ...(value === defaultValue
+            ...(option.value === value
                 ? {
                     fontWeight: 700,
                     backgroundColor: '#ffffff',
@@ -183,8 +156,8 @@ export const MemoizedTabs = ({ defaultValue, options, onValueChange }) => (_jsx(
                     backgroundColor: 'transparent',
                     color: '#606572',
                 }),
-        }, children: label }))) }));
-export const MemoizedText = ({ children }) => {
+        }, children: option.label }))) }));
+export const MemoizedText = ({ label }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsx("p", { style: {
             fontSize: 12,
@@ -193,60 +166,50 @@ export const MemoizedText = ({ children }) => {
             color: '#575E6A',
             userSelect: 'none',
             fontFamily: theme?.fontFamily,
-        }, children: children }));
+        }, children: label }));
 };
-const useOnClickOutside = (ref, handler) => {
+/**
+ * The one, true Quill popover component.
+ */
+export const MemoizedPopover = ({ isOpen, setIsOpen, triggerLabel, popoverTitle = undefined, popoverChildren, }) => {
+    const [theme] = useContext(ThemeContext);
+    const modalRef = useRef(null);
     useEffect(() => {
         const listener = (event) => {
-            if (!ref.current || ref.current.contains(event.target)) {
-                return;
+            if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
+                if (setIsOpen)
+                    setIsOpen(false);
             }
-            handler(event);
         };
         document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
         return () => {
             document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
         };
-    }, [ref, handler]);
-};
-export function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, showTrigger = true, isOpen, label, setIsOpen, }) {
-    const modalRef = useRef(null);
-    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) {
-            handleCloseModal();
-        }
-    });
-    const handleCloseModal = () => {
-        setIsOpen(false);
-        if (onClose) {
-            onClose();
-        }
-    };
-    return (_jsxs("div", { children: [showTrigger && (_jsx(MemoizedSecondaryButton, { onClick: (e) => {
-                    setIsOpen((isOpen) => !isOpen);
-                    if (onClick) {
-                        onClick(e);
-                    }
-                }, label: label })), isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsx("div", { style: {
-                        background: 'white',
+    }, [modalRef, setIsOpen]);
+    return (_jsxs("div", { children: [triggerLabel, isOpen && (_jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative' }, children: _jsxs("div", { style: {
+                        background: theme?.backgroundColor || 'white',
                         position: 'absolute',
                         boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                        border: '1px solid #e7e7e7',
+                        border: theme
+                            ? `${theme.borderWidth || 1}px solid ${theme.borderColor || '#e7e7e7'}`
+                            : '1px solid #e7e7e7',
                         boxSizing: 'content-box',
-                        zIndex: 1,
-                        top: showTrigger ? 12 : 0,
+                        zIndex: 999,
+                        top: 12,
                         borderRadius: 6,
                         padding: 20,
-                        ...style,
-                    }, children: children }) }))] }));
-}
-export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, style = {}, }) {
+                    }, children: [popoverTitle && (_jsx("h1", { style: {
+                                fontWeight: '600',
+                                fontSize: 18,
+                                margin: 0,
+                                textAlign: 'left',
+                                marginBottom: 5,
+                                color: theme?.primaryTextColor,
+                                fontFamily: theme?.fontFamily,
+                            }, children: popoverTitle })), popoverChildren] }) }))] }));
+};
+export function MemoizedModal({ isOpen, setIsOpen, title, children, width, height, }) {
+    const [theme] = useContext(ThemeContext);
     if (!isOpen) {
         return null;
     }
@@ -259,15 +222,11 @@ export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, the
                     zIndex: '50',
                     backgroundColor: 'rgba(255, 255, 255, 0.8)',
                     backdropFilter: 'blur(5px)',
-                }, onClick: onClose }), _jsx("div", { style: {
-                    // position: "absolute",
+                }, onClick: () => setIsOpen(false) }), _jsx("div", { style: {
                     position: 'fixed',
                     left: '50%',
                     top: '50%',
                     zIndex: '50',
-                    // width: "100%",
-                    maxWidth: 1024,
-                    maxHeight: '90vh',
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -277,12 +236,16 @@ export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, the
                     borderStyle: 'solid',
                     borderWidth: 1,
                     borderColor: '#e7e7e7',
-                    overflow: 'hidden',
-                    // zIndex: 1000,
-                    ...style,
+                    overflow: 'scroll',
+                    width: width ?? 'auto',
+                    height: height ?? 'auto',
+                    maxWidth: 'calc(100vw - 82px)',
+                    maxHeight: 'calc(100vh - 82px)',
                 }, children: _jsxs("div", { style: {
-                        // width: "80%",
-                        maxHeight: '90vh',
+                        width: '100%',
+                        height: '100%',
+                        maxWidth: 'calc(100vw - 82px)',
+                        maxHeight: 'calc(100vh - 82px)',
                         overflowY: 'scroll',
                         // maxWidth: "700px",
                         backgroundColor: '#ffffff',
@@ -290,7 +253,7 @@ export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, the
                         // borderRadius: "8px",
                         display: 'flex',
                         flexDirection: 'column',
-                        alignItems: 'center',
+                        // alignItems: 'center',
                         position: 'relative',
                         fontFamily: theme?.fontFamily,
                     }, children: [_jsxs("div", { id: "quill-modal-header", style: {
@@ -307,9 +270,9 @@ export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, the
                                         textAlign: 'left',
                                         paddingTop: 18,
                                         color: theme?.primaryTextColor,
-                                    }, children: title }), _jsx(MemoizedDeleteButton, { onClick: onClose, style: { marginRight: 10, marginTop: 10 } })] }), children] }) })] }));
+                                    }, children: title }), _jsx("div", { style: { marginRight: 10, marginTop: 10 }, children: _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false) }) })] }), children] }) })] }));
 }
-export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
+export const MemoizedDeleteButton = ({ onClick, }) => (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
         height: 40,
         width: 40,
         border: 'none',
@@ -318,7 +281,6 @@ export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { c
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 6,
-        ...style,
     }, children: [_jsx("style", { children: `
   .quill-delete-button {
       background-color: white;
@@ -334,3 +296,51 @@ export const LoadingSpinner = () => (_jsx("div", { style: {
         justifyContent: 'center',
         alignItems: 'center',
     }, children: _jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: "#364153", fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }) }));
+export const QuillTableComponent = ({ rows, columns, isLoading = false, }) => {
+    if (isLoading) {
+        return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', margin: 'auto' }, children: _jsx(LoadingSpinner, {}) }));
+    }
+    return _jsx(QuillTable, { rows: rows, columns: columns, rowsPerPage: 10 });
+};
+export const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
+    const [theme] = useContext(ThemeContext);
+    const handleOnChange = useCallback((event) => onChange(event), [onChange]);
+    return (_jsxs("div", { children: [label && (_jsx("div", { style: {
+                    marginBottom: 6,
+                    fontWeight: theme.labelFontWeight || '600',
+                    color: theme.secondaryTextColor,
+                    fontFamily: theme.fontFamily,
+                    fontSize: 14,
+                }, children: label })), _jsxs("div", { style: { position: 'relative', height: 38 }, children: [_jsxs("select", { id: "reportbuilderdropdown", onChange: handleOnChange, value: value ?? '', style: {
+                            width: '100%',
+                            WebkitAppearance: 'none',
+                            minWidth: 230,
+                            outline: 'none',
+                            textAlign: 'left',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            borderRadius: 6,
+                            paddingLeft: 12,
+                            paddingRight: 12,
+                            height: 38,
+                            borderWidth: theme.borderWidth,
+                            borderColor: theme.borderColor,
+                            background: theme.backgroundColor,
+                            color: theme.primaryTextColor,
+                            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                            fontFamily: theme.fontFamily,
+                            fontSize: 14,
+                            fontWeight: 500,
+                            boxSizing: 'border-box',
+                        }, children: [_jsx("option", { value: "", children: "Select" }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.label }, option.label + index)))] }), _jsx(ArrowDownHeadIcon, { style: {
+                            height: '20px',
+                            width: '20px',
+                            flex: 'none',
+                            position: 'absolute',
+                            right: 8,
+                            top: 9,
+                            color: theme?.secondaryTextColor,
+                        }, "aria-hidden": "true" })] })] }));
+};
+export const QuillEmptyDashboardComponent = () => _jsx("div", {});

package/dist/esm/hooks/index.d.ts

@@ -2,4 +2,5 @@ export { default as useInternalState } from "./useInternalState";
 export { default as useOnClickOutside } from "./useOnClickOutside";
 export { default as useOnWindowResize } from "./useOnWindowResize";
 export { default as useSelectOnKeyDown } from "./useSelectOnKeyDown";
+export { default as useTheme } from './useTheme';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/hooks/index.js

@@ -2,3 +2,4 @@ export { default as useInternalState } from "./useInternalState";
 export { default as useOnClickOutside } from "./useOnClickOutside";
 export { default as useOnWindowResize } from "./useOnWindowResize";
 export { default as useSelectOnKeyDown } from "./useSelectOnKeyDown";
+export { default as useTheme } from './useTheme';

package/dist/esm/hooks/useTheme.d.ts

@@ -0,0 +1,7 @@
+import { type QuillTheme } from '../QuillProvider';
+/**
+ * A simple hook to get the theme without all that noise.
+ */
+declare const useTheme: () => QuillTheme;
+export default useTheme;
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/esm/hooks/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;GAEG;AACH,QAAA,MAAM,QAAQ,QAAO,UAIpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/hooks/useTheme.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../Context';
+/**
+ * A simple hook to get the theme without all that noise.
+ */
+const useTheme = () => {
+    const [theme, _] = useContext(ThemeContext);
+    return theme;
+};
+export default useTheme;

package/dist/esm/index.d.ts

@@ -1,21 +1,29 @@
 export { default as Dashboard } from './Dashboard';
 export type { DashboardProps, DashboardItemProps, DashboardItem, AxisFormat, } from './Dashboard';
 export { default as QuillProvider } from './QuillProvider';
+export type { QuillProviderProps, QuillTheme } from './QuillProvider';
 export { default as Chart } from './Chart';
+export type { ColorMapType, ChartProps } from './Chart';
 export { default as Table } from './Table';
+export type { TableProps } from './Table';
 export { default as SQLEditor, SchemaListComponent } from './SQLEditor';
+export type { SQLEditorProps } from './SQLEditor';
 export { default as ReportBuilder } from './ReportBuilder';
+export type { ReportBuilderProps } from './ReportBuilder';
 export { default as ChartBuilder } from './ChartBuilder';
+export type { ChartBuilderProps } from './ChartBuilder';
 export { default as ChartEditor } from './ChartEditor';
+export type { ChartEditorProps } from './ChartEditor';
 export { quillFormat as format } from './utils/valueFormatter';
 export { useDashboard } from './hooks/useDashboard';
 export { useQuill } from './hooks/useQuill';
 export { useExport } from './hooks/useExport';
 export { useMemoizedRows } from './hooks/useFormat';
 export { downloadCSV } from './utils/csv';
-export type { QuillTheme } from './QuillProvider';
 export { ThemeContext } from './Context';
-export type { TextInputComponentProps, ButtonComponentProps, Option, PopoverComponentProps, ModalComponentProps, TableComponentProps, HeaderProps, } from './components/UiComponents';
+export type { TextInputComponentProps, ButtonComponentProps, DeleteButtonComponentProps, SelectComponentProps, PopoverComponentProps, TabsComponentProps, CheckboxComponentProps, SidebarComponentProps, ContainerComponentProps, HeaderComponentProps, LabelComponentProps, TextComponentProps, Option, ModalComponentProps, HeaderProps, } from './components/UiComponents';
+export type { SelectColumnComponentProps, DraggableColumnComponentProps, SidebarHeadingComponentProps, FilterPopoverComponentProps, SortPopoverComponentProps, LimitPopoverComponentProps, } from './components/ReportBuilder/ui';
+export type { TableComponentProps } from './components/QuillTable';
 export type { DateRangePickerProps, DateRangePickerOption, DateRange, } from './DateRangePicker/DateRangePicker';
 export type { DashboardSectionComponentProps } from './components/Dashboard/DashboardSection';
 //# sourceMappingURL=index.d.ts.map