@kepler.gl/components 3.3.0-alpha.1 → 3.3.0-alpha.10

package/dist/modals/swipe-export-video-preview.d.ts

@@ -0,0 +1,70 @@
+import React, { Component, RefObject } from 'react';
+import { type MapRef } from 'react-map-gl/maplibre';
+import type { Deck, DeckProps, MapViewState } from '@deck.gl/core';
+import { DeckAdapter } from '@hubble.gl/core';
+import { SwipeEasing } from './swipe-composite-utils';
+export type SwipeExportVideoPreviewProps = {
+    mapData: any;
+    resolution: [number, number];
+    exportVideoWidth: number;
+    disableBaseMap: boolean;
+    deckProps?: DeckProps;
+    viewState: MapViewState;
+    adapter: DeckAdapter;
+    mapboxLayerBeforeId?: string;
+    rendering: boolean;
+    saving: boolean;
+    setViewState: (viewState: MapViewState) => void;
+    durationMs: number;
+    mapProps?: Record<string, any>;
+    swipeStartPct: number;
+    swipeEndPct: number;
+    swipeEasing: SwipeEasing;
+    currentTimeMs: number;
+    backgroundColor?: string;
+};
+type SwipeExportVideoPreviewState = {
+    leftReady: boolean;
+    rightReady: boolean;
+};
+/**
+ * A dual-canvas video export preview that renders left/right split map layers
+ * and composites them with an animated swipe divider.
+ */
+export declare class SwipeExportVideoPreview extends Component<SwipeExportVideoPreviewProps, SwipeExportVideoPreviewState> {
+    leftMapRef: RefObject<MapRef | null>;
+    rightMapRef: RefObject<MapRef | null>;
+    leftDeckRef: RefObject<Deck | null>;
+    rightDeckRef: RefObject<Deck | null>;
+    compositeCanvasRef: RefObject<HTMLCanvasElement | null>;
+    constructor(props: SwipeExportVideoPreviewProps);
+    componentDidUpdate(prevProps: SwipeExportVideoPreviewProps): void;
+    _resizeVideo(): void;
+    _setDevicePixelRatio(devicePixelRatio: number): void;
+    _getContainer(): {
+        height: number;
+        width: number;
+    };
+    _getCurrentSwipePercentage(): number;
+    _getLeftCanvas(): HTMLCanvasElement | null;
+    _getRightCanvas(): HTMLCanvasElement | null;
+    _compositeFrame(): void;
+    /**
+     * Called by the parent container's adapter after each render.
+     * We need both maps to be loaded before compositing and capturing.
+     */
+    onAfterRender: (proceedToNextFrame: () => void) => void;
+    _areLayersLoaded(side: 'left' | 'right'): boolean;
+    /**
+     * Get the composited canvas element for video capture.
+     */
+    getCompositeCanvas(): HTMLCanvasElement | null;
+    _createLayers(mapIndex: number, beforeId?: string): any;
+    _onLeftMapLoad: () => void;
+    _onRightMapLoad: () => void;
+    _tryComposite(): void;
+    _onDeckRender: (side: "left" | "right") => void;
+    _renderMapCanvas(side: 'left' | 'right', mapIndex: number): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/remote-dataset-refresh-controller.d.ts

@@ -0,0 +1,11 @@
+import { Datasets } from '@kepler.gl/table';
+type RemoteDatasetRefreshControllerProps = {
+    datasets: Datasets;
+    refreshDataset?: (dataId: string) => void;
+};
+/**
+ * Polls remotely hosted datasets that have metadata.refreshIntervalMs set.
+ * Lives on KeplerGl so polling continues when the side panel is closed.
+ */
+export default function RemoteDatasetRefreshController({ datasets, refreshDataset }: RemoteDatasetRefreshControllerProps): null;
+export {};

package/dist/side-panel/common/dataset-info.d.ts

@@ -1,11 +1,21 @@
 import React from 'react';
 import { DataContainerInterface } from '@kepler.gl/utils';
+import { VisStateActions, ActionHandler } from '@kepler.gl/actions';
 type MiniDataset = {
+    id: string;
     dataContainer: DataContainerInterface;
     type?: string;
+    metadata?: {
+        refreshIntervalMs?: number;
+        refreshStatus?: string;
+        refreshProgress?: number;
+    };
 };
 export type DatasetInfoProps = {
     dataset: MiniDataset;
+    showRefreshSettings?: boolean;
+    refreshDataset?: ActionHandler<typeof VisStateActions.refreshDataset>;
+    updateDatasetProps?: ActionHandler<typeof VisStateActions.updateDatasetProps>;
 };
 export default function DatasetInfoFactory(): React.FC<DatasetInfoProps>;
 export {};

package/dist/side-panel/common/dataset-refresh-progress.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type DatasetRefreshProgressIconProps = {
+    /** Download progress from 0–100. Omit or 0 for an indeterminate spinner. */
+    percent?: number;
+    size?: number;
+};
+/**
+ * Circular refresh indicator: spinning arc while size is unknown, filling ring
+ * when Content-Length is available.
+ */
+export default function DatasetRefreshProgressIcon({ percent, size }: DatasetRefreshProgressIconProps): React.JSX.Element;

package/dist/side-panel/common/dataset-title.d.ts

@@ -7,6 +7,10 @@ type MiniDataset = {
     color: RGBColor;
     label?: string;
     disableDataOperation?: boolean;
+    type?: string;
+    metadata?: {
+        refreshError?: string;
+    };
 };
 export type DatasetTitleProps = {
     dataset: MiniDataset;
@@ -15,6 +19,7 @@ export type DatasetTitleProps = {
     showDatasetTable?: ActionHandler<typeof VisStateActions.showDatasetTable>;
     updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
     removeDataset?: ActionHandler<typeof openDeleteModal>;
+    onToggleRefreshSettings?: () => void;
 };
 declare function DatasetTitleFactory(DatasetTag: ReturnType<typeof DatasetTagFactory>): React.FC<DatasetTitleProps>;
 declare namespace DatasetTitleFactory {

package/dist/side-panel/common/source-data-catalog.d.ts

@@ -10,6 +10,7 @@ type MiniDataset = {
     label?: string;
     dataContainer: DataContainerInterface;
     type?: string;
+    metadata?: Record<string, any>;
 };
 type MiniDatasets = {
     [key: string]: MiniDataset;
@@ -21,6 +22,8 @@ export type SourceDataCatalogProps = {
     showDatasetTable?: ActionHandler<typeof VisStateActions.showDatasetTable>;
     updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
     removeDataset?: ActionHandler<typeof openDeleteModal>;
+    refreshDataset?: ActionHandler<typeof VisStateActions.refreshDataset>;
+    updateDatasetProps?: ActionHandler<typeof VisStateActions.updateDatasetProps>;
 };
 declare function SourceDataCatalogFactory(DatasetTitle: ReturnType<typeof DatasetTitleFactory>, DatasetInfo: ReturnType<typeof DatasetInfoFactory>): React.FC<SourceDataCatalogProps>;
 declare namespace SourceDataCatalogFactory {

package/dist/side-panel/filter-panel/filter-panel-header.d.ts

@@ -6,9 +6,13 @@ import { KeplerTable } from '@kepler.gl/table';
 interface StyledFilterHeaderProps extends StyledPanelHeaderProps {
     $labelRCGColorValues: RGBColor[];
 }
-export declare const StyledFilterHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, StyledFilterHeaderProps>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPanelHeaderProps>>, keyof React.Component<any, {}, any>>;
+export declare const StyledFilterHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof StyledFilterHeaderProps> & StyledFilterHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof StyledFilterHeaderProps> & StyledFilterHeaderProps, never>>> & string;
 export type FilterPanelHeaderProps = {
     className?: string;
     datasets: KeplerTable[];

package/dist/side-panel/layer-manager.d.ts

@@ -10,8 +10,9 @@ import InfoHelperFactory from '../common/info-helper';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
 import { UIStateActions, VisStateActions, MapStateActions, ActionHandler } from '@kepler.gl/actions';
 import { SidePanelItem } from '../types';
-import { PanelListView } from '@kepler.gl/types';
+import { MapState, PanelListView, LayerOrder } from '@kepler.gl/types';
 import { Datasets } from '@kepler.gl/table';
+import PanelHeaderActionFactory from './panel-header-action';
 type LayerBlendingSelectorProps = {
     layerBlending: string;
     updateLayerBlending: ActionHandler<typeof VisStateActions.updateLayerBlending>;
@@ -20,13 +21,14 @@ type LayerBlendingSelectorProps = {
 type LayerManagerProps = {
     datasets: Datasets;
     layers: Layer[];
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     layerClasses: LayerClassesType;
     layerBlending: string;
     overlayBlending: string;
     uiStateActions: typeof UIStateActions;
     visStateActions: typeof VisStateActions;
     mapStateActions: typeof MapStateActions;
+    mapState?: MapState;
     showAddDataModal: () => void;
     removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
     showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
@@ -36,10 +38,10 @@ type LayerManagerProps = {
     showDeleteDataset?: boolean;
 } & WrappedComponentProps;
 export declare const LayerBlendingSelector: React.MemoExoticComponent<({ layerBlending, updateLayerBlending, intl, className }: LayerBlendingSelectorProps) => React.JSX.Element>;
-declare function LayerManagerFactory(LayerList: ReturnType<typeof LayerListFactory>, DatasetLayerGroup: ReturnType<typeof DatasetLayerGroupFactory>, PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>, PanelTitle: ReturnType<typeof PanelTitleFactory>, DatasetSection: ReturnType<typeof DatasetSectionFactory>, AddLayerButton: ReturnType<typeof AddLayerButtonFactory>, InfoHelper: ReturnType<typeof InfoHelperFactory>): React.FC<import("react-intl").WithIntlProps<LayerManagerProps>> & {
+declare function LayerManagerFactory(LayerList: ReturnType<typeof LayerListFactory>, DatasetLayerGroup: ReturnType<typeof DatasetLayerGroupFactory>, PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>, PanelTitle: ReturnType<typeof PanelTitleFactory>, DatasetSection: ReturnType<typeof DatasetSectionFactory>, AddLayerButton: ReturnType<typeof AddLayerButtonFactory>, InfoHelper: ReturnType<typeof InfoHelperFactory>, PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>): React.FC<import("react-intl").WithIntlProps<LayerManagerProps>> & {
     WrappedComponent: React.ComponentType<LayerManagerProps>;
 };
 declare namespace LayerManagerFactory {
-    var deps: (typeof InfoHelperFactory | typeof LayerListFactory | typeof DatasetLayerGroupFactory | typeof PanelViewListToggleFactory | (() => React.FC<import("./panel-title").PanelTitleProps>) | typeof DatasetSectionFactory | typeof AddLayerButtonFactory)[];
+    var deps: (typeof InfoHelperFactory | typeof PanelHeaderActionFactory | typeof LayerListFactory | typeof DatasetLayerGroupFactory | typeof PanelViewListToggleFactory | (() => React.FC<import("./panel-title").PanelTitleProps>) | typeof DatasetSectionFactory | typeof AddLayerButtonFactory)[];
 }
 export default LayerManagerFactory;

package/dist/side-panel/layer-panel/color-selector.d.ts

@@ -22,11 +22,13 @@ type ColorSelectorProps = {
     useOpacity?: boolean;
     setColorUI?: (newConfig: NestedPartial<ColorUI>) => void;
 };
-export declare const ColorBlock: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const ColorBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "backgroundcolor"> & {
     backgroundcolor: RGBColor;
-}>>;
-export declare const ColorSelectorInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColorSelectorInputProps>>;
-export declare const InputBoxContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "backgroundcolor"> & {
+    backgroundcolor: RGBColor;
+}, never>>> & string;
+export declare const ColorSelectorInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ColorSelectorInputProps> & ColorSelectorInputProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ColorSelectorInputProps> & ColorSelectorInputProps, never>>> & string;
+export declare const InputBoxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare function ColorSelectorFactory(ColorRangeSelector: ReturnType<typeof ColorRangeSelectorFactory>, RangeSlider: ReturnType<typeof RangeSliderFactory>): React.FC<ColorSelectorProps>;
 declare namespace ColorSelectorFactory {
     var deps: (typeof RangeSliderFactory | typeof ColorRangeSelectorFactory)[];

package/dist/side-panel/layer-panel/custom-palette.d.ts

@@ -41,11 +41,9 @@ export type CustomPaletteInputProps = {
     onAdd: (index: number) => void;
     onToggleSketcher: (index: number) => void;
 };
-export declare const ColorPaletteItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const DividerLine: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const ColorSwatch: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>>;
+export declare const ColorPaletteItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const DividerLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ColorSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className"> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className">>> & string;
 export type ColorPaletteInputProps = {
     value: string | number;
     onChange: (val: unknown) => void;

package/dist/side-panel/layer-panel/dataset-layer-group.d.ts

@@ -3,10 +3,11 @@ import DatasetLayerSectionFactory from './dataset-layer-section';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
 import { UIStateActions, VisStateActions, ActionHandler, MapStateActions } from '@kepler.gl/actions';
 import { Datasets } from '@kepler.gl/table';
+import { LayerOrder, MapState } from '@kepler.gl/types';
 type DatasetLayerGroupProps = {
     datasets: Datasets;
     layers: Layer[];
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     layerClasses: LayerClassesType;
     showDeleteDataset: boolean;
     removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
@@ -15,6 +16,7 @@ type DatasetLayerGroupProps = {
     uiStateActions: typeof UIStateActions;
     visStateActions: typeof VisStateActions;
     mapStateActions: typeof MapStateActions;
+    mapState?: MapState;
 };
 declare function DatasetLayerGroupFactory(DatasetLayerSection: ReturnType<typeof DatasetLayerSectionFactory>): React.FC<DatasetLayerGroupProps>;
 declare namespace DatasetLayerGroupFactory {

package/dist/side-panel/layer-panel/dataset-layer-section.d.ts

@@ -4,11 +4,12 @@ import LayerListFactory from './layer-list';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
 import { UIStateActions, ActionHandler, VisStateActions, MapStateActions } from '@kepler.gl/actions';
 import { KeplerTable, Datasets } from '@kepler.gl/table';
+import { LayerOrder, MapState } from '@kepler.gl/types';
 type DatasetLayerSectionProps = {
     datasets: Datasets;
     dataset: KeplerTable;
     layers: Layer[];
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     layerClasses: LayerClassesType;
     showDeleteDataset: boolean;
     showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
@@ -17,6 +18,7 @@ type DatasetLayerSectionProps = {
     uiStateActions: typeof UIStateActions;
     visStateActions: typeof VisStateActions;
     mapStateActions: typeof MapStateActions;
+    mapState?: MapState;
 };
 declare function DatasetLayerSectionFactory(SourceDataCatalog: ReturnType<typeof SourceDataCatalogFactory>, LayerList: ReturnType<typeof LayerListFactory>): React.FC<DatasetLayerSectionProps>;
 declare namespace DatasetLayerSectionFactory {

package/dist/side-panel/layer-panel/dataset-section.d.ts

@@ -14,6 +14,8 @@ type DatasetSectionProps = {
     updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
     removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
     showAddDataModal: () => void;
+    refreshDataset?: ActionHandler<typeof VisStateActions.refreshDataset>;
+    updateDatasetProps?: ActionHandler<typeof VisStateActions.updateDatasetProps>;
 };
 export declare function AddDataButtonFactory(): React.FC<AddDataButtonProps>;
 declare function DatasetSectionFactory(SourceDataCatalog: ReturnType<typeof SourceDataCatalogFactory>, AddDataButton: ReturnType<typeof AddDataButtonFactory>): React.FC<DatasetSectionProps>;

package/dist/side-panel/layer-panel/layer-config-group.d.ts

@@ -19,20 +19,14 @@ export type LayerConfigGroupProps = {
     IconComponent?: React.ElementType;
     children?: React.ReactNode;
 };
-export declare const StyledLayerConfigGroupAction: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const ConfigGroupCollapsibleContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>>;
-export declare const ConfigGroupCollapsibleHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>>;
-export declare const StyledLayerConfigGroup: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledLayerConfigGroupAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ConfigGroupCollapsibleContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className"> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className">>> & string;
+export declare const ConfigGroupCollapsibleHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className"> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className">>> & string;
+export declare const StyledLayerConfigGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 interface StyledConfigGroupHeaderProps {
     collapsible?: boolean;
 }
-export declare const StyledConfigGroupHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, StyledConfigGroupHeaderProps>>;
+export declare const StyledConfigGroupHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "collapsible"> & StyledConfigGroupHeaderProps, "className"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "collapsible"> & StyledConfigGroupHeaderProps, "className">>> & string;
 export declare function LayerConfigGroupLabelFactory(InfoHelper: ReturnType<typeof InfoHelperFactory>): React.FC<LayerConfigGroupLabelProps>;
 export declare namespace LayerConfigGroupLabelFactory {
     var deps: (typeof InfoHelperFactory)[];

package/dist/side-panel/layer-panel/layer-group-header.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LayerOrderGroup } from '@kepler.gl/types';
+import PanelHeaderActionFactory from '../panel-header-action';
+export type LayerGroupHeaderProps = {
+    layerGroup: LayerOrderGroup;
+    isLayerGroupContentOpen?: boolean;
+    onToggleLayerGroupContent?: () => void;
+    listeners?: any;
+    className?: string;
+};
+declare function LayerGroupHeaderFactory(PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>): React.FC<LayerGroupHeaderProps>;
+declare namespace LayerGroupHeaderFactory {
+    var deps: (typeof PanelHeaderActionFactory)[];
+}
+export default LayerGroupHeaderFactory;

package/dist/side-panel/layer-panel/layer-list.d.ts

@@ -2,22 +2,28 @@ import React from 'react';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
 import { Datasets } from '@kepler.gl/table';
 import { UIStateActions, VisStateActions, MapStateActions } from '@kepler.gl/actions';
+import { LayerOrder, MapState } from '@kepler.gl/types';
 import LayerPanelFactory from './layer-panel';
+import LayerGroupHeaderFactory from './layer-group-header';
 import { SplitMap } from '@kepler.gl/types';
 export type LayerListProps = {
     datasets: Datasets;
     layers: Layer[];
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     layerClasses: LayerClassesType;
     isSortable?: boolean;
     splitMap?: SplitMap;
+    mapState?: MapState;
     uiStateActions: typeof UIStateActions;
     visStateActions: typeof VisStateActions;
     mapStateActions: typeof MapStateActions;
 };
-export type LayerListFactoryDeps = [typeof LayerPanelFactory];
-declare function LayerListFactory(LayerPanel: ReturnType<typeof LayerPanelFactory>): React.FC<LayerListProps>;
+export type LayerListFactoryDeps = [
+    typeof LayerPanelFactory,
+    typeof LayerGroupHeaderFactory
+];
+declare function LayerListFactory(LayerPanel: ReturnType<typeof LayerPanelFactory>, LayerGroupHeader: ReturnType<typeof LayerGroupHeaderFactory>): React.FC<LayerListProps>;
 declare namespace LayerListFactory {
-    var deps: (typeof LayerPanelFactory)[];
+    var deps: (typeof LayerGroupHeaderFactory | typeof LayerPanelFactory)[];
 }
 export default LayerListFactory;

package/dist/side-panel/layer-panel/layer-panel-header.d.ts

@@ -34,7 +34,7 @@ export type LayerPanelHeaderProps = {
     layerType?: string | null;
     allowDuplicate?: boolean;
     isDragNDropEnabled?: boolean;
-    warning?: boolean;
+    warning?: React.ReactNode;
     labelRCGColorValues?: RGBColor | null;
     actionIcons?: {
         remove: ComponentType<Partial<BaseProps>>;

package/dist/side-panel/layer-panel/layer-panel.d.ts

@@ -2,7 +2,7 @@ import React, { CSSProperties, MouseEventHandler, TouchEventHandler } from 'reac
 import { ActionHandler, MapStateActions, VisStateActions, toggleModal } from '@kepler.gl/actions';
 import { Layer } from '@kepler.gl/layers';
 import { Datasets } from '@kepler.gl/table';
-import { SplitMap } from '@kepler.gl/types';
+import { MapState, SplitMap } from '@kepler.gl/types';
 import LayerConfiguratorFactory from './layer-configurator';
 import LayerPanelHeaderFactory from './layer-panel-header';
 type LayerPanelProps = {
@@ -20,6 +20,7 @@ type LayerPanelProps = {
     }[];
     isDraggable?: boolean;
     idx: number;
+    mapState?: MapState;
     openModal: ActionHandler<typeof toggleModal>;
     layerColorUIChange: ActionHandler<typeof VisStateActions.layerColorUIChange>;
     layerConfigChange: ActionHandler<typeof VisStateActions.layerConfigChange>;

package/dist/side-panel/map-manager.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 import MapStyleSelectorFactory from './map-style-panel/map-style-selector';
 import LayerGroupSelectorFactory from './map-style-panel/map-layer-selector';
+import GlobeConfigPanelFactory from './map-style-panel/globe-config-panel';
 import PanelTitleFactory from '../side-panel/panel-title';
 import { PanelMeta } from './common/types';
 import { WrappedComponentProps } from 'react-intl';
 import { MapStyle } from '@kepler.gl/reducers';
-import { MapStyleActions } from '@kepler.gl/actions';
+import { MapStyleActions, MapStateActions } from '@kepler.gl/actions';
+import { MapState } from '@kepler.gl/types';
 export type MapManagerProps = {
     mapStyle: MapStyle;
+    mapState?: MapState;
     mapStyleActions: {
         mapStyleChange: typeof MapStyleActions.mapStyleChange;
         mapConfigChange: typeof MapStyleActions.mapConfigChange;
@@ -15,13 +18,16 @@ export type MapManagerProps = {
         setBackgroundColor: typeof MapStyleActions.setBackgroundColor;
         removeCustomMapStyle: typeof MapStyleActions.removeCustomMapStyle;
     };
+    mapStateActions?: {
+        globeConfigChange: typeof MapStateActions.globeConfigChange;
+    };
     showAddMapStyleModal: () => void;
     panelMetadata: PanelMeta;
 } & WrappedComponentProps;
-declare function MapManagerFactory(MapStyleSelector: ReturnType<typeof MapStyleSelectorFactory>, LayerGroupSelector: ReturnType<typeof LayerGroupSelectorFactory>, PanelTitle: ReturnType<typeof PanelTitleFactory>): React.FC<import("react-intl").WithIntlProps<MapManagerProps>> & {
+declare function MapManagerFactory(MapStyleSelector: ReturnType<typeof MapStyleSelectorFactory>, LayerGroupSelector: ReturnType<typeof LayerGroupSelectorFactory>, PanelTitle: ReturnType<typeof PanelTitleFactory>, GlobeConfigPanel: ReturnType<typeof GlobeConfigPanelFactory>): React.FC<import("react-intl").WithIntlProps<MapManagerProps>> & {
     WrappedComponent: React.ComponentType<MapManagerProps>;
 };
 declare namespace MapManagerFactory {
-    var deps: ((() => React.FC<import("../side-panel/panel-title").PanelTitleProps>) | typeof MapStyleSelectorFactory | typeof LayerGroupSelectorFactory)[];
+    var deps: ((() => React.FC<import("../side-panel/panel-title").PanelTitleProps>) | typeof GlobeConfigPanelFactory | typeof MapStyleSelectorFactory | typeof LayerGroupSelectorFactory)[];
 }
 export default MapManagerFactory;

package/dist/side-panel/map-style-panel/globe-config-panel.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { MapState } from '@kepler.gl/types';
+import { GlobeConfig } from '@kepler.gl/constants';
+import PanelHeaderActionFactory from '../panel-header-action';
+import RangeSliderFactory from '../../common/range-slider';
+import LayerGroupColorPickerFactory from './map-layer-group-color-picker';
+export type GlobeConfigPanelProps = {
+    mapState: MapState;
+    onGlobeConfigChange: (config: Partial<GlobeConfig>) => void;
+};
+declare function GlobeConfigPanelFactory(PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>, RangeSlider: ReturnType<typeof RangeSliderFactory>, LayerGroupColorPicker: ReturnType<typeof LayerGroupColorPickerFactory>): React.FC<GlobeConfigPanelProps>;
+declare namespace GlobeConfigPanelFactory {
+    var deps: (typeof RangeSliderFactory | typeof PanelHeaderActionFactory | typeof LayerGroupColorPickerFactory)[];
+}
+export default GlobeConfigPanelFactory;

package/dist/side-panel/panel-tab.d.ts

@@ -13,8 +13,6 @@ export type PanelTabProps = {
     panel: PanelItem;
     onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
-export declare const StyledPanelTab: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, StyledPanelTabProps>>;
+export declare const StyledPanelTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "$active"> & StyledPanelTabProps, "className"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "$active"> & StyledPanelTabProps, "className">>> & string;
 export declare function PanelTabFactory(): React.FC<PanelTabProps>;
 export default PanelTabFactory;

package/dist/side-panel/panel-view-list-toggle.d.ts

@@ -9,11 +9,11 @@ type PanelViewListToggleProps = {
     mode: PanelListView;
     togglePanelListView: (view: string) => void;
 };
-export declare const StyledToggleOption: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, {
+export declare const StyledToggleOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "$active"> & {
     $active: boolean;
-}>>;
+}, "className"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "$active"> & {
+    $active: boolean;
+}, "className">>> & string;
 declare function ToggleOptionFactory(): React.FC<ToggleOptionProps>;
 declare const TOGGLE_OPTIONS: ({
     id: "list";

package/dist/side-panel/side-bar.d.ts

@@ -23,9 +23,6 @@ declare function SidebarFactory(CollapseButton: ReturnType<typeof CollapseButton
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<SideBarProps>;
         state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<SideBarProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
@@ -47,9 +44,6 @@ declare function SidebarFactory(CollapseButton: ReturnType<typeof CollapseButton
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<SideBarProps>;
         state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<SideBarProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
@@ -71,6 +65,7 @@ declare function SidebarFactory(CollapseButton: ReturnType<typeof CollapseButton
         shouldShowCollapseButton: boolean;
     };
     contextType?: React.Context<any> | undefined;
+    propTypes?: any;
 };
 declare namespace SidebarFactory {
     var deps: (() => ({ onClick, isOpen }: CollapseButtonProps) => React.JSX.Element)[];

package/dist/side-panel.d.ts

@@ -8,7 +8,7 @@ import InteractionManagerFactory from './side-panel/interaction-manager';
 import MapManagerFactory from './side-panel/map-manager';
 import CustomPanelsFactory from './side-panel/custom-panel';
 import { SidePanelProps } from './types';
-export declare const StyledSidePanelContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledSidePanelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 /**
  * Vertical sidebar containing input components for the rendering layers
  */

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import { MapStyle } from '@kepler.gl/reducers';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
-import { Filter, InteractionConfig, UiState } from '@kepler.gl/types';
+import { Filter, InteractionConfig, MapState, UiState, LayerOrder } from '@kepler.gl/types';
 import { MapStyleActions, VisStateActions, MapStateActions, UIStateActions } from '@kepler.gl/actions';
 import { Datasets } from '@kepler.gl/table';
 export type BaseComponentProps = PropsWithChildren<HTMLAttributes<unknown>>;
@@ -20,8 +20,9 @@ export type SidePanelProps = {
     overlayBlending?: string;
     layers: Layer[];
     layerClasses: LayerClassesType;
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     mapStyle: MapStyle;
+    mapState?: MapState;
     mapInfo: {
         title?: string;
         description?: string;