kepler.gl/dist/components/src/common/portaled.d.ts

kepler.gl is a webgl based application to visualize large scale location data in the browser

import React, { Component, ElementType, PropsWithChildren } from 'react';
import Modal from 'react-modal';
interface GetChildPosProps {
    offsets: Partial<{
        topOffset: number;
        leftOffset: number;
        rightOffset: number;
    }>;
    rect: DOMRect;
    childRect: DOMRect;
    pageOffset: {
        x: number;
        y: number;
    };
    padding: number;
}
export declare const getChildPos: ({ offsets, rect, childRect, pageOffset, padding }: GetChildPosProps) => {
    left: number;
    top: number;
} | {
    right: number;
    top: number;
};
declare const defaultModalStyle: {
    content: {
        top: number;
        left: number;
        border: number;
        right: string;
        bottom: string;
        padding: string;
    };
    overlay: {
        right: string;
        bottom: string;
        width: string;
        height: string;
        backgroundColor: string;
    };
};
declare type PortaledProps = PropsWithChildren<{
    component: ElementType;
    onClose?: (event: React.MouseEvent<Element, globalThis.MouseEvent> | React.KeyboardEvent<Element>) => void;
    theme?: any;
    isOpened?: boolean;
    top: number;
    left?: number;
    right?: number;
    overlayZIndex?: number;
    modalProps?: Partial<ReactModal.Props>;
    modalStyle?: Partial<typeof defaultModalStyle>;
}>;
interface PortaledState {
    pos: {
        left: number;
        top: number;
    } | {
        right: number;
        top: number;
    } | null;
    isVisible: boolean;
}
declare class Portaled extends Component<PortaledProps, PortaledState> {
    static getDerivedStateFromError(): {
        hasError: boolean;
    };
    static defaultProps: {
        component: string;
        onClose: () => void;
        theme: {
            input: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                active: boolean;
                disabled: boolean;
                error: string;
                size: string;
                type: string;
            }, any>>;
            inputLT: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                active: boolean;
                disabled: boolean;
                error: string;
                size: string;
                type: string;
            }, any>>;
            inlineInput: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            chickletedInput: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            chickletedInputLT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            chickletedInputContainer: import("styled-components").FlattenSimpleInterpolation;
            secondaryChickletedInput: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            borderColor: string;
            borderColorLT: string;
            secondaryInput: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                error: string;
            }, any>>;
            dropdownScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownScrollBarLT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownList: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownListLT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownListItem: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownListItemLT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownListAnchor: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownListAnchorLT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownListHeader: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownListSection: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            dropdownListShadow: string;
            dropdownWrapperZ: number;
            dropdownWapperMargin: number;
            dndOverBackgroundColor: string;
            modalScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            scrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            sidePanelScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            inputSwitch: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            secondarySwitch: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                checked: boolean;
            }, any>>;
            switchTrack: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                checked: boolean;
            }, any>>;
            switchButton: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                checked: boolean;
            }, any>>;
            inputCheckbox: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            inputRadio: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            checkboxBox: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                checked: boolean;
            }, any>>;
            checkboxCheck: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                checked: boolean;
            }, any>>;
            transition: string;
            transitionFast: string;
            transitionSlow: string;
            activeColor: string;
            activeColorHover: string;
            borderRadius: string;
            boxShadow: string;
            errorColor: string;
            dropdownListHighlightBg: string;
            dropdownListHighlightBgLT: string;
            dropdownListBgd: string;
            toolbarItemBgdHover: string;
            toolbarItemBorderHover: string;
            toolbarItemIconHover: string;
            toolbarItemBorderRaddius: string;
            dropdownListBgdLT: string;
            dropdownListBorderTop: string;
            dropdownListBorderTopLT: string;
            dropdownListLineHeight: number;
            labelColor: string;
            labelColorLT: string;
            labelHoverColor: string;
            mapPanelBackgroundColor: string;
            mapPanelHeaderBackgroundColor: string;
            selectActiveBorderColor: string;
            selectBackground: string;
            selectBackgroundLT: string;
            selectBackgroundHover: string;
            selectBackgroundHoverLT: string;
            selectBorder: number;
            selectBorderColor: string;
            selectBorderRadius: string;
            selectBorderColorLT: string;
            selectColor: string;
            selectColorPlaceHolder: string;
            selectColorPlaceHolderLT: string;
            selectFontSize: string;
            selectFontWeight: string;
            selectColorLT: string;
            selectFontWeightBold: string;
            panelTabColor: string;
            inputBgd: string;
            inputBgdHover: string;
            inputBgdActive: string;
            inputBgdActiveLT: string;
            inputBoxHeight: string;
            inputBoxHeightSmall: string;
            inputBoxHeightTiny: string;
            inputBorderColor: string;
            inputBorderActiveColor: string;
            inputBorderHoverColor: string;
            inputBorderRadius: string;
            inputColor: string;
            inputPadding: string;
            inputPaddingSmall: string;
            inputPaddingTiny: string;
            inputFontSize: string;
            inputFontSizeSmall: string;
            inputFontWeight: number;
            inputPlaceholderColor: string;
            inputPlaceholderColorLT: string;
            inputPlaceholderFontWeight: number;
            inputBoxShadow: string;
            inputBoxShadowActive: string;
            inputBoxShadowActiveLT: string;
            secondaryInputBgd: string;
            secondaryInputBgdHover: string;
            secondaryInputBgdActive: string;
            secondaryInputColor: string;
            secondaryInputBorderColor: string;
            secondaryInputBorderActiveColor: string;
            dropdownSelectHeight: number;
            switchWidth: number;
            switchHeight: number;
            switchTrackBgd: string;
            switchTrackBgdActive: string;
            switchTrackBorderRadius: string;
            switchBtnBgd: string;
            switchBtnBgdActive: string;
            switchBtnBoxShadow: string;
            switchBtnBorderRadius: string;
            switchBtnWidth: number;
            switchBtnHeight: number;
            switchLabelMargin: number;
            secondarySwitchTrackBgd: string;
            secondarySwitchBtnBgd: string;
            checkboxWidth: number;
            checkboxHeight: number;
            checkboxMargin: number;
            checkboxBorderColor: string;
            checkboxBorderRadius: string;
            checkboxBorderColorLT: string;
            checkboxBoxBgd: string;
            checkboxBoxBgdChecked: string;
            radioRadius: number;
            radioBorderRadius: number;
            radioBorderColor: string;
            radioButtonRadius: number;
            radioButtonBgdColor: string;
            radioTrack: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            radioButton: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            secondaryRadio: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
                checked: boolean;
            }, any>>;
            btnFontFamily: string;
            primaryBtnBgd: string;
            primaryBtnActBgd: string;
            primaryBtnColor: string;
            primaryBtnActColor: string;
            primaryBtnBgdHover: string;
            primaryBtnRadius: string;
            primaryBtnFontSizeDefault: string;
            primaryBtnFontSizeSmall: string;
            primaryBtnFontSizeLarge: string;
            primaryBtnBorder: string;
            secondaryBtnBgd: string;
            secondaryBtnActBgd: string;
            secondaryBtnBgdHover: string;
            secondaryBtnColor: string;
            secondaryBtnActColor: string;
            secondaryBtnBorder: string;
            negativeBtnBgd: string;
            negativeBtnActBgd: string;
            negativeBtnBgdHover: string;
            negativeBtnBorder: string;
            negativeBtnColor: string;
            negativeBtnActColor: string;
            linkBtnBgd: string;
            linkBtnActBgd: string;
            linkBtnColor: string;
            linkBtnActColor: string;
            linkBtnActBgdHover: string;
            linkBtnBorder: string;
            floatingBtnBgd: string;
            floatingBtnActBgd: string;
            floatingBtnBgdHover: string;
            floatingBtnBorder: string;
            floatingBtnBorderHover: string;
            floatingBtnColor: string;
            floatingBtnActColor: string;
            ctaBtnBgd: string;
            ctaBtnBgdHover: string;
            ctaBtnActBgd: string;
            ctaBtnColor: string;
            ctaBtnActColor: string;
            selectionBtnBgd: string;
            selectionBtnActBgd: string;
            selectionBtnColor: string;
            selectionBtnActColor: string;
            selectionBtnBgdHover: string;
            selectionBtnBorder: string;
            selectionBtnBorderColor: string;
            selectionBtnBorderActColor: string;
            scrollbarThumbColorLT: string;
            scrollbarThumbColorHoverLT: string;
            modalTitleColor: string;
            modalTitleFontSize: string;
            modalTitleFontSizeSmaller: string;
            modalFooterBgd: string;
            modalImagePlaceHolder: string;
            modalPadding: string;
            modalDialogBgd: string;
            modalDialogColor: string;
            modalLateralPadding: string;
            modalPortableLateralPadding: string;
            modalOverLayZ: number;
            modalOverlayBgd: string;
            modalContentZ: number;
            modalFooterZ: number;
            modalTitleZ: number;
            modalButtonZ: number;
            modalDropdownBackground: string;
            sidePanelBg: string;
            sidePanelInnerPadding: number;
            sideBarCloseBtnBgd: string;
            sideBarCloseBtnColor: string;
            sideBarCloseBtnBgdHover: string;
            sidePanelHeaderBg: string;
            sidePanelHeaderBorder: string;
            sidePanelScrollBarWidth: number;
            sidePanelScrollBarHeight: number;
            sidePanelTitleFontsize: string;
            sidePanelTitleLineHeight: string;
            panelHeaderBorderRadius: string;
            sidePanelBorder: number;
            sidePanelBorderColor: string;
            layerConfigGroupLabelLabelFontSize: string;
            layerConfigGroupMarginBottom: number;
            layerConfigGroupPaddingLeft: number;
            chickletBgd: string;
            chickletBgdLT: string;
            panelBackground: string;
            panelContentBackground: string;
            panelBackgroundHover: string;
            panelBackgroundLT: string;
            panelToggleMarginRight: number;
            panelToggleBottomPadding: number;
            panelBoxShadow: string;
            panelBorderRadius: string;
            panelBorder: string;
            panelBorderColor: string;
            panelBorderLT: string;
            panelHeaderIcon: string;
            panelHeaderIconActive: string;
            panelHeaderIconHover: string;
            panelHeaderHeight: number;
            layerPanelHeaderHeight: number;
            panelDropdownScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
            layerTypeIconSizeL: number;
            layerTypeIconPdL: number;
            layerTypeIconSizeSM: number;
            layerPanelToggleOptionColor: string;
            layerPanelToggleOptionColorActive: string;
            fontFamily: string;
            fontWeight: number;
            fontSize: string;
            lineHeight: number;
            textColor: string;
            textColorLT: string;
            dataTableTextColor: string;
            textColorHl: string;
            titleTextColor: string;
            subtextColor: string;
            subtextColorLT: string;
            subtextColorActive: string;
            panelToggleBorderColor: string;
            panelTabWidth: string;
            textTruncate: {
                maxWidth: string;
                overflow: string;
                textOverflow: string;
                whiteSpace: string;
                wordWrap: string;
            };
            titleColorLT: string;
            tooltipBg: string;
            tooltipBgLT: string;
            tooltipColor: string;
            tooltipColorLT: string;
            tooltipBoxShadow: string;
            tooltipFontSize: string;
            logoColor: string;
            sidepanelDividerBorder: string;
            sidepanelDividerMargin: number;
            sidepanelDividerHeight: number;
            bottomInnerPdSide: number;
            bottomInnerPdVert: number;
            bottomPanelGap: number;
            bottomPanelGapPalm: number;
            bottomWidgetPaddingTop: number;
            bottomWidgetPaddingRight: number;
            bottomWidgetPaddingBottom: number;
            bottomWidgetPaddingLeft: number;
            bottomWidgetBgd: string;
            sliderBarColor: string;
            sliderBarBgd: string;
            sliderBarHoverColor: string;
            sliderBarRadius: string;
            sliderBarHeight: number;
            sliderHandleHeight: number;
            sliderHandleWidth: number;
            sliderHandleColor: string;
            sliderHandleTextColor: string;
            sliderInactiveBorderColor: string;
            sliderBorderRadius: string;
            sliderHandleHoverColor: string;
            sliderHandleAfterContent: string;
            sliderHandleShadow: string;
            sliderInputHeight: number;
            sliderInputWidth: number;
            sliderMarginTopIsTime: number;
            sliderMarginTop: number;
            sliderMarginBottom: number;
            geocoderWidth: number;
            geocoderTop: number;
            geocoderRight: number;
            geocoderInputHeight: number;
            mapControlTop: number;
            rangeBrushBgd: string;
            histogramFillInRange: string;
            histogramFillOutRange: string;
            axisFontSize: string;
            axisFontColor: string;
            timeTitleFontSize: string;
            rangePlotMargin: {
                top: number;
                bottom: number;
                left: number;
                right: number;
            };
            rangePlotMarginLarge: {
                top: number;
                bottom: number;
                left: number;
                right: number;
            };
            rangePlotH: number;
            rangePlotHLarge: number;
            rangePlotHLargePalm: number;
            rangePlotContainerH: number;
            rangePlotContainerHLarge: number;
            rangePlotContainerHLargePalm: number;
            notificationColors: {
                info: string;
                error: string;
                success: string;
                warning: string;
            };
            notificationPanelWidth: number;
            notificationPanelItemWidth: number;
            notificationPanelItemHeight: number;
            headerRowHeight: number;
            headerRowWStatsHeight: number;
            headerStatsControlHeight: number;
            rowHeight: number;
            headerPaddingTop: number;
            headerPaddingBottom: number;
            cellPaddingSide: number;
            edgeCellPaddingSide: number;
            cellFontSize: number;
            gridPaddingSide: number;
            optionButtonColor: string;
            headerCellBackground: string;
            headerCellBorderColor: string;
            headerCellStatsBackground: string;
            headerCellStatsControlBackground: string;
            headerCellIconColor: string;
            cellBorderColor: string;
            evenRowBackground: string;
            oddRowBackground: string;
            pinnedGridBorderColor: string;
            timeDisplayBorderRadius: number;
            timeDisplayHeight: number;
            timeDisplayMinWidth: number;
            timeDisplayOpacity: number;
            timeDisplayPadding: string;
            exportIntraSectionMargin: string;
            actionPanelWidth: number;
            actionPanelHeight: number;
            breakPoints: {
                palm: number;
                desk: number;
            };
            progressBarColor: string;
            progressBarTrackColor: string;
            layerConfigGroupLabelBorderLeft: string;
            layerConfigGroupLabelMargin: string;
            layerConfigGroupLabelPadding: string;
            layerConfigGroupColor: string;
            layerConfigGroupLabelLabelMargin: string;
            styledConfigGroupHeaderBorder: string;
            layerConfiguratorBorder: string;
            layerConfiguratorBorderColor: string;
            layerConfiguratorMargin: string;
            layerConfiguratorPadding: string;
            fieldTokenRightMargin: number;
            fieldTokenHeight: number;
            fieldTokenWidth: number;
            effectPanelWidth: number;
            effectPanelHeight: number;
            effectPanelPaddingSide: number;
            effectPanelPaddingTop: number;
            rightPanelMarginTop: number;
            rightPanelMarginRight: number;
            effectPanelAddEffectFontFamily: string;
            effectTypeIconMarginSide: number;
            effectTypeIconSizeL: number;
            effectTypeIconBgHoverColor: string;
            effectConfiguratorMargin: string;
            effectConfiguratorPadding: string;
            effectPanelTextMain: string;
            effectPanelTextSecondary1: string;
            effectPanelTextSecondary2: string;
            effectPanelTextSecondary3: string;
            effectPanelElementColor: string;
            effectPanelElementColorActive: string;
            effectPanelElementColorHovered: string;
            effectPanelElementColorSun: string;
            effectPanelElementColorSelected: string;
            sidePanel: {
                width: number;
                margin: {
                    top: number;
                    left: number;
                    bottom: number;
                    right: number;
                };
                headerHeight: number;
            };
            mapControl: {
                width: number;
                padding: number;
                mapLegend: {
                    pinned: {
                        bottom: number;
                        right: number;
                    };
                };
            };
        };
    };
    state: {
        pos: null;
        isVisible: boolean;
    };
    unsubscribe: (() => boolean) | undefined;
    _unmounted: boolean;
    componentDidMount(): void;
    componentDidUpdate(prevProps: any): void;
    componentDidCatch(): void;
    componentWillUnmount(): void;
    element: React.RefObject<HTMLDivElement>;
    child: React.RefObject<HTMLDivElement>;
    handleScroll: () => void;
    render(): React.JSX.Element;
}
declare const _default: React.ForwardRefExoticComponent<{
    children?: React.ReactNode;
    ref?: React.Ref<Portaled> | undefined;
    key?: React.Key | null | undefined;
    onClose?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
    left?: number | undefined;
    right?: number | undefined;
    top: number;
    component?: React.ElementType<any> | undefined;
    isOpened?: boolean | undefined;
    overlayZIndex?: number | undefined;
    modalProps?: Partial<Modal.Props> | undefined;
    modalStyle?: Partial<{
        content: {
            top: number;
            left: number;
            border: number;
            right: string;
            bottom: string;
            padding: string;
        };
        overlay: {
            right: string;
            bottom: string;
            width: string;
            height: string;
            backgroundColor: string;
        };
    }> | undefined;
} & {
    theme?: any;
}>;
export default _default;