@quillsql/admin 1.7.1 → 1.7.2

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

@@ -1,25 +0,0 @@
-import React from 'react';
-interface PopoverComponentProps {
-    children: any;
-    onClose?: () => void;
-    parentRef?: any;
-    style?: any;
-    onClick?: (e: React.MouseEvent) => void;
-    label?: string;
-    showTrigger?: boolean;
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-}
-export declare function Popover({ onClose, parentRef, children, style, onClick, label, showTrigger, isOpen, setIsOpen, }: PopoverComponentProps): import("react/jsx-runtime").JSX.Element;
-export default function OrgSelect({ isLoading }: {
-    isLoading: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect, }: {
-    item: string;
-    isSelected?: boolean;
-    setSelected?: (item: string) => void;
-    hoverActions?: (item: string) => JSX.Element;
-    allowUnselect?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=OrgSelect.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAUpE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,qBAAqB,2CAsIvB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,2CAmOtE;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,GACd,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,2CA8EA"}

package/dist/esm/components/OrgSelect.js

@@ -1,267 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowDownHeadIcon } from '../icons';
-import useOnClickOutside from '../hooks/useOnClickOutside';
-import { useTenants } from '../hooks/useTenants';
-import { QuillSelectComponentWithCombo } from './QuillSelectWithCombo';
-import { QuillMultiSelectComponentWithCombo } from './QuillMultiSelectWithCombo';
-import { useDashboardManager } from '../hooks/useDashboardManager';
-import GlobeIcon from '../icons/GlobeIcon';
-import { useAdmin } from '../hooks/useAdmin';
-export function Popover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
-    const modalRef = useRef(null);
-    const [maxHeight, setMaxHeight] = useState('40vh');
-    const { state: { theme }, } = useAdmin();
-    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();
-        }
-    }, isOpen);
-    useEffect(() => {
-        const updateMaxHeight = () => {
-            if (modalRef.current) {
-                const rect = modalRef.current.getBoundingClientRect();
-                const availableSpace = window.innerHeight - rect.top - 32; // 16px for margin
-                const newMaxHeight = Math.min(availableSpace, window.innerHeight * 0.4); // At most 40vh
-                setMaxHeight(`${newMaxHeight}px`);
-            }
-        };
-        // Call on mount and when window resizes
-        updateMaxHeight();
-        window.addEventListener('resize', updateMaxHeight);
-        return () => {
-            window.removeEventListener('resize', updateMaxHeight);
-        };
-    }, []);
-    const handleCloseModal = () => {
-        setIsOpen(false);
-        if (onClose) {
-            onClose();
-        }
-    };
-    return (_jsxs(_Fragment, { children: [showTrigger && (_jsxs("button", { 
-                //   onMouseEnter={() => setIsOpen(true)}
-                className: "quill-select-button", onClick: (e) => {
-                    setIsOpen(!isOpen);
-                    if (onClick) {
-                        onClick(e);
-                    }
-                }, style: {
-                    width: '100%',
-                    minWidth: 230,
-                    maxWidth: 230,
-                    outline: 'none',
-                    textAlign: 'left',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    borderRadius: 6,
-                    WebkitAppearance: 'none',
-                    borderTop: `1px solid ${theme.borderColor}`,
-                    borderLeft: `1px solid ${theme.borderColor}`,
-                    borderRight: `1px solid ${theme.borderColor}`,
-                    borderBottom: `1px solid ${theme.borderColor}`,
-                    paddingLeft: 12,
-                    paddingRight: 12,
-                    height: 40,
-                    fontFamily: theme.fontFamily,
-                    fontWeight: 500,
-                    fontSize: 14,
-                    position: 'relative',
-                }, children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
-              .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
-              .quill-select-button:disabled {
-                cursor: not-allowed;
-                opacity: 0.5;
-              }
-          ` }), label, _jsx(ArrowDownHeadIcon, { style: {
-                            height: '20px',
-                            width: '20px',
-                            flex: 'none',
-                            position: 'absolute',
-                            right: 8,
-                            top: 8,
-                            color: theme.primaryTextColor,
-                        }, "aria-hidden": "true" })] })), _jsx("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative', display: isOpen ? 'block' : 'none' }, children: _jsx("div", { style: {
-                        background: theme.backgroundColor,
-                        position: 'absolute',
-                        boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                        border: `1px solid ${theme.borderColor}`,
-                        boxSizing: 'content-box',
-                        zIndex: 1,
-                        top: showTrigger ? 8 : 0,
-                        borderRadius: 6,
-                        //   padding: 20,
-                        overflow: 'auto',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        maxHeight: maxHeight,
-                        ...style,
-                    }, children: children }) })] }));
-}
-export default function OrgSelect({ isLoading }) {
-    const { dashboardTenants, dashboardOwnerTenant, selectedTenantType, selectedTenantValues, setSelectedTenantValues, selectedDashboardTenantIds, setSelectedTenantType, setSelectedDashboardTenantIds, dashboardTenantIdsLoading, } = useTenants();
-    const { selectedDashboard } = useDashboardManager();
-    const { eventTracking } = useAdmin();
-    const debounceIdTimeoutId = useRef(null);
-    const debounceValueTimeoutId = useRef(null);
-    const debouncedSetSelectedDashboardTenantIds = (value) => {
-        if (debounceIdTimeoutId.current) {
-            clearTimeout(debounceIdTimeoutId.current);
-        }
-        debounceIdTimeoutId.current = setTimeout(() => {
-            eventTracking?.addBreadcrumb?.({
-                message: 'Set tenant ids in OrgSelect',
-                data: {
-                    tenantIds: value,
-                },
-                category: 'interaction',
-                level: 'info',
-                timestamp: Date.now(),
-            });
-            setSelectedDashboardTenantIds(value);
-        }, 500);
-    };
-    const debouncedSetSelectedTenantValues = (value) => {
-        if (debounceValueTimeoutId.current) {
-            clearTimeout(debounceValueTimeoutId.current);
-        }
-        debounceValueTimeoutId.current = setTimeout(() => {
-            eventTracking?.addBreadcrumb?.({
-                message: 'Set tenant values in OrgSelect',
-                data: {
-                    tenantValues: value,
-                },
-                category: 'interaction',
-                level: 'info',
-                timestamp: Date.now(),
-            });
-            setSelectedTenantValues(Array.isArray(value) ? value : [value]);
-        }, 500);
-    };
-    const dashboardTenantOptions = useMemo(() => {
-        return (dashboardTenants?.map((tenant) => {
-            return {
-                label: tenant.name,
-                value: tenant.tenantField,
-            };
-        }) ?? []);
-    }, [dashboardTenants]);
-    const ownerIsSelected = useMemo(() => {
-        return (!selectedDashboard?.tenantKeys ||
-            selectedDashboard?.tenantKeys?.some((key) => key === selectedTenantType?.tenantField));
-    }, [selectedDashboard, selectedTenantType]);
-    const tenantValueOptions = useMemo(() => {
-        return selectedTenantType?.scope === 'database'
-            ? (selectedTenantType?.flags?.map((flag) => ({
-                label: flag,
-                value: flag,
-            })) ?? [])
-            : (selectedTenantType?.tenantIds?.map((id) => ({
-                label: id.label ?? id.flag ?? id.id.toString(),
-                value: id.id,
-            })) ?? []);
-    }, [selectedTenantType]);
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 16,
-            fontWeight: 500,
-        }, children: [dashboardTenantOptions?.length > 1 && (_jsx(QuillSelectComponentWithCombo, { label: 'Tenant Type', width: 230, value: selectedTenantType?.tenantField, options: dashboardTenantOptions, onChange: (e) => setSelectedTenantType(e.target.value), isLoading: isLoading, disabled: isLoading, hideEmptyOption: true, badge: ownerIsSelected ? 'Owner' : undefined })), ownerIsSelected ? (_jsx(QuillSelectComponentWithCombo, { label: selectedTenantType?.scope === 'database'
-                    ? 'Tags'
-                    : (selectedTenantType?.name ?? 'Tenant'), width: 230, value: !tenantValueOptions.length
-                    ? null
-                    : selectedTenantValues
-                        ? selectedTenantValues[0]
-                        : null, options: tenantValueOptions, onChange: (e) => debouncedSetSelectedTenantValues(e.target.value), 
-                // emptyLabel={
-                //   selectedTenantType?.scope === 'database'
-                //     ? 'No tags provided'
-                //     : undefined
-                // }
-                disabled: isLoading, hideEmptyOption: true, 
-                // allSelectedLabel={
-                //   selectedTenantType?.scope === 'database' ? undefined : (
-                //     <div style={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
-                //       <GlobeIcon
-                //         style={{
-                //           marginTop: 1.75,
-                //         }}
-                //       />
-                //       <div>All {(selectedTenantType?.name ?? 'Tenant') + 's'}</div>
-                //     </div>
-                //   )
-                // }
-                isLoading: isLoading, displayValue: true })) : (_jsx(QuillMultiSelectComponentWithCombo, { label: selectedTenantType?.scope === 'database'
-                    ? 'Tags'
-                    : (selectedTenantType?.name ?? 'Tenant'), width: 230, value: !tenantValueOptions.length ? [] : (selectedTenantValues ?? []), options: tenantValueOptions, onChange: (e) => debouncedSetSelectedTenantValues(e.target.value), emptyLabel: selectedTenantType?.scope === 'database'
-                    ? 'No tags provided'
-                    : undefined, disabled: isLoading, allSelectedLabel: selectedTenantType?.scope === 'database' ? undefined : (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 3 }, children: [_jsx(GlobeIcon, { style: {
-                                marginTop: 1.75,
-                            } }), _jsxs("div", { children: ["All ", (selectedTenantType?.name ?? 'Tenant') + 's'] })] })), isLoading: isLoading, enableSingleSelectOption: true, displayValue: true, enableSubmitButton: true, submitButtonText: 'Submit' }, (selectedTenantType?.tenantField ?? 'Tenant') + 'options')), selectedTenantType &&
-                !ownerIsSelected &&
-                dashboardOwnerTenant?.scope !== 'database' &&
-                !!selectedTenantValues?.length && (_jsx(QuillMultiSelectComponentWithCombo, { label: dashboardOwnerTenant?.name ?? 'Viewing as', width: 230, value: isLoading ? [] : (selectedDashboardTenantIds ?? []), options: dashboardOwnerTenant?.tenantIds?.map((id) => ({
-                    label: id.label ?? id.flag ?? id.id.toString(),
-                    value: id.id,
-                })) ?? [], onChange: (e) => debouncedSetSelectedDashboardTenantIds(e.target.value), isLoading: dashboardTenantIdsLoading || isLoading, disabled: isLoading, allSelectedLabel: selectedTenantType?.scope === 'database' ? undefined : (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 3 }, children: [_jsx(GlobeIcon, { style: {
-                                marginTop: 1.75,
-                            } }), _jsx("div", { children: "All Tenants" })] })), enableSingleSelectOption: true, displayValue: true, enableSubmitButton: true, submitButtonText: 'Submit' }))] }));
-}
-export function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect, }) {
-    const { state: { theme }, } = useAdmin();
-    return (_jsx("div", { className: 'quill-list-select' + (isSelected ? ' quill-list-selected' : ''), style: {
-            paddingBottom: 6,
-            cursor: isSelected && !allowUnselect ? 'default' : 'pointer',
-            position: 'relative',
-        }, children: _jsxs("div", { onClick: setSelected && (!isSelected || allowUnselect)
-                ? () => setSelected(item)
-                : undefined, className: "quill-list-select-title", style: {
-                height: 42,
-                width: 216,
-                borderRadius: 6,
-                textAlign: 'left',
-                paddingLeft: 10,
-                paddingRight: 12,
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                fontWeight: 500,
-                fontSize: 14,
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-            }, children: [_jsx("style", { children: `
-    .quill-list-select > div {
-      background-color: ${theme?.backgroundColor};
-      color: ${theme?.primaryTextColor};
-    }
-    .quill-list-selected > div {
-      background-color: ${theme?.hoverBackgroundColor};
-      color: ${theme?.hoverTextColor};
-    }
-    .quill-list-select:hover > div {
-      background-color: ${theme?.hoverBackgroundColor};
-      color: ${theme?.hoverTextColor};
-    }
-    .quill-list-select-hover-actions {
-      display: none;
-    }
-    .quill-list-select:hover > div > .quill-list-select-hover-actions {
-      display: block;
-    }
-    
-    ` }), _jsx("div", { style: {
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        display: 'block',
-                        fontFamily: theme.fontFamily,
-                    }, children: item }), _jsx("div", { className: isSelected ? '' : 'quill-list-select-hover-actions', children: hoverActions && hoverActions(item) })] }) }));
-}

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

@@ -1,36 +0,0 @@
-export interface MultiSelectComponentProps {
-    label?: string;
-    width: number;
-    value: (string | number | null)[];
-    options: {
-        value: string | number;
-        label: string;
-    }[];
-    onChange: (event: {
-        target: {
-            value: (string | number | null)[];
-        };
-    }) => void;
-    isLoading?: boolean;
-    disabled?: boolean;
-    emptyLabel?: string;
-    allSelectedLabel?: JSX.Element;
-    noneSelectedLabel?: JSX.Element;
-    mimicReactSelect?: boolean;
-    enableSingleSelectOption?: boolean;
-    displayValue?: boolean;
-    enableSubmitButton?: boolean;
-    submitButtonText?: string;
-}
-/**
- * A robust select component that implements the new minimal Select interface.
- */
-export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, noneSelectedLabel, mimicReactSelect, enableSingleSelectOption, displayValue, enableSubmitButton, submitButtonText, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare const ListboxTextInput: ({ value, onChange, placeholder, id, width, }: {
-    value: string;
-    onChange: (e: string) => void;
-    placeholder: string;
-    width?: number;
-    id?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=QuillMultiSelectWithCombo.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GACjB,EAAE,yBAAyB,2CAs1B3B;AAED,eAAO,MAAM,gBAAgB,GAAI,8CAM9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,4CAkEA,CAAC"}