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

package/dist/common/portaled.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, ElementType, PropsWithChildren } from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 import Modal from 'react-modal';
 interface GetChildPosProps {
     offsets: Partial<{
@@ -39,16 +39,19 @@ declare const defaultModalStyle: {
     };
 };
 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;
+    left?: number;
+    top?: number;
+    component?: React.ElementType<any>;
+    onClose?: (event: React.MouseEvent<Element, globalThis.MouseEvent> | React.KeyboardEvent<Element>) => void;
+    topOffset?: number;
+    leftOffset?: number;
+    rightOffset?: number;
     overlayZIndex?: number;
+    isOpened?: boolean;
     modalProps?: Partial<ReactModal.Props>;
     modalStyle?: Partial<typeof defaultModalStyle>;
+    theme?: any;
 }>;
 interface PortaledState {
     pos: {
@@ -64,475 +67,7 @@ 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;
-                    };
-                };
-            };
-        };
-    };
+    static defaultProps: PortaledProps;
     state: {
         pos: null;
         isVisible: boolean;
@@ -540,25 +75,28 @@ declare class Portaled extends Component<PortaledProps, PortaledState> {
     unsubscribe: (() => boolean) | undefined;
     _unmounted: boolean;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
+    componentDidUpdate(prevProps: PortaledProps): void;
     componentDidCatch(): void;
     componentWillUnmount(): void;
     element: React.RefObject<HTMLDivElement>;
     child: React.RefObject<HTMLDivElement>;
     handleScroll: () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<{
-    ref?: React.LegacyRef<Portaled> | undefined;
-    key?: React.Key | null | undefined;
+declare const _default: React.ForwardRefExoticComponent<Pick<import("styled-components").ExecutionProps, "as" | "forwardedAs"> & {
+    theme?: import("styled-components").DefaultTheme | undefined;
+} & {
     children?: React.ReactNode;
     onClose?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
     left?: number | undefined;
     right?: number | undefined;
-    top: number;
+    top?: number | undefined;
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    isOpened?: boolean | undefined;
+    topOffset?: number | undefined;
+    leftOffset?: number | undefined;
+    rightOffset?: number | undefined;
     overlayZIndex?: number | undefined;
+    isOpened?: boolean | undefined;
     modalProps?: Partial<Modal.Props> | undefined;
     modalStyle?: Partial<{
         content: {
@@ -577,7 +115,5 @@ declare const _default: React.ForwardRefExoticComponent<{
             backgroundColor: string;
         };
     }> | undefined;
-} & {
-    theme?: any;
-}>;
+} & React.RefAttributes<typeof Portaled>> & {};
 export default _default;