@kepler.gl/components 3.1.0-alpha.1 → 3.1.0-alpha.3

package/dist/common/portaled.d.ts

@@ -0,0 +1,583 @@
+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;
+            fontWhiteColor: 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;
+            histogramOverlayColor: string;
+            histogramBreakLineColor: 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;
+            BLUE2: string;
+            aiAssistantPanelWidth: 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<{
+    ref?: React.LegacyRef<Portaled> | undefined;
+    key?: React.Key | null | undefined;
+    children?: React.ReactNode;
+    onClose?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+    left?: number | undefined;
+    right?: number | undefined;
+    top: number;
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | 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;